Selasa, 11 Desember 2012

Cara Memasang Widget Share Button Facebook, Twitter, Google di Blog


Diposkan oleh Permathic on Selasa, 24 April 2012 , in 
Cara Memasang Widget Share Button Facebook, Twitter, Google di Blog -
Belakangan ini saya berkunjung  ke sebuah blog, dan saya menemukan sesuatu yang unik di blog sahabat saya tersebut. Saya menemukan widget share botton. Kemudian saya mencoba memasangnya, karena widget ini akan memudahkan pengunjung blog kita untuk mengshare apa yang ada di blog kita. Dan hal ini juga akan berdampak positif ke blog kita.. karena ini bisa menjadi media marketing gratis buat para blogger , untuk itu saya akan membagaikan kepada para sahabat – sahabat blogger sekalian tentang cara membuat share botton. Berikut langkah- langkahnya :

  1. Login ke dasbor blog anda
  2. Pilih rancangan
  3. Pilih tambah gadget
  4. Pilih Html/Java script
  5. Copy kode Html di bawah ini
  6. Pastekan di Html/ Java Script tadi
  7. Simpan
  8. Selesai

Kode Share button

<!--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:#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: 9px;text-align:center;"><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-share-button.html" target="blank" title="Cara Memasang Widget Share Button"><font color="blue">[Get Widget]<font></font></font></a></div></div>

<!--Widget Share Button Melayang End-->

Catatan : untuk tulisan warna hijau anda dapat mengeditnya sesuai keinginan anda. Dan tulisan warna merah bisa anda hapus jika anda ingin tampilan yang simple.

contoh hasilnya


                                                                             

14 komentar:

  1. siip bro,... makasih buat infonya,..haha


    komen punyakku ya http://onoyidrammusiclife.blogspot.com

    BalasHapus
  2. nambah ilmu ni bosss.....



    kunjungan balik ya... http://nick2share.blogspot.com

    BalasHapus
  3. okok teri kasih kembali
    bila ingin tau info" blog baca artikel saya saja

    hehehehehehe

    http://setiyonoachmad.blogspot.com/

    BalasHapus
  4. it's inspire me..!!!
    well done, kritik template atau warna background jangan terlalu banyak animasi, okey..!!! :D

    BalasHapus
  5. makasih atas masukannya yah...
    BERARTI animasi tidak memberikan anfaat nagi pebaca donk?

    BalasHapus
  6. keren...
    bermanfaat banget buat aku yang baru belajar blog.
    good job

    BalasHapus
    Balasan
    1. iya rus
      kamu ngeser juga donk... artikel yang menarik

      Hapus
  7. iya
    makasihnya
    nnti lebih aq tingkatkan lagi

    BalasHapus
  8. bagus brow, kutunggu info yang lain

    BalasHapus