Monday, 11 June 2012

Cara Membuat Share Button Melayang

Salam Blogger, pada kesempatan kali ini saya akan sedikit menceritakan apa itu share button, bagaimana cara membuatnya dan dipasang pada halaman blog sobat entah itu blogger ataupun wordpress. Share button adalah suatu tombol yang berguna untuk menyebarkan artikel atau suatu halaman yang ada pada blog sobat. Tombol ini berfungsi untuk blog yang masih berada pada tahap awal seperti saya, gunanya yakni untuk mempromosikan blog kita, misal ke facebook, twitter, digg dan masih banyak lagi.

Gimana tertarik gak untuk pake share button, soalnya share button sangat bermanfaat untuk promosikan blog. Share button yang akan kita buat ini versi yang baru yaitu share button yang melayang di bagian kiri blog anda dan jika scrool mouse digeser tetap share button ini akan mengikuti scrool. Ok gak usah panjang lebar lagi, langsung aja ke tkp.

Berikut langkah-langkah membuat share button :
  1. Masuk ke account blogger anda
  2. klik menu tata letak
  3. lalu klik tambah gadget dan pilih html/java script
  4. kemudian copy paste kode dibawah ini ke kotak yang disediakan

    <!--SideBar Floating Share Buttons Code Start-->
    <style>
    #pageshare {position:fixed; bottom:15%; left: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: 12px;text-align:center;"><a
    href="http://boytriks.blogspot.com/2012/06/cara-membuat-share-button-melayang.html" target="blank"><font color="black">[Get
    This]<font></font></font></a></div></div>
  5. kemudian simpan deh
Nah itulah cara-caranya, moga bermanfaat.

No comments:

Post a Comment