4:20:00 PM
 |
| Menu Navigasi diatas Header Blog |
Cara Membuat Menu Navigasi di Atas Header Blog - Pada postingan sebelumnya, saya telah membagikan Cara Membuat Popup Like Facebook Di Blog, kali ini saya coba memberikan Cara Membuat Menu Navigasi DI Atas Header Blog. Menu navigasi merupakan serangkaian menu yang dibuat untuk memudahkan pembaca blog menjelajahi isi blog. Ada 2 model menu navigasi, diatas header dan dibawah header. Keduanya mempunyai fungsi yang hampir sama.
Menu navigasi diatas header blog, kerap kali digunakan oleh pemilik blog untuk melampirkan menu tentang "about", "Term of service", "Sitemap", "contact", "Disclaimer" dan lain sebagainya yang berhubungan dengan profil pemilik blog. Sedangkan menu navigasi yang berada dibawah header biasanya berisi tentang kategori yang tersedia di blog. Kegunaan dari kedua header ini sudah tentu untuk memudahkan navigasi para pembacanya untuk mengeksplorasi keseluruhan blog. Selain itu, juga akan menambah kesan tampilan blog yang profesional.
Pada tutorial yang saya bagikan ini merupakan navigasi dasar, artinya bentuknya masih sederhana. Jika anda ingin merubah warna, tulisan,dll silahkan contact kami atau komentar dibawah.
Langsung saja menuju ke tutorialnya. Tutorial yang mudah dan cepet difahami oleh pemula.
Langkahnya membuat top navigasi menu:
1. Template > Edit HTML
2. Cari/Temukan (CTRL+F) kode ]]></b:skin>
3. Simpan kode berikut ini DI ATAS kode tersebut
/*CB Top Menu*/
#top{margin:auto;padding: 0;width: 100%;background:#eeeded;border-bottom:1px solid #ddd;}
#top-wrap{margin:auto;padding: 0;width: 1080px;background:#eeeded;}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#222;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}
#navbar-iframe {display: none !important;}
NB:
- Sesuaikan lebarnya (width:1080px) dengan lebar header template Anda.
- Jika mau ganti background > background:#eeeded; (Lihat Kode Warna HTML)
- Ganti warna huruf menu > color:#222;
4. Cari/Temukan (CTRL+F) kode <body>5. Simpan kode berikut ini Dibawah-nya.
<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://cbtheme.blogspot.com/' title='Top Menu'>Top Menu</a></li>
<li><a href='http://veevandro.blogspot.co.id/' title='Contact'>Contact</a></li>
<li><a href='http://veevandro.blogspot.co.id/' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://veevandro.blogspot.co.id/' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='http://veevandro.blogspot.co.id/' title='Facebook'>Facebook</a></li>
<li><a href='http://veevandro.blogspot.co.id/' title='Twitter'>Twitter</a></li>
<li><a href='http://veevandro.blogspot.co.id/' title='Google Plus'>Google Plus</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
NB :
ganti URL 'http://veevandro.blogspot.co.id/' dan nama menu sesuai dengan blog anda
6. Save template dan lihat hasilnya
Demikian mengenai tutorial Cara Membuat Menu Navigasi di Atas Header Blog yang berhasil saya terapkan sebelumnya. Selamat mencoba dan semoga berhasil juga. jangan lupa tinggalkan jejak di kolom komentar ya sobat Veevandro
Baca Juga :
Cara membuat widget breaking News
Cara membuat widget arsip blog bergaya Scroll
Cara menampilkan jumlah pengunjung di blog
Cara membuat widget recent post bergaya Slide
Cara membuat widget arsip blog bergaya Scroll
Cara menampilkan jumlah pengunjung di blog
Cara membuat widget recent post bergaya Slide
15 comments
Thank's gan
bermanfaat (y)
nice gan
Nama class di HTML tergantung templatenya.. kalo beda template bisa juga gak berfungsi
sudah ane coba di blog ke2 ane gan
dan ternyata berhasil hehe
Wah mantapp gan artikelnya.. ijin copas scriptnya gan..
bisa di terapin nih di blog ane suatu saat nanti (y) ijin bookmark dulu :D
nice post gan sangat membantu saya..terima kasih
Nice gan bermanfaat !!!
ane udh sukses gan, tp tau ga gan kalo caranya menunya di pojok kanan gimana ya ?
wah mantep nih gan, tar ane coba
makasihgan... hehe. ane cari buat navigasi seperti ini dari dulu
okelah cukup membantu...thank' gan...
keren nih :D
aku juga mau bikin
akhirnya gua nemuin artikel turtiallnya.. sangat membantu om thanks ya udah dibagikan ilmunya.
waaaah mantap ni yang q cari dr kmaren soalnya blog q g ada menu navigasi di atas ni.
ijin kopas script nya kang.
Post a Comment