Blogging, Search Engine Optimization, Internet, Template, Widget hingga Monetize Blog.

Memasang Menu Navigasi Horizontal di Blog

Hampir semua Blog yang kita kunjungi pasti terdapat menu navigasi di dalamnya. Karena menu navigasi yang biasanya ditampilkan secara horizontal dan terletak di sekitar header Blog ini bisa jadi dianggap sebuah menu utama untuk menjelajahi Blog bagi kebanyakan pengunjung. Namun selera setiap Blogger berbeda-beda. Mungkin ada yang menilai tidak jadi masalah jika tidak terdapat menu navigasi di Blog. Selain itu template buatan ahli desain web dibuat bermacam-macam tergantung kebutuhan. Termasuk tidak sedikit template dibuat tanpa terdapat menu navigasi di dalamnya.

Menu Navigasi Horizontal

Jika kamu sudah lama menggunakan template yang tidak terdapat menu navigasi di dalamnya, dan kali ini kamu membutuhkan menu navigasi tersebut, kamu tidak dianjurkan untuk mengganti template karena bisa beresiko buruk jika ada elemen-elemen penting di dalamnya yang hilang. Jangan khawatir, kamu bisa Memasang Menu Navigasi Horizontal di Blog sendiri dengan mengikuti tutorial kali ini. Namun tutorial kali ini lebih cocok untuk Blog yang menggunakan template yang bukan bawaan Blogsppot. Sedangkan untuk memasang dan melepas menu navigasi pada Blog yang menggunakan template bawaan Blogspot, kamu akan mengerti setelah tau cara memasang menu navigasi di template bawaan Blogspot.

Memasang Menu Navigasi Horizontal di Blog

Tampilan menu navigasi yang akan saya berikan kemungkinan tidak akan selalu serasi dengan tampilan Blog-blog kamu sekalian. Namun jika kamu ahli dalam scripting, kamu bisa costumisasi menu navigasi ini sehingga memiliki tampilan yang sesuai. Setidaknya menu navigasi ini akan bermanfaat bagi Blog kamu yang kebetulan belum terdapat menu navigasi. Tampilan menu navigasi yang akan saya berikan adalah sebagai berikut.

Memasang Menu Navigasi Horizontal di Blog

Untuk cara memasangnya sendiri ikuti langkah-langkah berikut ini.

Memasang CSS

  • Login ke akun Blogger kamu.
  • Masuk ke bagian Template.
  • Klik Edit HTML.
  • Dengan tombol ctrl+F cari kode ]]></b:skin>.
  • Letakan kode berikut di atas kode ]]></b:skin> tersebut.

#tejahtc{

height:35px;

width:1000px;

margin:0 auto;

background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/S6mTqAdkycI/AAAAAAAAA2E/zxCSk-6MwLI/catmenu.jpg) repeat-x;

display:block;

padding:0px 0 0px 0px;

font-size:13px;

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(http://4.bp.blogspot.com/_4HKUHirY_2U/S6mTqAdkycI/AAAAAAAAA2E/zxCSk-6MwLI/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(http://3.bp.blogspot.com/_4HKUHirY_2U/S6mTqmy1HdI/AAAAAAAAA2M/6D7APyygWZA/catmenuhov.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(http://3.bp.blogspot.com/_4HKUHirY_2U/S6mTqmy1HdI/AAAAAAAAA2M/6D7APyygWZA/catmenuhov.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;

}
  • Ubah kode berwarna merah sesuai dengan lebar Blog kamu. Selain itu kamu bisa costumisasi kode CSS di atas untuk mengubah tampilan menu navigasi agar sesuai dengan keinginan.
  • Kemudian klik Simpan Template.

Mengetahui Elemen Header

  • Untuk selanjutnya, kamu harus tahu kode elemen header karena menu navigasi ini akan dipasang di sekitar header. Masuk ke bagian Tata Letak.
  • Pada dashboard Blogger silakan masuk ke menu Tata Letak.
  • Kemudian sentuhkan kursor pada tulisan Edit dalam elemen header.
  • Perhatikan muncul tulisan di bagian bawah dan salah satunya tertulis "widgdet id". Itulah elemen header Blog kamu
  • Kemudian kembali masuk ke bagian Template dan klik Edit HTML.
  • Dengan tombol ctrl+F, carilah widget id, atau id elemen header yang telah kamu temukan. Contoh yang saya berikan adalah "Header1".
  • Perhatikan gambar berikut. Yang saya beri garis bawah berwarna merah merupakan kode elemen header.
Memasang Menu Navigasi Horizontal di Blog

Memasang Kode HTML

  • Setelah ditemukan, maka selanjutnya memasang menu navigasi di atas atau di bawah elemen header.
  • Letakan kode berikut di atas kode <div id='header-wrapper'>, yang berarti hasilnya menu navigasi dipasang di atas header.

<div id='tejahtc'>

<div id='tejas'>

<ul>

<li><a href='/'>Home</a></li>



<li><a href='#'>Menu-1</a>

<ul class='children'>

<li><a href='#'>Menu-1-1</a></li>

<li><a href='#'>Menu-1-2</a></li>

<li><a href='#'>Menu-1-3</a></li>

</ul>

</li>



<li><a href='#'>Menu-2</a>

<ul class='children'>

<li><a href='#'>Menu-2-1</a></li>

<li><a href='#'>Menu-2-2</a></li>

<li><a href='#'>Menu-2-3</a></li>

</ul>

</li>



<li><a href='#'>Menu-3</a>

<ul class='children'>

<li><a href='#'>Menu-3-1</a></li>

<li><a href='#'>Menu-3-2</a></li>

<li><a href='#'>Menu-3-3</a></li>

</ul>

</li>



<li><a href='#'>Menu-4</a>

<ul class='children'>

<li><a href='#'>Menu-4-1</a></li>

<li><a href='#'>Menu-4-2</a></li>

<li><a href='#'>Menu-4-3</a></li>

</ul>

</li>



<li><a href='#'>Menu-5</a>

<ul class='children'>

<li><a href='#'>Menu-5-1</a></li>

<li><a href='#'>Menu-5-2</a></li>

<li><a href='#'>Menu-5-3</a></li>

</ul>

</li>



<li><a href='#'>Menu-6</a>

<ul class='children'>

<li><a href='#'>Menu-6-1</a></li>

<li><a href='#'>Menu-6-2</a></li>

<li><a href='#'>Menu-6-3</a></li>

</ul>

</li>



<li><a href='#'>Menu-7</a>

<ul class='children'>

<li><a href='#'>Menu-7-1</a></li>

<li><a href='#'>Menu-7-2</a></li>

<li><a href='#'>Menu-7-3</a></li>

</ul>

</li>



<li><a href='http://b-tutorial.blogspot.com/'>Visit B-TUTORIAL</a></li>

</ul>

</div>

</div>
  • Masukan URL tujuan pada bagian href (atau ubah setiap # dengan URL tujuan).
  • Ubah setiap menu seperti Menu-1 dan Menu-1-1 dengan judul menu yang kamu inginkan.
  • Menu navigasi ini disertai dengan sub menu juga. Jika kamu tidak membutuhkan sub menu pada salah satu menu, hapus kode <ul class='children'> sampai </ul>.
  • Jika menu di dalam menu navigasi terlalu banyak, hapus kode <li><a href='#'>Menu-1</a> sampai </li>.
  • Jika menu di dalam menu navigasi terasa kurang, copy paste kode <li><a href='#'>Menu-1</a> sampai </li> yang telah ada serta edit.
  • Setelah selesai memasang dan menyetel menu navigasi, silakan klik Simpan Template.
Selesai dan silakan lihat hasilnya. Demikian pembahasan kali ini, semoga dengan Memasang Menu Navigasi Horizontal dari saya ini setidaknya bermanfaat bagi Blog yang belum memiliki menu navigasi di dalamnya walaupun tampilannya bisa jadi tidak serasi dengan tampilan Blog kamu.
Selain itu, kamu juga bisa Memasang Menu Navigasi Horizontal Melayang di Blog

Artikel terkait : Memasang Menu Navigasi Horizontal di Blog

Artikel B-Tutorial Lainnya :

2 komentar:

  1. Mantep sekali nih..... Ini yang cocok buat newbie, simple ga ribet.
    Gan mau tanya, kalo cara ganti warna Navigasi horozontalnya jadi biru muda gimana yah? terus tulisannya jadi Hitam. mohon jawabannya.

    ReplyDelete
    Replies
    1. Pada kode CSS nya warna backround sendiri menggunakan gambar, tepatnya pada kode backround:url . Sobat bisa ubah warnanya dengan yang sobat inginkan, contohnya background:#ED4A05; Untuk warna tulisan sobat bisa ubah pada kode color: #fae7df; dan color: #fff;

      Delete

Copyright © 2014-2016 B-Tutorial - All Right Reserved