Membuat Menu Horizontal

Posted by Garut Cheater Posted on 3:54:00 PM

When you create a blog on blogspot, you will not find features like a navigation menu blog in general. Navigation menu is usually a link on blospot vertical list down and not be a horizontal menu. But you need not lose heart, because we still can make a horizontal menu at blogpsot. This serves as a navigation menu reader to see the other pages or other categories in your blog. On this post we will learn how to create a menu on the blogspot.


Before you try to create a horizontal slide navigation menu this blogspot you should first backup your template, so that jka an error occurs you can restore back to blogspot template for your blogspot template change.

Follow the steps below to create a horizontal slide navigation menu blogspot:

1. Log in to Blogger, go to the design, and edit the html and provide a check on expand widget templates


2. Search  <div id='content-wrapper'> and add the following code on it. If you do not find this code, you try to put this code on your blogpost. This is because the template of each blog is different, and depending on the template is used.



<div id='Menumainwrapx'>
<b:section id='NavbarMenux'>
<b:widget id='HTML50' locked='false' title='MembuatMenu' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div> <!-- End Menumainwrapx -->
<div class='clear'/>

3. Then add also the following code above the code]]> </ b: skin>

#Menumainwrapx {

background:url(http://farm2.static.flickr.com/1046/5118494385_6bed6df208_t.jpg) repeat-x scroll 0 0 #222222;

border-bottom:1px solid #CCCCCC;

height:42px;

margin:0;

padding:0;

}

#NavbarMenux {

width: 950px;

height: 41px;

font-size: 13px;

color:#333333;

margin: 0px;

padding: 0;

font-weight:bold;

font-family:arial;

margin: 0 auto;

}

#NavbarMenuleftx {

width: 950px;

margin: 0;float:left;}

#navx { margin: 0;

padding: 0; }

#navx ul {

float: left;

list-style: none;

margin: 0;

padding: 0; }

#navx li {

list-style: none;

margin: 0px;

padding: 0; }

#navx li a,

#navx li a:link,

#navx li a:visited {

height: 22px;

color: #333333;

display: block;

font-size: 13px;

text-decoration: none;

margin: 0;

padding:10px 13px 9px 13px;

border-right: 1px solid #CFCFCF; }

#navx li a:hover,

#navx li a:active {

color: #333;

margin: 0;

text-decoration: none;

background:#F0F0F0;

}

#navx li li a, #nav li li a:link,

#navx li li a:visited {

background:url(http://farm2.static.flickr.com/1190/5119105082_e113afd892_t.jpg) repeat-x scroll 0 0 #f5f5f5;

min-width: 150px;

color: #333333;

font-size: 14px;

font-weight: normal;

float: none; margin: 0;

padding: 5px 10px;

font-weight:bold;

font-family:arial;

box-shadow: 0px 3px 3px rgba(0,0,0,0.8);

-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);

-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);

text-align:left;}

#navx li li a:hover,

#navx li li a:active {

background: #F5F5F5;

color: #333;

}

#navx li {

float: left;

padding: 0; }

#navx li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 170px;

margin:0;

padding: 0;

border-top:1px solid #242424;

}

#navx li ul a {

width: 140px; }

#navx li ul ul {

margin: -41.5px 0 0 176px;

border:none;}

#navx li:hover ul ul,

#navx li:hover ul ul ul, #navx li.sfhover ul ul,

#navx li.sfhover ul ul ul {

left: -999em; }

#navx li:hover ul,

#navx li li:hover ul,

#navx li li li:hover ul,

#navx li.sfhover ul,

#navx li li.sfhover ul,

#navx li li li.sfhover ul {

left: auto; }

#navx li:hover,

#navx li.sfhover {

position: static; }

Save your template first

4. Open a page element looking gadget with the name 'MembuatMenu' which is above the gadget blog posts, and then click edit and enter the following code in the box content.

<div id='navbarmenuleftx'>

<ul id='navx'>

<li><a href='/'>Home</a></li>

<li><a href='#yourlink'>Menu 1</a>

<ul>

<li><a href='#yourlink'>Menu 1.1</a>

<ul>

<li><a href='#yourlink'>Menu 1.1.1</a></li>

<li><a href='#yourlink'>Menu 1.1.2</a></li>

<li><a href='#yourlink'>Menu 1.1.3</a></li>

<li><a href='#yourlink'>Menu 1.1.4</a></li>

</ul>

</li>

<li><a href='#yourlink'>Menu 1.2</a>

<ul>

<li><a href='#yourlink'>Menu 1.2.1</a></li>

<li><a href='#yourlink'>Menu 1.2.2</a></li>

<li><a href='#yourlink'>Menu 1.2.3</a></li>

<li><a href='#yourlink'>Menu 1.2.4</a></li>

</ul>

</li>

<li><a href='#yourlink'>Menu 1.3</a>

<ul>

<li><a href='#yourlink'>Menu 1.3.1</a></li>

<li><a href='#yourlink'>Menu 1.3.2</a></li>

<li><a href='#yourlink'>Menu 1.3.3</a></li>

<li><a href='#yourlink'>Menu 1.3.4</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

Save and you see the results. You are now successfully created a horizontal slide navigation menu blogspot. Congratulations