Cara Membuat Tombol Navigasi Di Blog

Tutorial yang mau saya buat ini sebetulnya sudah banyak diulas oleh blogger lain, tapi karena ada beberapa teman di bloffers yang membutuhkan tidak ada salahnya juga jika saya membuat sebuah postingan tentang cara membuat menu navigasi pada blog.
Alhamdulillah ya Allah hari ini saya masih diberikan rasa nikmat ketika melahap sepiring bakso tahu dari si mang yang dengan ikhlasnya menanggung dagangan dari pagi sampai siang ini, semoga dagangan si mang laris manis hehehe, let's go back ah. Seperti yang saudara saudara ketahui Menu navigasi ini besar fungsinya untuk sebuah blog, khususnya yang memakai blogger, apalagi jika kalian membuat banyak label/kategori dalam blog.

Sebelum saya bagikan tutorialnya ijinkan si ganteng kalem ini berbagi tips tentang labeling, kebanyakan blogger pemula sering membuat kesalahan dengan terlalu banyak label dalam mengkategorikan postingnya. Saya sering melihat blog pribadi dengan label yang hiruk pikuk tapi setelah saya lihat ternyata isinya ya tidak terlalu berbeda, pada dasarnya labeling berfungsi agar pengunjung dapat  menelusuri dan membedakan setiap postingan yang ada di blog kamu apalagi jika pengunjung ingin menelusuri postingan-postingan lama maka labeling akan sangat membantu mereka. Dalam hal SEO pun labeling tidak akan membantu sama sekali, berbeda dengan platform WP yang mempunyai fitur tagging.

Nah jika kalian yang merasa mempunyai terlalu banyak labeling coba sejenak periksa apakah label yang kalian buat sudah betul-betul mengkategorikan posting atau hanya akan membuat pengunjung bingung ketika akan menelusurinya, Nantinya menu navigasi ini akan berfungsi sebagai penunjang labeling tadi. Ada dua jenis menu yang akan saya bagikan sobat bisa memilihnya sesuai dengan kebutuhan.

Menu Navigasi Drop Down
Untuk kalian yang merasa mempunyai banyak label saya sarankan menggunakan jenis ini agar semua kategori post dapat dimuat disana. copy code dibawah ini

#navcontainer{background:#fff;height:40px;display:block;overflow:hidden}
#navcontainer .current-cat a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWfL97jowbNJdjAASgNziA_oqUDa9y9mr7LpAUsREnpDrvLzTzCJvkmGyJgocXvR_l6_E6NTN5e-rSUMIaM81bUjd0cIHh5LHiVqjIm2UnHZ9n-f2-8-cbxBQbN4G8Vm7147iP4gwAfjk/s1600/nav-hover.png) left top repeat-x;;color:#FFF;-moz-border-radius:5px 5px 0 0;-khtml-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}
#nav a,#subMenusContainer a{text-decoration:none;display:block}
#nav a{margin:0 1px 0 0;float:left;padding:14px 16px;text-transform:uppercase;color:#333;font-weight:bold;font-size:12px}
#subMenusContainer a,#nav li li a{color:#FFF;font-size:12px;text-align:left;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaJdFFYF8IR94QAhbPbmKu2V2Ujxft6C4uxs7KsQNItSxuRFWI6OxsuGsC5KK7Ec4gGQvNlVeWqpFYUiVOoEKG74Q4w-ZpnYdL7FER7Tri9Ii5Nm8CRorIR2Rr5ow2v4zRkgLNcF3GHSM/s1600/submenuscontainer-line.png) left top repeat-x;padding:8px 26px}
#nav li a:hover,#nav li a:focus,#nav a.mainMenuParentBtnFocused{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWfL97jowbNJdjAASgNziA_oqUDa9y9mr7LpAUsREnpDrvLzTzCJvkmGyJgocXvR_l6_E6NTN5e-rSUMIaM81bUjd0cIHh5LHiVqjIm2UnHZ9n-f2-8-cbxBQbN4G8Vm7147iP4gwAfjk/s1600/nav-hover.png) left top repeat-x;color:#FFF;-moz-border-radius:5px 5px 0 0;-khtml-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}
#nav .current-cat a:hover{}
#subMenusContainer a:hover,#subMenusContainer a:focus,#subMenusContainer a.subMenuParentBtnFocused{background-color:none;color:#8D918A}
.subMenuParentBtn{background:url(../img/arrow_right.gif) right center no-repeat}
.subMenuParentBtnFocused{background:url(../img/arrow_right_over.gif) right center no-repeat}
.mainMenuParentBtn{}
.mainMenuParentBtnFocused{}
.smOW{display:none;position:absolute;overflow:hidden;padding:0 2px;margin:0 0 0 -2px}
#nav,#nav ul,#nav ol,#subMenusContainer ul,#subMenusContainer ol{padding:0;margin:0;list-style:none;line-height:1em}
#nav ol,#nav ul,#subMenusContainer ul,#subMenusContainer ol{background:none;left:0}
#nav li{cursor:pointer;float:left;margin:0 2px 0 0;padding:0 2px 0 0;height:40px;display:inline;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgn5PHybY0m1i2UzfAdwEX7eNMXT7MNOU9QI_l7nCOnxjxPZeHGj3k4CKWGocR8hJ4UT24Xh8_OIRwCEC_n76jPLyiXhN_KPlxAvqnDw01epqehgkPmL58mXEfVA34ELJ8j_1j2ItnjrQ/s1600/nav-seperator.png) right center no-repeat}
#subMenusContainer li{list-style:none}
#nav{width:950px;margin:0 auto;clear:both;overflow:hidden;font-size:12px;display:block}
#nav .children{display:none}
#subMenusContainer{display:block;position:absolute;top:0;left:0;width:100%;height:0;overflow:visible;z-index:1000000000}
.rssbox{background:#FFF;border:1px solid #ECEAEA;padding:10px;margin:10px 0 0 0}
.rssbox:hover{background:#EDEFEB;border:1px solid #DFDDDD}
.rssbox a{color:#2C2E30;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}

Masuk ke dashboard kalian dan pada menu rancangan/design pilih Edit HTML, pasang kode diatas tadi tepat di atas kode ]]></b:skin>

Berikutnya cari kode <div id='main-wrapper'> copy code dibawah ini tepat diatasnya

<div id='navcontainer'>
<ul id='nav'>
<li class='current-cat'><a href='GantiDenganURLBlogKamu'>Home</a></li>
<li><a href='#'>Kategori 1</a>
<ul class='children'>
<li><a href='#'>Drop Down 1</a></li>
<li><a href='#'>Drop Down 2</a></li>
<li><a href='#'>Drop Down 3</a></li>

<li><a href='#'>Drop Down 4</a></li>
<li><a href='#'>Drop Down 5</a></li>
</ul>
</li>
<li><a href='#'>Kategori 2</a>
<ul class='children'>
<li><a href='#'>Drop Down 1</a></li>
<li><a href='#'>Drop Down 2</a></li>
<li><a href='#'>Drop Down 3</a></li>
</ul>
</li>

<li><a href='#'>Kategori 3</a>
<ul class='children'>
<li><a href='#'>Drop Down 1</a></li>
<li><a href='#'>Drop Down 2</a></li>
<li><a href='#'>Drop Down 3</a></li>
</ul>
</li>
<li><a href='#'>Shout-Box</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Directories</a></li>

<li><a href='#'>Contact Us</a></li>
</ul>
</div>

Klik save


Menu Navigasi Sederhana
Menu navigasi jenis ini menurut sangat cocok bagi blog yang mempunyai label sedikit

.basictab{
background: #33889f ;
border-top: #000000 0px solid;
height: 25px ;
padding: 10px 0;
margin-left: 0;
margin-bottom: 20px ;
font: bold 20px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
-moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; -khtml-border-top-left-radius:10px; -khtml-border-top-right-radius:10px; border-radius:10px 10px 0 0; border-bottom : #111111 solid 4px;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.basictab li{
display: inline;
margin: 0;
}
.basictab li a{
text-decoration: none;
padding: 0px 7px;
margin-right: 3px;
border-right: 1px solid #ffffff;
background-color: #33889f;
color: #000000;
}
.basictab li a:visited{
color: #ffffff;
}
.basictab li a:hover{
background-color: #33889f;
color: #000000;
}
.basictab li a:active{
color: #ffffff;
}

Cari kode ]]></b:skin> lalu simpan kode yang tadi kamu copy tepat di atasnya, jika sudah copy lagi kode dibawah ini.

<ul class='basictab'>
<li class='selected'><a href='URLblogkamu'>Home</a></li>
<li><a href='#'>Kategori 1</a></li>
<li><a href='#'>Kategori2</a></li>
<li><a href='#'>Kategori 3</a></li>
<li><a href='#'>Kategori 4</a></li>
</ul>

Klik save, wallaaaaaaaaaaa wkwkwk menu navigasi kalian sudah selesai. Kalau panjangnya belum pas sobat samakan ukuran width nya dengan main wrapper.
Kalian dapat mengubah tulisan Kategori 1 dan seterusnya dengan kata-kata kalian sendiri, jangan lupa ganti tanda # dengan URL yang mengarahkan pada halaman tersebut. Sebagai penunjang dari menu navigasi kalian dapat juga memasang Breadcrumbs silahkan kalian lihat postingan saya tentang