Cara Membuat Tombol Share Keren di Blog

Cara Membuat Tombol Share Keren di Blog - Share adalah kegiatan seseorang yang membagikan sesuatu kepada orang lain. kalau menurut ane sih gitu hehe. Nah di artikel hari ini saya akan membagikan kepada sobat semua sebuah tutorial membuat tombol share di blog. untuk kode ini sendiri saya dapatkan dari blog mbak arlina.

Anak blogger pasti tahu mbak Arlina fitriyani, ya seorang blogger wanita yang mempunyai paras cantik dan baik kepada blogger pemula seperti saya, kenapa baik ? ya kalau setiap ada pertanyaan atau ada tutorial yang baru mbak arlina ini tidak akan pelit dengan ilmu dia akan mengajarkan nya kepada kita,. hmm gak beda jauh lah sama master seo lainnya seperti Kang Adhy dan Mas Sugeng..

Tombol share yang ada di blog biasanya digunakan untuk memudahkan pengunjung yang ingin berbagi artikel yang dirasa bermanfaat ke jaringan sosial media mereka. Seperti Facebook, Twitter, Google plus, dan Linkedin. Share button ini nantinya akan muncul di setiap postingan blog sobat.

Nah sob, tanpa banyak basa basi lagi, nih saya kasih tutorial nya, yang saya dapatkan di blog arlina design,.

Cara Membuat Tombol Share Keren di Blog

1. Login ke Blogger > Template > Klik Edit HTML >  Cari kode di bawah ini kemudian pilih yang ke dua dalam markup post (bukan mobile post) 

<data:post.body/>

2. Salin kode dibawah ini dan pastekan di kode yang 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> 

3. Selanjutnya salin kode di bawah ini tepat sebelum ]]></b:skin> atau </style>

/* 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisT9gqgC4WvEScDv42N5lQXQxC48seIMpOC6d-_bTiZu-_RtfMqlMMDvg3DghKJNfIadLb4dfpQKWJY3FFziY2s5qaDlko2sRMzA-yTLVkG5BTpoAkIS4MfZBm8r0U7E2_j8xafQLc9dAP/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}}

4. Simpan Template

Gimana ? cukup mudah bukan untuk membuat tombol share keren ini, dan tunggu apalagi sob, silahkan diterapkan ke blog kalian sob kalau ada pertanyaan silahkan tanyakan di fom komentar dibawah ya gan, dan selamat mencoba...

Share this post