Cara Membuat dan Memasang Tombol Share Melayang di Blog

Dalam Cara Membuat dan Memasang Tombol Share Melayang di Blog begitu banyak tutorial yang bertebaran di mesin pencarian google, namun saat membuat sebuah website baru kemarin, saya menemukan sebuah script yang unik dan tergolong cukup ringan serta tidak memerlukan perubahan template. itulah kenapa saya memilih cara baru tersebut sebagai bahan referensi dan pada kesempatan ini saya share kepada anda semua. dan saya menghilangkan link ke luarnya agar tidak terlalu banyak outbond link dari web yang kalian kelola.

 

Sebelum anda memasang tombol share, apakah anda tahu sebenarnya apa tujuan dan manfaaat yang kita peroleh? tombol berbagi sebenarnya sudah merupakan tools bawaan dari blogger yang memang terpasang dalam blog (bagi pengguna blogspot), dengan adanya tombol - tombol tersebut yang biasanya terdiri dari berbagi ke facebook, twitter, google+, stumbleupon ditujukan agar orang yang berkunjung kesitus anda bisa dengan mudah mereferensikan artikel dalam web yang dinilai bermanfaat. Bayangkan saja jika banyak pengunjung dalam web anda dan mereka membagikan artikel yang ditulis ke teman atau ke jejaring sosial mereka.

 

Secara tidak langsung, itu adalah promosi untuk memperkenalkan web blog anda tersebut. jadi akan banyak lagi orang yang mengenal tulisan dengan niche tertentu dari anda. Untuk itu pasanglah tombol share kedalam blog anda, jika belum punya ikuti tips dari saya dibawah ini.

 

Cara Baru Membuat atau Memasang Tombol Share Melayang di Blog

1. Buka halaman dashboard blogger anda
2. Pilih tata Letak atau Lay Out
3. Klik Add Gadget (letaknya terserah, karena penempatan nanti akan tetap melayang)
4. Pilih HTML / JavaScript
5. Masukkan kode dibawah ini ke dalam kolom yang tersedia, judul widget tidak perlu di isi.

<style>

#pageshare {position:fixed; bottom:15%; left: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: 12px;text-align:center;"><a href="http://viperquest.blogspot.com/2012/12/cara-membuat-tombol-share-melayang-di.html" target="blank"><font color="black">[Get This]<font></font></font></a></div></div>

6. Klik "simpan" dan lihat tampilan baru blog anda. tampilan kurang lebih akan seperi image berikut

Tombol share akan muncul disebelah kiri dari tampilan web utama, untuk memindah tempat kesebelah kanan, ganti saja kode berwarna Hijau menjadi "right", untuk kode yang lain tidak perlu diganti karena tampilan widget sudah sangat baik dan responsive. untuk meningkatkan kelengkapan blog yang lain, ada baiknya memasang juga kontak dengan tampilan beda, ada tutorialnya juga di Cara Baru Membuat Form Contact Us di Blogger Menjadi Profesional, baca dan pahami.

 

Sekian dahulu dari saya mengenai Cara Membuat dan Memasang Tombol Share Melayang di Blog, semoga dengan memasang kode tersebut, web anda semakin populer dan mempunyai pengunjung yang banyak di kemudian hari. sehingga blog tersebut akan dibanjiri oleh tawaran pemasangan iklan baik dari pihak ketiga ataupun google adsense. Selamat siang.