Subscribe to our RSS Feeds
Hello, selamat datang di rumah blog saya. Komputer adalah jantungku dan hidupku belum lah sempurna bila belum kujelajahi seisi dunia tanpa harus menuju kesana. Nikmati perjalanan anda dengan berpetualang ilmu di dunia blog saya ini.

**Jangan Lupa Follow Ira Chan Yaahh**



Cara Membuat Slide Out Navigation pada Blogger Agar Menarik

0 Comments »

Hallo, yuk kita buat menu slide out navigation yang keren buat blogger kamu


Kalo tertarik yuk ikutin caranya berikut :
  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Simpan kode berikut diatasnya :
/*—————- Beautiful Slide Out Navigation ——————————-*/ .headerfixed { width:600px; height:56px; position:absolute; top:50%; left:10px; background:#fff url(title.png) no-repeat top left; } ul#navixed { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 10px; list-style: none; z-index:999999; width:721px; } ul#navixed li { width: 103px; display:inline; float:left; } ul#navixed li a { display: block; float:left; margin-top: -2px; width: 100px; height: 25px; background-color:#000; 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.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } ul#navixed li a:hover{ background-color:#000; } ul#navixed li a span{ letter-spacing:2px; font-size:11px; color:#FFF;}
ul#navixed .home a{
background-image: url(http://3.bp.blogspot.com/-aXrFVyf4QsA/TZBebt8Z8jI/AAAAAAAAAgY/wHMKwyDH86g/s1600/home.png);
}
ul#navixed .about a      {
background-image: url(http://4.bp.blogspot.com/-U0VzmKiVx3k/TZBeclR4x5I/AAAAAAAAAgc/c6T4Q-__HTw/s1600/id_card.png);
}
ul#navixed .search a      {
background-image: url(http://2.bp.blogspot.com/-84f0jEeeffc/TZBehJq90AI/AAAAAAAAAgs/w4UaF1VPgLs/s1600/search.png);
}
ul#navixed .podcasts a      {
background-image: url(http://1.bp.blogspot.com/-sbloKktswgc/TZBed0gK93I/AAAAAAAAAgg/avwmYOErpGI/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
background-image: url(http://1.bp.blogspot.com/-Ro686lePoM8/TZBef9OyGcI/AAAAAAAAAgo/e_QaROPLVx0/s1600/rss.png);
}
ul#navixed .photos a     {
background-image: url(http://3.bp.blogspot.com/-fi5XP0zvpB8/TZBeael-n5I/AAAAAAAAAgU/bwS_VlGvi-U/s1600/camera.png);
}
ul#navixed .contact a    {
background-image: url(http://4.bp.blogspot.com/-RTxgq3NFIYM/TZBeei8J4-I/AAAAAAAAAgk/Zgo-9V-JXss/s1600/mail.png);
}
dan simpan script ini di atas kode </head> :
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’/>
<script src=’http://asenkdotcom.googlecode.com/files/jcolor.js’/>
<script type=’text/javascript’>
$(function() {
var d=300;
$(&#39;#navixed a&#39;).each(function(){
$(this).stop().animate({
&#39;marginTop&#39;:&#39;-80px&#39;
},d+=150);
});$(&#39;#navixed &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({
&#39;marginTop&#39;:&#39;-2px&#39;
},200);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({
&#39;marginTop&#39;:&#39;-80px&#39;
},200);
}
);
});
</script> 
terakhir simpan cara pemanggilannya di atas kode <body>:
<ul id=’navixed’>
<li class=’home’><a href=’#'><span>Home</span></a></li>
<li class=’about’><a href=’#'><span>About</span></a></li>
<li class=’search’><a href=’#'><span>Search</span></a></li>
<li class=’photos’><a href=’#'><span>Photos</span></a></li>
<li class=’rssfeed’><a href=’#'><span>Rss Feed</span></a></li>
<li class=’podcasts’><a href=’#'><span>Podcasts</span></a></li>
<li class=’contact’><a href=’#'><span>Contact</span></a></li>
</ul>
selesai… jangan lupa simpan template ya, selamat mencoba

StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google Twitter FaceBook

18.01

0 Responses to "Cara Membuat Slide Out Navigation pada Blogger Agar Menarik"

Poskan Komentar