CARA MENAMBAHKAN CSS TOMBOL ANIMASI SHARE DI BLOGGER | HIGHLY RECOMMENDED WIDGET |

hey para pengunjung blogku, setelah sekian lama admin yang cool ini tidak posting, akhirnya pada malam minggu tanggal 22 maret 2014 admin memposting "CARA MENAMBAHKAN CSS TOMBOL ANIMASI SHARE DI BLOGGER" keren sob :D
Step 1. pergi ke  Blogger dashboard > lalu ke Template > klik di tombol the Edit HTML

Step 2. tekan  Ctrl + F.ketik atau paste ]]></b:skin>.

Step 3. ketik kode CSS diatas ]]></b:skin> :

.share_button {
width: 300px;
height: 50px;
margin: 10px auto;
}
.share_button ul {
width: 50%;
height: inherit;
float: left;
list-style: none;
margin: 0 !important;
padding: 0 !important;
}
.share_button ul h1 {
margin-top: 9%;
overflow: hidden;
width: 100%;
color: #4889F0;
font-size: 18px;
text-shadow:2px 2px 2px #fff;
}
.share_button ul li {
position: absolute;
height: inherit;
width: 150px;
margin: 0 !important;
padding: 0 !important;
background: #EEEEEE;
-webkit-transition: all 600ms;
-moz-transition: all 600ms;
-o-transition: all 600ms;
-ms-transition: all 600ms;
transition: all 600ms;
text-align: center;
}
.share_button ul li h2 {
display: inline-block;
width: 32%;
height: 40px;
overflow: hidden;
margin-top: 5%;
cursor: pointer;
border: 0 !important;
}
.share_button ul:first-child li:first-child{
text-align: right;
}
.share_button ul:last-child li:first-child{
text-align: left;
}
.share_button ul:first-child li:last-child,
.share_button:hover ul:first-child li:first-child {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.share_button ul:last-child li:last-child,
.share_button:hover ul:last-child li:first-child {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.share_button:hover ul:first-child li:last-child,
.share_button:hover ul:last-child li:last-child {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}

Step 5. cari  <div class='post-footer'> dan kemudian paste kode berikut ini tepat diatas kode <div class='post-footer'>

<div class='share_button'>

<ul>
<li><h1>
Share t
</h1></li>

<li><h2>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEP_ZqfJk_39qvrZgA9TTWmp3O8Qt6DEUz7AENZCU4JF56RmazqjarNQVx904h73lAWFq5uj-ayh4FQEylqL52KBa_E_gMLWFOLI2DWJ1LqAd8K3-VOtTZPGt6b3vEOi7KhXR55woUcipQ/s1600/Facebook.png"/></a></h2>

<h2><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAwCjopulHL_xDKPUhDRwk7nTo0ag_f-Apzj551NGJNS3lTWQdS-AFAO1vhPftG5vOeUgYOW8uqUHqDP2WYyMzFzvTKnB6oRbkpMuBKIYHYlzLCtl3ATQ7qjFu61uVUlOA7znUsdlB2_s/s1600/Twitter.png"/></a></h2>
</li>
</ul>
<ul>
<li><h1>his page</h1></li>

<li>
<h2><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrqfLZOECpW8FtmhrSIP_azCaKSe7NfkmI-WB4AmY2LwTk0o4I-oLWDAtBixP69-nfJVe8P5qr03LiGuQZypOs8UxA2ImlIjSMRDJEH13wWgfLuWIzoFO0TuOKcMXtY9BqYabd_a_b90hG/s1600/Google-plus.png"/></a></h2>

<h2>
<a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0kzk5UYtzYNDesyGsac1vDgqlgC_MD24rp91RdEk3hHN-leySOqqoxAuFMsqlSg0dROHYc4f26wnx6ULHJBqInjy13aHE5ggSXWZY8Vi5XVuN_jOQ8OUWX0Ss_ZT33vwNIP3U98ajK0jx/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul>

</div>

Note: jika kamu ingin merubah iconnya, ganti dengan URL yang berwana biru

Step 5. Save template


selamat mencobaaa !!! :D