Agar lebih jelas, maka saya akan terangkan terlebih dahulu kenapa menu navigasi itu sangat penting dalam sebuah blog, menurut ebook starter guide google yang saya baca, mereka (google) menuturkan bahwasanya menu navigasi sangatlah penting untuk diterapkan, bukan hanya karena google, karena pengunjung selalu membutuhkanya, terutama arsip blog, agar pengunjung dapat dengan mudah menemukan artikel-artikel lama di blog kita, navigasi nomor halaman, serta menu navigasi di bawah header, agar pengunjung juga lebih mudah dalam menseleksi topik artikel yang mereka minati.
Untuk itu, pada postingan kali ini saya akan membagikan sebuah widget menu navigasi sederhana yang mengangkat tema minimalist, dan juga dibalut dengan warna natural hitam, serta dilengkapi dengan border bergaya dashed agar terlihat seperti jahitan di pakaian. Menu Navigasi ini juga terkesan lebih lengkap dan padat karena dilengkapi dengan sub menu yang bisa memecah suatu menu ke beberapa pilihan, jadi menu topik di blog kita juga bisa dibahas dengan lebih kompleks dan detail.
Membuat Menu Navigasi Classic dengan Sub Menu
1. Login ke Blogger.
2. Pilih Template.
3. Klik Edit HTML.
4. Klik tanda panah hitam disebelah kode yang mirip <b:skin>...</b:skin> (untuk membuka css).
5. Cari kode ]]></b:skin> (gunakan CTRL+F), lalu letakkan kode berikut ini diatasnya.
/* Kode CSS Menu Navigasi Minimalist Start */
#tuliskancom{width:auto;background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieEZwo_Lj-HAa_zo8cozgFxkFP8rUty2vOGMvLPcA7quNkE0p6JIBaW2CY-W_5IDEBtsp5SwIKPIowsS6TIhtupIC_Bx9TserKYswt7xG2Q56el3XdvCHWkqTgUO_3d5nil6yt5AtiDT8/s1600/tuliskan+dashed.jpg) repeat-x scroll top;color:#ddd;height:35px;-webkit-box-shadow:0 1px 5px #aaa;-moz-box-shadow:0 1px 5px #aaa;-ms-box-shadow:0 1px 5px #aaa;-o-box-shadow:0 1px 5px #aaa;box-shadow:0 1px 5px #aaa;border-bottom:1px solid #000;padding-top:8px;border:none 5px #000000;-moz-border-radius-topleft: 5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
#tuliskancom ul,#tuliskancom li{margin:0 auto;padding:0 0;list-style:none}
#tuliskancom ul{height:35px;width:980px}
#tuliskancom li{float:left;display:inline;position:relative;font:14px Skranji;text-transform:uppercase;}
#tuliskancom a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#ddd;}
#tuliskancom li a:hover{color:#fff}
#tuliskancom input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#tuliskancom label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#tuliskancom label span{font-size:12px;position:absolute;left:35px}
#tuliskancom ul.tuliskancom3{height:auto;overflow:hidden;width:180px;background:#f1eeed url(http://3.bp.blogspot.com/-7ppDp44Yxtc/UUa_IMHEhpI/AAAAAAAAAjQ/F9QEGUl5S3w/s1600/index.png);position:absolute;z-index:99;display:none;}
#tuliskancom ul.tuliskancom3 li{display:block;width:100%;font:12px Arial;text-transform:none;text-shadow:none}
#tuliskancom ul.tuliskancom3 a{color:#333}
#tuliskancom li:hover ul.tuliskancom3{display:block}
#tuliskancom a.tuliskancom1{padding:0 27px 0 14px}
#tuliskancom a.tuliskancom1::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#ddd transparent transparent transparent;position:absolute;top:14px;right:9px}
#tuliskancom ul.tuliskancom3 a:hover{background:#ddd;color:#333}
.page-tuliskancom{width:70%;margin:18px auto;padding:0;float:right;text-shadow:0 1px 0 rgba(0,0,0,0.7)}
.page-tuliskancom ul{list-style:none;color:#ddd;width:700px;margin:0 auto;padding:0}
.page-tuliskancom ul li{list-style:none;line-height:32px;display:inline-block}
.page-tuliskancom li a{color:#ddd;display:block;font-size:14px;font-family:Arial;position:relative;text-decoration:none;text-transform:capitalize;padding:0 10px}
.page-tuliskancom li a:hover,.page-tuliskancom .selected{color:#fff;text-decoration:none;background: rgba(0,0,0,.4);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset}
/* Kode CSS Menu Navigasi Minimalist End */
7. Sekarang, buka halaman Tata Letak / Layout.
8. Klik Add Gadget.
9. Pilih gadget HTML/JavaScript.
10. Letakkan kode berikut ini kedalanya.
<div id="tuliskancom">
<ul>
<li><a href='/'><img alt='home' height=18' src='http://www.presentation-process.com/images/home-icon-small.jpg' style='padding-top:8px;' width='20'/></a></li><li><a href="#">Menu 1</a></li>
<li><a class="tuliskancom1" href="#">Menu 2</a>
<ul class="tuliskancom3">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a class="tuliskancom1" href="#">Menu 4</a>
<ul class="tuliskancom3">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
</ul>
</div>
Keterangan:
- Ganti kode yang berwarna merah dengan URL tujuan dari masing-masing judul menu
- Ganti kode yang berwarna biru dengan Judul dari masing-masing menu
11. Klik "Save/Simpan" gadget, dan selesai.
Demikian informasi terbaru tentang Membuat Menu Navigasi Classic dengan Sub Menu di Blog, simak juga artikel menarik lainya seputar tutorial dan tips trik blog tentang Membuat Author Box dengan Email Subscription dan Social Media
Sumber Referensi : Bloggertrix
EmoticonEmoticon