Membuat Menu Navigasi "Green Library"

Berhubung saya baru memberikan tips tentang menu navigasi, jadi saya ingin memberikan tips lagi nih buat sobat blogger cara untuk membuat menu navigasi "Green Library". Bentuk menunya ini secara vertikal dengan background warna hijau.



Untuk membuatnya, silahkan teman-teman ikuti langkah berikut. Tidak jauh berbeda ko dari cara-cara sebelumnya.



Langkah Pertama
1. Login ke blogger dengan akun anda sendiri
2. Pada Dasbor, pilih Rancangan
3. Kemudian pilih Edit HTML
4. Cari kode seperti ini ]]></b:skin>
5. Letakkan kode Script berikut tepat diatas kode ]]></b:skin>

/* vertikal menu hijau di mulai
---------------------------------------- */

/*Credits: CSS Library */
/*URL: http://css-lybrary.blogspot.com */

#menu-hijau{

border-bottom-width: 0;
}

#menu-hijau ul{
margin: 0;
padding: 0;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; /*pemilihan bentuk huruf */
}

#menu-hijau a{
display: block;
padding: 3px 0;
padding-left: 9px;
text-decoration: none; /*agar link tidak bergaris bawah */
color: white; /*warna hurup */
background-color: #28952D; /*warna background */
border-bottom: 1px solid #B6EDB9; /*warna border bawah */
border-left: 7px solid #245926; /*warna border samping kiri */
border-right:1px solid #000000; /*warna border samping kanan */
}

#menu-hijau a:hover {
background-color: #3BC642; /*warna background */
border-left-color: #357838;
}

#menu-hijau div.menutitle{
color: white;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: black;
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

Jika anda ingin mengeditnya, silahkan saja. Secukupnya.
6. Kemudian anda Simpan Template.

Langkah Kedua
1. Pilih Elemen Laman
2. Pilih Tambah Gadget
3. Sekarang Pilih HTML/JavaScript
4. Kopi Paste kode script Berikut

<!-- silahkan ganti dengan link milik sobat -->

<div id="menu-hijau">
<div class="menutitle">CSS Lybrary</div><!-- judul menu pertama di sini -->
<ul>
<a href="http://css-lybrary.blogspot.com">Home</a>
<a href="http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html">Blue menu</a>
<a href="http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html">Blue menu 2</a>
<a href="http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html">Double Line Menu</a>
<a href="http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html">Flip menu</a>
<!-- untuk menambah link baru simpan di sini -->
</ul>

<div class="menutitle">Unique Template</div><!-- judul menu kedua di sini -->
<ul>
<a href="http://template-unik.blogspot.com/2007/07/white-minima-3-column.html">Minima 3 column</a>
<a href="http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html">Minima 3 column (beta)</a>
<a href="http://template-unik.blogspot.com/2007/07/1st-template-unik.html">1st template unik</a>
<a href="http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html">Scribe 3 column</a>
<a href="http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html">Blu Lover</a>
<a href="http://template-unik.blogspot.com/2007/08/gray-lover-template.html">Gray Lover</a>
<!-- untuk menambah link baru simpan di sini -->
</ul>

<div class="menutitle">Blog Tutorial</div><!-- judul menu ketiga di sini -->
<a href="http://kolom-tutorial.blogspot.com/2007/09/buat-daftar-isi-blog.html">Buat daftar isi</a>
<a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-buku-tamu-di-sidebar.html">Pasang buku tamu</a>
<a href="http://kolom-tutorial.blogspot.com/2007/07/pasang-kode-tuker-link.html">Kode tuker link</a>
<a href="http://kolom-tutorial.blogspot.com/2007/07/pasang-jadwal-sholat.html" style="border-bottom-color: black">Jadwal sholat</a>

</div> <!-- div penutup menu hijau -->

Silahkan anda ganti link dengan Link yang akan anda tuju.Coba anda perhatikan tulisan yang berwarna-warni di atas.

Jangan Lupa diSave yah...