Informasi umum

Cara Membuat Menu Navigation Vertikal

Jika pada postingan sebelumnya saya telah membahas bagaimana cara membuat menu navigation Horizontal maka pada postingan kali saya akan membahas bagaimana cara membuat menu navigation vertikal.

Jika sobat berminat untuk memasangnya di blog sobat ikuti langkah-langkah di bawah ini.

1. Login ke blogger atau klik disini
2. Pilih template >> Edit Html >> Lanjutkan
3. Jangan lupa centang Expand widget template
4. Copy script di bawah ini dan letakkan di atas code ]]></b:skin>

/*Vertikal Menu
---------------------------------*/
.vertikalmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* lebar dari menu vertikal*/
}
.vertikalmenu li{
border-bottom: 1px solid white;
}
.vertikalmenu li a{
background: #000000 ; /*warna dari menu vertikal*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0;
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black;
}
.vertikalmenu li a:visited, .vertikalmenu li a:active{
color: white;
}
.vertikalmenu li a:hover{
background-color: #737373; /*warna setelah pointer diarahkan (hover)*/
color: white;
border-bottom: 1px solid black;
}

Catatan:

• Perhatikan tulisan yan berwarna merah atur sesuai dengan fungsinya

5. Kemudian simpan.

6. Kemudian kembali ke dashboard dan pilih tata letak >> tambah gadget >> Html/JavaScript
7.Copy paste script di bawah ini.

<ul class="vertikalmenu">
<li><a href="/">» HOME</a></li>
<li><a href="http://junedalbughisy.blogspot.com">» Tutorial Blog</a></li>
<li><a href="http://bankloe.blogspot.com">» Bisnis Online</a></li>
<li><a href="http://by-template.blogspot.com">» Free Template</a></li>
<li><a href="http://zonahandphone.blogspot.com">» Handphone</a></li>
<li><a href="http://praktis-triktips.blogspot.com">» Komputer</a></li>
</ul>

Catatan:

• Tulisan yang berwarna orange dapat sobat ganti dengan Link Url yang sobat inginkan.

8. Dan yang terakhir simpan.

Selamat mencoba, Happy blogging