Widget Social Bookmark Melayang Dengan Efek Mouseover

Sagitarius Kusadhi - Kali ini saya akan membagikan html ke sahabat untuk digunakan sebagai social bookmark. Bukan sembarang social bookmark karena social ini letaknya adalah melayang diatas dengan efek mouseover.

widget ini memang hemat tempat, mengapa ? karena social bookmark yang terbaca di halaman blog adalah hanya tulisannya saja. Cara kerjanya adalah arahkan kursor sahabat ke widget social media yang berisikan tulisan, kemudian muncul gambar social media tersebut, sahabat juga bisa mengkliknya.

Social bookmark berfungsi supaya pengunjung bisa tahu nama akun social media kita seperti Facebook, Twitter, Googleplus dan lain-lain. Selain itu juga fungsi social bookmark yang lainnya adalah.

Social Bookmark dapat meningkatkan Search Engine Result Page
Social Bookmark dapat menjadikan artikel yang baru di publikasikan menjadi lebih cepat terindek oleh Searc Engine
Social Bookmark dapat meningkatkan jumlah pengunjung
Social Bookmark dapat menaikkan Page Rank

Anda tertarik ingin membuatnya ? Berikut adalah bagaimana cara membuat widget Social Bookmark melayang dengan efek mouseover.

1. Log in terlebih dahulu ke dahboard blogger sahabat.
2. Pilih blog sahabat
3. Pilih Tata Letak > Tambahkan Gadget > HTML/JavaScript
4. Copy script dibawah ini, dan paste pada HTML/JavaScript

<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#eeeeee;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .rss a{
background-image: url(http://1.bp.blogspot.com/-4S7laHF62YQ/Tw_PIMkhOKI/AAAAAAAAAlo/ClRFpThaRhc/s1600/64x64.png);
}
ul#navigation .facebook a {
background-image: url(http://4.bp.blogspot.com/-Ka2rYCn6aek/Tw_PTwIwT_I/AAAAAAAAAlw/OYXtsA8WG-0/s1600/64x64.png);
}
ul#navigation .twitter a {
background-image: url(http://2.bp.blogspot.com/-i9Y07xmUW30/Tw_PeVz-OkI/AAAAAAAAAmA/rXPOUB9b3Lc/s1600/64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(http://2.bp.blogspot.com/-xBwVNscV7XI/Tw_PYpo43sI/AAAAAAAAAl4/X3iRulYu7Ho/s1600/64x64.png);
}

</style>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

<ul id="navigation">
<li class="rss"><a href="http://BLOG_KAMU.blogspot.com/atom.xml">RSS Feed</a></li>
<li class="facebook"><a href="PROFIL_FACEBOOK">Facebook</a></li>
<li class="twitter"><a href="AKUN_TWITTER">Twitter</a></li>
<li class="googlebookmarks"><a href="AKUN_GOOGLEPLUS">Google Plus</a></li>

5. Sebelum disimpan edit terlebih dahulu dengan akun social media sahabat, dan lainnya

Isikan tulisan yang berwarna merah dengan url akun media social sobat
Jika anda ingin mengubah gambar widget, sobat bisa mengubah tulisan yang berwarna hijau dengan url gambar sobat

6. Simpan pekerjaan anda dan lihat hasilnya pada blog anda.