Membuat Tombol Share Facebook, Twitter, Stumbleupon, dan Google+ Pada Blogspot

Senang sekali sobat, setelah sebelumnya saya posting tentang Membuat Tombol Share Pada Blogspot, kali ini saya akan mencoba berbagi tips dan tutorial tentang cara Membuat Tombol Share Facebook, Twitter, Stumbleupon, dan Google+ Pada Blogspot dengan sedemikian rupa sehingga tampilannya menjadi lebih menarik lagi.

Nah, buat sobat yang mungkin sudah gak sabaran lagi, silahkan ikuti tutorial kali ini tentang cara Membuat Tombol Share Facebook, Twitter, Stumbleupon, dan Google+ Pada Blogspot.
  1. Lahkah pertama jelas sobat harus Login ke akun blogger sobat;
  2. Pilih menu Rancangan;
  3. Kemudian klik Tambah Gadget, terserah mau yg dimana, tapi sebaiknya letakkan di bawah posting;
  4. Pilih HTML/JavaScript;
  5. Kemudian Copy kode berikut ini dan pastekan pada bagian konten, untuk judul sebaiknya dikosongkan saja;
  6. <style type="text/css">
    #rizkishare {
         position:fixed;
         top:27%;
         margin-left:-67px;

         float:left;
         border-radius:5px;
         -moz-border-radius:5px;
         -webkit-border-radius:5px;
         background-color:#fff;
         padding:0 0 2px 0;
         z-index:10;
         }

    #rizkishare .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='rizkishare' title="Bagikan Tulisan ini">
    <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='stumbleupon'>
    <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></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='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 align='center'>
    <small><a href="http://www.wakrizki.net/2011/12/membuat-tombol-share-facebook-twitter.html" target="_blank" title="Widget by MasTer Q">MasTer Q</a></small>
    </div>
    </div>
  7. Kemudian klik Simpan;
  8. Atau mungkin sobat ingin memodifikasinya, silahkan. Itupun jika sobat mengerti dengan koding tersebut (bukan maksud meremehkan).
  9. Untuk mengatur posisinya, silahkan sobat rubah kode warna merah dan sesuaikan dengan kondisi template yang sobat gunakan. Sekedar tips sederhana, untuk memudahkan mengetahui koding dan cssnya, sobat bisa instal add-ons firebug dari mozilla dengan cara klik disini.
  10. Pada tutorial ini saya sisipkan linkback menuju tutorial ini, jika sobat berbaik hati, Mohon Jangan Dihapus. Terimakasih.
Jika mengalami kegagalan atau kurang mengerti silahkan hubungi saya. Selamat mencoba, semoga berhasil.

12 Komentar "Membuat Tombol Share Facebook, Twitter, Stumbleupon, dan Google+ Pada Blogspot", Baca atau Masukkan Komentar

Optimasi SEO Blogspot said...

Baca-baca artikel di blog ini sangat menyenangkan dan sangat membantu menambah pengetahuan seputar Blog.
Terima kasih dan Salam Kenal

mahir blogging said...

wah keren tu gan,, langsung di rangkul semua

Wawan Siswanto said...

mantep gan

Oidre said...

Izin Sundul Mas

sururpreneur said...

makasih gan...

tazbhy elka said...

thanks bro infox....

penyebab batu ginjal dan pengobatannya said...

MAKASIH GAN ATAS INFONYA

obat Alergi said...

Wah keren tuh...selamat ya moga sukses terus...

Obat tradisional tumor kista said...

terimakasih gan ,, infonya bermanfaat :)

SmilePedia said...

Mantap sekali ne tombol sharenya..

Blogtainment Remaja said...

Thanks gan. dicoba dulu

Belajar Forex Gratis said...

Mantap nih, yang ini kalau di scrol dia ngikut yah gan??

thanks

Followers