Membuat Menu Navigasi (Navbar) Blue Thin di Blog

FARESPO -  Sebuah struktur blog tentu terbentuk meliputi komponen-komponen dasarnya, seperti navbar, sidebar, header, footer, dan lain sebagaianya, maka untuk membangun sebuah template blog tentu kita harus membuat komponen-komponen dasar tersebut terlebih dahulu, baru kita lengkapi atau finishing dengan berbagai macam pernak-pernik dan aksesoris guna menambah keindahan dan kenyamanan blog kita.

Seperti yang dilansir dari e-book google search engine starter guide, ada beberapa topik yang terkait dengan widget menu navigasi yang akan kita buat pvada hari ini, yakni Google menganjurkan bahwasanya dalama membangun sebuah blog kita juga harus membangun navigasi yang jelas dan mudah, jadi dalam artianya kita bisa membuat berbagai navigasi, mulai dari mengaktifkan arsip blog, membuat halaman static yang berisikan peta situs blog kita, hingga membuat menu navigasi seperti yang akan kita praktekkan pada kesempatan kali ini, tak lain dan tak bukan adalah untuk memudahan pengunjung dalam menyeleksi topik yang mereka minati.

Nah, sesuai dengan ulasan singkat diatas, pada kesempatan kali ini saya ingin berbagi salah satu koleksi widget menu navigasi yang saya adopsi dari bloggertrix, hampir sama dengan widget menu navigasi kebanyakan, widget menu navigasi ini juga sudah mengusung menu dropdown, yakni menu yang dilengkapi dengan sub menu, selain itu, menu ini juga mengusung tema warna biru yang stylish dan shadow yang berbayang di bawahnya.

Membuat Menu Navigasi (Navbar) Blue Thin di Blog

1. Login ke Blogger.

2. Pilih Template.

3. Klik Edit HTML.

4. Klik tanda panah hitam disebelaha kode yang mirip <b:skin>...</b:skin> (untuk membuka seluruh css).

5. Cari kode ]]></b:skin> (gunakan CTRL+F), lalu letakkan kode dibawah ini tepat diatasnya.

/* Kode CSS Menu Navigasi Blue Thin Start */
 #tuliskancom_litemenu {
 width:auto;
 background:#166bea;
 border-bottom: 5px solid #993300;
 border-top: 1px solid #e14d09;
 clear: both;
 overflow: hidden;
-moz-box-shadow: 2px 3px 5px #000000;
-webkit-box-shadow: 2px 3px 5px #000000;
box-shadow: 2px 3px 5px #000000;
border:none 5px #000000;
-moz-border-radius-topleft: 16px;
-moz-border-radius-topright:16px;
-moz-border-radius-bottomleft:16px;
-moz-border-radius-bottomright:16px;
-webkit-border-top-left-radius:16px;
-webkit-border-top-right-radius:16px;
-webkit-border-bottom-left-radius:16px;
-webkit-border-bottom-right-radius:16px;
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
 }
 #tuliskancom_litemenu ul {
 float: left;
 width: 100%;
 }
 #tuliskancom_litemenu li {
 float: left;
 list-style-type: none;
 }
 #tuliskancom_litemenu li a {
 background:#166bea;
 color: #fff;
 display: block;
 font-size: 14px;
 padding: 5px 17px 5px 15px;
 position: relative;
 text-decoration: none;
 }
 #tuliskancom_litemenu li a:hover {
 background:#002660;
 color: #fff;
 }
 #tuliskancom_litemenu li li a {
 background: none;
 background-color: #0d56c4;
 border: 1px solid #0d408d;
 border-top-width: 0;
 color: #fff;
 font-size: 14px;
 padding: 5px 10px;
 position: relative;
 text-transform: none;
 width: 130px;
 }
 #tuliskancom_litemenu li li a:hover {
 background: none;
 background-color: #166bea;
 }
 #tuliskancom_litemenu li ul {
 height: auto;
 left: -9999px;
 margin: 0 0 0 -1px;
 position: absolute;
 width: 160px;
 z-index: 9999;
 }
 #tuliskancom_litemenu li:hover ul {
 left: auto;
 }
/* Kode CSS Menu Navigasi Blue Thin End */

6. Klik "Save/Simpan" Template, dan selesai.

7. Sekarang menuju ke halaman Tata Letak / Layout.

8. Klik Add / Tambahkan gadget.

9. Pilih HTML/JavaScript.

10. Letakkan kode berikut ini kedalamnya.

<div id="tuliskancom_litemenu">
<li><a href="#">Home</a></li>
<li><a href="http://www.tuliskan.com">Menu 1</a>
 <ul>
<li><a href="#">Sub Menu 1.1</a></li>
<li><a href="#">Sub Menu 1.2</a></li>
<li><a href="#">Sub Menu 1.3</a></li>
</ul>
</li>
<li><a href="http://farespo.blogspot.com">Menu 2</a>
 <ul>
<li><a href="#">Sub Menu 2.1</a></li>
<li><a href="#">Sub Menu 2.2</a></li>
<li><a href="#">Sub Menu 2.3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
</div> 

Keterangan:

• Ganti kode yang berwarna merah dengan URL dari masing-masing judul menu
• Ganti kode yang berwarna biru dengan Judul dari masing-masing URL

11. Klik "Save/Simpan" gadget, dan selesai.

Demikian informasi terbaru tentang cara Membuat Menu Navigasi (Navbar) Blue Thin di Blog, simak juga artikel menarik lainya seputar tutorial dan tips trik blog tentang Membuat Menu Navigasi Navbar CSS3 Simple di Blog, semoga bermanfaat, dan selamat mencoba.

Tweet