Judul : Cara Membuat Floating Share Button
link : Cara Membuat Floating Share Button
Cara Membuat Floating Share Button
Floating share button
atau tombol berbagi adalah salah satu widget yang sangat dianjurkan untuk dipasang di blog sobat. Setelah memudahkan pengunjung dengan memasang fitur related posts di sidebar, menambahkan breadcrumbs navigation dan juga widget recent posts sehingga sobat bisa meningkatkan pageview maka berilah kesempatan kepada pengunjung blog sobat untuk membagikan artikel favorit mereka.Dengan memasang floating share button atau tombol berbagi ini bisa memudahkan pengunjung untuk membagikan artikel sobat ke social media ataupun social bookmark plus dapat bonus backlink.
Sebenarnya
share button
ini sudah disediakan oleh blogger akan tetapi tampilannya yang super biasa membuat share button bawaan blogger ini kurang bisa menarik minat pengunjung. So kali ini kita akan mencoba untuk membuat floating share button (melayang).
Keuntungan floating share button
Floating share button atau tombol berbagi melayang ini mempunyai beberapa kelebihan, salah satunya adalah
share button ini tidak hanya berada di halaman artikel
sehingga sobat juga bisa mempromosikan homepage blog sobat dengan floating share button ini.
Cara membuat floating share button
- Seperti biasa login dulu di blogger.
- Pilih Rancangan (Design) > Edit HTML > Centang Expand Template Widget.
- Kita taruh dulu kode css-nya, cari
]]></b:skin>kemudian copast kode berikut:#sharebutton {
background-color:#FFFFFF;
border-color:#C1CDCD;
border-style:solid;
border-width:1px;
left:5px;
bottom:150px;
margin-top:10px;
position:fixed;
width:64px;
}
#sharebutton .float {margin:7px}
.FBConnectButton_Text
{
font-size: 8px;
padding:2px 4px 3px !important;
} - Tulisan yang berwarna merah bisa sobat sesuaikan sendiri. Jika sudah cari kode
</body>dan copast kode berikut ini tepat diatasnya
<div id='sharebutton'>
<div class='float'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<div class='float'>
<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'/>
<div class='clear'/></div>
<div class='float'>
<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'/>
</div>
<div class='float'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/> </div>
</div> - Save dan lihat hasil membuat floating share button sobat.
Sekian tutorial
membuat floating share button (tombol berbagi yang melayang)
semoga bermanfaat. Kalau ada teknik yang lebih oke boleh donk saya dikasih tau hehehe...Demikianlah Artikel Cara Membuat Floating Share Button
Sekianlah artikel Cara Membuat Floating Share Button kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Cara Membuat Floating Share Button dengan alamat link https://anothers-stuff.blogspot.com/2012/01/cara-membuat-floating-share-button.html
