Cara Membuat Menu dan Sub Menu Horisontal Pada Blog

Sedikit saya mengutip dari mas andres yaitu menu horisontal sederhana dengan kode CSS yang tidak terlalu banyak maka membuat menu ini tidak terlalu rumit seperti mega menu yang mempunyai banyak sub menu.

Pada Tampilan blog bagi para bloger sangat diutamakan demi kenyamanan pembacanya dan juga menu yang di sediakan akan mempermudah pembaca untuk mengetahui daftar menu yang ada pada blog.

Menu navigasi horisontal dengan CSS yang sederhana ini terdapat dua pilihan menu beserta demo yang ada dibawah agar tidak penasaran sebelum memasang mungkin bisa terlebih dahulu dengan melihat demonya. Tampilan yang ramping dan masih sederhana serta source kode yang simple bisa menjadi tahap dasar untuk permulaan belajar, khususnya saya pribadi dan pemula lainnya untuk melangkah lebih jauh lagi dalam belajar mengolah kode dan mempercantik tampilan blog. Untuk penjelasan lebih lanjut, maka berikut tutorial untuk Cara Membuat Menu dan Sub Menu Horisontal Pada Blog.

Langsung saja ke tahap-tahapnya :
1. Login ke akun blogger.
2. Masuk menu Template lalu pilih Edit HTML.
3. Copy kode berikut ini lalu paste di atas kode ]]></b:skin> kemudian Simpan Template.
jika kesulitan mencari ]]></b:skin> maka cari dengan CTRL+F

div.redmenu{ background:#9A0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbmElVR13V8PNN917w9ig3Mtjk9M0IYdOhJR6hgW5DaBNvjo5xdKd7Tot_9Lx262W_nxCQhZJHenijzehEID5T9i1MoVaH0xVC5OkTOAbYpbZ07Bz8-ef-QCN5HDis02qB22Cej-Zwn7s/h120/bg1.gif); border:1px solid #000; font-size:0; }
div.redmenu a{ display: inline-block; padding: 0 20px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqdCMtSpNHNoJGC9i39TzhCZjYu4xKig2GnZ3YmG-ZjUgTkkksJhRFJzPs0Df44NoVwtyAnUj4a27GfY3cc9mo1HIFar_38vBLsLVOKU4EfBjLQ26C_-LCHIkAy58U44ByrJ4TvEUAIgo/h108/bg.gif); color:#fff; text-decoration:none; font: bold 12px Arial; line-height: 32px; }
div.redmenu a:hover, div.redmenu a.current{ background-position:0 -60px; }
div.redmenu a.end{ width:2px; padding-left:0;padding-right:0; }

4. Lalu langkah selanjutnya untuk menampilkan Menu Navigasi Horisontal di Blog caranya copy kode berikut ini, kemudian klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode tersebut didalamnya.

<div class='redmenu'>
<a expr:href='data:blog.homepageUrl' class='current'>Home</a>
<a href='http://nurqoyyim12.blogspot.com'>Menu 1</a>
<a href='http://nurqoyyim12.blogspot.com'>Menu 2</a>
<a href='http://nurqoyyim12.blogspot.com'>Menu 3</a><a href='http://nurqoyyim12.blogspot.com'>Menu 4</a><a href='http://nurqoyyim12.blogspot.com'>Menu 5</a><a class="end">&nbsp;</a>
</div>

Keterangan:
Ganti http://nurqoyyim12.blogspot.com dengan URL label blog anda.

5. Langkah terakhir klik Simpan, maka selesai dan seperti ini nanti hasilnya dari Cara Membuat Menu dan Sub Menu Horisontal Pada Blog.

Home Menu 1 Menu 2 Menu 3 Menu 4 Menu 5 mkjh

Atau apabila ingin menggunakan Menu Navigasi Horisontal Blog dengan warna lain seperti yang ada dibawah, maka langkah-langkah penerapannya seperti pada yang sudah tertera di atas. Berikut ini live demo beserta source kode menu navigasi horisontal blog.

CSS*

#bluemenu { border: solid 1px #39F; background:#64DAFC url(https://lh6.googleusercontent.com/-7AqqOE7ofpk/Ui2rcZ8HbVI/AAAAAAAAGHg/JKehF4xo7iM/h120/bluebg.gif) repeat-x; }
#menublues{ font-size:0; } 
#menublues ul, #menublues li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; }
#menublues a{ text-align: center; display: inline-block; font: normal 12px Arial; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgomP0t1pdn__Pl_k2nYzOj87UWbhan1vbpSsF9819q7GDj0cNu42FGeb-zqR9TbAo2wgf-p1yab3NydJuKacT42n8dBskeBdbwLXQQLSHLay-6ABj2q-a1kFakJDrbw3Lc-tRMvPEY0Kg/h108/blue.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; }
#menublues a:hover, #menublues a.current{ background-position: 0% -60px; color: #fff; }
#menublues a.end{ width:2px; padding-left:0;padding-right:0; }

HTML*

<div id='bluemenu'>
<div id='menublues'>
<ul>
<li><a expr:href='data:blog.homepageUrl' class='current'>Home</a></li>
<li><a href='http://nurqoyyim12.blogspot.com'>Menu 1</a></li><li><a href='http://nurqoyyim12.blogspot.com'>Menu 2</a></li><li><a href='http://nurqoyyim12.blogspot.com'>Menu 3</a></li><li><a href='http://nurqoyyim12.blogspot.com'>Menu 4</a></li><li><a href='http://nurqoyyim12.blogspot.com'>Menu 5</a></li><li><a class='end'>&nbsp;</a></li>
</ul>
</div>
</div>

CSS*

#greenmenu { border: solid 1px #52e052; background:#64DAFC url(https://lh4.googleusercontent.com/-84N8in2YMCc/UjS0YrTZQ7I/AAAAAAAAGJc/fWb8wN23bAg/h120/greenbg.gif) repeat-x; }
#menugreen{ font-size:0; } 
#menugreen ul, #menugreen li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; }
#menugreen a{ text-align: center; display: inline-block; font: normal 12px Arial; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgafIhIVxK5eV6KtM75vzy9IFd1x54YPvrUyO_fB0BfAigubh5EVfMJ0_dN5FtYXbHQsRggcR9fljS_TA9Km6G8QCYTUAPylZLWCGHIt03ZDQcSiFMfvSrEe8vLWdYssDPnBNE9Jap2_ZE/h108/green.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; }
#menugreen a:hover, #menugreen a.current{ background-position: 0% -60px; color: #fff; }
#menugreen a.end{ width:2px; padding-left:0;padding-right:0; }

HTML*

<div id='greenmenu'>
<div id='menugreen'>
<ul>
<li><a expr:href='data:blog.homepageUrl' class='current'>Home</a></li>
<li><a href='http://nurqoyyim12.blogspot.com'>Menu 1</a></li><li><a href='http://nurqoyyim12.blogspot.com'>Menu 2</a></li><li><a href='http://nurqoyyim12.blogspot.com'>Menu 3</a></li><li><a href='http://nurqoyyim12.blogspot.com'>Menu 4</a></li><li><a href='http://nurqoyyim12.blogspot.com'>Menu 5</a></li><li><a class='end'>&nbsp;</a></li>
</ul>
</div>
</div>