Cara Membuat Share Button Like, Share dan
Twitter di Sisi Kanan Blog. Tombolnya sama persis seperti yang di
sebelah kanan blog saya. Untuk meningkatkan lalu lintas kunjungan ke
blog kita,
selain upaya optimasi SEO , perlu juga kiranya kita mengintegrasikan
blog kita
dengan media jejaring sosial populer seperti facebook dan twitter.
Jika kita meremehkan "kekuatan" share button /
tombol berbagi ini, sama saja kita menyiakan-nyiakan peluang untuk menambah
kunjungan ke blog kita.
Jika
pada posting sebelumnya kita membuat burung twitter melayang di blog,
pada tutorial kali ini, Saya mau berbagi sama temen-temen
bagaimana membuat salah satu widget share button melayang di sisi kanan
blog.
Widget kali ini dilengkapi tombol suka dan share Facebook, Tweet, Digg, stumble
Upon dan Google +1 termasuk perhitungannya alias berapa banyak pengunjung yang
membagikannya. Cara pembuatannya sangat mudah, karena tidak perlu mengedit CSS
atau menambahkan kode HTML.
1. Langkah pertama masuk ke akun blogger > Dasbor, >
klik design/rancangan > Tata Letak
2. Klik Tambah Gadget, di bagian sidebar.
3. Pilih HTML/Javascript, kemudian masukkan kode di bawah
ini:
<!--Widget Share Button Melayang Start-->
<style>
#pageshare {position:fixed; bottom:15%; right:10px;
float:left; border: 1px solid black;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0
0 2px
0;z-index:10;}
#pageshare .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;-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='pageshare' title="Share This With Your
Friends">
<div class='sbutton' id='gb'><script
src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like
layout="box_count" show_faces="false"
font=""></fb:like></div>
<div class='sbutton' id='rt'><a
href="http://twitter.com/share" class="twitter-share-button"
data-count="vertical" >Tweet</a><script
src='http://platform.twitter.com/widgets.js'
type="text/javascript"></script></div>
<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='su'><script
src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg'
style='margin-left:3px;width:48px'><script
src='http://widgets.digg.com/buttons.js'
type='text/javascript'></script><a class="DiggThisButton
DiggMedium"></a></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><br/><div
style="clear: both;font-size: 11px;text-align:center;"><a
href=" http://masih-online.blogspot.com/2012/04/cara-membuat-share-button-like-share.html"
target="blank"><font color="black">[Get
Widget]<font></font></font></a></div></div>
<!--Widget Share Button Melayang End-->
4. Simpan perubahan & selamat mencoba
Selamat berjumpa pada artikel selanjutnya :D
0 comments:
Post a Comment