Cara Menghasilkan Floating Share Button

Floating share button

atau tombol menyebarkan yaitu salah satu widget yang sungguh diusulkan untuk dipasang di blog sobat. Setelah mempermudah hadirin dengan memasang fitur related posts di sidebar, menyertakan breadcrumbs navigation dan juga widget recent posts sehingga kawan sanggup meningkatkan pageview maka berilah potensi terhadap hadirin blog kawan untuk membagikan postingan favorit mereka.

Dengan memasang floating share button atau tombol menyebarkan ini sanggup mempermudah hadirin untuk membagikan postingan kawan ke social media ataupun social bookmark plus sanggup bonus backlink.

Sebenarnya

share button

ini sudah ditawarkan oleh blogger akan tapi tampilannya yang super biasa menghasilkan share button bawaan blogger ini kurang sanggup memukau perhatian pengunjung. So kali ini kita akan menjajal untuk menghasilkan floating share button (melayang).

Keuntungan floating share button

Floating share button atau tombol menyebarkan terbang ini mempunyai beberapa kelebihan, salah satunya yaitu

share button ini tidak hanya berada di halaman artikel

sehingga kawan juga sanggup mengiklankan homepage blog kawan dengan floating share button ini.

Cara menghasilkan floating share button

1. Seperti biasa login dahulu di blogger.
2. Pilih Rancangan (Design) > Edit HTML > Centang Expand Template Widget.
3. Kita taruh dahulu arahan css-nya, cari  ]]></b:skin> lalu copast arahan 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;
}

4. Tulisan yang berwarna merah sanggup kawan sesuaikan sendiri. Jika sudah cari arahan </body> dan copast arahan berikut ini sempurna 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>

5. Save dan lihat hasil menghasilkan floating share button sobat.

Sekian bimbingan

membuat floating share button (tombol menyebarkan yang melayang)

biar bermanfaat. Kalau ada teknik yang lebih setuju boleh donk aku dikasih tau hehehe...

Share this post