Memasang Floating Share Button

Hello sobat blogger, Apa kabar kalian  ? Semoga selalu dalam keadaan sehat wal'afiat, Aminn ... Ternyata semalam (Tepatnya 4 Agustus 2011) Google telah mengupdate pagerank blog, g tahu apa secara minor atau mayor yang pasti pokoknya google update pagerank, jadi silahkan check pagerank sobat, semoga beruntung ya sob ... (baca : Perbedaan Update Pagerank Secara Minor dan Mayor dan Check Your Google Pagerank).

"Preview : Floating Share Button"

Ok langsung pada tema postingan saya kali ini, saya ingin mengeshare sebuah tutorial yang mungkin tidak asing lagi bagi sobat tentang share button sosial network. Sebenarnya ada berbagai macam variasi di dalam memakai fasilitas share button di blog, namun untuk postingan saya kali ini saya akan mengeshare tentang Memasang Floating Share Button.

Floating disini maksudnya ibarat mengikuti atau terbang ... (Helehhh... Apa yang benar ni ? ) Atau coba lihat aja sebuah tombol sebelah kiri blog saya terdapat berbagai macam tombol, itulah share button yang di fasilitasi dengan efek floating. Untuk lebih jelas lihat gambar diatas.

Bagaimana ? Berminat, jika ia silahkan ikuti tutorial berikut.
Pertama-tama copy kode di bawah ini :

<style>
#pageshare {position:fixed; bottom:15%; margin-left:-71px; 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 khamardos.blogspot.com">
<div class="sbutton" id="fb">
<a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">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 src="http://apis.google.com/js/plusone.js" type="text/javascript">
</script>
<g:plusone size="tall"></g:plusone></div>
</div>

- Setelah itu dari Dashboard -> Rancangan
- Klik Add a Gadget -> HTML/JAVASCRIPT
- Letakkan kode yang sudah anda copy tadi di form HTML/JAVASCRIPT tersebut
- Lalu Save.

Mudahkan sobat ? Iya, sampai disana aja tutorialnya. O y jangan lupa +1 nya sobat, dan kalau bisa share artikel ini kepada teman-temanmu yang ada di Facebook, Twitter dll ya sobat... Thanks ...

.:: HAPPY BLOGGING SOBAT ::.

Bagikan Jika Artikel ini menarik, Diharapkan agar memberikannya kepada teman2 anda di Facebook

Artikel Lainnya :