Cara membuat menu navigasi vertikal warna pink keren
Menu navigasi merupakan elemen yang penting dari suatu blog. Dengan menu navigasi kita bisa menuju suatu kategori dari postingan pada blog, sehingga mempermudah kita untuk melakukan pencarian. Menu navigasi biasanya ada 2 jenis, yaitu menu navigasi horizontal dan menu navigasi vertikal. kali ini saya akan membahas bagaimana cara membuat menu navigasi vertikal pada blog seperti di bawah ini.
Menu navigasi berwarna pink, mungkin bisa digunakan oleh para blogger wanita untuk memperindah blog nya tetapi, bagi para pria tentu bisa juga menggunakannya. apabila anda tidak menyukai warna pink anda hanya tinggal mengganti kode html warnanya dengan kode warna yang anda sukai.
adapun langkah-langkah pembuatan menu navigasi vertikal seperti tampilan di atas adalah:
- Masuk ke dashboard Blogger
- Klik menu Template
- Klik Edit HTML
- Cari Kode ]]></b:skin> dengan cara menekan Ctrl+f
- Letakan kode di bawah tepat di atas kode ]]></b:skin>
-----------------------------------------------
*/
.side-nav {
margin-left:0;
display: block;
}
.side-nav a {
display: block;
margin: 0 0 4px;
padding: 6px 20px 9px;
color: #fff;
font-size: 18px;
-webkit-transition: color, background-color 0.3s linear;
-moz-transition: color, background-color 0.3s linear;
-o-transition: color, background-color 0.3s linear;
transition: color, background-color 0.3s linear;
}
.side-nav a:hover {
background-color: #222;
text-decoration:none;
}
.side-nav a:hover {
color: #fff;
}
/* Warna Menu
-----------------------------------------------
*/
.pale1 { background-color: #FF00CC}
.pale2 { background-color: #FF00CC; }
.pale3 { background-color: #FF00CC; }
.pale4 { background-color: #FF00CC; }
.pale5 { background-color: #FF00CC; }
.pale6 { background-color: #FF00CC; }
- Selanjutnya klik menu Tata Letak
- Klik Tambahkan Gadget dan pilih 'HTML/Javascript
- Letakkan script html di bawah ini pada kolom yang disediakan
<div class='widget-content'>
<div class='side-nav'>
<a class='pale3' href='#'>Senin</a>
<a class='pale4' href='#'>Selasa</a>
<a class='pale1' href='#'>Rabu</a>
<a class='pale2' href='#'>Kamis</a>
<a class='pale2' href='#'>Jumat</a>
<a class='pale5' href='#'>Sabtu</a>
</div></div></div>
- Klik Simpan
Keterangan:
Silahkan anda ganti kode # dengan alamat URL anda dan warna kuning dengan menu yang anda inginkan
