Posted by : Karta_Jaya

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...

{ 3 komentar... read them below or Comment }

Tukaran Link Yooo...Silahkan Masukkan Nama dan URL Blog Kamu di Dalam Kotak di Bawah Ini. Silahkan Konfirmasi Saya di HUBUNGI KAMI untuk Melakukan Link Balik ke Blog Anda. Terima Kasih

Terima Kasih Telah Bertukaran Link Dengan Kami. Secepatnya Akan Kami Link Balik

Welcome to My Blog

Blog Archive

Tips Blog


Silahkan Anda Baca Artikel Kami, Jangan Lupa Tinggalkan Jejak Anda di Kolom Komentar.





Page Rank Checker Logo Forantum I Blogging Is My Life Photobucket Blogger Help Templates Widgets SEO Tips aRvaNs Site's WAHYOKU BLOG

Jika Sobat Menghapus Link TTB dari blog sobat, maka TTB-pun akan Berbuat hal yang sama. Adil kan?




Silahkan Anda Klik Salah Satu Link Iklan Di Atas


Widget Blog


Silahkan Anda Baca Artikel Kami, Jangan Lupa Tinggalkan Jejak Anda di Kolom Komentar.


- Copyright © TIPS dan TRIK BLOG -Robotic Notes- Powered by Blogger - Designed by Johanes Djogan -