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...!!!!!
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)
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...
/*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...
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..