27/01/12

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.

42 comments:

nurhasim mengatakan...

pertamaxxx... mantap

putri mengatakan...

menarik...

Deny Kurniawan (Ku-Kunci) mengatakan...

ini make template wordpress ya, tapi hosting di domain blogger ya. sukses ya buat bertuah

Arief Rachmadi Blogger Pemula mengatakan...

wow mantep bin keren tutornya

Bio Sanjaya mengatakan...

makasih gan

Dapur Tutorial Blogspot mengatakan...

keren mas trimakasih saya sudah coba dan berhasil.

Blog Amatiran mengatakan...

mantab bgt nih tutorialnya...thanx bgt :)

sementara mengatakan...

makasih gan scriptnya. ijin kopas n modif

Fajar Muhammad Fathirochman mengatakan...

tnx gan scriptnya mampir ke lapak ane juga di http://uciha-naruto.blogspot.com

Andi Saputro mengatakan...

Gan Mohon tutorial script (blogspot) supaya link download akan muncul setelah klik tombol share/like (fb,tweet,google+). Jadi kalau belum diklik tombol like/share link download belum muncul. Makasih bantuannya gan.

bazuqe mengatakan...

Makasih gan.. tapi koq di d blog saya gak mau tampil di pinggir ya??? gmn cara ngaturnya gan??

Monggo di cek blog saya gan.. http://sandalumut-shop.blogspot.com/

agusna suryana mengatakan...

kereeen banget. makasih...

dilarang melarang mengatakan...

bos contohnya ke gimana nih...

cici cantik mengatakan...

blog saya ada masalah mas , ada bayangan di dalam blog saya seperti tabel .saya tidak tau menghapusnya , gimana ya menghapusnya mas
mohon bantuanya di http://jubelkre.blogspot.com/2012/04/mengecek-virus-yang-ada-di-blog-kita.html

Abed Saragih mengatakan...

thks ya.

Muhammad Septi Rosidi mengatakan...

Tutorial blog tentang "Cara Membuat Tombol Share Facebook, Twitter, Stumbleupon, dan Google+ Pada Blogspot" ini sangat bermamfaat buat blogger pemula seperti saya.
Terima Kasih banyak dan salam kenal ya!

freegprslt mengatakan...

Free GPRS lt latest product from the Free Blogger Template. For all who like atah friend is looking for a good blog template design and pro please visit our latest products and most importantly of all this is without cost or "FREE".
Visit: Free GPRS lt - Free Blogger Template

arie5758 mengatakan...

Saat saya pasang tombol melayang, likebox saya malah hilang. Apa terjadi bentrok script, atau cara masang saya yang salah ya

ARI EJAWINATA GINTING mengatakan...

mantap gan....

ini link saya
http://www.ariejawinataginting.blogspot.com/

sepri yanto mengatakan...

makasih ya udah mau shear dan berbagi ilmunya.
nice

khalid mengatakan...

numpang nyolong script FB nya yo ^^

hafidz mengatakan...

ko ga bisa mas

riemogerz mengatakan...

Mantap mas, boleh dicoba nih. Oh ya, minta kunjungan juga ya mas di blog saya http://www.riemogerz.web.id

Muhamad Alqorid mengatakan...

thanks ya gan atas infonya

Ninik Fauziyah mengatakan...

yang lebih keren lagi ada gga!!!

sigid ariwibowo mengatakan...

Matur nuwun sanget gan.... top markotop

http://tokoonline-aksesoris.blogspot.com

udiy mengatakan...

sedot gan thanks

indonesian orchids mengatakan...

kok gak mau muncul di blog saya, pas di copy malah kode css nya yang tampil di widget nya...

Komunitas Blogger Kalimantan Selatan mengatakan...

Yang ini khusus wordpress yah..?

Jefry mengatakan...

Script tombol share ini apabila di pasnag dalam blog wp apa bisa ya ? kalau bisa mohon tutorial cara memasangnya
terima kasih

Resep Dapur Bunda mengatakan...

Nice info ...

mantau mengatakan...

mantaf mas bro, salam kenal :D

Vimax Pil Pembesar Penis mengatakan...

wah ini yg sy cari2 gan

perangsang wanita mengatakan...

smoga bermanfaat ya gan

Teknologi dan informasi mengatakan...

makasih atas info dan ilmunya,... sangat membantu saya, salam sukses untuk mas admin...

mebel jepara mengatakan...

thanks for info...

furniture jati jepara mengatakan...

thanks for information...

harga mebel mengatakan...

makasih atas ilmunya

Ucok Batak mengatakan...

Makasih ya Lae yg baik. Horas

Grosir Herbal Murah mengatakan...

bagus banget ini untuk menaikkan trafik .. perlu dicoba ini

Mebel Jepara mengatakan...

makasih tutoriak scriptnya,
sangat mempermudah sekali untuk ngeshare postingan

Toko Jati mengatakan...

ini yang saya cari, terima kasih banyak Om atas info nya karena ini sangat membantu saya dalam posting dan share artikel blog saya

Posting Komentar

Silahkan Berkomentar disini...