Create Blog with Menu Bar on Blogger.com, IT'S VERY EASY GUYS!!!

On this occasion I want to share as the title mentioned above. I thank you for visiting and hopefully useful article.

As per experience I have a desire but browsing around here instead of confusion, because it does not match the template (theme) blog used. Which of course you also experience like me, so you stray into my blog page is about "Menu Drop Down" on the blog.

Indeed for me personally with the view it will be easier in classifying the pages ever made. Because in the basic view on blogger is very simple, ie displaying the latest pages or posts only. And when we click the page / old post it will appear all posts mixed up and if in the scrolling like a long newspaper account dangle to the end.

To the point, guys!

First

After logging in at blogger.com and signing in dashboard, click the Theme menu.

To avoid confusion in copy paste html script later, then use a simple template (Simple) as I apply (free to choose simple template). Because I do not guarantee the functionality in other templates, such as: Dinamic views templates, Contempo templates, Soho templates, Picture Window, Travel and others.

Second

On a live in Blog or blog view there are currently 2 Customize menus with Edit HTML. Select / click Edit HTML, then after the editor opens search </ div class = 'main-outer'>. Or by copying paste by press Ctrl + F keep paste and then Enter. Then after finding it, copy the script below and paste it above the script (</ div class = 'main-outer'>).

<style>

/* -- Menu Horizontal + Sub Menu-- */

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}

#cat-nav a:hover { color:#fff; }

#cat-nav li:hover { background:#000; }

#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}

#cat-nav .nav-description { display:block; }

#cat-nav a:hover span { color:#fff; }

#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }

#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}

#secnav li { float:left; width: auto; height:35px;}

#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}

#secnav li ul li  { height:30px; border-top:1px solid #fff; }

#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }

#secnav li ul ul  { margin: -30px 0 0 180px; }

#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }

#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }

#secnav li:hover,#secnav li.hover  { position:static; }

#cat-nav #secnav {width:100%;margin:0 auto;}

</style>

<div id='cat-nav'>

<ul class='fl' id='secnav'>

<li><a href='#'>Beranda</a></li>

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

<li><a href='#'>Menu 2</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu2 a</a></li>

<li><a href='#'>Sub Menu2 b</a></li>

</ul>

</li>

<li><a href='#'>Menu3</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu3a</a></li>

<li><a href='#'>Sub Menu3b </a></li>

</ul>

</li>

<li><a href='#'>Menu4</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu4a</a></li>

<li><a href='#'>Sub Menu4b </a></li>

</ul>

</li>

<li><a href='#'>Menu5</a></li>

</ul>

</div>

Lastly

Click see result.

So that I can convey and hopefully useful.

Note:

- In the section marked '#', fill in the label / post that has been created.

- In the Menu and Sub Menu, change / rename to your liking so much easier in classifying our posts.

- To add Menu and Sub Menu, place copy paste in the middle do not at the end of Menu script. This means "Menu 5" in the script above make the last static Menu like "Site Map" on this blog. These steps to avoid script or display error so in disarray.