Membuat Tombol Share Facebook, Twitter, Stumbleupon, dan Google+ 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. Login ke akun blogger Anda;
2. Pilih menu Rancangan;
3. Kemudian klik Tambah Gadget;
4. Pilih HTML/JavaScript;
5. Kemudian Copy kode berikut ini dan pastekan pada bagian konten, untuk judul sebaiknya dikosongkan saja;

<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>

Catatan: Untuk mengatur posisinya, silahkan sobat rubah kode warna orange dan sesuaikan dengan kondisi template yang sobat gunakan.

6. Kemudian klik SIMPAN TEMPLATE;

7. Sekedar tips sederhana, untuk memudahkan mengetahui koding dan cssnya, sobat bisa instal add-ons firebug dari mozilla dengan cara klik disini.

sumber: wakrizki.net

---

by Facebook Comment untuk Anda!

---

Artikel Terkait

Tutorial Blogger

• Membuat Efek Hover Transparan pada Gambar
• 3 Widget Animated Bird Twitter Follow untuk Blogger, Keren!
• Cara Meng-Upload Gambar Jumlah Banyak Pada Postingan Blogger
• Trik Sederhana Cara Proteksi Gambar di Blog
• Cara Membuat Open New Tab Pada Setiap Link di Blog
• Cara Menghilangkan Link Posting Lama dan Postingan Baru di Blog
• Cara Agar Postingan Blog Tidak Bisa di Copy
• Cara Membuat Efek Zoom Gambar saat Dilalui Kursor
• Cara Membuat Efek Meteor Jatuh di Blog
• Cara Membuat Cursor Diikuti Bintang di Blog
• Cara Membuat Back To Top Dengan Double Click di Blog
• Cara Membuat Link dengan Efek Pelangi
• Cara Mudah Membuat Tampilan Blog/Web Maintenance
• Cara Membuat Efek Link Mengeluarkan Bintang
• Cara Membuat Refresh Otomatis Di Blog
• Cara Membuat Teks yang Di Block Menjadi Berwarna
• Cara Membuat Gambar Berjajar
• Tips Untuk Blogger Pemula
• Cara Memasang Widget Alexa Rank
• Membuat Link begerak bila disentuh kursor mouse
• Cara Mudah Pasang Kotak Komentar Facebook Pada Blogger
• Membuat Judul Blog Bergerak
• Mengukur Seberapa Berat Blog/Web
• Membuat Background Kotak Komentar Lebih Menarik

---

---