8 Macam Menghias Tombol Share Blogspot

Ini adalah trik CSS3 untuk menghias tombol share blogspot anda.

Template >> Edit HTML >> Proceed
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

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);
}