Cara Mudah Memasang Tombol Share Di Blog
6/10/2018
Add Comment
Pada artikel kali ini Trik Keren akan berbagi sebuah tombol share pada postingan untuk blog.
1. Login ke Blogger/Template atau Tema/Edit HTML/ cari kode <data:post.body/>
2. Lalu salin kode di bawah ini tepat di bawah kode yang di sebutkan tadi
3. Cari kode ]]></b:skin> lalu copy code di bawah ini kemudian pastekan tepat di atasnya
4. Simpan template atau tema
Memasang tombol share di blog selain tampak indah dan keren, tombol share juga berguna untuk memudahkan pengunjung blog kita yang ingin berbagi artikel ke Sosial Media mereka. Seperti Facebook, Twitter, Google Plus, dan lain2. Tombol share ini nanti akan muncul di bawah postingan blog.
Memasang Tombol Share Di Blog
1. Login ke Blogger/Template atau Tema/Edit HTML/ cari kode <data:post.body/>
Kode tersebut biasanya ada lebih dari 1 jadi di coba-coba aja
2. Lalu salin kode di bawah ini tepat di bawah kode yang di sebutkan tadi
<b:if cond='data:blog.pageType == "item"'>
<div class='tombol-berbagi-TK'>
<div class='tombol-berbagi-TK-fb'>
<a class='tombol-berbagi-fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-fb-label' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>
</div>
<div class='tombol-berbagi-TK-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='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-gp-label' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-lin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-lin-label' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a>
</div>
</div>
</b:if>
3. Cari kode ]]></b:skin> lalu copy code di bawah ini kemudian pastekan tepat di atasnya
/* CSS Share Button */
.tombol-berbagi-TK{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-TK-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-TK-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-TK a{color:#999;transition:all .3s;}
.tombol-berbagi-TK a:hover{color:#7cb0ed}
@media only screen and (max-width:640px){
.tombol-berbagi,.tombol-berbagi-TK-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-TK-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}
4. Simpan template atau tema
Akhir Kata
Semoga artikel ini bermanfaat bagi kalian, terima kasih telah mengunjungi blog ini dan jangan lupa share artikel ini.Berlangganan artikel terbaru dari blog ini langsung via email.