Cara Membuat Menu Navigasi Slide Horizontal Blogspot

Ketika anda membuat blog di blogspot, anda tidak akan menemukan fitur menu navigasi seperti blog pada umumnya. Navigasi menu pada blospot biasanya berupa link list vertikal kebawah dan tidak berupa menu horizontal. Namun anda tidak perlu berkecil hati, karena kita masih bisa membuat menu di blogpsot secara horizontal. Menu ini berfungsi sebagai navigasi pembaca untuk melihat-lihat halaman lain atau kategori lain dalam blog anda. Pada posting ini kita akan belajar cara membuat menu di blogspot.

Sebelum anda mencoba membuat menu navigasi slide horizontal blogspot ini sebaiknya anda backup terlebih dahulu template anda, supaya jka terjadi error anda bisa melakukan restore kembali template blogspot untuk mengganti template blogspot anda.

Ikuti langkah-langkah berikut ini untuk membuat menu navigasi slide horizontal blogspot :

1. Login ke Blogger, masuk ke bagian design, lalu edit html dan berikan tanda centang pada expand widget template

2. Cari kode <div id='content-wrapper'> dan tambahkan kode berikut ini diatasnya. Jika anda tidak menemukan kode ini, usahakan anda taruh kode berikut ini diatas blogpost anda. Ini karena template tiap blog berbeda, dan tergantung template yang dipakai.

<div id='Menumainwrap-agan'>

<b:section id='NavbarMenu-agan'>

<b:widget id='HTML50' locked='false' title='MembuatMenu' type='HTML'>

<b:includable id='main'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

</b:includable>

</b:widget>

</b:section>

</div> <!-- End Menumainwrap-agan -->

<div class='clear'/>

3. Lalu tambahkan juga kode berikut di atas kode ]]></b:skin>

#Menumainwrap-agan {

background:url(http://4.bp.blogspot.com/-H4nCuAufI7w/T5THHBl5glI/AAAAAAAAAtU/ncfal27OF-s/s1600/nav-menu.jpg) repeat-x scroll 0 0 #222222;

border-bottom:1px solid #CCCCCC;

height:42px;

margin:0;

padding:0;

}

#NavbarMenu-agan {

width: 950px;

height: 41px;

font-size: 13px;

color:#333333;

margin: 0px;

padding: 0;

font-weight:bold;

font-family:arial;

margin: 0 auto;

}

#NavbarMenuleft-agan {

width: 950px;

margin: 0;float:left;

}

#nav-agan {

margin: 0;

padding: 0;

}

#nav-agan ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#nav-agan li {

list-style: none;

margin: 0px;

padding: 0;

}

#nav-agan li a,

#nav-agan li a:link,

#nav-agan li a:visited {

height: 22px;

color: #333333;

display: block;

font-size: 13px;

text-decoration: none;

margin: 0;

padding:10px 13px 9px 13px;

border-right: 1px solid #CFCFCF;

}

#nav-agan li a:hover,

#nav-agan li a:active {

color: #333;

margin: 0;

text-decoration: none;

background:#F0F0F0;

}

#nav-agan li li a, #nav-agan li li a:link,

#nav-agan li li a:visited {

background:url(http://2.bp.blogspot.com/-Kf0Jc6CiCAw/T5THGOoJUDI/AAAAAAAAAtQ/9OQuPcHar_I/s1600/nav-menu-1.jpg) repeat-x scroll 0 0 #f5f5f5;

min-width: 150px;

color: #333333;

font-size: 14px;

font-weight: normal;

float: none; margin: 0;

padding: 5px 10px;

font-weight:bold;

font-family:arial;

box-shadow: 0px 3px 3px rgba(0,0,0,0.8);

-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);

-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);

text-align:left;

}

#nav-agan li li a:hover,

#nav-agan li li a:active {

background: #F5F5F5;

color: #333;

}

#nav-agan li {

float: left;

padding: 0;

}

#nav-agan li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 170px;

margin:0;

padding: 0;

border-top:1px solid #242424;

}

#nav-agan li ul a {

width: 140px;

}

#nav-agan li ul ul {

margin: -41.5px 0 0 176px;

border:none;

}

#nav-agan li:hover ul ul,

#nav-agan li:hover ul ul ul, #nav-agan li.sfhover ul ul,

#nav-agan li.sfhover ul ul ul {

left: -999em;

}

#nav-agan li:hover ul,

#nav-agan li li:hover ul,

#nav-agan li li li:hover ul,

#nav-agan li.sfhover ul,

#nav-agan li li.sfhover ul,

#nav-agan li li li.sfhover ul {

left: auto;

}

#nav-agan li:hover,

#nav-agan li.sfhover {

position: static;

}

Simpan template anda dahulu.

4. Buka page element cari gadget dengan nama ‘MembuatMenu’ yang berada di atas gadget posting blog, lalu klik edit dan masukkan kode berikut pada kotak content.

<div id='navbarmenuleft-agan'>

<ul id='nav-agan'>

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

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

<ul>

<li><a href='#link-agan'>Menu 1.1</a>

<ul>

<li><a href ='#link-agan'>Menu 1.1.1</a></li>

<li><ahref ='#link-agan'>Menu 1.1.2</a></li>

<li><ahref ='#link-agan'>Menu 1.1.3</a></li>

<li><ahref ='#link-agan'>Menu 1.1.4</a></li>

</ul>

</li>

<li><ahref ='#link-agan'>Menu 1.2</a>

<ul>

<li><ahref ='#link-agan'>Menu 1.2.1</a></li>

<li><ahref ='#link-agan'>Menu 1.2.2</a></li>

<li><ahref ='#link-agan'>Menu 1.2.3</a></li>

<li><ahref ='#link-agan'>Menu 1.2.4</a></li>

</ul>

</li>

<li><ahref ='#link-agan'>Menu 1.3</a>

<ul>

<li><ahref ='#link-agan'>Menu 1.3.1</a></li>

<li><ahref ='#link-agan'>Menu 1.3.2</a></li>

<li><ahref ='#link-agan'>Menu 1.3.3</a></li>

<li><ahref ='#link-agan'>Menu 1.3.4</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

Sesuaikan dengan link dan menu yang akan anda buat dengan mengedit tulisan yang berwarna merah diatas. Misal

#link-agan, bisa anda ganti dengan http://namablogmu.blogspot.com/search/label/NamaLabelBlogmu

Menu, anda ganti dengan judul tampilan yang muncul

Simpan dan anda lihat hasilnya. Anda sekarang berhasil membuat menu navigasi slide horizontal blogspot. Selamat mencoba.