Saturday, June 21, 2014

How to Install a Sub Menu Bar and Menu Bar on Blog Page

How to Install a Sub Menu Bar and Menu Bar on Blog Page



 Menu and sub​​-menu bar is needed in order to search for information based on category or sub-menu. Gives a sub menu bar also makes all article titles can be displayed on the screen in the eyes; our blog seem more scientific, orderly, and simple.
If you are interested in installing it on the blog, that means you people who think systematically and liked 
Installation steps
- Click on Design
- Choose a template and select Edit HTML
- Select / click Continue
- Select / click Expand Widget Templates
Search scrift following:
<div class='main-outer'> or
<div id='main-wrapper'> or
<div id='main'>
To make it easier, just click the F3 on the keyboard and then choose the one scrift above. Based on my experience after flipping through the information at www.google.com matching is:
div class = 'main-outer'>
It could be different from another template ...
Once you can, copy and paste the following scrift just above scrift sought earlier:





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

EXPLANATION:- Replace the # sign (blue color) with a link / url that you want. It could be a link posting or label (category) that exist on your blog.- Replace the blue paper with the menu and sub menu you want.- Each sub-menus can be added or subtracted as desired.- After the first click preview to make sure it is correct scrift.- Then save / save.Suggestion* Back up your template before changing / adding scrift above, in order to be used again if there is a problem with the addition of srcritf above.* To eliminate the appearance of double display with Home Page,- Then follow the following suggestions:- Go to Menu Page- Then select the page by selecting "do not show"- Save the settings, the main page will appear alone in accordance with earlier scrift we type.Blogs can already published ...When we share through this way does not work, try again with the patient companions repeat. when many times it can not, a friend can consult via the comment section below.-----------------------------------------------------------------------------------------------------------------------------Hopefully Helpful 

Sources:http://kanginanjaya.blogspot.com/

No comments:

Post a Comment