◄ 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(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);
}
ul#navigation .e-mail a {
background-image: url(http://2.bp.blogspot.com/_znjmv4LDwck/Sj_asJdgxzI/AAAAAAAAA9U/Qjz2LuzIaPE/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/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE