Tips & Trik Menghias Blog

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