FARESPO - Sebuah struktur blog tentu terbentuk mencakup komponen-komponen dasarnya, menyerupai navbar, sidebar, header, footer, dan lain sebagaianya, maka untuk membangun sebuah template blog tentu kita harus menciptakan komponen-komponen dasar tersebut terlebih dahulu, gres kita lengkapi atau finishing dengan banyak sekali 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 hidangan navigasi yang akan kita buat pvada hari ini, yakni Google menganjurkan bekerjsama dalama membangun sebuah blog kita juga harus membangun navigasi yang terang dan mudah, jadi dalam artianya kita dapat menciptakan banyak sekali navigasi, mulai dari mengaktifkan arsip blog, menciptakan halaman static yang berisikan peta situs blog kita, sampai menciptakan hidangan navigasi menyerupai yang akan kita praktekkan pada kesempatan kali ini, tak lain dan tak bukan yaitu untuk memudahan pengunjung dalam menyeleksi topik yang mereka minati.
Nah, sesuai dengan ulasan singkat diatas, pada kesempatan kali ini aku ingin membuatkan salah satu koleksi widget hidangan navigasi yang aku adopsi dari bloggertrix, hampir sama dengan widget hidangan navigasi kebanyakan, widget hidangan navigasi ini juga sudah mengusung hidangan dropdown, yakni hidangan yang dilengkapi dengan sub menu, selain itu, hidangan 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 instruksi yang menyerupai <b:skin>...</b:skin> (untuk membuka seluruh css).
5. Cari instruksi ]]></b:skin> (gunakan CTRL+F), kemudian letakkan instruksi dibawah ini sempurna 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 instruksi 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="aciknadzirah.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 instruksi yang berwarna merah dengan URL dari masing-masing judul menu
- Ganti instruksi yang berwarna biru dengan Judul dari masing-masing URL
11. Klik "Save/Simpan" gadget, dan selesai.
Demikian warta terbaru wacana 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, biar bermanfaat, dan selamat mencoba.
Sumber http://farespo.blogspot.com
