The script makes a horizontal menu
Versi Indonesia:
Back again into probelm web design blog among them by creating a horizontal menu this, it seems if a blog without the menu seems less than perfect ..?
If your blog is equipped menu or sequence specific links will be look more beautiful in the eye and see whether beam.how you think so ..!
Ok if your blog does not have horizontal menu can follow steps below::
- Of course, log into blogger
- Layout and click Edit Html
- Do not forget to Expand widget templates
The first step for a similar code like this > >
/* Footer
----------------------------------------------- */
#footer {background:#222;-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
width:920px;height:34px;
clear:both;
margin:0 auto;
padding: 0 auto;
line-height: 1.6em;
text-transform:none;
letter-spacing:.1em;
text-align: center;
}
----------------------------------------------- */
#footer {background:#222;-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
width:920px;height:34px;
clear:both;
margin:0 auto;
padding: 0 auto;
line-height: 1.6em;
text-transform:none;
letter-spacing:.1em;
text-align: center;
}
Then Put this script code directly below >>
/* Menu Horisontal
----------------------------------------------- */
.menuhorisontal{background:#000;
width: 100%;height:30px;
overflow: hidden;
}
.menuhorisontal ul{
margin: 0;
padding: 0;
padding-left: 4px;
font: bold 11px Arial;color:#222;
list-style-type: none;
}
.menuhorisontal li{
display: inline;
margin: 0;
}
.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
color: #dedede
}
.menuhorisontal li a:visited{
color: #dedede;
}
.menuhorisontal li a:hover, .menuhorisontal li.selected a{color:#fff; text-decoration:underline;/*Background Setelah Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}
----------------------------------------------- */
.menuhorisontal{background:#000;
width: 100%;height:30px;
overflow: hidden;
}
.menuhorisontal ul{
margin: 0;
padding: 0;
padding-left: 4px;
font: bold 11px Arial;color:#222;
list-style-type: none;
}
.menuhorisontal li{
display: inline;
margin: 0;
}
.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
color: #dedede
}
.menuhorisontal li a:visited{
color: #dedede;
}
.menuhorisontal li a:hover, .menuhorisontal li.selected a{color:#fff; text-decoration:underline;/*Background Setelah Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}
The next step for longer code below >>
< b:include name='description'/ >
< /div >
< /b:if >
< /b:includable >
< /b:widget >
< /b:section >
< /div >
< /div >
< /b:if >
< /b:includable >
< /b:widget >
< /b:section >
< /div >
After that paste this script below this code >>
< div class='menuhorisontal' >
< ul >
< li > < a href='http://your url link' > Home < /a > < /li >
< li > < a href='http://your url link' > Template < /a > < /li >
< li > < a href='http://your url link' > Seo < /a > < /li >
< li > < a href='http://your url link' > Blogger Hack < /a > < /li >
< li > < a href='http://your url link' > Blogger Tools < /a > < /li >
< li > < a href='http://your url link' > Blogger Stuf < /a > < /li >
< li > < a href='http://your url link' > E-book < /a > < /li >
< /ul >
< /div >
< ul >
< li > < a href='http://your url link' > Home < /a > < /li >
< li > < a href='http://your url link' > Template < /a > < /li >
< li > < a href='http://your url link' > Seo < /a > < /li >
< li > < a href='http://your url link' > Blogger Hack < /a > < /li >
< li > < a href='http://your url link' > Blogger Tools < /a > < /li >
< li > < a href='http://your url link' > Blogger Stuf < /a > < /li >
< li > < a href='http://your url link' > E-book < /a > < /li >
< /ul >
< /div >
To change the green to your liking.
Come on try luck.
Category: Tutorials blog
0 komentar