Bani Cyber Blog - Menu dibuat di blog untuk sebagai navigasi bagi pengunjung. tapi, Menu responsive dan keren lah yang banyak dicari oleh blogger saat ini untuk dipasang di blognya. Selain menjadi navigasi, menu punya fungsi lain pada blog yaitu untuk memperindah tampilan blog.


Untuk itulah kali ini saya akan bagikan cara membuat menu navigasi yang keren dan ringan dan juga tidak menganggu tampilan pada versi mobile. Agar tidak memperberat loading pada versi mobile atau membuka blog di ponsel, saya sengaja tidak menampilkan menu ini dalam versi mobile.

Cara membuat menu navigasi di blog

Gambar diatas adalah contoh screenshot menu nya. atau kamu bisa langsung lihat demonya disini

Kamu udah gak sabar lagi ya?? oke langsung aja saya tunjukin caranya.


Cara Membuat Menu Navigasi Di bawah Header Blog ala Bani Cyber

1. Join ke blogger.com
2. Setelah Masuk, Buka Template pada Navigasi di Kiri Dasbor
3. Buka Edit HTML
4. Cari Kode berikut dengan [CTRL+F]
]]></b:skin>
5. Tambahkan Kode berikut sebelum kode tadi
#menu-keren {background:#008080;width:100%;overflow:hidden;
}
#menu-keren ul{margin:0 auto;width:970px
}
#menu-keren ul li{float:left
}
#menu-keren ul li a{padding:12px 15px;color:#f0ffff;font-size:15px;display:block;text-decoration:none; text-transform:uppercase;font-weight:bold;border-bottom:3px solid #f0ffff
}
#menu-keren ul li a:hover{background: #f0ffff;color:#008080
}
#menu-keren ul li a.home{background:#f0ffff;color:#008080;border:1px solid #f0ffff;border-bottom:2px solid #f0ffff
}
@media only screen and (max-width:480px){#menu-keren{display:none}}
6. Cari kode berikut dengan [CTRL+F]
<div id='content-wrapper'>
7. Tambahkan Kode berikut, Diatas/sebelum Kode tadi
<div id='menu-keren'>

<ul>

<li style='list-style-type:none;border-left:1px solid #f0ffff'><a class='home' href='/' title='Beranda'>Beranda</a></li>

  <li style='list-style-type:none'><a href='http://banicyber.blogspot.co.id/search/label/Panduan NgeBlog' title='Panduan Ngeblog'>Panduan Ngeblog</a></li>

<li style='list-style-type:none'><a href='http://banicyber.blogspot.co.id/search/label/Modifikasi%20Template' title='Belajar Modifikasi Template Blog'>Modifikasi Template</a></li>

<li style='list-style-type:none'><a href='http://banicyber.blogspot.co.id/search/label/Modifikasi%20Blog' title='Belajar Modifikasi Blog'>Modifikasi Blog</a></li>

<li style='list-style-type:none'><a href='http://banicyber.blogspot.co.id/2016/12/template-blog-gratis-terbaik-seo-responsive.html' title='Top Template: SEO, RESPONSIVE, Mobile Friendly'>Top Template 2017</a></li>

<li style='list-style-type:none'><a href='http://viid.me/qtjyjr' title='Download Cheat PB Garena Disini'>Download</a></li>
</ul>

    </div><div class='clear'/>
Kode diatas bisa diatur sesuai keinganan kamu!

8. Save Template


Menu diatas sengaja saya buat tidak tampil versi responsive atau mobilenya, supaya lebih ringan. Jika kamu ingin membuat menu diatas tampil di ponsel. Silahkan buat css responsive nya jika kamu menginginkannya.


Baiklah itu saja yang dapat saya bagikan di artikel kali, jika kamu masih ada pertanyaan mengenai artikel diatas jangan segan segan untuk berkomentar. Wasalam.

Berlangganan via Email

Berlangganan artikel via email agar kamu mendapatkan info mengenai update artikel dari blog ini via email.


2 Tanggapan Untuk "Cara Membuat Menu Navigasi Keren Di Bawah Header Blog ala Bani Cyber"

  1. Terimakasih infonya, saya memang sedang mencari code buat menu yang simple tapi elegant.

    ReplyDelete