Cara Membuat Tombol Social Bookmark Melayang

Bertamasya ke blog para blogger adalah kegemaran saya, untuk menkais ilmu-ilmu yang saya butuhkan. Dari blog yang berisi tutoril blog sampai blog yang berisi tentang pengetahuan perbankan dan akuntansi. Ketika saya berkunjung ke blog yang berisi terntang tutorial blog, saya coba mengobrak-abrik daftar isinya, nah dari situ saya mendapatkan ilmu tentang Cara Membuat Tombol Social Bookmark Melayang. Kelihatannya menarik..??? itulah yang ada dalam benak saya, sehingga saya mencoba menerapkannya kedalam blog yang saya miliki. Eh... ternyata berhasil dan berfungsi. Untuk itu saya ingin berbagi kepada Anda bagai mana cara membuatnya.

Tidak sulit Anda cukup mengikuti langkah demi langkah seperti yang akan saya jelaskan dibawah ini :

1. Login ke Blogger

2. Pilih Template > Elemen Laman > Add gadget/tambah gadget lalu pilih HTML/JavaScript

3. Masukkan kode di bawah ini :

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_spEWtYjCOdDOCC5hmv4n6ZggJZh5X8mvpFBuiRtGrWGrYAFXAgaejkkqI5ERloQcjWdyUsCm0y1WWKO2FHe8eQc8EQSU0NodBIVQmpGU34PjnK6C_dF27BaeV71klKoKJ8I6gpO880HE/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi47v2UN3XDfu1Fa-6rpzZyi_DEmW0NJCfYUE5J4Y1IzvWaJyVjEJ0hfY8k8I5j2AZz4h-EOLsrjjZ8lkEVXJ9GpMQu5yK_jCQv3mMo0Fq1gc6o9F_A7RQsShWdYIS60ZaxhibfkgpNj7GI/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRoQCdVSRk_yZ7CVwHB0WL94qf2hqWZA0mIBYoS7SB0GjU7-jUqxTaxgqRCRgjGtErtVJdyP4gl41ldtpoRmK6iyX599FVfCAfMH8-r_R-GSIhxqoXiF-IQajdtj7EaJGKGs5UmhlQhOPu/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJEThGCgymhoOwVqlvtDxz3MMCjR9jpjOqn-OBJpZJLWsI4ZKdyJ41c7zziLcfY6EztfCV2ikAwOugbPCqAu1opK07xjzBHSqutWNqJv4GNpSPDDEb27XByqUUMM6KjLVWDA2MhY7tEY_z/s400/google_64x64.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDxgd1SaaGaswzftXUXV1n-qyE6XP5QZmN_6dA6L6PXp4RLij2Fk-mRn_i_H5fhx2HZJbVUM1mGYY5sKJ2i9QwjdpJMa6WGOfArurDP7anCpNJ7YCPV_nPqjS1gwZbFaYwg4XpQbXoTxpF/s400/yahoo_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://YOUR-BLOG.blogspot.com/atom.xml">RSS Feed</a></li>
<li class="facebook"><a href="FACEBOK-PROFILE">Facebook</a></li>
<li class="twitter"><a href="TWITTER-ACCOUNT">Twitter</a></li>
<li class="googlebookmarks"><a href="https://www.google.com/bookmarks/">Google</a></li>
</ul>

4. Ganti tulisan yang berwarna merah dengan link blog, akun fb, akun twetter dan akun yahoo Anda.

5. Jangan lupa di SAVE

Gimana ?

Jika anda sudah berhasil jangan lupa memberikan komentarnya ya..

Selamat mencoba....

Share :

Tweet

More

Related Post