Cara Membuat Tombol Share Artikel Keren di Blog ~ NaruZAF

Kembali lagi dalam tutorial tentang blog. Kali ini saya akan share cara buat Share Button keren di blog kita. Share sangat berguna seklai supaya artikel baru kita di blog di ketahui banyak orang. Jika tidak di pasag tombol share tentunya para visitor akan kebingungan cara share artikel. Dengan adanya Share Button tentunya akan membuat pelanggan kita akan mudah untuk berbagi di media sosial.

Pada tutorial kali ini kita akan membuat tombol share keren. Saya mendapatkan kodenya dari mbak arlina. Pada tutorial ini Share Button sudah di isi dengan media sosial facebook, twitter, gplus, linkedin. Share Button ini akan tampil di setaip postingan. Lalu bagai mana cara pasangnya. Simak tutorialnya sampai selesai.

Cara Membuat Share Button di Blog

Masuk ke account bloggermu. Lalu pilih menu Template, lalu pilih HTML.
Carilah kode di bawah ini. Agar lebih mudah mencarinya gunakan CTRL + F.

 <data:post.body/>

Copy kode di bawah ini lalu pastekan tepat di bawah kode tadi.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tombol-berbagi-postinganmusa'>
<div class='tombol-berbagi-postinganmusa-fb'>
<a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>
</div>
<div class='tombol-berbagi-postinganmusa-tw'>
<a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a>
</div>
</div>
</b:if>

Selanjutnya salin kode berikut sebelum/di atas kode ]]></b:skin>.

 /* CSS Share Button */
.tombol-berbagi-postinganmusa{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
.tombol-berbagi-postinganmusa-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-postinganmusa-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}
.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('http://2.bp.blogspot.com/-FYy1a99SDXE/VXuCSz_hYjI/AAAAAAAACbg/8dz4LkDIHYY/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
.tombol-berbagi-fb-label{color:#2d609b}
.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
.tombol-berbagi-tw{background-position:0 -43px}
.tombol-berbagi-tw-label{color:#00c3f3}
.tombol-berbagi-gp{background-position:0 -86px}
.tombol-berbagi-gp-label{color:#f00}
.tombol-berbagi-lin{background-position:0 -129px}
.tombol-berbagi-postinganmusa a{color:#999;transition:all .3s;}
.tombol-berbagi-postinganmusa a:hover{color:#7cb0ed}
@media only screen and (max-width:640px){
.tombol-berbagi,.tombol-berbagi-postinganmusa-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-postinganmusa-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}

Terakhir simpan template.

Sekarang coba lihat setiap postingan. Maka akan muncul share button keren yang telah kita buat. Gimana keren bukan. Demikian Cara Membuat Tombol Share Artikel Keren di Blog. Semoga dapat bermanfaat. Happy Blogging gan!!!

Peringatan : jangan lupa untuk BackUp template anda, Demi menghindari jika terjadi eror.

NaruZAF