Added menu
on your blog is the best way to organize your blog / site links your important,
it allows your readers to easily navigate through your blog that will surely
increase your page views on the site and print.
This menu
includes CSS and HTML and does not affect the load time of your blog. In my
previous post, I discuss a cool drop menu how to add CSS3 drop down menu, create
an awesome CSS3 drop down menu and there is still much more is on the way.
When I
started blogging, I had everything in my blog. Yes, everything, including a
music player and video player, and generators of all kinds. It did not take
long before I began to realize that my blog was difficult to navigate. When I
got one quarter of the way down the page, I was tired!
I still have
many things will change soon, but at least there are more than five columns
with flashing things that give me headaches. Learning is a process, so I'm
happy to be going well today.
Anyway, when
the column solution, another great method of organization is the menu -
navigation bar. Rather than have all the elements mentioned in the text boxes,
people can be summed up in the top of the blog in a neat horizontal line.
How to add drop Down menu in blogger?
·
Go to your blogger
dashboard
·
Click on "Design"
> "Edit HTML"
·
Use ctrl F to find ]]></b:skin> and
paste the following code above/before it
#navigation-wrapper {
background-color:#121212;
height:41px;
margin-bottom:20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#navigation { font-family: 'PT Sans Narrow', sans-serif; font-weight:bold; text-transform:uppercase; font-size:14px; }
#navigation li { float:left; display:block; position: relative; }
#navigation li a { color:#FFF; text-shadow: 0px -1px 0px #000; height: 41px; line-height: 41px; display: inline-block; padding: 0 14px; }
#navigation > ul > li.current-menu-item > a, #navigation > ul > li.current-menu-parent > a { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrCOx5DRIRJsO0996gK5EN7s72kJ7NjJaTG6cxw8CKLZRUrw07JDyaN1IUn271t_nncH0LVdxg1z6FPq_uBFvZkCmQGaUs_vljiXuFysvvHc8v0oeazb_raAC_MfFQnrEFza4536DT1DEq/s41/nav-active.png) repeat-x top left; height: 41px; line-height: 41px; }
#navigation > ul > li > a:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrCOx5DRIRJsO0996gK5EN7s72kJ7NjJaTG6cxw8CKLZRUrw07JDyaN1IUn271t_nncH0LVdxg1z6FPq_uBFvZkCmQGaUs_vljiXuFysvvHc8v0oeazb_raAC_MfFQnrEFza4536DT1DEq/s41/nav-active.png) repeat-x top left; height: 41px; line-height: 41px; text-decoration: none; }
#navigation li ul {
display: none; background: #fff;
border: 1px solid #ddd;
border-top: 0;
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
box-shadow:0px 1px 8px rgba(0, 0, 0, 0.2);
}
#navigation li:hover > ul { display: block; position: absolute; top: 41px; left: 0; z-index: 100; width: 170px; }
#navigation li ul li { margin-right: 0; width: 170px; }
#navigation ul li li a:hover { background: #f1f1f1; text-decoration: none; }
#navigation li ul li a { color: #777; border-bottom: 1px solid #ddd; display: block; text-shadow: none; height: auto; line-height: normal; padding: 8px; font-size: 13px; }
#navigation li ul li:last-child a { border-bottom: 0; }
#navigation li ul li ul { display: none; }
#navigation li ul li:hover ul { left: 210px; top: 10px; border-top: 1px solid #ddd;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
- Click on "Save Template" when finished editing
Now we are need to
add the html code
Go to template >> Edit HTML >> and find <body> tag and paste the following code below it. before saving the template first preview it.
Go to template >> Edit HTML >> and find <body> tag and paste the following code below it. before saving the template first preview it.
<div id='navigation-wrapper'>
<div id='navigation'>
<ul class='menu' id='menu-main'>
<li><a href='http://paktechnoz.blogspot.com/'>Home</a>
</li>
<li><a href='http://paktechnoz.blogspot.com/search/label/news'>News</a>
</li>
<li><a href='http://paktechnoz.blogspot.com/search/label/blogger'>Blogger</a>
<ul class='sub-menu'>
<li><a href='http://paktechnoz.blogspot.com/search/label/blogger%20widgets'>Blogger Widgets</a></li>
<li><a href='http://paktechnoz.blogspot.com/search/label/blogging%20tips'>Blogging Tips</a></li>
</ul>
</li>
<li><a href='http://paktechnoz.blogspot.com/search/label/social%20media'>Social Media</a>
<ul class='sub-menu'>
<li><a href='http://paktechnoz.blogspot.com/search/label/facebook'>Facebook</a></li>
</ul>
</li>
<li><a href='http://paktechnoz.blogspot.com/search/label/SEO%20Tips'>SEO Tips</a></li>
<li><a href='http://paktechnoz.blogspot.com/search/label/online%20earning'>Online Earning</a>
<ul class='sub-menu'>
<li><a href='http://paktechnoz.blogspot.com/search/label/adsense'>Adsense</a></li>
<li><a href='http://paktechnoz.blogspot.com/2013/03/earn-money-online-with-adfly-with.html'>Adf.ly</a></li>
</ul>
</li>
<li><a href='#'>General Tips</a>
</li>
<li><a href='#'>Pages</a>
<ul class='sub-menu'>
<li><a href='#'>Full Width</a></li>
<li><a href='#'>Typography</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>404</a></li>
<li><a href='#'>Page Links</a></li>
</ul>
</li>
<li><a href='#'>Shortcodes</a>
<ul class='sub-menu'>
<li><a href='#'>Buttons</a></li>
<li><a href='#'>Columns</a></li>
<li><a href='#'>Tabs & Toggles</a></li>
<li><a href='#'>HTML Styles</a></li>
</ul>
</li>
</ul>
</div>
</div>
- Replace links comes after href=' and change # with the link/url of each page you want to point the menu to be.
- Click "Save" and if you need any further help, please feel free to ask using the comment box, and we will get back to you asap.
Hope you will find
this article useful please do comment for any suggestion or need any help
0 comments:
Post a Comment
I appreciate you feedback. Need any help or want to give any suggestion
Please Do Comment...
Please do not comment as spam otherwise your comment will not publish after reviewing.
Thanks in anticipation