Blogger Uye ...

Cara Membuat Widget Social Bookmark Melayang Dengan Efek Mouseover

Pada tips blogging kali ini saya ingin berbagi bagaimana cara membuat menu navigasi ke layanan social bookmark dengan efek mouseover. Efek mouseover artinya kalau mouse didekatkan pada obyek tertentu maka akan menghasilkan efek tertentu pula, contoh sederhananya seperti pada drop down menu. Hasil dari widget social bookmark dengan tampilan seperti menu navigasi ini dapat anda lihat langsung pada bagian atas header blog saya ini.

Cara membuat navigasi social bookmark melayang (floating social bookmark widget) :

1. Seperti biasa, login dulu ke dashboard blogger anda.

2. Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3. Copy script widget social bookmark dibawah ini, dan paste pada gadget.

$('#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>
<li class="e-mail"><a href="<div style="color: red;"YAHOO!-ACCOUNT">Yahoo!</a></li>
</ul>

4. Silahkan edit link akun social bookmark yang ada pada script, sesuai dengan akun social bookmark yang sobat miliki.

5. Simpan / Save gadget

Widget social bookmark melayang dengan efek mouseover ini sebenarnya dapat juga ditempatkan secara permanen pada template anda. Nah buat sobat blogger yang punya hoby ngutak-ngatik template, cobalah bereksprimen melakukannya. Yang pasti sobat harus menempatkan menu navigasi social bookmark tadi diatas menu blog yang ada pada header. Selamat bereksprimen ya..:D

Artikel Lain Yang Berkaitan :

Blogger Uye ...

Selasa, 11 Desember 2012

Tidak ada komentar:

Posting Komentar