Showing posts with label Menu Bar. Show all posts
Showing posts with label Menu Bar. Show all posts

Add Apple Drop Down menu Lists to your blog

How to Add Apple Drop Down menu Lists to the Blogger, Without  jquery

Dropdown menu list is easiest way to allow visitors to navigate on your site. Drop-down menu lists comes really handy when you have too much categories to show. Following drop down menu is inspired from Apple.com navigational links because I really love apple for its awesome products. Have a look at some of my navigational css menu lists.


How to add Green Nature Drop Down Theme
Add Professional Horizontal menu Listbar

Add Apple Drop Down Theme


Everybody knows Apple for their awesome i Gadgets but if you take a close look at their website, you will be able to see navigational menu list. In this article i am going to teach you how to add Apple theme drop down list.


Step 1: Go to Blogger >> Template >> Edit HTML

Step 2:  Add following code in the template wherever you want your menu list bar to appear.

<ul class="dropdown">
 <li><a href="link1"><span>Title1</span></a></li>
 <li><a href="link2"><span>Title2</span></a>
     <ul>
     <li><a href="Sub Link1">Sub Link1</a></li>
     <li><a href="Sub Link2">Sub Link2</a></li>
     <li><a href="Sub Link3">Sub Link3</a></li>
     </ul>
 </li>
 <li><a href="link3"><span>Title3</span></a></li>
 <li><a href="link4"><span>Title4</span></a></li>
   <ul>
     <li><a href="Sub Link1">Sub Link1</a></li>
     <li><a href="Sub Link2">Sub Link2</a></li>
 </ul>
 <li><a href="link5"><span>Title5</span></a></li>
</ul>

Replace link1 by your first link (ex. http://www.google.com) and title by your title (ex. this is Google!!). You can add more links in the same manner.

Step 3:   Press 'Ctrl+f' key and serch ']]></b:skin>'


Step 4: Please add the following code just before ]]></b:skin>


Step 5: Your code should look like this..
<!-- Add your Apple Drop Down Code Here -->
]]></b:skin>

Step 6: Save the template now and take a look at your blog.
[Read more]

How to Add Professional Horizontal CSS Menu Bar to the Blogger Blogspot


How to Add Professional Horizontal CSS Menu bar to the blogger blog, Customize your theme

Navigation menus are the links which are present at the top of your site which guide visitors  to navigate to specific sub-categories. In blogging ethics, it is important that you make user experience better by providing links & navigational menus.

Drop down menus are good way to add navigational link but you might want to consider simple CSS menu bar which can be added at the top of your blog to provide the attractive look to your blog. Check out the following CSS menus which i have created to in various colors to suit almost every blog.
















Lets get started.

Step 1: Go to Blogger >> Template >> Edit HTML

Step 2:  Add following code in the template wherever you want your menu bar to appear.



 Note: Replace link1 by your First link and title by your first title

Ex.
<li><a href="http://blogshippo.blogspot.com/"><span>Home</span></a></li>

In similar manner you can add some more links and titles.

Step 3:   Press 'Ctrl+f' key and serch ']]></b:skin>'

Step 4: Select your Horizontal menu and copy the code


 Green Theme

 




 Blue Theme
 




 Red Theme

 




 Black Theme


Please add code just before ]]></b:skin> 

<!-- Add your Horizontal  Menu Bar Code Here -->
]]></b:skin>


Step 5: Now save the template.
Step 6: That's it. You can now see beautiful Horizontal menu bar.


Please share your valuable comments.
[Read more]