Mau tau cara buat yang seperti ini, silahkan klik disini

widget by Kianhome
Menu Navigasi seperti sebuah tombol pemberitahuan agar kita lebih mudah untuk menentukan kemana kita akan mencari informasi pada blog yang kita punya atau blog yang kita kunjungi...wuih kayak puisi aja heeee....

Pada dasarnya banyak sekali para suhu blogger yang sudah memberikan beberapa tips mengenai menu navigasi dan bagaimana cara membuatnya, nah mengijuti jejak mereka kian mencoba membagi satu buah tips lagi sama kamu untuk membuat menu navigasi diantara header..

Kita langsung saja ya...!!!!!

Pertama tama kamu Copy kode berikut dan letakkan diatas kode ]]></b:skin> (tapi kamu usahakan dulu cari kode header dan letakkan kodenya berada dibawah kode Header)
/*Page menu*/

#foxmenucontainer{
height:34px;
background:#000000;
padding:0px 0 0px 0px;
font: 12px Georgia,Century gothic,verdana, Arial, sans-serif;
font-weight:normal;
text-transform:uppercase;
}
#menu ,#menu ul {
margin: 0px 5px 0px 5px;
padding: 0px;
list-style: none;
height:34px;
}

#menu a {
color: #111;
display: block;
font-weight: normal;
padding: 10px 10px 10px 10px;
}

#menu a:hover {
color: #fff;
display: block;
text-decoration: none;
}

#menu li {
float: left;
margin: 0px 0 0px 0;
padding: 0px;
}

#menu li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 130px;
}

#menu li li a, #menu li li a:link, #menu li li a:visited {
background:#5D0909;
width: 150px;
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
color:#DFC3C3;
}

#menu li li a:hover, #menu li li a:active {
background:#971515;
width: 150px;
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
color:#d7a1a1;
}

#menu li ul {
position: absolute;
width: 150px;
left: -999em;
z-index:200;
}

#menu li:hover ul {
left: auto;
display: block;
}

#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}

/* Category menu*/

#catmenucontainer {
height:34px;
background:#000000;
display:block;
padding:0px 0 0px 0px;
font: 12px Georgia,Century gothic,verdana, Arial, sans-serif;
font-weight:normal;
text-transform:uppercase;
}

#catmenu {
margin: 0px 0px 0px 0px;
padding: 0px 15px;
list-style: none;
height:34px;
}

#catmenu ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px;
list-style: none;
height:34px;
}

#catmenu a {
color: #444;
display: block;
font-weight: normal;
padding: 10px 10px 9px 10px;
}

#catmenu a:hover {
color: #D40404;
display: block;
text-decoration: none;
}

#catmenu li {
float: left;
margin: 0px 0px;
padding: 0px 0px;
}

#catmenu li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px;
width: 150px;
}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#DEDCDD ;
width: 150px;
float: none;
margin: 0px 0px;
padding: 7px 10px 7px 10px;
color:#555;
}

#catmenu li li a:hover, #catmenu li li a:active {
background:#fff ;
width: 150px;
float: none;
margin: 0px;
padding: 7px 10px 7px 10px;
color:#D40404;
}

#catmenu li ul {
position: absolute;
left: -999em;
z-index:200;
background:#444444;
width:170px;
}

#catmenu li:hover ul {
left: auto;
display: block;
}

#catmenu li:hover ul, #catmenu li.sfhover ul {
left: auto;
}

setelah semua kode tercopy dan kamu paste kedalam layouts edit html blog kamu, selajutnya adalah copy lagi kode berikut untuk meletakkan link yang akan kita pasang, sebagai catatan letakkan kode berikut setelah kode :<div id='wrapper'>
<!-- Foxmenucontainer -->
<div id='foxmenucontainer'>
<div id='menu'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
</ul>
</div>
</div>
<!-- /Foxmenucontainer -->
<div class='clear'></div>

Navigasi yang pertama adalah navigasi diatas header, sedangkan yang berikut ini adalah menu navigasi yang akan kita letakkan di bawah / setelah header..

<!-- Catmenucontainer -->
<div id='catmenucontainer'>
<div id='catmenu'>
<ul>
<li><a href='LINK HALAMAN' >JUDUL LINK</a>
<ul class='children'>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
</ul>
</li>

<li><a href='LINK HALAMAN' >JUDUL LINK</a>
<ul class='children'>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
</ul>
</li>

<li><a href='LINK HALAMAN' >JUDUL LINK</a>
<ul class='children'>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
</ul>
</li>
<li><a href='LINK HALAMAN' >JUDUL LINK</a>
<ul class='children'>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /Catmenucontainer -->

<div class='clear'></div>

Setelah semua kode tercopy semua paste dan Simpan
kemudian lihat hasilnya...

Share to :

Related Post :


About the Author :

K'ian is a designer, web tutorial design, and blogging enthusiasts. Tutorial blog debut the first time when entering college, when I get to know the world wide internet and so much more. Now I work at one of the state trading company, a job that would conflict with the world of blogging and web design. Today remains a serious manage blog " Kolam Blogging Tips | Kianhome ".

0 Response to "Menu Navigasi diantara Header"

Post a Comment

Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..


Berita Terkini

Friend Follower's

Tips Health

Techno

Hot Nasional

Celebrity

My Blog List

Recent Comment

© Copyright 2011 | Dikelola sepenuhnya oleh : Kiancoi
KianHome Member of PlanetBlog | SitusBersih | Support on Mozilla Firefox and Google Crome Browser
Home | Posts RSS | Comments RSS | Sexy Blog |