Cara memasang widget floating social bookmark efek mouseover

Cara memasang widget floating social bookmark efek mouseover

Di liburan ini saya akan menerbitkan post tentang "Cara memasang widget social bookmark efek mouseover". Di widget ini letaknya di atas dan bila mouse di arahkan ke widget tersebut akan keluar widgetnya itulah yang dimaksud dengan efek mouseover. Kita telah banyak menjumpai widget ini di berbagai situs. Namun designnya yang berbeda - beda. Jika ingin tau lebih jelas lagi silahkan lihat demonya Disini. Sobat ingin tau cara memasang widget ini? Langsung saja kita ke TeeKaaPee:

1. Login pada blog sobat
2. Tata Letak
3. Tambah Gadget
4. Html / Javascript
5. Copy kode di bawah ini dan pasang di blog sobat
<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: 90px;
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://2.bp.blogspot.com/_znjmv4LDwck/Sj_axehjkOI/AAAAAAAAA9c/nk9FGYOz-X4/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(http://4.bp.blogspot.com/_znjmv4LDwck/Sj_bXRRRXzI/AAAAAAAAA98/HIXOZAkEyqY/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(http://1.bp.blogspot.com/_znjmv4LDwck/Sj_cLDgz2cI/AAAAAAAAA-E/Nc04OTHnR48/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(http://1.bp.blogspot.com/_znjmv4LDwck/Sj_ak6NscZI/AAAAAAAAA9M/rqTYrs6mybg/s400/google_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>

<br />
<ul id="navigation">
<li class="rss"><a href="http://Blog Kamu.blogspot.com/atom.xml">RSS Feed</a></li>
<li class="facebook"><a href="http://Ganti Dengan Url Akun Facebook Kamu">Facebook</a></li>
<li class="twitter"><a href="http://Ganti Dengan Url Akun Twitter Kamu">Twitter</a></li>
<li class="googlebookmarks"><a href="https://www.google.com/bookmarks/">Google</a></li>
</ul>
6. Simpan widget dengan tanpa judul

Selamat Mencoba!!!
Cara memasang widget floating social bookmark efek mouseover
Writter: Reggy Zian Purnama
DMCA.com Orang pandai tau tata krama. Dilarang copy paste artikel tanpa seizin penulis!

10 comments Skip to comments

gan pasang widgetnya di bagian mana

dimana saja boleh sob, tapi jangan pakai judul

gimana cara ngatur posisinya gan???

agan mau posisi dimana? tapi gabisa gan. Posisi yang bisa hanya di atas . .

posisinya ga bisa di ubah ya mas,,

keren mas :)

thanks ya , Blogwalking ^^ saktianjrs.blogspot.com

bagus bgt dh sy cara2 diatas brhasil, tp sy mau nanya gan, knp jd g bsa meng-klik "New Entry" dan jg "Design"?mhon bntuanx hrus bgmana!

Best to try supaya ga terlalu penuh widget di page hehehe, saya coba mods nya yah bro

THX

Berkomentarlah dengan baik dan sopan. Dilarang oot dari artikel diatas. Komentar yang menyertakan link aktif maupun statis termasuk promosi akan langsung kami hapus.
Show Konversi Kode Hide Konversi Kode Show Emoticon Hide Emoticon