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

Home » Tips blog » Tips Blogger » Membuat Tombol Share Facebook, Twitter, Stumbleupon, dan Google+ Pada Blogspot

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

Posted by Unknown 0 comments

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

Lahkah pertama jelas sobat harus Login ke akun blogger sobat;
Pilih menu Rancangan;
Kemudian klik Tambah Gadget, terserah mau yg dimana, tapi sebaiknya letakkan di bawah posting;
Pilih HTML/JavaScript;
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='Goblogger Go' 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://goblogger-go.blogspot.com/ " target="_blank" title="Widget by Blogger">Blogger</a></small>
</div>
</div>

Kemudian klik Simpan;
Atau mungkin sobat ingin memodifikasinya, silahkan. Itupun jika sobat mengerti dengan koding tersebut (bukan maksud meremehkan).
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.

0 comments:

Posting Komentar

Kami menawarkan software atau game yang telah di posting pada situs ini untuk anda miliki dengan cara klik link Order DVD diatas atau SMS ke 085 730 281 770 dengan format :

ORDER DVD (spasi) Nama Aplikasi/Paket (spasi) Nama dan alamat lengkap anda lalu kirim sms ke 085 730 281 770

Blog Kertosono