CSS Menu With Subfolder

Dear my friends, someone comment me if i have no a new post for almost a week, i value him because he think i won't got SEO if i have no new post, OK you are right man.

Sorry, many days I don't make a new post because I looking for a new way to increase my blog traffic with blogsurfing around the internet world (hihihi..).

OK friends, now i have to make a new post. This post is a trick and tutorial about how to make a horizontal drop down menu with sub folder using CSS, I always like using CSS to make my blog menu.

Tips: For some blogger who have many post it will be hard for visitor to find the oldest post, so you have to make a menu with sub folder to separated some posts with the labels and put its label on the sub folder menu, sure it will be easier for visitor to find your oldest post.

Here i will explain a trick how to make menu with sub folder using CSS, please follow this tutorial :

As a preparation step, you should download files below

http://h1.ripway.com/woyzer/jqueryslidemenu.css

http://h1.ripway.com/woyzer/jqueryslidemenu.js

You could make change to the CSS files for background or foreground menu color, then upload files to your upload host server, for example I use ripway for my files upload host server.

Login to your blogger account, enter to Layout and Edit HTML, make sure to checklist Expand Widget Template.

Always backup your template before make a change

Put this code below before </HEAD> code :

<link rel="stylesheet" type="text/css" href="http://h1.ripway.com/woyzer/jqueryslidemenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://h1.ripway.com/woyzer/jqueryslidemenu.js"></script>

Change the red written text with your own files URL address !

Find this code <div id='main-wrap1'> (your main wrap widget, maybe name is different), put this code below before your main wrap widget:

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://bizril.blogspot.com">HOME</a></li>
<li><a href="http://bizril.blogspot.com/search?max-results=200">CONTENT</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.blogger.com/profile/09867939709875498061">ABOUT</a></li>
</ul>
<br style="clear: left" />
</div>

You should change the red written text with your own URL, green written text with your own menu item and also you could add or remove menu items depend on your needed.

Save the template and now you ready to use your menu.

Blog, Blogger, Google, Alexa, Bing, Yahoo, Search, SEO, PageRank, Traffic, Meta, Tag, Webmaster, Analyzer, Tutorial, Tips, Trick, Booster