◄ Min  Size Fonts: + | - | ± Color: Max ►

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 GadgetHTML/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/AVvXsEjOeM0noYcdDb_XjpSNbndaYZF1FyJoai4HbSm_RX7eSlI1oDwXufx9aWhBp8uuGCIqJ-cESWzpbPhxrnWYx398GijTAtsqakTCixi_m2Hf8_Ahrgwr8Kp_gJJu3nPwnyVoSPfJmHhPzCZo/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu4H4ID4Nt3UiWA7InlM40nztjoI-w5WsDHLL2OQiMfAcsaE0pmY8EmUoRDHgx8yeDOY-BK7FxnuNoy13vybfX0JVIblRh81HJWW5TQr5zuUFVAQZYdLI6Br1WCtbh7_RgaDU2Ji1TKf1Y/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyzy8w6KVdQrTAIlNT64OrbvGlMdSjIvwm4zHqYx3wnFPu9txLXC_rreXMMSzOg_FJl0H0gsrp9Y_QHmjyK5-6632fMJGG8wgmBYMwwZXZEfs2eyg2a3iQUAWP72aUN2n1QiPn5nRUka6y/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh42DW_9iyw6RncErsBW9973Qw-EY57iw4rUXs-fqMd5ncI181205Ty6MXvWu3Z9Nbmgm6MVMb5Fz3UWTA2auYfCINw4xGYo6e0woPRuCYbKqpj-FclUfxjkekV_JTi0xe5VABoXwt-5wPL/s400/google_64x64.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGRrIypUUn5aCiYpx6VDAyaImG1AmoW5jNPH25CUciAkFawOdmq6A3UQRXAOg3jvLQZyV9RmaW0mpp3jpwmowVzpE_jXTzcsAJJCK439rKejlouctR2cyQ9LGBXx19ws37DOJJvaTeb_6-/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
Loading...
XBlog Walking to Malaysia

Subscribe my posts Register For Free!

6 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE