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!!
Untuk berlangganan artikel, masukan email anda disini:



3 Comment :

_hny.hahan_ mengatakan...

makasih banyak ya infonya,... =)

Jon Milans mengatakan...

sama2, makasih jg dah berkunjung :-)

All About Tutorial mengatakan...

Nice blog...
Lam knal & sharing ilmu ya...
Coba tombol like & share melayang versi gw gan, tutorial lengkap klik aja nama gw di atas: All About...

Poskan Komentar

Bahasa dapat mencerminkan kepribadian seseorang.
Bagi yang ingin promosi web, blog dan atau mendapatkan backlink dari blog ini, telah disediakan tempat khusus. Klik DISINI

 

Info Olahraga

Info Komputer

Info Blackberry