Kali ini Endang's Creative 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 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.
Oke...............,, 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 klik simpan.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.
Selesai juga akhirnyai, semoga ini bisa bermanfaat untuk sobat blogger semua.
Jangan Tunggu Sampai Besok Apa Yang bisa Kamu Lakukan hari ini.
