To create a navigation menu with css, different results would be when using different templates.
See DEMO HERE
How interesting it? if interested please go read my friend. Now please read the first mate of this entire article until the final, because there are certain codes are to be adjusted, and later at the end of my article will explain the codes to the fox.
For the blog spot template:
1. Sign in
2. Click the Layout menu
3. Click Edit HTML
4. Click on Download Full Template, please save the template used for data backup
5. Click the little box next to Expand Widget Templates
6. Wait a while until the process is complete
7. Copy and paste the following code in the css style sheets friend, or if the store just confused on the code of ]]></ b: skin>
/ * Create the Juleha Navigation
----------------------------------------------- * /
# Juleha (
height: 25px;
text-align: center;
)
# Juleha a (
margin: 0;
font-size: 1.2em;
font-weight: bold;
letter-spacing:-1px;
background-color: # cccccc;
color: # 000000;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 4px;
padding-right: 4px;
)
# Juleha a: hover (
text-decoration: none;
padding: 34px 5px 41px 5px;
background-color: # 0326FC;
background-repeat: repeat-x;
color: # A7FC03;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 4px;
padding-right: 4px;
)
8. Find code in the template code as shown below:
<div class='descriptionwrapper'>
<p class='description'> <span> <data:description/> </ span> </ p>
</ div>
</ div>
</ b: if>
Than add the red color on that code as shown bellow
<div class='descriptionwrapper'>
<p class='description'> <span> <data:description/> </ span> </ p>
<div id="juleha">
<a href="#" target="_blank"> Link 1 </ a> >>>>> # = Change with your link
<a href="#" target="_blank"> Link 2 </ a> >>>>> # = Change with your link
<a href="#" target="_blank"> Link 3 </ a> >>>>> # = Change with your link
<a href="#" target="_blank"> Link 4 </ a> >>>>> # = Change with your link
<a href="#" target="_blank"> Link 5 </ a> >>>>> # = Change with your link
</ div> </ div>
</ div>
</ b: if>
9. Click the Preview button to see changes
10. When you are OK, click the Save button TEMPLATE
11. Done.
To be more understand , I'll give a little information about the codes I provide, please refer to:
Juleha (
height: 25px;
text-align: center;
)
# # Juleha just naming it, can be replaced with what's important to connect with the code below, would Tekam, haleju, to something else can also reply mate fans.
# Height: 25px; this code is as high regulator navigation button, which I use is 25 pixels, not the change in value and adjust the wishes .
# Text-align: center; code to position the buttons are in the middle, if you want the left replace the word center with left, if you want to right, replace the right.
# Juleha a (
margin: 0;
font-size: 1.2em;
font-weight: bold;
letter-spacing:-1px;
background-color: # cccccc;
color: # 000000;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 4px;
padding-right: 4px;
)
# # Juleha a naming to connect with the above code, and codes on the bottom is written that will appear before the highlight of the mouse visitors blog.
# Font-size: 1.2; font size in use bigger of 1.2. if you want bigger or smaller, please just change its value.
# Font-weight: bold; to link written in bold letters, if you do not want to replace it with the bold text to normal text.
# Background-color: # cccccc; code to make the background color button. color code # cccccc is the code for the gray, please change the color of you liked.
# Color: # 000000; letter code for the link colors, # 000000 is a black color code, please change the color of you liked.
# Juleha a: hover (
text-decoration: none;
background-color: # 0326FC;
background-repeat: repeat-x;
color: # A7FC03;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 4px;
padding-right: 4px;
# # Juleha a: hover is the code that is expected when the mouse to highlight the key code in defined by the codes in the code # Juleha a.
# Background-color: # 0326FC; code to make the background color when the mouse button highlight. color code # 0326FC is the code for the blue, please change the color of my friend that my friend liked.
# Color: # A7FC03; letter code for the color when the mouse highlight the link, # A7FC03 is bright green color code, please change the color of you liked.
<div id="juleha">
<a href="#" target="_blank"> Link 1 </ a> >>>>>change with your link
<a href="#" target="_blank"> Link 2 </ a> >>>>>change with your link
<a href="#" target="_blank"> Link 3 </ a> >>>>>change with your link
<a href="#" target="_blank"> Link 4 </ a> >>>>>change with your link
<a href="#" target="_blank"> Link 5 </ a> >>>>>change with your link
</ div>
# <div Juleha id="juleha"> opening code. Whatever code put under this code, refers to what is defined by the code Juleha.
# <a Href="#" target="_blank"> Link 1 </ a> code to create the link.
# Href = "#" replace a hash mark (#) with a URL or link that to my friend list. example: if I want to make a link to this blog, then sign me replace this fence with http://tuntunarto.blogspot.com
# Target "_blank" is the code to create a new window when link is clicked by visitors, if they do not want a new window, then remove this code.
# 1 replace text links with text links that my friend wanted. example: to write this blog I replace with the word Tuntun Arto Blog
so about that last link will be are like this:
<a href="http://tuntunarto.blogspot.com/" target="_blank"> Tuntun Arto Blog </ a>
# </ Span> is the code for closing the Juleha code.
Example link I gave above are as many as five links, it can reduce or friend can also add, but if space is available with the keypad will automatically move downward, thus adjust the existing space.
Have a nice day.....is this article help you? Please leave comment.........
Source :Ajusted and translated from Kang Rohman blog
0 comments:
Post a Comment