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.
