Minggu, Oktober 09, 2011

Cara Membuat Menu Navigasi Pada Blog Dengan Cepat

Kali ini icalcell akan berbagi trik blogger lagi yaitu membuat menu navigasi seperti yang saat ini diterapkan pada blog ini (baca: Tutorial Blog). Mengapa perlu membuat menu navigasi??? Ini merupakan anjuran dari Google, agar pengunjung atau visitor, dapat menjangkau dengan mudah isi dari suatu blog. Dengan adanya menu maka pengunjung atau visitor akan merasa dimanjakan dengannya, karena dengan hanya satu klik, postingan yang diinginkan akan muncul dihadapannya. Menu merupakan sistem navigasi pada blog yang perlu ada. Nah sekarang icalcell akan berbagi ke kawan blogger cara membuat Menu Navigasi pada Blog, tidak seperti sebelumnya dimana icalcell pernah mem-posting juga cara membuat menu lengkap dengan sub-subnya, kali ini menunya simpel sekali, tidak memakai sub-sub lagi. Karena icalcell sukanya yang simpel-simpel saja.

Cara Membuat Menu Navigasi Pada Blog Dengan Cepat
Perhatikan menu yang ada di blog ini atau teman-teman bisa melihat gambar di bawah ini, seperti itulah menu yang akan icalcell share ke teman-teman blogger semua.
Cara Membuat Menu Pada Blog Dengan Cepat
Cara Membuat Menu Pada Blog Dengan Cepat

  1. Login ke blog , langsung menuju halaman EDIT HTML
  2. Klik expand widget template,
  3. Cari kode seperti di bawah ini
    ]]></b:skin>
  4. Untuk memudahkan tekan CTRL + F , lalu masukkan kode di atas.
  5. Letakkan kode di bawah ini tepat diatas kode pada langkah 3.
    /* Navigation Menu ------------------------------------------------------*/ #nav { background:#000; width: 728px; color: #D8D8D8; display: block; font-weight: normal; text-transform: titlecase; margin:0px auto; padding:0px; height:25px; } .topnav ul { float: left; list-style: none; margin: 0; padding:0; } .topnav li { list-style: none; margin: 0; padding: 0; } .topnav li a, .topnav li a:link, .topnav li a:visited { background:#000; color: #D8D8D8; display: block; font-weight: normal; text-transform: titlecase; margin: 0; padding: 5px 10px; border-right:2px solid #000; } .topnav li a:hover, .topnav li a:active { background:#1C1C1C; color:#D8D8D8; margin: 0; padding: 5px 10px; text-decoration: none; } .topnav li li a, .topnav li li a:link, .topnav li li a:visited { background: #000; width: 150px; color: #fff; font-weight: normal; text-transform: lowercase; float: none; margin: 0; padding: 5px 10px; border-right:1px solid #000; border-bottom:1px solid #000; border-left:1px solid #000; } .topnav li li a:hover, .topnav li li a:active { background: #363636; color: #FFF; padding: 5px 10px; } .topnav li { float: left; padding: 0; } .topnav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } .topnav li ul a { width: 140px; } .topnav li ul ul { margin: -32px 0 0 171px; } .topnav li:hover ul ul, .topnav li:hover ul ul ul, .topnav li.sfhover ul ul, .topnav li.sfhover ul ul ul { left: -999em; } .topnav li:hover ul, .topnav li li:hover ul, .topnav li li li:hover ul, .topnav li.sfhover ul, .topnav li li.sfhover ul, .topnav li li li.sfhover ul { left: auto; } .topnav li:hover, .topnav li.sfhover { position: static; }
  6. Selanjutnya penambahan elemen, menu biasanya akan disimpan di bawah header, sehingga cari kode header seperti di bawah ini.
    <div id='head'> <div id='header-wrapper'> <div class='headerright'> <b:section class='headerright' id='headerright' maxwidgets='1' showaddelement='yes'> <b:widget id='HTML4' locked='false' title='' type='HTML'/> </b:section> </div> </div> <div style='clear: both;'/> </div>
  7. Setelah dapat , letakkan kode di bawah ini tepat di bawah kode pada langkah 6.
    <div id='nav'> <b:section class='topnav' id='topnav' showaddelement='yes'/> </div>
  8. Save pengaturan, lalu menuju ke halaman Page Element, maka teman-teman menemukan element baru di bawah header, tambahkan element HTML/JavaScript , lalu letakkan menu yang akan teman-teman tambahkan, contohnya seperti di bawah ini
    <ul> <li><a href='http://icalcell.blogspot.com/2009/11/download-center.html'>Download</a></li> <li><a href='http://icalcell.blogspot.com/2011/05/tutorial-blog.html'>Blogger</a></li> <li><a href='http://icalcell.blogspot.com/2010/05/parse-html.html'>Parse Html</a></li> <li><a href='http://icalcell.blogspot.com/2011/07/trik-internet-gratis-2011.html'>Free Internet</a></li> <li><a href='http://icalcell.blogspot.com/2010/05/kirim-sms-gratis.html'>Free SMS</a></li> <li><a href='http://icalcell.blogspot.com/2011/07/privacy-policy.html'>Privacy Policy</a></li> </ul>
    Ingat ikutkan ul, li, dan a.
Untuk warna dan ukuran panjang silahkan di edit bagian CSS atau langkah nomor 5 di atas. Selamat mencoba, jika menemui kesulitan, silahkan komentar dibawah, InsyaAllah akan dibantu.

Artikel Terkait

Cara Membuat Menu Navigasi Pada Blog Dengan Cepat
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email

5 komentar

09 Februari, 2012 17:10 delete

Nyari tulisan Edit HTML di sebelah mana..

Reply
avatar
16 Mei, 2012 21:30 delete

Assalamualaikum...
Mas, kok kode yang petunjuk ke 6 Nggak ada ya ?. Saya sudah tekan CTRL+F dan isi kode itu dikolom tersebut, hasilnya adalah 0 dari 0

Tolong dijawab ya, mas. Secepatnya. Terima kasih

wassalam

Reply
avatar
17 April, 2015 09:05 delete

Terimakasih agan informasinya :)
http://bit.ly/1G1rz36

Reply
avatar