CSS LIBRARY

Horizontal tab menu 10

noreply@blogger.com (CSS builder) — Fri, 7 Dec 2007 01:16:00 +0700

Have seen navigation menu like this?

Please drop your mouse at the navigation below:

Interest to install this navigation menu in your blog? please read steps till finish.

I need to affirm that scripts which I give is possibility cannot in applying perfectly in your blog, because factor of the template which different each other, for that possibly you require to a little a few script which I give.

This is his steps :

Right click at both this picture, then clicked save picture As... then keep in your computer.


tableftJ.gif	tabrightJ.gif

Then upload both the picture to server ordinary place of you saving the pictures you have. example : I'm ordinary saving my pictures in google pages, and the picture have the address be like this :


http://ahom24.googlepages.com/tableft10.gif 


http://ahom24.googlepages.com/tabright10.gif

Be in fact, you can use both the picture address, but I worry if too much the user using this address, the server cannot handling it so that the navigation menu becoming not function better.

Many ways to install this code, one of the way is be like this :

Step #1 :

After entering the dasboard page , click Layout. Please saw the picture :

Then click edit HTML tab. Please saw the picture :

I suggest to you, beforehand to back up your template. Click the Download full template link. Please saw the picture :

After you click Download full template link, then will emerge new window just to download. Click the Save button. Saw the picture :

You could choose this data would in kept where and with what file name what, Afterwards ended with click of the Save button. Please saw the picture :

Copy and paste code above of ]]></b:skin>

/*- Menu Tabs 10--------------------------- */ /*credits : http://www.exploding-boy.com */ #tabs10 { float:left; width:95%; font-size:13px; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url("http://ahom24.googlepages.com/tableft10.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url("http://ahom24.googlepages.com/tabright10.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; }

Go to underside, the code searching looking like be like :


 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/>

</b:section>

Change the code printing with green colour, so that his code become be like this :


 <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

<b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/>

</b:section>

Click . Await a few moments do shall your template have in saving.

Step #2

Click at Page Element tab. See the picture below :

Click at Add a Page element which located above of the header element. See the picture following :

After emerging pop up window , Klik add to blog button for the things HTML/JavaScript. See the picture following :

Copy and paste the code below into available column ( don't forget to change the links with link property of your own) :

Click

Finish. Please see the result.

Besides the above ways, it is of course still many ways is again you can do, please try by your self.

Don't ever stop to doing an experiment !

Horizontal Tab Menu J

noreply@blogger.com (CSS builder) — Wed, 5 Dec 2007 23:13:00 +0700

Have seen navigation menu like this?

Please drop your mouse at the button below:

Interest to install this navigation menu in your blog? please read steps till finish. I need to affirm that scripts which I give is possibility cannot in applying perfectly in your blog, because factor of the template which different each other, for that possibly you require to a little a few script which I give.

This is his steps :

Right click at both this picture, then clicked save picture As... then keep in your computer.


tableftJ.gif	tabrightJ.gif

Then upload both the picture to server ordinary place of you saving the pictures you have. example : I'm ordinary saving my pictures in google pages, and the picture have the address be like this :


http://ahom24.googlepages.com/tableftJ.gif 


http://ahom24.googlepages.com/tabrightJ.gif

Be in fact, you can use both the picture address, but I worry if too much the user using this address, the server cannot handling it so that the menu you use becoming not function better.

Many ways to install this code, one of the way is be like this :

Step #1 :

After entering the dasboard page , click Layout. Please saw the picture :

Then click edit HTML tab. Please saw the picture :

I suggest to you, beforehand to back up your template. Click the Download full template link. Please saw the picture :

After you click Download full template link, then will emerge new window just to download. Click the Save button. Saw the picture :

You could choose this data would in kept where and with what file name what, Afterwards ended with click of the Save button. Please saw the picture :

Copy and paste code above of ]]></b:skin>

/*- Menu Tabs J--------------------------- */ /*credits : http://www.exploding-boy.com */ #tabsJ { float:left; width:100%; background:transparent; font-size:93%; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url("http://ahom24.googlepages.com/tableftJ.gif") no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url("http://ahom24.googlepages.com/tabrightJ.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } #tabsJ #current a { background-position:0% -42px; } #tabsJ #current a span { background-position:100% -42px; color:#FFF; }

Go to underside, the code searching looking like be like :


 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/>

</b:section>

Change the code printing with green colour, so that his code become be like this :


 <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

<b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/>

</b:section>

Click . Await a few moments do shall your template have in saving.

Step #2

Click at Page Element tab. See the picture below :

Click at Add a Page element which located above of the header element. See the picture following :

After emerging pop up window , Klik add to blog button for the things HTML/JavaScript. See the picture following :

Copy and paste the code below into available column ( don't forget to change the links with link property of your own) :

Click

Finish. Please see the result.

Besides the above ways, it is of course still many ways is again you can do, please try by your self.

Good luck.

Horizontal Tab Menu F

noreply@blogger.com (CSS builder) — Wed, 28 Nov 2007 08:46:00 +0700

At this opportunity, I will introduce one navigation menu which in form of horizontal, which in berry of name of tab menu F. A navigation menu the beautifulness, compatible in keeping in shares your header. Tab menu F is the result of masterpiece from http://www.exploding-boy.com, I will only explain to you how to install this navigation in your blog. How do forming of tab menu F? Please see the picture below :

To see the demonstration directly, please click at the button below :

Interest to install this navigation menu in blog your? please read steps till finish. I need to affirm that scripts which I give is possibility cannot in applying perfectly in your blog, because factor of the template which different each other, for that possibly you require to a little a few script which I give.

This is his steps :

Right click at both this picture, then clicked save picture As... then keep in your computer.


tableftF.gif	tabrightF.gif

Then upload both the picture to server ordinary place of you saving the pictures you have. example : I'm ordinary saving my pictures in google pages, and the picture have the address be like this :


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBmBHAzKsjh8-5HkQGsjfnot5nohJBV_D1L5froYyvK_uf11faH3eHLZpAQRwGooc6U8PGrYNovjnlAv-I4uAIn_7d2gTz-bATJSxyDEENKl32Vnzj9aLL-KPmK_HnfglArdBX6onOHcQb/?imgmax=800 


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKZ5IArGHrcEBR9B5HCtFE6C9jOhgh_rEM2gvSHXZut-Z5bdCwqCBa66afSbghS9gqJiXi6KKWmIDTCCrWfr13KmryeXNwqHmwbPqMSz1_i1IA1fHIQwjofTyn-VAsvUw4ncimlLHdBqRQ/?imgmax=800

Be in fact, you can use both the picture address, however I worry if too much the use the the address hence server which I use cannot handling it so that the menu you use becoming not function better.

Many ways to install this code, one of the way is be like this :

Step #1 :

After entering the dasboard page , click Layout. Please saw the picture :

Then click edit HTML tab. Please saw the picture :

I suggest to you, beforehand to back up your template. Click the Download full template link. Please saw the picture :

After you click Download full template link, then will emerge new window just to download. Click the Save button. Saw the picture :

You could choose this data would in kept where and with what file name what, Afterwards ended with click of the Save button. Please saw the picture :

Copy and paste code above of ]]></b:skin>

/*- Menu Tabs F--------------------------- */ #tabsF { float:left; width:100%; background:transparent; font-size:15px; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBmBHAzKsjh8-5HkQGsjfnot5nohJBV_D1L5froYyvK_uf11faH3eHLZpAQRwGooc6U8PGrYNovjnlAv-I4uAIn_7d2gTz-bATJSxyDEENKl32Vnzj9aLL-KPmK_HnfglArdBX6onOHcQb/?imgmax=800") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKZ5IArGHrcEBR9B5HCtFE6C9jOhgh_rEM2gvSHXZut-Z5bdCwqCBa66afSbghS9gqJiXi6KKWmIDTCCrWfr13KmryeXNwqHmwbPqMSz1_i1IA1fHIQwjofTyn-VAsvUw4ncimlLHdBqRQ/?imgmax=800") no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; } #tabsF #current a { background-position:0% -42px; } #tabsF #current a span { background-position:100% -42px; }

Go to underside, the code searching looking like be like :


 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/>

</b:section>

Change the code printing with green colour, so that his code become be like this :


 <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

<b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/>

</b:section>

Click . Await a few moments do shall your template have in saving.

Step #2

Click at Page Element tab. See the picture below :

Click at Add a Page element which located above of the header element. See the picture following :

After emerging pop up window , Klik add to blog button for the things HTML/JavaScript. See the picture following :

Copy and paste the code below into available column ( don't forget to change the links with link property of your own) :

Click

Finish. Please see the result.

Besides the above ways, it is of course still many ways is again you can do, please try by your self.

Good luck.

Horizontal purple menu (2)

noreply@blogger.com (CSS builder) — Sun, 30 Sep 2007 19:22:00 +0700

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 :

Click layout tab

Click Edit HTML tab

Click Download Full Template, save your template for backup data

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

Click Save Template button

Step 2 :

Click Page Element tab

Click Add a Page Element

Click ADD TO BLOG button below Javascript/HTML

Copy and paste the code below in to the element

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

Click SAVE button

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

Click SAVE button

Finish

Ok, guy have a nice day for you.

Horizontal purple menu (1)

noreply@blogger.com (CSS builder) — Sun, 30 Sep 2007 19:01:00 +0700

Step 1 :

Click layout tab

Click Edit HTML tab

Click Download Full Template, save your template for backup data

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

Click Save Template button

Step 2 :

Click Page Element tab

Click Add a Page Element

Click ADD TO BLOG button below Javascript/HTML

Copy and paste the code below in to the element

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

Click SAVE button

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

Click SAVE button

Finish

Enjoy your new navigation !

Horizontal Solid menu

noreply@blogger.com (CSS builder) — Sun, 30 Sep 2007 05:06:00 +0700

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 :

Click layout tab

Click Edit HTML tab

Click Download Full Template, save your template for backup data

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

Click Save Template button

Step 2 :

Click Page Element tab

Click Add a Page Element

Click ADD TO BLOG button below Javascript/HTML

Copy and paste the code below in to the element

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

Click SAVE button

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

Click SAVE button

Finish

Enjoy !

Yellow vertical menu

noreply@blogger.com (CSS builder) — Sat, 8 Sep 2007 16:01:00 +0700

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 ;

Click layout tab

Click Edit HTML tab

Click Download Full Template, save your template for backup data

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

Click Save Template button

Step 2 :

Click Page Element tab

Click Add a Page Element

Click ADD TO BLOG button below Javascript/HTML

Copy and paste the code below in to the element

<div id="vertikal-kuning"> <div class="menutitle">CSS Library</div> <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>  </ul> <div class="menutitle">UniQue Template</div> <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>  </ul> <div class="menutitle">Blog Tutorial</div> <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>

Click SAVE button

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

Click SAVE button

Finish

enjoy .

Red Vertical Menu

noreply@blogger.com (CSS builder) — Sat, 8 Sep 2007 14:09:00 +0700

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 :

Click layout tab

Click Edit HTML tab

Click Download Full Template, save your template for backup data

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

Click Save Template button

Step 2 :

Click Page Element tab

Click Add a Page Element

Click ADD TO BLOG button below Javascript/HTML

Copy and paste the code below in to the element

<div id="vertikal-merah"> <div class="menutitle">CSS Library</div> <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>  </ul> <div class="menutitle">UniQue Template</div> <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>  </ul> <div class="menutitle">Blog Tutorial</div> <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>

Click SAVE button

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

Click SAVE button

Finish

happy week end for you.

Vertical Transparent menu

noreply@blogger.com (CSS builder) — Thu, 6 Sep 2007 05:52:00 +0700

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 ;

Click layout tab

Click Edit HTML tab

Click Download Full Template, save your template for backup data

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

Click Save Template button

Step 2 :

Click Page Element tab

Click Add a Page Element

Click ADD TO BLOG button below Javascript/HTML

Copy and paste the code below in to the element

<div id="menu-transparan"> <div class="menutitle">CSS Lybrary</div> <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>  </ul> <div class="menutitle">Unique Template</div> <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>  </ul> <div class="menutitle">Blog Tutorial</div> <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>  </div>

Click SAVE button

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

Click SAVE button

Finish

Enjoy

Vertical Blue Menu

noreply@blogger.com (CSS builder) — Wed, 5 Sep 2007 23:37:00 +0700

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 ;

Click layout tab

Click Edit HTML tab

Click Download Full Template, save your template for backup data

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

Click Save Template button

Step 2 :

Click Page Element tab

Click Add a Page Element

Click ADD TO BLOG button below Javascript/HTML

Copy and paste the code below in to the element

<div id="menu-biru"> <div class="menutitle">CSS Lybrary</div> <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>  </ul> <div class="menutitle">Unique Template</div> <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>  </ul> <div class="menutitle">Blog Tutorial</div> <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>

Click SAVE button

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

Click SAVE button

Finish

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

Vertical Green Menu

noreply@blogger.com (CSS builder) — Wed, 5 Sep 2007 01:31:00 +0700

Step 1 ;

Click layout tab

Click Edit HTML tab

Click Download Full Template, save your template for backup data

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

Click Save Template button

Step 2 :

Click Page Element tab

Click Add a Page Element

Click ADD TO BLOG button below Javascript/HTML

Copy and paste the code below in to the element

<div id="menu-hijau"> <div class="menutitle">CSS Lybrary</div> <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>  </ul> <div class="menutitle">Unique Template</div> <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>  </ul> <div class="menutitle">Blog Tutorial</div> <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>

Click SAVE button

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

Click SAVE button

Finish

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

Horizontal Flip Menu

noreply@blogger.com (CSS builder) — Tue, 4 Sep 2007 07:03:00 +0700

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 ;

Click layout tab

Click Edit HTML tab

Click Download Full Template, save your template for backup data

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

Click Save Template button

Step 2 :

Click Page Element tab

Click Add a Page Element

Click ADD TO BLOG button below Javascript/HTML

Copy and paste the code below in to the element

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

Click SAVE button

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

Click SAVE button

Finish

Enjoy !

Horizontal Double Line Menu

noreply@blogger.com (CSS builder) — Sun, 2 Sep 2007 17:18:00 +0700

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 :

Click layout tab

Click Edit HTML tab

Click Download Full Template, save your template for backup data

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

Click Save Template button

Step 2 :

Click Page Element tab

Click Add a Page Element

Click ADD TO BLOG button below Javascript/HTML

Copy and paste the code below in to the element

<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>  <div id="color-line">  </div> </div>

Click SAVE button

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

Click SAVE button

Finish

Just a little work, you can enjoy your menu.

Horizontal Blue Menu 2

noreply@blogger.com (CSS builder) — Sun, 2 Sep 2007 08:13:00 +0700

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 ;

Click layout tab

Click Edit HTML tab

Click Download Full Template, save your template for backup data

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

Click Save Template button

Step 2 :

Click Page Element tab

Click Add a Page Element

Click ADD TO BLOG button below Javascript/HTML

Copy and paste the code below in to the element

Click SAVE button

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

Click SAVE button

Finish

OK, have a nice day for you.

Horizontal Blue Menu

noreply@blogger.com (CSS builder) — Sat, 1 Sep 2007 22:41:00 +0700

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 ;

Click layout tab

Click Edit HTML tab

Click Download Full Template, save your template for backup data

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

Click Save Template button

Step #2 :

Click Page Element tab

Click Add a Page Element

Click ADD TO BLOG button below Javascript/HTML

Copy and paste the code below in to the element

Click SAVE button

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

Click SAVE button

Finish

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