Jumat, 06 Desember 2013

Membuat Tombol Share Melayang di Blog


Tombol Share MelayangIseng-iseng ngisi waktu luang saya akan coba share bagaimana Membuat Tombol Share Melayang di Blog.
Tombol share berfungsi untuk membagikan isi artikel anda pada jejaring social seperti Twitter, Facebook, dlll.
Sebenarnya tombol share ini sama dengan tombol share yang biasa di taruh di awal maupun akhir posting blog, tetapi yang membedakan hanyalah letaknya yang di samping blog dan akan tetap mengikuti kemanapun scrol naik turun di halaman blog.
Biar lebih jelas bisa anda lihat di blog saya yang baru serbainfo.web.id.

Langsung aja deh ke topik utamanya Membuat Tombol Share Melayang di Blog
1. Login ke Blog
2. Masuk Rancangan - Edit HTML
3. Pilih Tambah Gadget - HTML/Javascript
4. Masukan kode di bawah ini didalamnya

<!-- Tombol Share Melayang Start-->
<style>
#pageshare {position:fixed; bottom:35%; margin-left:-70px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;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;/*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=pageshare title="Get this from tips blogbego.blogspot.com">
<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 class=sbutton id=rt>
<script src="http://tweetmeme.com/i/scripts/button.js" type=text/javascript></script>
</div>
<div class=sbutton id=gb>
<a class=google-buzz-button data-button-style=normal-count href=http://www.google.com/buzz/post title=post on google buzz>
<script src=http://www.google.com/buzz/api/button.js type=text/javascript></script>
</a></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=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=su>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<!-- Tombol Share Melayang End --></div>

5. Simpan

Selesai, sekarang anda sudah mempunyai Tombol Share Melayang di Blog
Agar penempatannya bagus atur bottom:35%; margin-left:-70px sesuai dengan template blog anda.

Demikian artikel dari saya semoga dapat bermanfaat

Like the Post? Do share with your Friends.

Tidak ada komentar:

Posting Komentar

IconIconIconFollow Me on Pinterest