Cara Membuat Tombol Share Melayang Di Blog

Panduan blogger kali ini saya akan berbagi tentang bagaimana cara membuat tombol share melayang/terapung pada Blog.Tombol share ini sangat bagus untuk menghiasi tampilan blog sobat,selain itu tombol share ini juga berguna bagi pengunjung untuk berbagi dan dengan tidak langsung pengunjung akan dimanjakan dengan adanya tombol share ini.

           

Tombol share ini jika sudah tertempel/terpasang pada blog sobat sekalian akan tampak terapung atau melayang.Jadi tombol share ini sangat saya rekomendasikan untuk sobat blogger sekalian.Cara pemasangan tombol share ini sangatlah mudah untuk dilakukan,karena dalam prakteknya sobat blogger tidaklah perlu untuk mengedit HTML,yang sobat harus lakukan hanyalah mengcopy kode HTML dan paste kode HTML tersebut ke blog sobat. Nah langsung saja sobat blogger praktekan ya.

Caranya adalah sebagai berikut :

1.Seperti biasa sobat login dulu ke Blog sobat

2.Klik Dasbor

3.Klik Rancangan terus klik elemen laman

4.Klik add gadget/tambah gadget,dan pilih/klik HTML/javascript

5.Masukkan kode HTML( silahkan sobat copy paste kode HTML) di bawah ini :

<!-- Tombol Share Melayang Start-->

<style>

#pageshare {position:fixed; bottom:35%; margin-left:-190px; 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 tips blogbego.blogspot.com">

<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>

<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 type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<g:plusone size="tall"></g:plusone>

</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='su'>

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>

</div>

<!-- Tombol Share Melayang End --></div>

6.Sebelum menyimpan hasilnya,saya sarankan sobat blogger klik pratinjau dulu yang ada di

   bagian atas      menu rancangan.

7. Jika hasilnya cocok/sesuai seperti yang sobat inginkan maka barulah sobat kliksimpan.Dan

    kalau ternyata letaknya tidak sesuai maka sobat harus mengedit bottom:35%; margin-left:

    190px; yang berada pada bagian atas kode ini.

Keterangan : Sobat blogger bisa edit margin-left:-190px dengan angka yang sobat inginkan,semakin besar angkanya maka semakin kekanan tombol sharenya begitu sebaliknya,dan berlaku juga untuk bottom semakin besar angkanya maka semakin ke bawah tombol sharenya.