Blogger ma navication Menu

Blog me good navigation ke liye Horizontal Menu bar bahut jaruri hai.Ye blog ko professional look deta hai,or visitors ko ek topic se dusre topic pe visit karne ke liye asan hota hai.Mai apko 3 tarike batunga jisye aap blog me horizontal menu bar add kar sakte hai.

Bloggers me sabse adhik use kiya jane wale Menu bar "Page Menu" hai,jisye aap page widget ka use karke Apne Blog me add kar sakte hai.Lekin page menu ka sabse bara disadvantages hai ki isme aap drop down menu list nahi bana sakte.Horizontal menu me drop down features add karne ke liye apko HTML programming or CSS ani chahye.

Blogger me Drop Down Menu kaise banate hai

Step:1-Sabsa pahala Template pr jaya Ab "Edit HTML" pe click kare.

Step:2-CTRL+F click kare,ab ek search box ayega usme <div id='header-wrapper'> search kare.

· <div id='header-wrapper'>  ke niche diye gaye code ko paste karde.
<div class='menu'> <li><a href='link1'>Link1 </a></li> <li><a href='link2'> Link2</a></li> <li><a href='link3'>Link3 </a> <ul> <li><a href='link4'> Link4</a></li> <li><a href='link5'> Link5</a> </li> </ul> </li> </ul </div>



Link1,Link2 common links hota hai,isye ap parent links bhi keh sakte hai.link3 ka link4,link5 drop drown menu hai.Drop down menu ko child links keh sakte hai.

herf='link' me link ki jagah apne categories ka link type kare or Link1 ki jagah categories ka name,isi tarah link2,link3 etc ke sath bhi kare.

Step:3-Ab CTRL+F dabaye or ye code ]]></b:skin> search kare.

·]]></b:skin> ke just upar  diya code copy karke paste karde.
.menu{font-size:12px;border-bottom:3px solid #6bd;border-top:1px solid #DDD;margin:0 0 7px 7px;padding:0;} .menu ul{height:30px;list-style:none;margin:0;} .menu li a{border-right:1px solid #DDD;display:block;line-height:30px;text-align:center;text-decoration:none;padding-left:15px;padding-right:15px;margin:0;} .menu li a:hover,.menu ul li:hover a{background:#6bd;color:#222;text-decoration:none;} .menu li ul{display:none;height:auto;border:0;position:absolute;width:225px;z-index:200;margin:0;padding:0;} .menu li:hover ul{display:block;} .menu li li{border-bottom:1px solid #dedbd1;display:block;float:none;width:225px;margin:0;padding:0;} .menu li ul a{display:block;height:30px;font-size:12px;font-style:normal;text-align:left;margin:0;padding:0 10px 0 15px;} .menu li ul a:hover,.menu li ul li:hover a{background:#2580a2;border:0;color:#fff;text-decoration:none;} .menu p{clear:left;} .left,.menu li{float:left;}
Ye code apke navigation menu bar ko stylish bana dega.

Step:4-Ab Preview pe click karke check kare,Menu Bar dikh raha hai kya,Agar hao to "save template" pe click karde.Apka blogger Template me Menu bar add ho chuka hai.


step ke code ko aap HTML widget me use karke bhi Menu navigation bar apne blogger me add kar sakte hai.

Apke blogger me stylish menu navigation bar add ho chuka hai.Apko kahi problem aa rahi toh comment karke puche.

Share This :

Unknown