Menjaring Visitor dengan Tombol Share Melayang (Floating)

Menjaring Visitor dengan Tombol Share Melayang - Sedih banget rasanya jika sudah banyak bikin posting, tapi tetap saja blog yang dengan susah payah kita bangun belum juga mempunyai banyak pengunjung. Kalaupun ada, jumlahnya sangat minim alias sedikit. Rasa prustasi kadang suka terlintas dalam pikiran. Apalagi jika kita hanyalah blogger pemula yang belum begitu banyak menguasai ilmu SOE (Search Engine Optimization) seperti yang dilakukan para senior.

Nah daripada terus menyesali sepinya pengunjung blog, lebih baik kita lakukan usaha untuk menjaring visitor itu dengan memasang tombol share. Mudah-mudahan dengan cara ini jumlah pengunjung yang sedikit itu bisa membagikan artikel kita kepada orang lain. Tips: buatlah artikel semenarik mungkin sehingga mereka mau membagikannya kepada orang lain melalui jejaring sosial seperti facebook, twitter dan lain-lain.

Keuntungan jika artikel kita dishare melalui jejaring sosial baik oleh orang lain maupun oleh kita sendiri yaitu ada kemungkinan orang lain yang melihat artikel kita di jejaring sosial tersebut ikut tertarik dan penasaran melihat artikel kita. Dengan begitu bertambahlah visitor blog kita, semoga!

Ada berbagai macam tombol share di internet, tergantung selera masing-masing tentunya. Dan yang akan saya coba kenalkan di sini adalah tombol share melayang atau floating (lihat gambar di samping).

Untuk membuat widget ini silahkan copy paste salah satu kode berikut dan simpan menggunakan Elemen HTML JavaScript.

Model 1:

<!--Widget Tombol Berbagi 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="Share This With Your Friends">
<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: 11px;text-align:center;"><a href="http://skocikita.blogspot.com/2012/02/menjaring-visitor-dengan-tombol-share.html" target="blank"><font color="black">Get this<font></font></font></a></div></div>

<!--Widget Tombol Berbagi End--> 

Model 2:

<!-- floating page sharers Start--> 

 <style type="text/css"> 

 #pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#F2F2F2;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;/*bs-fsmsb*/-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="Share to Your Friends"> 

 <div style="clear: both;font-size: 16px;text-align:center;"> 

 </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='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> 

 <div class='sbutton' id='rt'> 

 <script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script> 

 </div> 

  

 <div class='sbutton' id='rw'> 

 <div class="addthis_toolbox addthis_default_style "> 

 <a class="addthis_counter"></a> 

 </div> 

 <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4d764bd843e747be"></script> 

 <a href="http://skocikita.blogspot.com/2012/02/menjaring-visitor-dengan-tombol-share.html"/><span style="font-size: xx-small;"><span style="background-color: #eeeeee; color: #eeeeee; font-family: inherit;">&nbsp;Get This</span></span></a> 

 <!-- floating page sharers End --></div></div>

Happy blogging gan, tetap semangat!!