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

6 komentar:

LintasKoran mengatakan...

nice share


Thanks

Dhika mengatakan...

ok
u are welcome

misbah mengatakan...

ok..makasih ..sangat berguna :)

Gazefox Krisna mengatakan...

cara naruh di semuah postingan gmna kang..
tepay di bawah postingannya..=))

Amandio Vieira mengatakan...

thx Mas Brow...Nice Info..
Q udh cba d blog Ane,
Mampir2 Mas Brow

slam knela jg..

All About Tutorial mengatakan...

Nice Blog
Lam knal & share ilmu ya...
Coba tombol like & share melayang versi gw, tutorial lengkap baca di All About Tutorial
Ditunggu kunjung baliknya

Posting Komentar

 
Copyright © 2011 Andhika Hutomo Blogdhika.com. Powered by Blogger™