Simple Drop Down Menus In Blogger Blog
Posted by Unknown in Blogger, Blogger Resources, Blogger Tutorials, Drop Down Menus, HTML, Java Script, Widgets on Sunday, November 25, 2012
The menu tabs / drop down menus are mostly clicked when visitors arrived in our blog for the first time. This is because the menu tabs can explain visitors more of the site contents.
For me i like the simple menu tabs that can show visitors the point of my contents.
To create this drop down menu tabs, You need to add a HTML widget and insert some HTML codes through the template's HTML editor :
- Log in to Blogger.
- Go to Dashboard > Layout.
- Click on "Add a Gadget".
- Select HTML/Java Script widget.
- Paste the following codes into the widget box :
<div id='infozguidenavbar'>
<ul id='infozguidenav'><li>
<a href='link of Home page'>Home</a>
</li>
<li>
<a href='link of About page'>About</a>
</li>
<li>
<a href='link of Contact page'>Contact</a>
</li>
<li>
<a href='link of Sitemap page'>Sitemap</a>
<ul>
<li><a href='link of Sub page 1'>Name of sub page 1</a></li>
<li><a href='link of Sub page 2'>Name of sub page 2</a></li>http://www.blogger.com/blogger.g?blogID=1249722152444307586#editor/target=post;postID=2058096017693136811
<li><a href='link of Sub page 3'>Name of sub page 3</a></li>
</ul> </li>
</ul>
</div>
- Replace the RED TEXT with main links and names of your pages (i.e for Home, About, Contact, etc).
- To add a Main Menu, Please add this code after the GREEN TEXT : <li><a href='link of another MAIN MENU'>Name of MAIN MENU</a></li> and before LINK OF SITEMAP PAGE.
- To add a Sub-Menu, Please add this code after the <ul> in PINK TEXT : <li><a href='link of another SUB-MENU'>Name of SUB-MENU</a></li> and before the first </ul> also in PINK TEXT.
- Save your widget above or below the header in layout.
Insert HTML codes through the template's HTML editor
- Go to Dashboard > Template.
- Click Edit HTML > Proceed.
- Expand Widgets templates.
- Use Ctrl + F to search for this code ]]></b:skin>.
- Paste the following codes BEFORE ]]></b:skin> :
/*----- infozguide Drop Down Menu ----*/
#infozguidenavbar { background: #060505; width: 960px; color: #FFF; margin: 0px; padding: 0; position: relative; border-top:0px solid #960100; height:35px;}
#infozguidenav { margin: 0; padding: 0; } #infozguidenav ul { float: left; list-style: none; margin: 0; padding: 0; } #infozguidenav li { list-style: none; margin: 0; padding: 0; border-left:1px solid #333; border-right:1px solid #333; height:35px; } #infozguidenav li a, #infozguidenav li a:link, #infozguidenav li a:visited { color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } #infozguidenav li a:hover, #infozguidenav li a:active { background: #BF0100; color: #FFF; display: block; text-decoration: none; margin: 0; padding: 9px 12px 10px 12px; }#infozguidenav li { float: left; padding: 0; } #infozguidenav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0; padding: 0; } #infozguidenav li ul a { width: 140px; } #infozguidenav li ul ul { margin: -25px 0 0 161px; } #infozguidenav li:hover ul ul, #infozguidenav li:hover ul ul ul, #infozguidenav li.sfhover ul ul, #infozguidenav li.sfhover ul ul ul { left: -999em; } #infozguidenav li:hover ul, #infozguidenav li li:hover ul, #infozguidenav li li li:hover ul, #infozguidenav li.sfhover ul, #infozguidenav li li.sfhover ul, #infozguidenav li li li.sfhover ul { left: auto; } #infozguidenav li:hover, #infozguidenav li.sfhover { position: static; }#infozguidenav li li a, #infozguidenav li li a:link, #infozguidenav li li a:visited { background: #BF0100; width: 120px; color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border-bottom:1px dotted #333; } #infozguidenav li li a:hover, #infozguidenavli li a:active { background: #060505; color: #FFF; display: block; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; }
- Save your template.
Also from Amazon :
1,000 Creative Writing Prompts : Ideas for Blogs, Scripts, Stories and More
When you finally have the opportunity to sit down and write, you want absolutely nothing to get in your way. In an ideal world, the ideas would flow from head to pen quickly and easily. You would have thousands of ideas at your fingertips. This new idea-generating book makes that dream a reality.
Other Great Stuffs :
When you finally have the opportunity to sit down and write, you want absolutely nothing to get in your way. In an ideal world, the ideas would flow from head to pen quickly and easily. You would have thousands of ideas at your fingertips. This new idea-generating book makes that dream a reality.
Other Great Stuffs :
Celebrity Blogging
Discover The Secrets To Setting Up Your Own Personal Blog For MASSIVE Brand Building... And Build A Name For Yourself That People Will Know, Like And Trust!
If You Have A Few Hours Per Week, Then We Can Show You How To Earn Significant Income With Your Own Blog! Step by Step. Click to find out !
Know how to find a great market niche and write a successful blog? Great, you don’t need the steps within each of these components. Know how to design the web page and overcome technical difficulties? No? No problem, Here is a deeper level of instruction for that!
Struggling to make money online? It's about to get quicker and easier than ever before...Click here !
How JUST One Of The Blogs I Create During By The Forth Month Has Already Netted Me $2,537.29
1500 MB of disk space, 100 GB of data transfer, PHP and MySQL support with no restrictions, cPanel control panel, Website Builder, Absolutely no advertising ! Join now : CLICK HERE !
Discover The Secrets To Setting Up Your Own Personal Blog For MASSIVE Brand Building... And Build A Name For Yourself That People Will Know, Like And Trust!
If You Have A Few Hours Per Week, Then We Can Show You How To Earn Significant Income With Your Own Blog! Step by Step. Click to find out !
Know how to find a great market niche and write a successful blog? Great, you don’t need the steps within each of these components. Know how to design the web page and overcome technical difficulties? No? No problem, Here is a deeper level of instruction for that!
Struggling to make money online? It's about to get quicker and easier than ever before...Click here !
How JUST One Of The Blogs I Create During By The Forth Month Has Already Netted Me $2,537.29
1500 MB of disk space, 100 GB of data transfer, PHP and MySQL support with no restrictions, cPanel control panel, Website Builder, Absolutely no advertising ! Join now : CLICK HERE !
