Menu Vertikal Pada widget 3 Macam Style

MENU VERTIKAL

DEMO

Selamat malam,salam sejahtera selalu.

Tutor kali ini masih Berhubungan dengan Blogger,di mana kita akan membuat Menu Vertikal pada widget… Menu Pada Blog atau web merupakan Hal yang Ter penting, karna menu merupakan salah satu Media yang bisa memudahkan para pengunjung untuk Menavigasi atau Mencari konten yang di inginkannya.

Fungsi lain dari menu vertical ini adalah, selain mempunyai Tampilan yang Menarik dan sederhana juga tidak memberatkan Halaman anda,Dan juga Tersedia 3 macam style yang Bebeda beda.

Untuk mempersingkat waktu, langsung aja Ke TKP.

Masuk Ke blogger
Pilih menu tata letak kemudian
Add gadget, HTML/javaScript dan
Masukkan salah satu kode di bawah ini yang pass untuk anda :

STYLE 01

KODE 1

<style>

#menu8 {width: 200px;margin: 10px;border-style: solid;border-color: #656556;border-size: 0px;border-width: 1px;}

#menu8 ul {list-style: none;margin: 0;padding: 0;}

#menu8 img {border: none;}

#menu8 li a {height: 32px;voice-family: "\"}\"";voice-family: inheritheight: 24px;text-decoration: none;}

#menu8 li a:link, #menu8 li a:visited {color: #656556;display: block;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFJUGzM8AuUn4GQBr4cvcNQukEq0dy2vqYSmJusxwsZTm1-ggHxXI98se69bL_d0kdoA2axUSujl2Zkxpi6CbOi3MddYbX-sdIx7E4ole6yscehvCifgOanYnpm5ZfGqwG0uBoHssDHFVv/);padding: 8px 0 0 20px;}

#menu8 li a:hover, #menu8 li #current {color: #474739;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFJUGzM8AuUn4GQBr4cvcNQukEq0dy2vqYSmJusxwsZTm1-ggHxXI98se69bL_d0kdoA2axUSujl2Zkxpi6CbOi3MddYbX-sdIx7E4ole6yscehvCifgOanYnpm5ZfGqwG0uBoHssDHFVv/) 0 -32px;padding: 8px 0 0 20px;}

</style>

<div id="menu8">

<ul>

<li><a id="current" href="#">Home</a></li>

<li><a href="URL ANDA">HTML</a></li>

<li><a href="URL ANDA">CSS</a></li>

<li><a href="URL ANDA">JavaScript</a></li>

<li><a href="URL ANDA">Templates</a></li>

<li><a href="URL ANDA">About</a></li>

<li><a href="URL ANDA">Contact</a></li>

</ul>

</div>

STYLE 02

KODE 2

<style>

#menu12 {width: 200px;margin: 10px;}

#menu12 ul {list-style: none;margin: 0;padding: 0;}

#menu12 img {border: none;}

#menu12 li a {height: 32px;voice-family: "\"}\"";voice-family: inherit;height: 22px;text-decoration: none;}

#menu12 li a:link, #menu12 li a:visited {color: #666;display: block;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Yjy4Kui82yTrhUWj7uKtk23CTA4pav5houkGUmvkeZaK88qQBVtfqTdHtlqp9DJujgoL5qa8M0F3URAT9YIiciuSIohp3mmk5AqSKogiLAdGJJEUt1CdDi6vpfdFmLrw1BCW9iE1gukl/);padding: 10px 0 0 35px;}

#menu12 li a:hover, #menu12 li #current {color: #000;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Yjy4Kui82yTrhUWj7uKtk23CTA4pav5houkGUmvkeZaK88qQBVtfqTdHtlqp9DJujgoL5qa8M0F3URAT9YIiciuSIohp3mmk5AqSKogiLAdGJJEUt1CdDi6vpfdFmLrw1BCW9iE1gukl/) 0 -32px;padding: 10px 0 0 35px;}

</style>

<div id="menu12">

<ul>

<li><a id="current" href="#">Home</a></li>

<li><a href="URL ANDA">HTML</a></li>

<li><a href="URL ANDA">CSS</a></li>

<li><a href="URL ANDA">JavaScript</a></li>

<li><a href="URL ANDA">Templates</a></li>

<li><a href="URL ANDA">About</a></li>

<li><a href="URL ANDA">Contact</a></li>

</ul>

</div>

STYLE 03

KODE 3

<style>

#menu14 {width: 200px;margin: 10px;}

#menu14 ul {list-style: none;margin: 0;padding: 0;}

#menu14 img {border: none;}

#menu14 li a {height: 32px;voice-family: "\"}\"";voice-family: inherit;height: 24px;text-decoration: none;}

#menu14 li a:link, #menu14 li a:visited {color: #333;display: block;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXJC1EWjPGg5tVph1a1yEjvL0WBXDYd24LTeXLkjsQ5LCuQIN2qBeB9GMqJbWIB5ec11PiQdRcVBU65rTi-WG786Q-30IkJYWSjZ25P0fRrQxg8kYmNyuY8M1mncUqCd4MAXR4YMJ7Evem/);padding: 8px 0 0 10px;}

#menu14 li a:hover, #menu14 li #current {color: #FFF;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXJC1EWjPGg5tVph1a1yEjvL0WBXDYd24LTeXLkjsQ5LCuQIN2qBeB9GMqJbWIB5ec11PiQdRcVBU65rTi-WG786Q-30IkJYWSjZ25P0fRrQxg8kYmNyuY8M1mncUqCd4MAXR4YMJ7Evem/) 0 -32px;padding: 8px 0 0 10px;}

</style>

<div id="menu14">

<ul>

<li><a id="current" href="#">Home</a></li>

<li><a href="URL ANDA">HTML</a></li>

<li><a href="URL ANDA">CSS</a></li>

<li><a href="URL ANDA">JavaScript</a></li>

<li><a href="URL ANDA">Templates</a></li>

<li><a href="URL ANDA">About</a></li>

<li><a href="URL ANDA">Contact</a></li>

</ul>

</div>

CATATAN : Ganti warna merah dengan URL anda. Dan Warna Biru (Nama Konten)

Untuk melihat Contoh dari konten di atas sobat bisa kunjungi di sini . Terima kasih dan semoga bisa membantu anda. Salam sukses selalu Buat para Blogger.

D-Crow