Cara Membuat Menu Navigasi di Blogspot

Menu Navigasi

Membuat Menu Navigasi

Kali ini akan membahas tentang Cara Membuat Menu Navigasi di Blogspot. Sebelumnya kita perlu tahu dulu apa yang dimaksud dengan Menu Navigasi. Menu Navigasi adalah suatu Menu yang fungsinya hampir sama dengan Menu pada Microsoft Word, Mozilla, dll.

Bedanya, Menu navigasi di Blogger dapat kita modif dan manipulasi sehingga tampilannya menarik. Bagi yang belum mengerti tentang menu navigasi, itu lho…Menu Yang Ada Di Atas Tampilan Blog Atau Web (biasanya berisi Home, About, dan lain-lain).


Menu Navigasi ada 2 macam, yaitu Menu Navigasi Horizontal dan Menu Navigasi Vertikal. Kali ini hanya akan membahas tentang Cara Membuat Menu Navigasi Horizontal.

Ok, sekarang adalah waktunya untuk Praktek…!!!

Catatan : Sebelum Anda melakukan langkah-langkah di bawah ini, pastikan Anda sudah Mem-BackUp template original Anda. (Agar jika Anda melakukan kesalahan dalam Membuat Menu Navigasi, Template Anda dapat dikembalikan seperti semula).

Langkah-Langkah membuat Menu Navigasi Slide Horizontal :

1.      Login ke Blogger, lalu masuk ke bagian Design, dan klik Edit Html. (Beri tanda centang pada expand widget template)

2.      Cari kode <div id='content-wrapper'> dan tambahkan kode berikut ini diatasnya


Klik Show untuk melihat kode...
<div id='Menumainwrapx'>
<b:section id='NavbarMenux'>
<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 Menumainwrapx -->
<div class='clear'/>



Tips : Untuk Mempercepat pencarian, Gunakan (ctrl + F) dan ketikkan <div id='content-wrapper'>



Catatan : jika Anda tidak menemukan <div id='content-wrapper'> , ada alternatif lain seperti di bawah ini :

Keterangan :

<div id='content-wrapper'>   
=> Jika Anda memilih ini, maka Menu akan ditempatkan di bawah Header

<div id='header-wrapper'>
=>jika Anda memilih ini, maka menu akan diletakkan di atas Header

Jika 2 pilihan tersebut tidak ada dalam template Anda, maka Taruhlah kode css diatas di tempat yang sekiranya ada di atas body (bisa Anda coba-coba sendiri)


3.      Kemudian, tambahkan kode berikut ini di atas kode  ]]></b:skin>

Ini Judul Spoiler...
#Menumainwrapx {
background:url(http://farm2.static.flickr.com/1046/5118494385_6bed6df208_t.jpg) repeat-x scroll 0 0 #222222;
border-bottom:1px solid #CCCCCC;
height:42px;
margin:0;
padding:0;
}
#NavbarMenux {
width: 950px;
height: 41px;
font-size: 13px;
color:#333333;
margin: 0px;
padding: 0;
font-weight:bold;
font-family:arial;
margin: 0 auto;
}
#NavbarMenuleftx {
width: 950px;
margin: 0;float:left;}
#navx { margin: 0;
padding: 0; }
#navx ul {
float: left;
list-style: none;
margin: 0;
padding: 0; }
#navx li {
list-style: none;
margin: 0px;
padding: 0; }
#navx li a,
#navx li a:link,
#navx 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; }
#navx li a:hover,
#navx li a:active {
color: #333;
margin: 0;
text-decoration: none;
background:#F0F0F0;
}
#navx li li a, #nav li li a:link,
#navx li li a:visited {
background:url(http://farm2.static.flickr.com/1190/5119105082_e113afd892_t.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;}
#navx li li a:hover,
#navx li li a:active {
background: #F5F5F5;
color: #333;
}
#navx li {
float: left;
padding: 0; }
#navx li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin:0;
padding: 0;
border-top:1px solid #242424;
}
#navx li ul a {
width: 140px; }
#navx li ul ul {
margin: -41.5px 0 0 176px;
border:none;}
#navx li:hover ul ul,
#navx li:hover ul ul ul, #navx li.sfhover ul ul,
#navx li.sfhover ul ul ul {
left: -999em; }
#navx li:hover ul,
#navx li li:hover ul,
#navx li li li:hover ul,
#navx li.sfhover ul,
#navx li li.sfhover ul,
#navx li li li.sfhover ul {
left: auto; }
#navx li:hover,
#navx li.sfhover {
position: static; }



4.      Klik Pratinjau untuk memastikan bahwa Langkah yang anda lakukan benar. Jika tidak ada masalah, Simpan template Anda

5.      Sekarang, pergi ke Page Element dan cari gadget dengan nama ‘Membuat Menu’ (ada di paling atas). Klik Edit dan masukkan kode berikut ke dalam content :


Ini Judul Spoiler...
<div id='navbarmenuleftx'>
<ul id='navx'>

<li><a href='/'>Home</a></li>
<li><a href='#yourlink'>Menu 1</a>
<ul>
<li><a href='#yourlink'>Menu 1.1</a>
<ul>
<li><a href='#yourlink'>Menu 1.1.1</a></li>
<li><a href='#yourlink'>Menu 1.1.2</a></li>
<li><a href='#yourlink'>Menu 1.1.3</a></li>
<li><a href='#yourlink'>Menu 1.1.4</a></li>
</ul>
</li>

<li><a href='#yourlink'>Menu 1.2</a>
<ul>
<li><a href='#yourlink'>Menu 1.2.1</a></li>
<li><a href='#yourlink'>Menu 1.2.2</a></li>
<li><a href='#yourlink'>Menu 1.2.3</a></li>
<li><a href='#yourlink'>Menu 1.2.4</a></li>
</ul>
</li>

<li><a href='#yourlink'>Menu 1.3</a>
<ul>
<li><a href='#yourlink'>Menu 1.3.1</a></li>
<li><a href='#yourlink'>Menu 1.3.2</a></li>
<li><a href='#yourlink'>Menu 1.3.3</a></li>
<li><a href='#yourlink'>Menu 1.3.4</a></li>
</ul>
</li>
</ul>
</li>

</ul>
</div>



Catatan :
=> Ganti #yourlink dengan link yang dituju.
Contoh : <li><a href='http://google.com'>Menu 1</a>

=> Ganti Menu 1, dan tulisan Menu yang lain dengan Nama Menu yang akan kamu gunakan.
Contoh : <li><a href='http://google.com'>Google</a>


Jika sudah, simpan dan lihat Blog Anda.
Berhasilkah? Atau Amburadul?
Jika berhasil, selamat, Anda sudah bisa membuat Menu Navigasi Horizontal. Jika gagal, coba terus sampai bisa.

Perlu diketahui, waktu pertama kali membuat Menu Navigasi, aku sempat gagal berkali-kali.

Kegagalan adalah Kemenangan yang tertunda.

Demikianlah

Cara Mudah Memasang Menu Navigasi

 

 

Masukkan E-Mail Anda untuk Berlangganan Artikel Gratis !!!

Delivered by FeedBurner

8comments:

  1. tolong buatin menu navigasi donk gan.. ga bisa bisa niey..

    ReplyDelete
    Replies
    1. Ikuti aja langkah-langkah di atas kawan. jika diikuti dg bnar insyaallah bisa. tp kalau mau trik yg lbh mudah, tunggu ya, ntar ane share, jd pantau trus blog ini

      Delete
  2. Gimana ya gan..
    Kode div id='content-wrapper'> gak ketemu..

    ReplyDelete
  3. Gan maksudnya ditarus diatas body bagian yang mana, bisa dikasih screnshotnya gak, maklum gan masih newbitol

    ReplyDelete
  4. Gan kalau pakai template bawaan blogspot kok gak ada ya..

    ReplyDelete

Terima kasih telah membaca artikel ini. Anda dapat menjadikan Artikel ini sebagai referensi Anda dan menyebarluaskannya asalkan mencantumkan link sumbernya.Jika ada pertanyaan, silahkan tulis di komentar.