Blog Walking to Malaysia

Sobat blogger satu ini masih serumpun dengan kita nih. Blogger dari negara malaysia, negara terkenal dengan film animasi Ipin & Upin betul...3x Cocok bagi blogger yang memang membutuhkan artikel tutorial, trik, hack dll mengenai menghiasi blog supaya gaya punya, dari dasar sampai yg asoy punya :"> Motto SyamZone™ yaitu "Bukan untuk mengajar tetapi sekadar ingin berkongsi..." ;)) Apaan yak kongsi itu :D Setiap kali mengunjungi sobat-sobat blogger diluaran sana pasti dapat ilmu baru :) Dipadukan dengan kreatifitas yg dimiliki kita bakal jadi deh satu karya indah :P Seperti postingan teranyarnya mengenai Floating SlideOut Social Bookmark. Menu dengan sentuhan jQuery PlugIn, posisi fixed diatas dan nongol ketika kita sorot b-)

Trik ini akan kelihatan cocok bagi yg mempunyai menunya dibawah header! Kalau menu sudah berada pada posisi fixed (diam) diatas mungkin akan terlihat bentrok :D Penerapan tinggal biasa saja sob Add a Gadget ► HTML/Javascript Jadi kalau terpakai silahkan pasang, kalau tidak sreg tinggal hapus lagi Add a Gadgetnya :))

Kode Bumbu

<style type='text/css'>
ul#navigation {
list-style-type:none;
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index: 9999;
width: 721px;
}
ul#navigation li {
width: 103px;
display: inline;
float: left;
border: none;
}
ul#navigation li a {
display: block;
float: left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color: #A7A6AA;
background-repeat: no-repeat;
background-position: 50% 10px;
border: 1px solid #333333;
-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: 85px;
opacity: 0.90;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color: #3778DC;
}
ul#navigation li a span{
letter-spacing: 2px;
font-size: 11px;
color: #FFFFFF;
font-family: Trebuchet-ms, Arial, Tahoma, Sans-Serif;
font-weight: bold;
}
ul#navigation .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgO7obI6M4GXoLkkDzu3Y6XAznToYtuba9KJGc6Femaap_W1pRQoYbo9kxTmoqSPcOV7syGQywOBlE4g9iwuk8uwcmullfrvh5Gc3CT9taWMDUEcuMiCIADoA-1l0eZHM1sCKK-OqGv0h0/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZxAIsDnnyyv5M1iSjbq9av6DlP8MAnG3ERa8Br08YYtDWMEo0eRas31RQsBLW0HCbprdxwqRanzWVCfJgVDntjfBRBv0zLRIONUPNJoFsnt95RSLtnZbNYNVIOsuxeDsbfdhOwyvN9OGR/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkwL7AKtas8JC70RxbCrGQJNmtbnQvIJLpemr4xAfbllItAeUJNgX3JOxYCrnZDkQ1w6o-N1k1XM5lzbU1bQKmjvAdDQasErAHG0nnOre-LlX6IRrzrSvAjceNfjrAXJe9yVNOCJt313vx/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcPsWFYhaPJuBTU7OOsl88xWSr_uu1rpJjf4hxJy8-pzq0MEV-wZodhM4S-iozkKSWgCLraMgcBZKHICvl-KlKeS73aNlmp961VCzoPL8-9Ok73JgR3R0pPqQbFUE-P14FuFzXltY1Ards/s400/google_64x64.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKE0cQ9rlP7gbZwPwBg0RboMZurvaUn1LE0rkcFcD0R9A1qTWoh7yNqEUpny-nwAbVs-fRRjqLbkw0BhTh-BvzNeBgZ5tuY0X4EmCoomwvAyGM5-qiVoH8I8At162N9PiAWfadkQfzP_h6/s400/yahoo_64x64.png);
}
</style>

<script type="text/javascript" src="https://somewhere-jquery.js"></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://beben-koben.blogspot.com/feeds/posts/default"><span>Feed Post</span></a>
</li>
<li class="facebook">
<a href="http://www.facebook.com/beben.koben"><span>My Facebook</span></a>
</li>
<li class="twitter">
<a href="http://twitter.com/BebenKoben"><span>My Twitter</span></a>
</li>
<li class="googlebookmarks">
<a href="http://www.google.com/bookmarks/mark"><span>Bookmarks</span></a>
</li>
<li class="e-mail">
<a href="http://www.mybloglog.com/buzz/members/bebenkoben/"><span>My Bloglog</span></a>
</li>
</ul>

NB:

• Script tulisan warna merah
Jangan dipasang lagi jika sudah ada, minimal versi jquery-1.3.2
• Script tulisan warna biru
Gantikan dengan link blog dan ID sobat miliki.

Silahkan acak-acak sanaaa ke blog http://syamzone.blogspot.com/ cari ilmu walau ke ujung malaysia :P