8 Macam Menghias Tombol Share Blogspot

Ini adalah trik CSS3 untuk menghias tombol share blogspot anda.

1. Template >> Edit HTML >> Proceed

   

2. Penempatan kode berada di :

   <b:skin><![CDATA[

   Kode disini

   ]]></b:skin>

   
   

   Lebih gampangnya ketik keyboard Ctrl+f dan masukkan kode :

   <b:skin><![CDATA[

   

   Nanti kodenya letakkan dibawahnya

3. Pilih satu gaya yang anda mau :

   
   

   • Gaya pergantian gambar lambat :

     .share-button {
     transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     transition-property:background;
     -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -moz-transition-property:background;
     -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -webkit-transition-property:background;
     -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -o-transition-property:background;
     }
     

   • Hover Transparan

     Transparan ke tidak transparan

     .share-button {
     opacity:0.5;
     -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -moz-transition-property:opacity;
     -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -webkit-transition-property:opacity;
     -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -o-transition-property:opacity;
     transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     transition-property:opacity;
     }
     .share-button:hover {
     opacity:1;
     }
     

     
     

     Tidak transparan ke transparan

     .share-button {
     opacity:1;
     -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -moz-transition-property:opacity;
     -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -webkit-transition-property:opacity;
     -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -o-transition-property:opacity;
     transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     transition-property:opacity;
     }
     .share-button:hover {
     opacity:0.5;
     }
     

   • Gambar menjadi besar

     .share-button {
     transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     transition-property:transform;
     -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -moz-transition-property:transform;
     -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -webkit-transition-property:transform;
     -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -o-transition-property:transform;
     }
     .share-button:hover {
     transform:scale(3.3);
     -moz-transform:scale(3.3);
     -ms-transform:scale(3.3);
     -o-transform:scale(3.3);
     -webkit-transform:scale(3.3);
     }
     

   • Gambar menjadi besar efek 3D

     .share-button {
     transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     transition-property:background, transform;
     -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -moz-transition-property:background, transform;
     -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -webkit-transition-property:background, transform;
     -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -o-transition-property:background, transform;
     }
     .share-button:hover {
     transform:scale(3.3);
     -moz-transform:scale(3.3);
     -ms-transform:scale(3.3);
     -o-transform:scale(3.3);
     -webkit-transform:scale(3.3);
     }
     

   • MDev Style Template

     .share-button {
     transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     transform:rotate(-20deg);
     -moz-transform:rotate(-20deg);
     -ms-transform:rotate(-20deg);
     -o-transform:rotate(-20deg);
     -webkit-transform:rotate(-20deg);
     transition-property:background, transform;
     -moz-transition-property:background, transform;
     -ms-transition-property:background, transform;
     -o-transition-property:background, transform;
     -webkit-transition-property:background, transform;
     }
     .share-button:hover {
     transform:rotate(0deg);
     -moz-transform:rotate(0deg);
     -ms-transform:rotate(0deg);
     -o-transform:rotate(0deg);
     -webkit-transform:rotate(0deg);
     }
     

     Bergaya miring seperti tema Template MDev (Template yang jadi trend pengenalan CSS3)

   • Terbalik

     .share-button {
     transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     transition-property:background, transform;
     -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -moz-transition-property:background, transform;
     -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -webkit-transition-property:background, transform;
     -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -o-transition-property:background, transform;
     transform:rotate(-180deg);
     -moz-transform:rotate(-180deg);
     -ms-transform:rotate(-180deg);
     -o-transform:rotate(-180deg);
     -webkit-transform:rotate(-180deg);
     }
     .share-button:hover {
     transform:rotate(0deg);
     -moz-transform:rotate(0deg);
     -ms-transform:rotate(0deg);
     -o-transform:rotate(0deg);
     -webkit-transform:rotate(0deg);
     }
     

   • Berputar

     .share-button {
     transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     transition-property:background, transform;
     -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -moz-transition-property:background, transform;
     -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -webkit-transition-property:background, transform;
     -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -o-transition-property:background, transform;
     }
     .share-button:hover {
     transform:rotate(-360deg);
     -moz-transform:rotate(-360deg);
     -ms-transform:rotate(-360deg);
     -o-transform:rotate(-360deg);
     -webkit-transform:rotate(-360deg);
     }
     

   • Berputar Ekstrim

     .share-button {
     transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     transition-property:background, transform;
     -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -moz-transition-property:background, transform;
     -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -webkit-transition-property:background, transform;
     -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -o-transition-property:background, transform;
     }
     .share-button:hover {
     transform:rotate(-1440deg);
     -moz-transform:rotate(-1440deg);
     -ms-transform:rotate(-1440deg);
     -o-transform:rotate(-1440deg);
     -webkit-transform:rotate(-1440deg);
     }
     

4. Preview

5. Save Template

---