Cara Membuat Menu Vertikal Pada Sidebar Blog

Jika Kemaren saya posting bagamina cara membuat tab menu horizontal Sekarang kita bahas cara membuat menu vertikal pada sidebar
Coba lihat gambar berikut ini

Apakah Menu seperti itu yang anda maksud? Jika iya mari kita ikuti caranya seperti berikut ini

Kalo Memang Itu yang dimaksud, ikuti langkah2 berikut ini

1. Log In ke blogger anda, Masuk ke dasbor

2. Masuk ke Tab Template> Edit HTML

3. Cari Kode ]]></b:skin> Dan Letakan kode CSS berikut ini Tepat diatas kode ]]></b:skin>

 Kode CSS:

#ripsnav { color: #fff; background: transparent; border-bottom: none; border-right: none; padding: 0 0px; margin-left: -25px; width: 15em; font: normal 11px Verdana, sans-serif; } #ripsnav li { list-style: none; margin: 0; font-size: 11px; }<br />#ripsnav a { display: block; text-decoration: none; margin-bottom: 0.01em; margin-top: -0.8em; color: yellow; background: #191919; border-width: 1px; border-style: solid; border-color: yellow green green #6cf; border-left: 0.5em solid #fc0; padding: 0.1em 0.2em 0.2em 0.3em; } #ripsnav a#current { border-color: #5bd #035 #068 #f30; } #ripsnav a { width: 100%; /* only necessary for Internet Explorer */ } #ripsnav a { voice-family: "\"}\""; voice-family: inherit; width: 9.6em; /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */ } #navcontainer>#ripsnav a { width: auto; /* only necessary if you use the hacks above for the Internet Explorer *<br />} #ripsnav a:hover, #ripsnav a#current:hover { background: #28b; border-color: green #6cf #5bd #fc0; padding: 0.2em 0.3em 0.3em 0.4em; } #ripsnav a:active, #ripsnav a#current:active { background: #17a; border-color: #069 #6cf #5bd white; padding: 0.4em 0.35em 0.25em 0.9em; }

Untuk Menyesuaikan Lebar, atur pada kode ini  width: 15em; pada kode CSS diatas, Semua perubahan warna pun ada pada kode CSS ini, Silahkan lakukan perubahan untuk menyesuaikan dengan blog anda.
4. Klik Simpan
5. Tetap Pada Dasbor, Kemudian Klik Tata Letak
6. Add Gadget/Elemen baru, Pilih HTML/Javascript
Masukan Kode Berikut ini

<div id="navcontainer"><ul id="ripsnav"><li><a href="http://www.ripsway.com/search/label/Artikel">Semua Artikel</a></li><li><a href="http://www.ripsway.com/search/label/Blogging">Blogging</a></li><li><a href="http://www.ripsway.com/search/label/Capucino">Capucino</a></li><li><a href="http://www.ripsway.com/search/label/Cara%20memasang%20mister%20linky">Cara memasang mister linky</a></li><li><a href="http://www.ripsway.com/search/label/Cerita%20Humor">Cerita Humor</a></li><li><a href="http://www.ripsway.com/search/label/Cerita%20Lucu">Cerita Lucu</a></li><li><a href="http://www.ripsway.com/search/label/Gambar%20Aneh">Gambar Aneh</a></li><li><a href="http://www.ripsway.com/search/label/Gambar%20Lucu">Gambar Lucu</a></li><li><a href="http://www.ripsway.com/search/label/Hacker">Hacker</a></li><li><a href="http://www.ripsway.com/search/label/Harga%20Dinar">Harga Dinar</a></li><li><a href="http://www.ripsway.com/search/label/Harga%20Dirham">Harga Dirham</a></li><li><a href="http://www.ripsway.com/search/label/Imesh">Imesh</a></li><li><a href="http://www.ripsway.com/search/label/Kesehatan">Kesehatan</a></li><li><a href="http://www.ripsway.com/search/label/Kode%20Script">Kode Script</a></li><li><a href="http://www.ripsway.com/search/label/Koleksi%20Tab%20Menu">Koleksi Tab Menu</a></li><li><a href="http://www.ripsway.com/search/label/Lister%20Linky">Lister Linky</a></li><li><a href="http://www.ripsway.com/search/label/Membuat%20Email">Membuat Email</a></li><li><a href="http://www.ripsway.com/search/label/Membuat%20Menu%20blog">Membuat Menu blog</a></li><li><a href="http://www.ripsway.com/search/label/PC%20Suit%20Sony%20Ericsson">PC Suit Sony Ericsson</a></li><li><a href="http://www.ripsway.com/search/label/Resep">Resep</a> </li><li><a href="http://www.ripsway.com/search/label/Rokok">Rokok</a> </li><li><a href="http://www.ripsway.com/search/label/Setting%20Email">Setting Email</a></li><li><a href="http://www.ripsway.com/search/label/Tab%20menu">Tab menu</a></li><li><a href="http://www.ripsway.com/search/label/Template">Template</a></li><li><a href="http://www.ripsway.com/search/label/Trik">Trik</a></li><li><a href="http://www.ripsway.com/search/label/Tukar%20Link%20Otomatis">Tukar Link Otomatis</a></li><li><a href="http://www.ripsway.com/search/label/Tutorial">Tutorial</a> </li><li><a href="http://www.ripsway.com/search/label/Tutorial%20Dasar%20Blogger">Tutorial Dasar Blogger</a></li><li><a href="http://www.ripsway.com/search/label/Widget">Widget</a></li></ul></div>

7. Klik Simpan.
Selamat, Anda sudah memiliki tab menu vertikal.... Happy Blogging

Simpan Artikel Cara Membuat Menu Vertikal Pada Sidebar Blog Dengan Link : https://neoblogku.blogspot.com/2012/11/cara-membuat-menu-vertikal-pada-sidebar.html

Judul : Cara Membuat Menu Vertikal Pada Sidebar Blog.
Kategori : Artikel / Blogging / Kode CSS / Koleksi Tab Menu / Menu Vertikal / Tab menu / Template
Ditulis oleh : Unknown Pada Sunday, November 11
Bagikan Ke : Facebook / Twitter