Cara Membuat Menu Navigasi Vertikal Untuk Blog

1:56 AM Unknown

ADVERTISME

Cara Membuat Menu Navigasi Vertikal Untuk Blog. Navigasi menu pada blog akan mempermudah para visitor mencari berita yang sedang mereka cari, terlebih jika blog tersebut mempunyai sub berita yang sangat banyak, selain itu dengan memberikan menu navigasi, akan lebih mempermudah visitor merayapi berbagai berita yang ada pada blog dan menghemat waktu untuk berpindah dari satu kemenu lainnya. dan pada postingan kali ini saya akan memberikan trik bagaimana Cara Membuat Menu Navigasi Vertikal Untuk Blog, tentunya dengan menambah menambahakan keode CSS, kalau andar tertarik silahkan ikuti langkahnya dibawah ini:

Catatan: Sebelum anda melakukan trick dibawh ini lakukan membackup templete terlebih dahulu, untuk menjaga-jaga bila terjadi kelasalahn

Cara Membuat Menu Navigasi Vertikal

1. Login ke akun blogspot anda.

2. Masuk ke menu Layout dan pilih Edit HTML.

3. Dan carilah kode ]]></b:skin>

4. Jika sudah ketemu, masukan kode di bawah ini di atas kode ]]></b:skin> 

/*Vertikal Menu

———————————*/

.vertikalmenu{

list-style-type: none;

margin: 0;

padding: 0;

width: 180px;

}

.vertikalmenu li{

border-bottom: 1px solid white;

}

.vertikalmenu li a{

background: #000000;

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;

color: white;

border-bottom: 1px solid black;

}

5. Save.

Keteranganwidth: 180px; adalah ukuran lebar dari menu vertical.

background: #000000 ; adalah warna dari menu vertical.

background-color: #737373; adalah warna setelah pointer di arahkan (hover)

Tutorial Membuat Vertical Menu Di Blogspot

Langkah ke 2 adalah masuk ke Page Element lalu klik add Page element dan pilih HTML/java Script.

Masukan kode dibawah ini.

<ul class=”vertikalmenu”>

<li><a href=”/”>» HOME</a></li>

<li><a href=”http://nama blog anda.blogspot.com”>» Tutorial Blog</a></li>

<li><a href=”http:// nama blog anda.blogspot.com”>» Tips And Trick </a></li>

<li><a href=”http:// nama blog anda.blogspot.com”>» Free MP3</a></li>

<li><a href=”http:// nama blog anda.blogspot.com”>» Free Movie</a></li>

<li><a href=”http:// nama blog anda.blogspot.com”>» Free Software</a></li>

</ul>

Keterangan

Ganti http://nama blog anda.blogspot.com dengan link yang akan anda gunakan sebagai menu.

Ganti Tutorial Blog dengan judul dari menu yang akan anda gunakan.

Jika sudah, save. Lalu lihatlah hasilnya.

Bagaimana? Membuat menu vertical mudah bukan?

Selamat mencoba.. Dan semoga bermanfaat.