Adding Turn Over Floating Share widget in Blogger
* buka blog mu
* klik template >> edit HTML
* cari kode nich ]]></b:skin>
* dan copy kode di bawah dan letakkan diatas kode ]]></b:skin>
ul.turnoverbuttons{
position:fixed;
padding:0 0 3px 0;
bottom: 22%;
margin-left:0px;
float:left;
list-style:none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
perspective: 10000px;
}
ul.turnoverbuttons li{
margin:0;
display: block;
width: 50px; /* dimensions of buttons. */
height: 50px;
margin-bottom: 39px; /* spacing between buttons */
background: transparent;
text-transform: uppercase;
text-align: center;
}
ul.turnoverbuttons li a{
display:table;
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
width: 100%;
height: 100%;
color: black;
background: transparent;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out; /* CSS3 transition. */
-moz-transition:all 300ms ease-out;
transition:all 300ms ease-out;
}
ul.turnoverbuttons li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
ul.turnoverbuttons li a img{ /* CSS for image if defined inside button */
border-width: 0;
vertical-align: middle;
}
ul.turnoverbuttons li:hover a{
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: transparent; /* bgcolor of button onMouseover*/
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ul.turnoverbuttons li:hover a span{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
* kemudian cari kode nich </body>* dan copy kodenya dibawah dan letakkan diatas kode </body>
<ul class="turnoverbuttons second"> <li><a href="https://www.facebook.com/ivankvalentine"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif7xwqMIGlQ6jgs52aotXNKCCGY8O2C26ANhl0CCyKAS0pzI6ELL_oQp9x5KekiY9bJuZd1qxPMQHnWU_RWrkp0Hln-H13R1Y6WYBF7J9E54p_2NrL0m8jexdHDwc9DkJqqxKLmnDfJPfK/s1600/facebook.png"/></span></a></li> <li><a href="http://twitter.com/ivankGribatako"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZeQSgMKQ-cRlVkd32Mf8cNoJEI6CYhRh1NULKKoXa1HDl433wQ56pETmIGtFEBRz6zgbEeoqoJlYtYVAO7WmvjKWjFUg0PoXvZ3iCIWAl9VnKRaatdxD9ms90G3oSvGDerLY1k815w0f-/s1600/twitter.png"/></span></a></li> <li><a href="https://plus.google.com/110561987544809067837"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlvDB5nsTazd-y37jTTpNPrE99q00IM04i4cQEYBLIpHQXgF1tJCHfumhQwNzCrxhyLKJtNtylrM53xhV4UTk6iRc0WwSY1iNeHLatPA_rrOVG3qk68hEteEtFPhH_-LNvrivDnL0ffvs5/s1600/googleplus.png"/></span></a></li> <li><a href="http://www.pinterest.com/caslikanoglu/pins/"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVcQ8huYI6u_bZu3yq7QlLhrjD3vThd2et1yhC-p4DGEYA21nz68SThPRRg63efPERgP92tFyclljOyey0cHW802Q1GX2VRheyvjd57dNmDW6U8qCR1CZfXc1ljWDya_ZMfZJ-jhH7W2fG/s1600/pinterest.png"/></span></a></li> <li><a href="http://feeds.feedburner.com/"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrUhVGuiNW_JjPyrrlY3NyX9-b6kuWAMaeA2G0V1OZ-GHfQkV1khodY7U0Hw3czop6EP_aO2V06wX79stXX2PlgNKKTwKF7y5apRU69LNBLuohGJyJDeBBaFPbeP2NNlG33EzT_aBqifcs/s1600/rss.png"/></span></a></li> <li><a href="http://www.youtube.com/"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjW0-KeoXu4-ZwgIfE5oEiv8XOYsjy-hKTkq4tJ9T20EU59_3EM0B_x_u2nTjbAx3JqWdDPWGveH9S950c0quWjlI00dmypNmjSBsURgtBRCfo4NRHauy6rJUuyr9BI5g3agOsiP_D1uuA/s1600/youtube.png"/></span></a></li></ul>>>> KETERANGAN <<<
{ Ganti warna merah dengan url sosmed mu }
# terakhir silahkan di save #
*** SEMOGA BERHASIL ***
Baca Juga Artikel Terkait Lainnya