Friday, December 07, 2007

Horizontal tab menu 10

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 :

  1. Login to blogger with your ID


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



  3. front panel


  4. Then click edit HTML tab. Please saw the picture :



  5. layout panel


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



  7. download template


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



  9. download


  10. 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 :



  11. saving template


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




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


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


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


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


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





Step #2

  1. Click at Page Element tab. See the picture below :



  2. page element


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



  4. add a page element


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



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




  8. Click   save changes   


  9. 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 !




Wednesday, December 05, 2007

Horizontal Tab Menu J

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 :

  1. Login to blogger with your ID


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



  3. front panel


  4. Then click edit HTML tab. Please saw the picture :



  5. layout panel


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



  7. download template


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



  9. download


  10. 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 :



  11. saving template


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




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


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


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


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


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





Step #2

  1. Click at Page Element tab. See the picture below :



  2. page element


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



  4. add a page element


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



  6. javascript


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




  8. HTML page


  9. Click   save changes   


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


Wednesday, November 28, 2007

Horizontal Tab Menu F

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 :


Tab Menu F


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 :

http://lh4.ggpht.com/_c-XFk4OciTE/SenWdtX4TKI/AAAAAAAAB0E/vFi53CsNuk0/tableftF_thumb.gif?imgmax=800

http://lh5.ggpht.com/_c-XFk4OciTE/SenWiXIGOPI/AAAAAAAAB0M/QXlANbnAUdo/tabrightF_thumb.gif?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 :

  1. Login to blogger with your ID


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



  3. front panel


  4. Then click edit HTML tab. Please saw the picture :



  5. layout panel


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



  7. download template


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



  9. download


  10. 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 :



  11. saving template


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




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


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


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


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


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





Step #2

  1. Click at Page Element tab. See the picture below :



  2. page element


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



  4. add a page element


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



  6. javascript


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




  8. HTML page


  9. Click   save changes   


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


Sunday, September 30, 2007

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>


  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


  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.


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>


  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


  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 !


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>


  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


  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 !


Saturday, September 08, 2007

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>


  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


  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 .


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>


  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


  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.


Thursday, September 06, 2007

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>


  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


  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


Wednesday, September 05, 2007

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>


  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


  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.


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>


  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


  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.


Tuesday, September 04, 2007

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>


  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


  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 !


Sunday, September 02, 2007

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>


  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



  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.


 
Copyright © 2007 CSS Library             Powered by Blogger