Wednesday, May 11, 2011

Creating a blog using CSS menus

Posted by nino at 3:48 PM | Wednesday, May 11, 2011 | 0 comments

Labels: css

Before there is such thing as CSS code, the navigation menu created by using tables with HTML code. Whether it be horizontal or vertical menu. In fact, to make a website layout still use tables. Well ... if you've no time now to make a navigation menu with table had no other way is by using CSS code. Here's the ropes and hopefully can be understood .........
Creating a blog using CSS menus
Before starting, please note that in order to place the CSS code in a blog that is must be between <head> tag and </ head>. Or to be more easily, keep the above code
]]></ B: skin>
</ Head>
Ok .... immediately wrote to how to create CSS code for menu navigation.
First you must create a first code tag css for the navigation menu settings. See the code below:
# Menu
{
margin-bottom: 10px;
height: 29px;
background: transparent;
padding: 0px 0;
}
Then, create a CSS code to change the default format for ul and li tags
# Menu ul
{
margin: 0;
padding: 7px;
height: 29px;
text-align: center;
}
# Menu ul li
{
list-style: none;
display: inline;
}
The purpose of the CSS code above is to change the format tag ul from vertical to horizontal and set the margin and padding for each menu navigation. Next, make a CSS code to create a variety of links from the navigation menu. code:
# Menu ul li a: link, # menu ul li a: active, # menu ul li a: visited
{
color: white;
margin-bottom: 4px;
padding: 13px 13px 7px 7px;
font-size: 1em;
font-family: 'lucida grande', arial, sans-serif;
font-weight: bold;
text-decoration: yes;
background: url (http://i283.photobucket.com/albums/kk315/
meezanx_2008/menu.gif) repeat-x;
background-position: center;
}
# Menu ul li a: hover
{
color: white;
}
Well ..... the above code is a tutorial that all CSS code mebuat navigation menu. For more details and how to save tersbut code in your blog template follow these steps:
* Log in to Blogger and then select and edit the HTML layout
* For security please download your template first
* Remember .... Do not give a checklist on the box Expand Widget Templates.
* Find the following code:
]]></ B: skin>
</ Head>
* If you have found. please copy and paste the following code above the HTML code earlier
# Menu
{
margin-bottom: 10px;
height: 29px;
background: transparent;
padding: 0px 0;
}
# Menu ul
{
margin: 0;
padding: 7px;
height: 29px;
text-align: center;
}
# Menu ul li
{
list-style: none;
display: inline;
}
# Menu ul li a: link, # menu ul li a: active, # menu ul li a: visited
{
color: white;
margin-bottom: 4px;
padding: 13px 13px 7px 7px;
font-size: 1em;
font-family: 'lucida grande', arial, sans-serif;
font-weight: bold;
text-decoration: yes;
background:
url (http://i283.photobucket.com/albums/kk315/meezanx_2008/menu.gif)
repeat-x;
background-position: center;
}
# Menu ul li a: hover
{
color: white;
}
* After finishing his copy and paste, locate the following code:
<div id='content-wrapper''>
* If you have found (have to) copy the following code above the html code
<! - START MENU ->
<div id='menu'>
<div style='display:none;'>
<img alt='preload' src='menuon.png'/>
</ Div>
<ul>
<li> <a href='URL ANDA' target='_blank"> Your Text </ a> </ li>
<li> <a href='URL ANDA' target='_blank"> Your Text </ a> </ li>
<li> <a href='URL ANDA' target='_blank"> Your Text </ a> </ li>
<li> <a href='URL ANDA' target='_blank"> Your Text </ a> </ li>
</ Ul>
</ Div>
<! - END MENU ->
Important Note:
1. CHANGE YOUR URL to link your purpose and your Text with the name of each - each link. See How to Make Link.
2. If you understand the CSS code, CSS code you can replace him, according to your needs.
If it is completed, save the template.

0 comments:

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

thank you for visiting my blog and comment here. I hope the commentary contains a comment which intend to build and repair. criticism and suggestions I gladly accept.

Subscribe to: Post Comments (Atom)

© Copyright 2010. http://programminghaha.blogspot.com . All rights reserved | http://programminghaha.blogspot.com is proudly powered by Blogger.com | Template by o-om.com - zoomtemplate.com