Cara Mudah Membuat Menu Navigasi Horizontal di Template The Mez

Membuat menu horizontal

Tidak serumit yang kita bayangkan untuk membuat menu navigasi horizontal di blogspot. Asal kita tahu caranya….

Menu navigasi horizontal bertujuan untuk memudahkan pengunjung dalam menjelajahi blog kita, selain itu menu navigasi ini juga membuat tampilan blog kita menjadi tampil menarik.

Nah langsung aja, bagi sobat yang membuat menu navigasi horizontal bisa langsung mengikuti langkah saya.

1. Siapkan link-link yang ingin di pasang di menu navigasi,disini saya menggunakan label pada blog saya.


http://mazbijav.blogspot.com/search/label/blogspot


http://mazbijav.blogspot.com/search/label/tutorial


http://mazbijav.blogspot.com/search/label/template%20the%20mez


http://mazbijav.blogspot.com/search/label/tips


http://mazbijav.blogspot.com/search/label/SEO



2. Cara kode ]]></b:skin> , letakkan kode di bawah ini di atas kode ]]></b:skin> tadi.



<br /> #navcontainer{height:48px;display:block;overflow:hidden;padding-left:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhucZCEph5GdEat5IWyHe-mOTOEaFbn4iqsbpjgA24QcbDm3UXJ0bWrTfTuUwb4L_lAkA_wxFR6LahU_1vmyll9jMzJIZRrBB3n3D_FI0EgjeaGW511Lk9R2smOWPEjTNLvHZk0z0XZ3hi6/s1600/nav-bg.png) left top repeat-x;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}<br /> #navcontainer .current-cat a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0TsBgmwj94Rlfd8EzL8GavAZ6JFToViRNEXA5VC2jMb8QPIm1UWMSMXMvMeUJG0P3bdCY81lQpQA3U3XIiqhJgNkYoQgGhI28AmoMxx4x_dCc5IVTm0sh_W94xjcxSwag9SVTI93ZSu9X/s1600/nav-hover.png) left top repeat-x}<br /> #nav a{text-decoration:none;display:block}<br /> #nav a{margin:0 3px 0 2px;float:left;background:none;padding:16px 18px 17px 18px;text-transform:uppercase;color:#FFF;font:bold 12px Arial,Helvetica,Sans-serif}<br /> #nav li li a{color:#fff;font-size:12px;text-align:left;background-color:#B0C007;padding:6px 26px}<br /> #nav li a:hover,#nav li a:focus,#nav a.mainMenuParentBtnFocused{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0TsBgmwj94Rlfd8EzL8GavAZ6JFToViRNEXA5VC2jMb8QPIm1UWMSMXMvMeUJG0P3bdCY81lQpQA3U3XIiqhJgNkYoQgGhI28AmoMxx4x_dCc5IVTm0sh_W94xjcxSwag9SVTI93ZSu9X/s1600/nav-hover.png) left top repeat-x;color:#FFF}<br /> <br /> .mainMenuParentBtn{}<br /> .mainMenuParentBtnFocused{}<br /> .smOW{display:none;position:absolute;overflow:hidden;padding:0 2px;margin:0 0 0 -2px}<br /> #nav,#nav ul,#nav ol{padding:0;margin:0;list-style:none;line-height:1em}<br /> #nav ol,#nav ul{background:none;left:0}<br /> #nav li{background-repeat:no-repeat;background-position:100% 5px;cursor:pointer;float:left;margin:0 2px 0 0;padding:0 2px 0 0;height:48px;display:inline;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7849MOIYNW8uQpyq6CVt4E26oVLNCTdnbfAXrrzCkOWR7zwvFjgoccEFlYOmjnjbSO-1x-UrzJ3CeTo6PxYfouXEepR3H5UR8wfTKINtAt6yx-yGLQdBBMwI0XM1_943zG5QvKs6rYxG-/s1600/nav-separator.png) right center no-repeat}<br /> <br /> #nav{width:950px;margin:0 auto;clear:both;overflow:hidden;font-size:12px;display:block}<br /> #nav .children{display:none}<br /> <br />


3. Kemudian cari kode <div id='outer-wrapper'>

dan letakkan kode dibawah ini tepat di bawah kode tersebut.



<br /> <br /> <div id='navcontainer'><ul id='nav'> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='http://mazbijav.blogspot.com/search/label/blogspot'>Blogspot</a></li> <li><a href='http://mazbijav.blogspot.com/search/label/tutorial'>Tutorial</a></li> <li><a href='http://mazbijav.blogspot.com/search/label/template%20the%20mez'>The Mez</a></li> <li><a href='http://mazbijav.blogspot.com/search/label/tips'>Tips</a></li> <li class='current-cat'><a href='http://mazbijav.blogspot.com/search/label/SEO'>SEO</a></li> </ul></div><br />


4. Kemudian simpan…..

Jika tidak ada kesalahan hasilnya akan seperti ini.

tampilan menu navigasi horizontal

Link yang saya berikan diatas hanyalah sebagai contoh, silahkan diganti dengan link sobat sendiri.

Jika ada yang kurang jelas tentang Cara Mudah Membuat Menu Navigasi Horizontal di Template The Mez bisa di tanyakan di kolom komentar

Selamat mencoba....