Cara Membuat Tombol like, share Jejaring Sosial di sisi Blog

Share on :

Tweet

Tombol like dan tombol share jejaring sosial seperti facebook, twitter, dan sebagainya jangan dianggap remeh, karena tombol-tombol tersebut berfungsi untuk meningkatkan lalu lintas kunjungan ke blog kita. Proses integrasi dengan jejaring sosial tersebut diharapkan optimasi SEO semakin lebih baik. 

Pada postingan sebelumnya telah dibahas tentang Cara membuat artikel terkait otomatis di blog, Cara membuat tombol like facebook di blog, dan Cara pasang tombol like dan share social bookmark di Blog. Pada kali ini saya akan memberikan penjelasan tentang Cara Membuat Tombol like, share Jejaring Sosial di sisi Blog. Cara pembuatannya sangat mudah, karena tidak perlu mengedit CSS atau menambahkan kode HTML di template.

Baik langsung saja ke topik permasalahan, ikuti langkah-langkah berikut :

1. Login ke blogger.com > klik design/rancangan > Tata Letak
2. Klik Tambah Gadget, di bagian sidebar.
3. Pilih HTML/Javascript, kemudian masukkan kode scriptnya.
4. Simpan widget dan preview Blog Anda
5. Jika sudah sesuai maka klik Publikasikan.

Kode script untuk background terang :

<!--Widget Share like FB tweet google plus digg Button Melayang Start--> <style> #pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="bagikan ke teman anda"> <div class='sbutton' id='gb'> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div> <div class='sbutton' id='rt'> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div> <div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div> <div class='sbutton' id='fb'> <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div> <br/><div style="clear: both;font-size: 8px;text-align:center;"> <a href="http://bc-pasar.blogspot.com/2013/01/cara-membuat-tombol-like-share-jejaring.html" target="blank"><font color="blue">Cara Membuat<font></font></font></a></div> </div> <!--Widget Share like FB tweet google plus digg Button Melayang End-->

Kode script untuk background gelap :

<!--Widget Share Button Melayang Start--> <style> #pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#000000;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Bagikan ke teman anda"> <div class='sbutton' id='gb'> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div> <div class='sbutton' id='rt'> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div> <div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div> <div class='sbutton' id='fb'> <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div> <br/><div style="clear: both;font-size: 8px;text-align:center;"> <a href="http://bc-pasar.blogspot.com/2013/01/cara-membuat-tombol-like-share-jejaring.html" target="blank"><font color="white">Cara Membuat<font></font></font></a></div> </div> <!--Widget Share Button Melayang End-->

Selamat mencoba ya.... dan jangan lupa di like ya artikel ini...
Terimakasih

Artikel Terkait: