Wisdom is the principal thing

Subscribe Here

Subscribe

Tuesday, October 9, 2018

How do I add categories and sub-categories in Blogger like Wordpress



This is to create a list of items that you have in your blog. - An overall Menu
1. In the Blogger dashboard, go to Layout
2. Click on Add a Gadget
3. Select HTML/JavaScript and click ‘+’
4. Under Content section, paste the following code
<div id='menubar'>
 <ul id='menus'>
 <li>
 <a href='#'>MenuItem</a>
 </li>
 <li>
 <a href='#'>MenuItem</a>
 </li>
 <li>
 <a href='#'>MenuItem</a>
 </li>
 <li>
 <a href='#'>MenuItem</a>
 <ul>
 <li><a href='#'>SubMenuItem</a></li>
 <li><a href='#'>SubMenuItem</a></li>
 <li><a href='#'>SubMenuItem</a></li>
 </ul>
 </li>
 </ul>
 </div>
5. Replace MenuItem (in the copied code in point 4) with the appropriate menu labels that you want in your blog. You can name the Categories in place of Menuitem.
6. Replace SubMenuItem (in the copied code in point 4) with the appropriate sub menu label. You can name the Sub categories in place of SubMenuItem.
7. Replace # (in the copied code in point 4) with the appropriate URL ( the page URL that you like to link with the menu)
8. Click Save
9. Click Save arrangement
This will create the menu with posts linked to the menu.
Now, we will create the Drop Down part of the Menu
11. Click on Template
12. Click Edit HTML
14. Search for the following line (type Ctrl+F)
 ]]></b:skin>
15. Paste the following code directly above that line:
*-------- Begin Drop Down Menu -------*/
#menubar {
 background: #8E8E8E;
 width: 840px;
 color: #FFF;
 margin: 0px;
 padding: 0;
 position: relative;
 border-top:1px solid #B2FFFF;
 height:35px;
}
#menus {
 margin: 0;
 padding: 0;
}
#menus ul {
 float: left;
 list-style: none;
 margin: 0;
 padding: 0;
}
#menus li {
 list-style: none;
 margin: 0;
 padding: 0;
 border-left:1px solid #1A6680;
 border-right:1px solid #1A6680;
 height:35px;
}
#menus li a, #menus li a:link, #menus li a:visited {
 color: #FFF;
 display: block;
 font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0;
 padding: 9px 12px 10px 12px;
 text-decoration: none;
}
#menus li a:hover, #menus li a:active {
 background: #130000; /* Menu hover */
 color: #FFF;
 display: block;
 text-decoration: none;
 margin: 0;
 padding: 9px 12px 10px 12px;
}
#menus li {
 float: left;
 padding: 0;
}
#menus li ul {
 z-index: 9999;
 position: absolute;
 left: -999em;
 height: auto;
 width: 160px;
 margin: 0;
 padding: 0;
}
#menus li ul a {
 width: 140px;
}
#menus li ul ul {
 margin: -25px 0 0 160px;
}
#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {
 left: -999em;
}
#menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li li.sfhover ul, #menus li li li.sfhover ul {
 left: auto;
}
#menus li:hover, #menus li.sfhover {
 position: static;
}
#menus li li a, #menus li li a:link, #menus li li a:visited {
 background: #B3B3B3; /* drop down background color */
 width: 120px;
 color: #FFF;
 display: block;
 font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
 margin: 0;
 padding: 9px 12px 10px 12px;
 text-decoration: none;
z-index:9999;
border-bottom:1px solid #1A6680;
}
#menus li li a:hover, #menusli li a:active {
 background: #130000; /* Drop down hover */
 color: #FFF;
 display: block; margin: 0;
 padding: 9px 12px 10px 12px;
 text-decoration: none;
}
/*-------- End Drop Down Menu -------*/
16. Click Save Template, then Close
This will create the Drop Down Menu

0 comments:

Post a Comment