Ads 468x60px

Τετάρτη, 23 Δεκεμβρίου 2015

Transition Effect Badge

Φίλες και φίλοι γεια σας, σήμερα θα δούμε ένα CSS Transition Effect Badge 
widget για τα blog μας!Μπορούμε να το τοποθετήσουμε στις sidebars μας,  η κάτω
στο footer μας, καθώς έχει το μέγεθος μεγάλου κουμπιού!Διαφέρει από τα
κοινά badges καθώς διαθέτει ένα πολύ ωραίο multicolor effect στο mouseover
του κέρσορα μας!








Η εγκατάσταση είναι απλή:
 
Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα--

..............................................................................................................................................................
<style>
.BloggerSpiceCSSBadge{background:#fff;border-radius:10%;cursor:pointer;position:relative;width:15em;height:5em;overflow:hidden;transform:
translateZ(0);margin:0 auto}
.BloggerSpiceCSSBadge h1{color:rgba(8,172,233,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:3em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}
.BloggerSpiceCSSBadge h1 a{color:rgba(8,172,233,0);text-decoration:none}
.BloggerSpiceCSSBadge:before,.BloggerSpiceCSSBadge:after{border-radius:10%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}
.BloggerSpiceCSSBadge:after{transform:rotate(45deg)}
.BloggerSpiceCSSBadge:hover:before,.BloggerSpiceCSSBadge:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}
.BloggerSpiceCSSBadge:hover > h1 a,.BloggerSpiceCSSBadge:hover > h1{color:rgba(8,172,233,1)}/* Widget by www.bloggerspice.com */
</style>
<div class="BloggerSpiceCSSBadge">
 <h1><a href="ΕΔΩ ΜΠΑΙΝΕΙ ΤΟ URL ΣΑΣ">ΕΔΩ ΜΠΑΙΝΕΙ Ο ΤΙΤΛΟΣ</a></h1>
</div>
....................................................................................................................................................................
ΑΛΛΑΓΕΣ

 Βάζετε το url της Διεύθυνσης σας και τον Τιτλο που θα έχει το badge και
πατάτε Αποθήκευση!!


Καλή επιτυχία!!! 


Πηγή κώδικα 
thanks to http://www.bloggerspice.com/



 Edit by

0 σχόλια :

Δημοσίευση σχολίου

Icon Icon Icon

spice up your blog