Cara Membuat Widget Social Bookmark Melayang Dengan Efek Mouseover -->

Kategori Jawaban

Iklan Semua Halaman

Cara Membuat Widget Social Bookmark Melayang Dengan Efek Mouseover

@FauziTMG
4/28/2012
Question/ Pertanyaan/ Soal:

Cara Membuat Widget Social Bookmark Melayang Dengan Efek Mouseover?

Answer/ Kunci Jawaban:
Cara membuat widget social bookmark melayang dengan efek mouseover . Maksud mouseover adalah sama seperti navbar yang "turun" beg.... Baca selengkapnya di JAWABAN.xyz

Jelaskan tentang Cara Membuat Widget Social Bookmark Melayang Dengan Efek Mouseover?

Penjelasan:
Cara membuat widget social bookmark melayang dengan efek mouseover. Maksud mouseover adalah sama seperti navbar yang "turun" begitu di kursor. Jika membahas masalah ini, kita akan bertemu lagi dengan social bookmark. Tetapi, menurut saya pribadi, widget ini sangat menarik karena tampilannya yang membuat para pembaca tercengang ketika melihat widget saya, dan sobat mungkin perlu mencoba widget yang satu ini. Nah, untuk contohnya, bisa dilihat di bawah sini


Langsung saja ikutin prosedur di bawah ini :
1. Login ke blogger
2. Masuk ke Rancangan >> Add Gadget >> HTML Java Script
3. Paste-kan kode di bawah ini pada gadget

<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: 0px;
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://ALAMAT BLOG SOBAT/atom.xml">RSS Feed</a></li>
<li class="facebook"><a href="ALAMAT FACEBOOK SOBAT">Facebook</a></li>
<li class="twitter"><a href="ALAMAT TWITTER SOBAT">Twitter</a></li>
<li class="googlebookmarks"><a href="https://www.google.com/bookmarks/">Google</a></li>
</ul>
4. Jika sudah Oke, tinggal save

Nb : Untuk huruf yang bercetak biru harap ganti dengan kepunyaan sobat
  • Alamat Facebook : Profil sobat, contoh : http://www.facebook.com/profile.php?id=100000130062770
  • Alamat Twitter : Profil sobat juga, contoh : https://twitter.com/#!/gunkde_hoppus 
Untuk yang lainnya, ganti sesuai keinginan

Selamat Mencoba