How to easily create / provide the menu and the submenu / dropdown horizontal menu blog or how to create menus and submenus on a blog or how to create menus with ease .
We will post a very interesting article titled , namely how to create a horizontal dropdown menu on the blog . Actually, this tutorial has been widely discussed by the bloggers , but I also would not hurt to discuss it . After about a month of not posting articles busy because a new theme design and optimization blogs , so this time I will start my job as a blogger again , hehe .. Oh yeah , I got the last post before this article that my friend might also want to read it , which means giving share button at the top of the post . Okay I just started a tutorial how to create a horizontal dropdown menu on the blog .What the dropdown horizontal menu ? The menu navigation is a blog that allows visitors to explore the elements that exist in our blog . Horizontal means lined to the side , while the drop-down means down . So if coupled , horizontal dropdown menu navigation lining means that if the designated blog or clicked will exit row of the menu that drops down . How have understood ? Okay , if you already know , here's how to make it ..
1 . Sign blogger >> Click Template >> Edit HTML .
2 . Find the code ] ] > < / b : skin> then paste the code below just above the code ] ] > < / b : skin>
# NavbarMenu {background : # 000000 ; width: 960px ; height: 32px ; color: # 5A6C8C ; margin : 0 auto ; padding : 0 5px ; font : bold 8px Arial, Tahoma , Verdana ; border-top : 1px solid # 666 ; border-bottom : 1px solid # 666 ; }# NavbarMenuleft {width : 700px ; float: left ; margin : 0 ; padding : 0 ; }# search {width : 240px ; font-size : 11px ; float: right ; margin : 0 ; padding : 0 ; }# nav { margin : 0 ; padding : 0 ; }# nav ul { float: left ; list-style : none ; margin : 0 ; padding : 0 ; }# nav li { list-style : none ; margin : 0 ; padding : 0 ; text-shadow : 1px 1px 1px # 000 ; }# nav li a , # nav li a : link , # nav li a : visited {color : # fff ; display: block ; text-transform : uppercase ; margin : 0 ; padding : 15px 9px 9px ; font : bold 11px Arial , Times New Roman ; }# nav li a : hover , # nav li a: active {background : # 4a4d4c ; color: # fff ; padding : 15px 9px 9px ; text-decoration : none ; }# nav li li a , # nav li li a : link , # nav li li a : visited {background : # 000000 ; width: 150px ; color: # e5e3e3 ; text-transform : capitalize ; float : none ; margin : 0 ; padding : 10px 3px ; border-bottom : 1px solid # 151f23 ; border-left : px solid # 151f23 ; border- right : 2px solid # 151f23 ; font : normal 14px Georgia , Times New Roman ; }# nav li li a : hover , # nav li li a: active {background : # 4a4d4c ; color: # fff ; padding : 3px 10px ; }# nav li { float: left ; padding : 0 ; }# nav li ul { z - index : 9999 ; position: absolute ; left: - 999em ; height: auto ; width: 170px ; margin : 0 ; padding : 0 ; }# nav ul li a {width : 140px ; }# nav li ul ul { margin : - 24px 0 0 170px ; }# nav li : hover ul ul , # nav li : hover ul ul ul , # nav ul ul li.sfhover , # nav ul ul ul li.sfhover {left : - 999em ; }# nav li : hover ul , # nav li li : hover ul , # nav li li li : hover ul , # nav li.sfhover ul , # nav li li.sfhover ul , # nav li ul li {left li.sfhover : auto ; }# nav li : hover , # nav li.sfhover {position : static ; }# searchbox { padding : 0 ; margin : 0 ; }# search input {background : # fff ; color: # 000 ; float: left ; margin : 5px 0 0 10px ; width: 168px ; padding : 3px 7px ; border: 1px solid # cdcdcd ; font : normal 11px Arial , Verdana , Times New Roman ; }# search . btn {background : # 333 ; color: # fff ; font-size : 11px ; margin : 5px 0 0 3px ; padding : 2px ; width: 30px ; cursor : pointer ; border-left : 1px solid # 666 ; border -top : 1px solid # 666 ; border- right : 2px solid # 111 ; border-bottom : 2px solid # 111 ; }# top {background : # f6f6f6 ; margin : 10px auto 0 ; padding : 10px ; width: 918px ; border: 1px solid # ccc ; word-wrap : break - word ; overflow: hidden ; font-size : 13px ; }# top a, # top a: visited { font-weight : normal ; color: # 00338F ; text-decoration : none ; }# top a: hover {color : # cc0000 ; text-decoration : underline ; }# top p { font-size : 14px ; font - weight: bold ; padding : 0 ; margin : 0 ; }. topleft {width : 304px ; float: left ; margin : 0 ; padding : 0 ; }. topleft a img , . topleft img {border : 1px solid # ccc ; margin : 0 ; padding : 1px ; }. topright {width : 600px ; float: right ; margin : 0 ; padding : 0 ; text-transform : normal ; }
3 . After It 's Code
< b : widget id = ' header1 ' locked = ' true '
example :
<b:section class='art-header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='RezDown7 (Header)' type='Header'/>
< / b : section>
4 . Copy- Paste the HTML code provided below code just below < / b : section> if you want to put under the header . If you want to put on top of the header and paste the code below right Above code
<b:section class='art-header' id='header' maxwidgets='1' showaddelement='no'>
Here is the code
<div id='outer'><div id='navbarmenu'><div id='navbarmenuleft'><ul id='nav'><li> <a href='http://www.seowaps.com'> Home < / a> < / li ><li> <a href='###########'> Fun Pages < / a><ul><li> <a href='##################'> Motivation < / a> < / li >< / ul> < / li ><li> <a href='##############'> tutorial < / a><ul><li> <a href='#######################'> Blog < / a> < / li ><li> <a href='#######################'> Facebook < / a> < / li ><li> <a href='#######################'> Twitter < / a> < / li >< / ul> < / li ><li> <a href='###############'> SEO < / a><ul><li> <a href='############################'> Understanding SEO < / a> < / li ><li> <a href='############################'> SEO Tricks Tips < / a> < / li >< / ul> < / li ><li> <a href='#############################'> Business Opportunities < / a> < / li ><li> <a href='#############################'> Privacy Policy < / a> < / li ><li> <a href='##############################'> Sitemap < / a> < / li ><li> <a href='##############################'> Contact Us < / a> < / li >< / ul>< / div > < / div > < / div >
* Do not forget to replace every sign # # # # # which is blue and red with pal link itself .Then Save Template ! ! So Dech ..
Finally , we also finished making a horizontal menu dropdown on our blog . Okay , so my tips on how to create a horizontal dropdown menu on the blog , if there are words that I 'm ma'af poorly understood .
We will post a very interesting article titled , namely how to create a horizontal dropdown menu on the blog . Actually, this tutorial has been widely discussed by the bloggers , but I also would not hurt to discuss it . After about a month of not posting articles busy because a new theme design and optimization blogs , so this time I will start my job as a blogger again , hehe .. Oh yeah , I got the last post before this article that my friend might also want to read it , which means giving share button at the top of the post . Okay I just started a tutorial how to create a horizontal dropdown menu on the blog .What the dropdown horizontal menu ? The menu navigation is a blog that allows visitors to explore the elements that exist in our blog . Horizontal means lined to the side , while the drop-down means down . So if coupled , horizontal dropdown menu navigation lining means that if the designated blog or clicked will exit row of the menu that drops down . How have understood ? Okay , if you already know , here's how to make it ..
1 . Sign blogger >> Click Template >> Edit HTML .
2 . Find the code ] ] > < / b : skin> then paste the code below just above the code ] ] > < / b : skin>
# NavbarMenu {background : # 000000 ; width: 960px ; height: 32px ; color: # 5A6C8C ; margin : 0 auto ; padding : 0 5px ; font : bold 8px Arial, Tahoma , Verdana ; border-top : 1px solid # 666 ; border-bottom : 1px solid # 666 ; }# NavbarMenuleft {width : 700px ; float: left ; margin : 0 ; padding : 0 ; }# search {width : 240px ; font-size : 11px ; float: right ; margin : 0 ; padding : 0 ; }# nav { margin : 0 ; padding : 0 ; }# nav ul { float: left ; list-style : none ; margin : 0 ; padding : 0 ; }# nav li { list-style : none ; margin : 0 ; padding : 0 ; text-shadow : 1px 1px 1px # 000 ; }# nav li a , # nav li a : link , # nav li a : visited {color : # fff ; display: block ; text-transform : uppercase ; margin : 0 ; padding : 15px 9px 9px ; font : bold 11px Arial , Times New Roman ; }# nav li a : hover , # nav li a: active {background : # 4a4d4c ; color: # fff ; padding : 15px 9px 9px ; text-decoration : none ; }# nav li li a , # nav li li a : link , # nav li li a : visited {background : # 000000 ; width: 150px ; color: # e5e3e3 ; text-transform : capitalize ; float : none ; margin : 0 ; padding : 10px 3px ; border-bottom : 1px solid # 151f23 ; border-left : px solid # 151f23 ; border- right : 2px solid # 151f23 ; font : normal 14px Georgia , Times New Roman ; }# nav li li a : hover , # nav li li a: active {background : # 4a4d4c ; color: # fff ; padding : 3px 10px ; }# nav li { float: left ; padding : 0 ; }# nav li ul { z - index : 9999 ; position: absolute ; left: - 999em ; height: auto ; width: 170px ; margin : 0 ; padding : 0 ; }# nav ul li a {width : 140px ; }# nav li ul ul { margin : - 24px 0 0 170px ; }# nav li : hover ul ul , # nav li : hover ul ul ul , # nav ul ul li.sfhover , # nav ul ul ul li.sfhover {left : - 999em ; }# nav li : hover ul , # nav li li : hover ul , # nav li li li : hover ul , # nav li.sfhover ul , # nav li li.sfhover ul , # nav li ul li {left li.sfhover : auto ; }# nav li : hover , # nav li.sfhover {position : static ; }# searchbox { padding : 0 ; margin : 0 ; }# search input {background : # fff ; color: # 000 ; float: left ; margin : 5px 0 0 10px ; width: 168px ; padding : 3px 7px ; border: 1px solid # cdcdcd ; font : normal 11px Arial , Verdana , Times New Roman ; }# search . btn {background : # 333 ; color: # fff ; font-size : 11px ; margin : 5px 0 0 3px ; padding : 2px ; width: 30px ; cursor : pointer ; border-left : 1px solid # 666 ; border -top : 1px solid # 666 ; border- right : 2px solid # 111 ; border-bottom : 2px solid # 111 ; }# top {background : # f6f6f6 ; margin : 10px auto 0 ; padding : 10px ; width: 918px ; border: 1px solid # ccc ; word-wrap : break - word ; overflow: hidden ; font-size : 13px ; }# top a, # top a: visited { font-weight : normal ; color: # 00338F ; text-decoration : none ; }# top a: hover {color : # cc0000 ; text-decoration : underline ; }# top p { font-size : 14px ; font - weight: bold ; padding : 0 ; margin : 0 ; }. topleft {width : 304px ; float: left ; margin : 0 ; padding : 0 ; }. topleft a img , . topleft img {border : 1px solid # ccc ; margin : 0 ; padding : 1px ; }. topright {width : 600px ; float: right ; margin : 0 ; padding : 0 ; text-transform : normal ; }
3 . After It 's Code
< b : widget id = ' header1 ' locked = ' true '
example :
<b:section class='art-header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='RezDown7 (Header)' type='Header'/>
< / b : section>
4 . Copy- Paste the HTML code provided below code just below < / b : section> if you want to put under the header . If you want to put on top of the header and paste the code below right Above code
<b:section class='art-header' id='header' maxwidgets='1' showaddelement='no'>
Here is the code
<div id='outer'><div id='navbarmenu'><div id='navbarmenuleft'><ul id='nav'><li> <a href='http://www.seowaps.com'> Home < / a> < / li ><li> <a href='###########'> Fun Pages < / a><ul><li> <a href='##################'> Motivation < / a> < / li >< / ul> < / li ><li> <a href='##############'> tutorial < / a><ul><li> <a href='#######################'> Blog < / a> < / li ><li> <a href='#######################'> Facebook < / a> < / li ><li> <a href='#######################'> Twitter < / a> < / li >< / ul> < / li ><li> <a href='###############'> SEO < / a><ul><li> <a href='############################'> Understanding SEO < / a> < / li ><li> <a href='############################'> SEO Tricks Tips < / a> < / li >< / ul> < / li ><li> <a href='#############################'> Business Opportunities < / a> < / li ><li> <a href='#############################'> Privacy Policy < / a> < / li ><li> <a href='##############################'> Sitemap < / a> < / li ><li> <a href='##############################'> Contact Us < / a> < / li >< / ul>< / div > < / div > < / div >
* Do not forget to replace every sign # # # # # which is blue and red with pal link itself .Then Save Template ! ! So Dech ..
Finally , we also finished making a horizontal menu dropdown on our blog . Okay , so my tips on how to create a horizontal dropdown menu on the blog , if there are words that I 'm ma'af poorly understood .
Judul Artikel "
