Cara Membuat Menu Navigasi Horisontal Blog

Sudahkan Anda membuat menu horizontal pada blog, rasanya kurang apabila sebuah blog tidak dilengkapi dengan menu horizontal. Selain untuk memperindah tampilan blog, menu horizontal berfungsi untuk memudahkan pengunjung dalam memilih kategori postingan sebuah blog.

Berikut cara membuat menu horizontal di blog :

1. Login akun blogger Anda. 
2. Pilih Template > Edit HTML > klik Expand Template Widget 
3. Cari kode ]]></b:skin> (Gunakan Ctrl – F untuk memudahkan pencarian). 
4. Copy paste kode dibawah ini tepat diatas kode ]]></b:skin>

#tejahtc{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLpX63QZ1-eCW-yZUGOjk4kaldirTw_ACbHTk6FgIPdeM7emU6TFW6mnlnbQbcZKl1V_JqYu3a7SvYxhq_yo4nOTyG6HPhFVRAf5nRGEYykkyh0cBXZe4lDzvnPhjeqcYSdJlndWziNFyd/s1600/catmenu.jpg) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}

#tejas{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLpX63QZ1-eCW-yZUGOjk4kaldirTw_ACbHTk6FgIPdeM7emU6TFW6mnlnbQbcZKl1V_JqYu3a7SvYxhq_yo4nOTyG6HPhFVRAf5nRGEYykkyh0cBXZe4lDzvnPhjeqcYSdJlndWziNFyd/s1600/catmenu.jpg) repeat-x;
height:33px;
}

#tejas ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#tejas li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#tejas li a, #tejas li a:link, #tejas li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}

#tejas li a:hover, #tejas li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Dz4hYSXGkq0ulxsMQRVQCPT4h4UZ7hjq-2KncjVQ1TbP79LYV7eC_ZiO2B2kk4FrbD5vzG2uxs_iXlGj799b8k8EoHjlHyRUoscJ7NvcPdvZb0fBlRSCY8zz3ylewCXLUu05E0do8wPz/s1600/aexpfq.jpg) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}

#tejas li li a, #tejas li li a:link, #tejas li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;
}
#tejas li li a:hover, #tejas li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Dz4hYSXGkq0ulxsMQRVQCPT4h4UZ7hjq-2KncjVQ1TbP79LYV7eC_ZiO2B2kk4FrbD5vzG2uxs_iXlGj799b8k8EoHjlHyRUoscJ7NvcPdvZb0fBlRSCY8zz3ylewCXLUu05E0do8wPz/s1600/aexpfq.jpg) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}

#tejas li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#tejas li li {
}

#tejas li ul a {
width: 140px;
}

#tejas li ul a:hover, #tejas li ul a:active {
}

#tejas li ul ul {
margin: -34px 0 0 170px;
}

#tejas li:hover ul ul, #tejas li:hover ul ul ul,
#tejas li.sfhover ul ul, #tejas li.sfhover ul ul ul {
left: -999em;
}

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

#tejas li:hover, #tejas li.sfhover {
position: static;
}

Keterangan:
Sesuaikan lebar menu 1000px dengan ukuran template blog Anda. 

5. Selanjutnya letakkan kode berikut dibawah kode <div id='content-wrapper'> atau copy kode tersebut pada HTML/JavaScript dan letakkan dibawah header.

<div id='tejahtc'>
<div id='tejas'>

<ul>
<li><a href='http://suwiryo212.blogspot.com/'>Home</a></li> <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1</a>
<ul class='children'>
<li><a href='Link Anda di sini!' title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='Link Anda di sini!' title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='Link Anda di sini!' title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='Link Anda di sini!' title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='Link Anda di sini!' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='Link Anda di sini!' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Link Anda di sini!' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Link Anda di sini!' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='Link Anda di sini!' title='Link-Title'>Link-Name-3</a>
<ul class='children'>
<li><a href=Link Anda di sini!' title='Link-Title'>Link-Name-3-1</a></li>
<li><a href='Link Anda di sini!' title='Link-Title'>Link-Name-3-2</a></li>
<li><a href='Link Anda di sini!' title='Link-Title'>Link-Name-3-3</a></li>
</ul>
</li>
<li><a href='Link Anda di sini!' title='Link-Title'>Link-Name-4</a></li>
<li><a href='Link Anda di sini!' title='Link-Title'>Link-Name-5</a>
<ul class='children'>
<li><a href='Link Anda di sini!' title='Link-Title'>Link-Name-5-1</a></li>
<li><a href='Link Anda di sini!' title='Link-Title'>Link-Name-5-2</a></li>
<li><a href='Link Anda di sini!' title='Link-Title'>Link-Name-5-3</a></li>
<li><a href='Link Anda di sini!' title='Link-Title'>Link-Name-5-4</a></li>
</ul>
</li>
<li><a href='Link Anda di sini!' title='Link-Title'>Link-Name-6</a>
<ul class='children'>
<li><a href='Link Anda di sini!' title='Link-Title'>Link-Name-6-1</a></li>
<li><a href='Link Anda di sini!' title='Link-Title'>Link-Name-6-2</a></li>
</ul>
</li>
<li><a href='Link Anda di sini!' title='Link-Title'>Link-Name-7</a></li>
<li><a href='Link Anda di sini!' title='Link-Title'>Link-Name-8</a></li>
</ul>

</div>
</div>

<div class='clear'/>

Keterangan:
Ganti tulisan yang berwarna merah dan 'Link Anda di sini!' dengan link kategori blog Anda, contoh seperti dibawah ini.
'http://suwiryo212.blogspot.com/search/label/DESIGN%20BLOG'
Ganti tulisan link name dengan judul kategori atau apapun agar tampilan menu terlihat menarik, begitu juga link title bisa Anda samakan dengan link name. 

6. Simpan template.

Tweet