How to make a horizontal slide menu

How to create a horizontal slide menu with a list of the vertical link

SEO friendly template has always been a dream of the bloggers, SEO friendly templates are very attractive to search engines like google, yahoo, bing and others. Moreover, the addition of SEO techniques to optimize your blog  faster search engine with the aim of which is situated occupies a prestigious position of the master website or blog in the first page of search results from each search engine is a blogger success in building a wesite or blog. Imagine if you try to position your blog search results page as its master. Have imagined, you will be the subject of conversation in the blogging world, not to mention the financial benefits that will come, because it will always be ogled by advertisers to promote products and services owned perusaah the cooperation with them.

For the football exploits of course newbie who built the master has become a role model for the SEO newbie mebuat blog. It must be admitted the master may not require a longer look beautiful website or blog, or a complete blog, this is because Google PR and Alexa Rank blog is the master of high value. But not with the newbie, sometimes the first thing that occurred to them how to have a beautiful blog, even though this will gradually change the attitudes newbie on his blog. Newbie needs to be invested by the truly behave in the world through blogging, take this example as a role model one master, and apply the knowledge they copy the logged you, slowly but surely you will be aligned with them.

SEO friendly template and complete metatag SEO friedly for blogspot, sometimes its not suit the tastes of the newbie. To complete the template to be perfect but need proper SEO efforts and act prudently in order not to deviate from the initial desire newbie. Here's the current article I will try to continue the pursuit of the master and sharing how to create a horizontal menu with the navigation feature that has a link-down list.

My advice when creating a horizontal menu, you should backup your template first in total. This action is an attempt to keep the error when in actual experience or mistakes. So with the backup of your template can be uploaded again.

The steps to make it as follows :

1. Login to your dashboard.

2. Click Go to Post List.

3. Click the Template

4. Click on Edit HTML, and then click Process. (ups. do not forget to give a mark on the
    "Expand Widget Templates"

5. Please find the code <div id='content-wrapper'> then copy and paste the script
    code below and place it above <div id='content-wrapper'>

<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'/>

6. Then you find scirpt code]]> </ b: skin> and then you copy and paste the script code
    below and place it right 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; }

7. The next step, before you save the results of its work, should you click PREVIEW
    to test and see the results. If the preview is open, it means that your job successfully, 
    now please SAVE.

To create a horizontal slide navigation menu link to the list below, then please do a few small 
steps as follows:

1. Login to your dashboard.

2. Click go to post list.

3. Click Gadge Lay out and look for the name "Add Menu".

4. Click Edit and copy paste the below code such important information, then click save

<div id='navbarmenuleftx'> <ul id='navx'> <li><a href='/'>Home</a></li> <li><a href='#yourlink'>Menu1</a> <ul> <li><a href='#yourlink'>Menu 1.1</a></li> <li><a href='#yourlink'>Menu 1.2</a></li> <li><a href='#yourlink'>Menu 1.3</a></li> <li><a href='#yourlink'>Menu 1.4</a></li> </ul> </li> <li><a href='#yourlink'>Menu2</a> <ul> <li><a href='#yourlink'>Menu 2.1</a></li> <li><a href='#yourlink'>Menu 2.2</a></li> <li><a href='#yourlink'>Menu 2.3</a></li> <li><a href='#yourlink'>Menu 2.4</a></li> </ul> </li> <li><a href='#yourlink'>Menu3</a> <ul> <li><a href='#yourlink'>Menu 3.1</a></li> <li><a href='#yourlink'>Menu 3.2</a></li> <li><a href='#yourlink'>Menu 3.3</a></li> <li><a href='#yourlink'>Menu 3.4</a></li> </ul> </li> </ul> </li> </ul> </div>

5. click save settings.

This easy job why not utilized, as well as to enrich the blog with features that benefit young people in managing blog of the future will make the blog faster search engines because of the excellent blog management.

Now you have a blog harizontal menu rich in content. good luck.

ARTIKEL TERKAIT: