Halo sobat
semua, pada kesempatan kali ini saya akan mencoba berbagi tips dan trik tentang
cara Membuat Tombol Share Facebook, Twitter, Stumbleupon, dan Google di Blog
sehingga tampilan blog kita menjadi
lebih keren dan menarik.
Nah, buat sobat yang mungkin sudah gak sabar lagi nich, silahkan ikuti trik kali ini tentang cara Membuat Tombol Share Facebook, Twitter, Stumbleupon, dan Google di Blog
Nah, buat sobat yang mungkin sudah gak sabar lagi nich, silahkan ikuti trik kali ini tentang cara Membuat Tombol Share Facebook, Twitter, Stumbleupon, dan Google di Blog
- Lahkah yang pertama sobat harus masuk dulu ke akun blogger sobat;
- Kemudian Pilih menu Rancangan;
- Lalu klik Tambah Gadget, terserah maunya yang dimana, tapi lebih baiknya letakkan di bawah postingan;
- Pilih HTML/JavaScript;
- Selanjutnya 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>
#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>
- Kemudian di Simpan;
- Atau sobat ingin memodifikasinya, jika sobat mengerti dengan koding tersebut.
- Untuk mengubah posisinya, tinggak sobat mengubah kode yang berwarna merah dengan menyesuaikan dengan kondisi template yang digunakan. Hanya tips yang sederhana, untuk memudahkan mengetahui koding dan cssnya, sobat bisa instal add-ons firebug dari Mozilla.
Jika mengalami
kegagalan atau kurang mengerti silahkan hubungi saya. Selamat mencoba, semoga berhasil.
