Cara Membuat Menu Navigation Vertikal

clip_image003Jika 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 Smile

Tidak ada komentar:

Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top