EFFECTS ANIMATED SHARE BAR FOR BLOGGER
* login dulu
* klik template >>> edit HTML
* Cari kode ]]></b:skin>
* copy kode dibawah dan letakkan diatas kode ]]></b:skin>
.share-container {
perspective: 1000;
transform-style: preserve-3d;
}
.share-container, .front, .back {
width: 200px;
height: 60px;
}
.share-container:hover .back {
transform: rotateY(0deg);
}
.share-container:hover .front {
transform: rotateY(180deg);
}
.front, .back {
border:2px solid #CCC;
border-radius:10px;
line-height:60px;
text-align:center;
background:#EEE;
box-shadow:0 0 2px #aaa;
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
.flip-div {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front {
z-index: 2;
color:#666;
text-shadow:0 0 3px #fff;
font-size:1.3em;
font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
transform: rotateY(0deg);
}
.back {
transform: rotateY(-180deg);
}
.back img {
vertical-align:middle;
}
* kemudian tambahkan kode dibawah ke dalam html/javascript<div class="share-container"> <div class="flip-div"> <div class="front"> Share This Page </div> <div class="back"> <a href="http://www.facebook.com"><img alt="facebook" src="http://vavik96.com/wp-content/themes/Journal/images/social-profiles/facebook.png" /></a> <a href="http://www.google.com"><img alt="google" src="http://vavik96.com/wp-content/themes/Journal/images/social-profiles/gplus.png" /></a> <a href="http://www.twitter.com"><img alt="twitter" src="http://vavik96.com/wp-content/themes/Journal/images/social-profiles/twitter.png" /></a> <a href="http://www.pinterest.com"><img alt="pinterest" src="http://vavik96.com/wp-content/themes/Journal/images/social-profiles/pinterest.png" /></a> </div> </div> </div>>>> CATATAN <<<
[ Ganti warna merah dengan url sosmed mu ]
" silahkan di save "
*** GOOD LUCK ***
Baca Juga Artikel Terkait Lainnya