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.

Read full article  ⇒

Horizontal Blue Menu 2

This menu almost similiar with horizontal blue menu, but it have a little different. If horizontal blue menu have border under menu, horizontal blue menu 2 have border above the menu.

For the demo, please click at the button below :



Do you like this menu? Ok, 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>


/*Credits: CSS Library for new blogger (beta) */ /*URL: http://css-lybrary.blogspot.com */ #blue-menu2{ padding: 0; width: 100%; border-top: 5px solid #236411; background: transparent; voice-family: "\"}\""; voice-family: inherit; } #blue-menu2 a{ float: left; display: block; font: bold 13px Arial; color: white; text-decoration: none; margin: 0 1px 0 0; padding: 5px 10px; background-color: #113464; border-top: 1px solid white; font-weight:bold; } #blue-menu2 a:hover{ background-color: #2E5E9E; color: white; font-weight:bold; color:#66FFFF; } #blue-menu2 #current a{ background-color: #236411; color: white; border-color: #236411; }




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


<!-- Please change the links with your own links --> <div id="blue-menu2"> <div style="margin-left: 100px"><a href="http://css-lybrary.blogspot.com" title="Home">Home</a></div> <a href="http://kolom-tutorial.blogspot.com" title="Tutorial blogger in bahasa indonesia">Kolom Tutorial</a> <div id="current"><a href="http://template-unik.blogspot.com" title="free blogger template">UniQue Template</a></div> <a href="http://www.obralplus.com/?id=rohman" title="Menjual berbagai software & e-book dengan harga super murah, klik di sini !">Obral Plus</a> <a href="http://www.resepbisnis.com/?id=rohman" title="Panduan membuat website secara praktis, klik di sini !">Belajar Website</a> <!-- you can add saveral link ini here --> </div> <!-- close for blue-menu2 -->





5. Click SAVE button


6. Click and hold the new element and drag to bellow of Header Element


7. Click SAVE button


8. Finish

OK, have a nice day for you.

Read full article  ⇒

Horizontal Blue Menu

This is blue menu for your blogger menu.
For demo, please click at the button below :

Feel interest with this menu, please follow the instruction :
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>


/*Credits: CSS Library for new blogger (beta) template*/ /*URL: http://css-lybrary.blogspot.com */ #blue-menu{ padding: 0; width: 100%; background: transparent; voice-family: "\"}\""; voice-family: inherit; } #blue-menu a{ float: left; display: block; color: white; margin: 0 1px 0 0; padding: 5px 10px; text-decoration: none; letter-spacing: 1px; background-color: #113464; border-bottom: 1px solid white; font: bold 13px Arial; font-weight:bold; } #blue-menu a:hover{ background-color: #2E5E9E; } #blue-menu #current a{ background-color: #236411; border-color: #236411; } #green-line{ clear: both; padding: 0; width: 100%; height: 5px; line-height: 5px; background: #236411; }





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


<div id="blue-menu"> <div style="margin-left:30px;"><a href="http://css-lybrary.blogspot.com" title="Home">Home</a></div> <a href="http://kolom-tutorial.blogspot.com" title="Tutorial blogger in bahasa indonesia">Kolom Tutorial</a> <div id="current"><a href="http://template-unik.blogspot.com" title="free blogger template">UniQue Template</a></div> <a href="http://www.obralplus.com/?id=rohman" title="Menjual berbagai software & e-book dengan harga super murah, klik di sini !">Obral Plus</a> <a href="http://www.resepbisnis.com/?id=rohman" title="Panduan membuat website secara praktis, klik di sini !">Belajar Website</a> <!-- you can add saveral link ini here --> <div id="green-line">&nbsp;</div> </div> <!-- closed for blue-menu -->



5. Click SAVE button


6. Click and hold the new element and drag to bellow of Header Element


7. Click SAVE button


8. Finish

OK, i hope you feel happy to use this menu.

Read full article  ⇒