Cara Membuat Menu Navigasi Slide Out

April 1, 2013

Cara Membuat Menu Navigasi Slide Out

Halo sob...

Di pagi hari yang cerah ini saya mau share mengenai sebuah tampilan blog yang cukup menarik. Ya, dengan menggunakan menu navigasi slide out ini maka tampilan blog temen-temen akan lebih berbeda dan sedikit elegan, hehehe... Oiya sob, cara ini sendiri saya pelajari dari tipsfaenblog dengan melakukan sedikit kustomisasi.

Ok, untuk contohnya sendiri bisa temen-temen lihat penampakannya dibawah atau bisa dilihat di DEMO.

Langsung aja sob, kita praktek nya biar ga ketiduran denger saya intermezzo...

1. Login ke blogger.

2. Pilih Template - Edit HTML - Centang Expand Template Widget.

3. Cari kode ]]></b:skin> dan kemudian letakkan kode berikut tepat 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixQbshnaB8LhuikwOSS2KdwrHtaJ4C10fkEgJY8eYeMg_ay-jaU0ML47PdeyNi2V1bcHO-VMAM5_Wv16MOk5_OFB7WDWn7nj8hdCdi1CMhhimo05baNTtq7GtCwyGdMCoAMM9ufHvtnQY/s1600/home.png);
}
ul#navixed .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGmRglnzLzziaZk7cXFhGxYBQUEt-vMobdiFqHfAZ0H8eWIzXlpLaI_C5r_lUKILA6EaBTbh8-rIBhEwfCALmikZBgshlxO_mGN3gp-CyvqegYRn85kSl1ncEzbGDoWwi-ofm6ZVjQbwc/s1600/id_card.png);
}
ul#navixed .rssfeed a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRtQuon_NklcEX77Le5Tm7598M6xlLeWOcjVUYPlsCx5rywQ6ClfSgurPhJUv-3L_rq4iB77Wu4GqLgfgWJgKhAWu51KYH2thkVbNqns5NLvLoeQx8OjgpIkSoRoSilg0DDvcq24TEgBc/s1600/rss.png);
}
ul#navixed .contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8QHqOPstUfEAf4jjX2fT3UJiSWNl2FTSG8W1MDKtqHiQkdJkdT3z5qUvTWFMsBbx2-jLV29BWB-iZbKOmV6RvcBcOWQ3KlcLzRC_fDH-t_-sw8jY9qhIma8aw5wYM8qlMW5lUNTwTNAM/s1600/mail.png);
}

4. Selanjutnya cari kode </head> dan letakkan kode berikut tepat diatasnya :


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script src='http://faencool.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>

5. Selesai??? Belum sob.. Cari kode <body> atau </body> dan kemudian letakkan kode berikut diatasnya :


<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='rssfeed'><a href='#'><span>Rss Feed</span></a></li>
<li class='contact'><a href='#'><span>Contact</span></a></li>
</ul>

6. Pratinjau -->> Kalau tidak ada masalah maka Simpan Template.

7. Enjoy.

*Keterangan : Ganti kode berwarna biru dengan link masing-masing menu milik temen-temen.

Gimana sob??? cukup mudah yah... kan tinggal copy paste saja, tapi kalau mau melakukan kustomisasi silahkan di obrak abrik sendiri kode-kode nya ya sob...

Terima kasih, semoga bermanfaat...Jangan lupa tinggalkan komentar...

18 comments

Heru Bambang Panca DarmaApril 7, 2013 at 6:24 PM
makasih info nya,,,bisa buat di coba entar nie ahihihi
ReplyDelete
Replies
Ariel NichoApril 13, 2013 at 4:45 PM
Mohon Demonya ya sobat..

demo yang diatas tdk jelas..
thx :)

mohon kunjungan baliknya..
http://lavixtastar.blogspot.com
ReplyDelete
Replies
Ariel NichoApril 13, 2013 at 7:14 PM
owh, iya sobat..
satu lagi nih..
cara membuat kata2 sekaligus emoticon yang ada di atas form komentar sobat ini gimana ya?
ReplyDelete
Replies
UnknownApril 16, 2013 at 4:39 PM
:-bd saya sudah liat di blog nya gan...
ReplyDelete
Replies
UnknownApril 25, 2013 at 12:43 PM
terima kasih infonya sista...
izin nyoba tutorialnya.
:)
ReplyDelete
Replies
Misi mommyMay 24, 2013 at 11:57 PM
thanks... menjadi...
ReplyDelete
Replies
CikoJune 7, 2013 at 7:52 AM
loadingnya berat nggak gan?
ReplyDelete
Replies
UnknownAugust 30, 2013 at 3:52 PM
saya coba dulu deh kk ,

http://memolodys.blogspot.com/2013/08/rumah-adat-papua-struktur-dan-fungsi.html
ReplyDelete
Replies
cord gitarOctober 20, 2013 at 12:38 PM
wihh kerenn, saya coba ya
ReplyDelete
Replies
UnknownMarch 31, 2014 at 4:09 PM
mantap gan, terima kasih banyak ya atas ilmunya.. :)

http://www.jamtanganori.com
ReplyDelete
Replies

Add comment