Cara Menciptakan Floating Share Button

Floating share button

atau tombol membuatkan yaitu salah satu widget yang sangat dianjurkan untuk dipasang di blog sobat. Setelah megampangkan pengunjung dengan memasang fitur related posts di sidebar, menambahkan breadcrumbs navigation dan juga widget recent posts sehingga sahabat sanggup meningkatkan pageview maka diberilah kesempatan kepada pengunjung blog sahabat untuk membagikan artikel kesukaan mereka.

Dengan memasang floating share button atau tombol membuatkan ini sanggup megampangkan pengunjung untuk membagikan artikel sahabat ke social media ataupun social bookmark plus sanggup insentif backlink.

Sebenarnya

share button

ini sudah disediakan oleh blogger akan tetapi tampilannya yang super biasa menciptakan share button bawaan blogger ini kurang sanggup menarik minat pengunjung. So kali ini kita akan mencoba untuk menciptakan floating share button (melayang).

Keuntungan floating share button

Floating share button atau tombol membuatkan melayang ini memiliki beberapa keludang keringhan, salah satunya yaitu

share button ini tidak hanya berada di halaman artikel

sehingga sahabat juga sanggup mempromosikan homepage blog sahabat dengan floating share button ini.

Cara menciptakan floating share button

1. Seperti biasa login dulu di blogger.
2. Pilih Rancangan (Design) > Edit HTML > Centang Expand Template Widget.
3. Kita taruh dulu arahan css-nya, cari  ]]></b:skin> lalu copast arahan diberikut:
   

   #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 sahabat sesuaikan sendiri. Jika sudah cari arahan </body> dan copast arahan diberikut 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 menciptakan floating share button sobat.

Sekian tutorial

membuat floating share button (tombol membuatkan yang melayang)

agar berkhasiat. Kalau ada teknik yang ludang keringh baiklah boleh donk aku dikasih tau hehehe...

Advertisement