Jika ingin cara membuat share button di blog dengan model yang lain nya bisa di baca tutorial design nya di sini :
- Cara membuat share button di blog lengkap dengan bbm line whatsapp dll
- Cara membuat widget share button di blog
- Cara membuat share button simple di blog
Masih banyak lagi dan anda bisa melihat nya di menu tutorial design.
Widget share button facebook google plus twitter dan pinterest
Untuk melihat hasil nya disini :
Demo
Seperti biasa letakan kode di bawah ini di atas ]]><b:skin>
.share-post{margin-bottom:10px;padding:14px 0}
.widget .post-body > .share-post ul{padding:0}
.share-post li{text-align:center;float:left;margin:0 2px;padding:0;list-style:none;position:relative}
.share-post li a{font-family:'Roboto',sans-serif;padding:1px 1px;width:68px;border-radius:5px;color:#fff;display:block;font-size:12px;transition:all .6s ease-out}
.share-post li .twitter{background-color:#2ca8d2}
.share-post li .facebook{background-color:#305891}
.share-post li .gplus{background-color:#ce4d39}
.share-post li .pinterest{background-color:#c82828}
.share-post li .twitter:hover,.share-post li .facebook:hover,.share-post li .gplus:hover,.share-post li .pinterest:hover{color:#fff}
.share-post li:last-child{margin-right:0}
.share-post li .fa:before{top:0;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;color:#fff;line-height:20px;font-size:13px;transition:all .6s ease-out}
.share-post li .fa{display:initial;margin:-7px}
Lalu letakan kode di bawah ini di bawah <data:post body/> yang kedua
<div class='share-post'>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Share To Facebook'><i class='fa fa-facebook'/></a></li>
<li><a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Share To Twitter'><i class='fa fa-twitter'/></a></li>
<li><a class='gplus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank' title='Share To Google+'><i class='fa fa-google-plus'/></a></li>
<li><a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' rel='nofollow' target='_blank' title='Share To Pinterest'><i class='fa fa-pinterest'/></a></li>
</div>
<div style='clear: both;'/>
Screenshot :
Sekian dari cara membuat share button di blog nya. Selamat mencoba...