Horizontal purple menu (2)

This is my 1st horizontal purple menu, next time i will post other horizontal gray menu.

For the demo, please click at the button below :



Want use it to your blog? Ok, for install 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>


/* horizontal gray-menu2 di mulai ------------------------------------------- */ /*Credits: CSS Library for new blogger (beta) */ /*URL: http://css-lybrary.blogspot.com */ .purple-menu2{ margin: 0; padding: 0; float: left; font: bold 13px Arial; width: 100%; border: 1px solid #625e00; border-width: 1px 0; background:#7B6C93 url(http://24rohman.googlepages.com/indentbg.gif) center center repeat-x; } .purple-menu2 { display: inline; } .purple-menu2 a{ float: left; color: yellow; padding: 10px 20px; text-decoration: none; border-right:1px solid #000; } .purple-menu2 a:visited{ color: yellow; } .purple-menu2 a:hover{ color:#00FF66; text-decoration:none; }



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 anda ganti alamat linknya dengan kepunyaan anda --> <div class='purple-menu2'> <a href='http://template-unik.blogspot.com' title='back to front page'>Home</a> <a href='http://www.kolom-tutorial.blogspot.com' title='all about blogging at blogspot in bahasa indonesia'>Blog Tutorial</a> <a href='http://rubrik-elektronik.blogspot.com' title='all about electronics'>Rubrik Elektronik</a> <a href='http://css-lybrary.blogspot.com' title='free css navigation for your blog, get it now'>Free CSS Style</a> <a href='http://www.obralplus.com/?id=rohman' title='menjual berbagai software dan ebook berkualitas tinggi dengan harga super murah'>Obral Plus</a> <a href='http://www.resepbisnis.com/?id=rohman' title='panduan praktis membuat website'>Belajar buat website</a> </div> <!-- akhir menu solid -->



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, guy have a nice day for you.

Read full article  ⇒

Horizontal purple menu (1)

This is my 1st horizontal purple menu, next time i will post other horizontal gray menu.

For the demo, please click at the button below :



Want use it to your blog? Ok, for install 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>


/* horizontal solid menu di mulai ----------------------------------- */ /*Credits: CSS Library for new blogger (beta) */ /*URL: http://css-lybrary.blogspot.com */ .purple-menu1{ margin: 0; padding: 0; float: left; font: bold 13px Arial; width: 100%; border: 1px solid #625e00; border-width: 1px 0; background:#7B6C93 url(http://24rohman.googlepages.com/indentbg.gif) center center repeat-x; } .purple-menu1 { display: inline; } .purple-menu1 a{ float: left; color: white; padding: 10px 20px; text-decoration: none; } .purple-menu1 a:visited{ color: white; } .purple-menu1 a:hover{ color:yellow; text-decoration:none; }



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 anda ganti alamat linknya dengan kepunyaan anda --> <div class='purple-menu1'> <a href='http://template-unik.blogspot.com' title='back to front page'>Home</a> <a href='http://www.kolom-tutorial.blogspot.com' title='all about blogging at blogspot in bahasa indonesia'>Blog Tutorial</a> <a href='http://rubrik-elektronik.blogspot.com' title='all about electronics'>Rubrik Elektronik</a> <a href='http://css-lybrary.blogspot.com' title='free css navigation for your blog, get it now'>Free CSS Style</a> <a href='http://www.obralplus.com/?id=rohman' title='menjual berbagai software dan ebook berkualitas tinggi dengan harga super murah'>Obral Plus</a> <a href='http://www.resepbisnis.com/?id=rohman' title='panduan praktis membuat website'>Belajar buat website</a> </div> <!-- akhir menu solid -->



5. Click SAVE button


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


7. Click SAVE button


8. Finish

Enjoy your new navigation !

Read full article  ⇒

Horizontal Solid menu

At this time i will give you a different menu style. If the other menu i made without image background, now i made it with image background menu :

For the demo, please click at the button below :



Want use it to your blog? Ok, for install 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>


/* horizontal solid menu di mulai ------------------------------------------- */ /*Credits: CSS Library for new blogger (beta) */ /*URL: http://css-lybrary.blogspot.com */ .menu-solid{ margin: 0; padding: 0; float: left; font: bold 13px Arial; width: 100%; border: 1px solid #625e00; border-width: 1px 0; background: black url(http://24rohman.googlepages.com/tabhitam.gif) center center repeat-x; } .menu-solid { display: inline; } .menu-solid a{ float: left; color: white; padding: 9px 11px; text-decoration: none; } .menu-solid a:visited{ color: white; } .menu-solid a:hover, .menu-solid .current{ color: yellow; background: transparent url(http://24rohman.googlepages.com/tabmerah.gif) center center repeat-x; text-decoration:none; }



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 anda ganti alamat linknya dengan kepunyaan anda --> <div class='menu-solid'> <a href='http://template-unik.blogspot.com' title='back to front page'>Home</a> <a href='http://www.kolom-tutorial.blogspot.com' title='all about blogging at blogspot in bahasa indonesia'>Blog Tutorial</a> <a href='http://rubrik-elektronik.blogspot.com' title='all about electronics'>Rubrik Elektronik</a> <a href='http://css-lybrary.blogspot.com' title='free css navigation for your blog, get it now'>Free CSS Style</a> <a href='http://www.obralplus.com/?id=rohman' title='menjual berbagai software dan ebook berkualitas tinggi dengan harga super murah'>Obral Plus</a> <a href='http://www.resepbisnis.com/?id=rohman' title='panduan praktis membuat website'>Belajar buat website</a> </div> <!-- akhir menu solid -->



5. Click SAVE button


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


7. Click SAVE button


8. Finish

Enjoy !

Read full article  ⇒

Yellow vertical menu

Yellow is a beautiful colour, because of that i made a vertical menu with yellow colour. Please click at the button below to look the demo :



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 vertikal kuning di mulai ---------------------------------------- */ /*Credits: CSS Library */ /*URL: http://css-lybrary.blogspot.com */ #vertikal-kuning{ border-bottom-width: 0; } #vertikal-kuning ul{ margin: 0; padding: 0; font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; /*pemilihan bentuk huruf */ } #vertikal-kuning a{ display: block; padding: 3px 0; padding-left: 9px; width: 200px; /*lebar */ text-decoration: none; /*agar link tidak bergaris bawah */ color: #333222; /*warna hurup */ border-right:1px solid #000000; /*warna border samping kanan */ background-color: #FBEC04; border-bottom: 1px solid #6A6731; border-left: 7px solid #918C3B;/*warna border samping kiri*/ } #vertikal-kuning a:hover { background-color: #FAF6B9; /*warna background */ } #vertikal-kuning 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 anda --> <div id="vertikal-kuning"> <div class="menutitle">CSS Library</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 vertikal-kuning -->



5. Click SAVE button


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


7. Click SAVE button


8. Finish

enjoy .

Read full article  ⇒

Red Vertical Menu

Still talk about vertical menu, i has made a vertical menu with red colour, if you like red colour, it's matching to you.

Please click at the button below to look the demo :



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 vertikal merah di mulai ---------------------------------------- */ /*Credits: CSS Library */ /*URL: http://css-lybrary.blogspot.com */ #vertikal-merah{ border-bottom-width: 0; } #vertikal-merah ul{ margin: 0; padding: 0; font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; /*pemilihan bentuk huruf */ } #vertikal-merah 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: #FB0421; border-bottom: 1px solid #F7CDD2; border-left: 7px solid #900A19;/*warna border samping kanan */ } #vertikal-merah a:hover { background-color: #F98290; /*warna background */ border-left-color: #900A19; } #vertikal-merah 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 anda --> <div id="vertikal-merah"> <div class="menutitle">CSS Library</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 vertikal merah -->



5. Click SAVE button


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


7. Click SAVE button


8. Finish

happy week end for you.

Read full article  ⇒

Vertical Transparent menu

Different with other vertical menu, this menu have not a background colour. So, this menu is a transaparent menu. If place it in to your side bar, it's look like your sidebar background but if drop with the mouse it will making a good effect. Please click at the button below to look the demo :



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 h di mulai ---------------------------------------- */ /*Credits: CSS Library */ /*URL: http://css-lybrary.blogspot.com */ #menu-transparan{ border-bottom-width: 0; } #menu-transparan ul{ margin: 0; padding: 0; font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; /*pemilihan bentuk huruf */ } #menu-transparan a{ display: block; padding: 3px 0; padding-left: 9px; text-decoration: none; /*agar link tidak bergaris bawah */ color: #7A7E8B; /*warna hurup */ border-bottom: 1px solid #B7BCCC; } #menu-transparan a:hover { /*efek yang timbul setelah di sorot mouse */ background-color: #D5FAF9; /*warna background */ border-left-color: #1c64d1; color:#000; /*warna hurup setelah ddi sorot */ } #menu-transparan div.menutitle{ color: white; 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-transparan"> <div class="menutitle">CSS Lybrary</div><!-- judul menu pertama di sini --> <ul> <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">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

Enjoy

Read full article  ⇒

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  ⇒

Vertical Green 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 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; }



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



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 Flip Menu

Different with other menu, this menu have a good looking effect. If you drop your mouse into the menu, the link look like moving up.
For the demo, please click at the button below :



Want use it to your blog? Ok, for install 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>


/* flip menu begin --------------------------------- */ /*Credits: CSS Library for new blogger (beta) */ /*URL: http://css-lybrary.blogspot.com */ #flip-menu{ padding: 0; width: 100%; border-top: 5px solid #961322; background: transparent; voice-family: "\"}\""; voice-family: inherit; } #flip-menu a{ background-color:#F0C737; float: left; display: block; font: bold 13px Arial; color:black; text-decoration: none; padding: 15px 15px; font-weight:bold; margin: 0 1px 0 0; padding-top: 10px; padding-bottom: 5px; border-left:1px solid #97632B; border-right:1px solid #97632B; border-bottom:1px solid #97632B; -moz-border-radius-bottomleft: 5px; border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; border-bottom-right-radius: 5px; } #flip-menu a:hover{ background-color: #BE9813; padding-top: 2px; padding-bottom: 13px; } #flip-menu #current a{ background-color: #961322; color: white; border-color: #961322; padding-top: 20px; padding-bottom: 3px; border-left:1px solid #3E090F; border-right:1px solid #3E090F; border-bottom:1px solid #3E090F; } #flip-menu #current a:hover{ padding-top: 3px; padding-bottom: 20px; }



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 --> <hr align='center' color="#CC0000" height="3px" width='100%'/> <div id="flip-menu"> <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 flip-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

Enjoy !

Read full article  ⇒

Horizontal Double Line Menu

Horizontal Double Line Menu is good looking menu, so if you think same with me feel free to get this code.

For the demo, please click at the button below :

For install this menu to your blog, 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) template*/ /*URL: http://css-lybrary.blogspot.com */ /*Credits: CSS Library for new blogger (beta) template*/ /*URL: http://css-lybrary.blogspot.com */ #double-line{ padding: 0; width: 100%; background: transparent; voice-family: "\"}\""; voice-family: inherit; border-top: 5px solid #d25a0b; } #double-line a{ float:left; display: block; color: white; margin: 0 1px 0 0; padding: 5px 10px; text-decoration: none; letter-spacing: 1px; background-color: #000000; border-bottom: 1px solid white; border-top: 1px solid white; font-weight:bold; } #double-line a:hover{ background-color: #808080; } #double-line #current a{ background-color: #d25a0b; border-color: #d25a0b; } #color-line{ clear: both; padding: 0; width: 100%; height: 5px; line-height: 5px; background: #d25a0b; }



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="double-line"> <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 id="color-line">&nbsp; </div> </div> <!-- closed for double line 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

Just a little work, you can enjoy your menu.

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  ⇒