Vertical Blue Menu

Last time i was explained about Horizontal Menu wiyh CSS, and now i will give you a good menu in vertical line. This menu for replace in the sidebar, but before you get this menu you must look the demo, please click at the button below :



I like this menu because i love green color, so cool. Do you like it to? OK, if you same with me please follow the instruction below :

Step 1 ;

1. Sign in to blogger with your ID


2. Click layout tab


3. Click Edit HTML tab


4. Click Download Full Template, save your template for backup data


5. Place this CSS code above ]]></b:skin>


/* vertikal menu biru di mulai ---------------------------------------- */ /*Credits: CSS Library */ /*URL: http://css-lybrary.blogspot.com */ #menu-biru{ border-bottom-width: 0; } #menu-biru ul{ margin: 0; padding: 0; font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; /*pemilihan bentuk huruf */ } #menu-biru a{ display: block; padding: 3px 0; padding-left: 9px; text-decoration: none; /*agar link tidak bergaris bawah */ color: white; /*warna hurup */ border-right:1px solid #000000; /*warna border samping kanan */ background-color: #2175bc; border-bottom: 1px solid #90bade; border-left: 7px solid #1958b7;/*warna border samping kanan */ } #menu-biru a:hover { background-color: #2586d7; /*warna background */ border-left-color: #1c64d1; } #menu-biru 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; }



6. Click Save Template button

Step 2 :

1. Click Page Element tab


2. Click Add a Page Element


3. Click ADD TO BLOG button below Javascript/HTML


4. Copy and paste the code below in to the element


<!-- silahkan ganti dengan link milik sobat --> <div id="menu-biru"> <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> <!-- untuk menambah link baru simpan di sini --> </div> <!-- div penutup menu biru -->



5. Click SAVE button


6. Click and hold the new element and drag to place where you want


7. Click SAVE button


8. Finish

You must change the links with your own links. Ok, have a nice day for you.