Responsive website Menu Bar :- Blog Website Par Mobile friendly Menu Bar Add kaise karte hai, Menu Bar lagane ki puri jankar

Hello everyone , Iss Article me yeah jankari share Kari gayi hai Blog Website Par Mobile friendly MENU Bar Add kaise karte hai. I mean Blog Par Responsive Menu bar kaise lagate hai .

Blog Website Par 2 tarike ke Menu bar hote hai .

First Menu Bar :- ek wo Jo desktop par or mobile Par same show hote hai .

2nd Menu Bar :- dubaara wo desktop Par desktop version me show hai . or mobile Par Mobile friendly show hote hai . inhe Responsive Menu Bar bolte hai.

Note :- sabse phele apni Template ka Back-up download kar lijiye jisse agar Aapse coding wrong ho jati hai Aap Back-up upload kar sakte hai.

1 :- first Aap apne Blog ke Dashboard Par jaye.

2 :- ab Template ke Option Par click kar dijiye .

3 :- ab EDIT HTML ke Option Par click kar dijiye.

4 :- ab Template ke undar Ctrl-F press karke niche diya code search kare.

]]></b:skin>

5 :- ab jo code apne search Kara hai uss code ke upar paise kar niche diya code paste kar dijiye .

/*-----www.fastmoneyxyz.com ----*/ body { margin: 0px; } #menu{ background: #FF0000; color: #FFF; height: 40px; border-bottom: 2px solid #DDD; box-shadow: 1px 2px 9px #B1B1B1; border-top: 2px solid #DDD; } #menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none} #menu ul{height:45px;width:1024px} #menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;} #menu a{display: block; line-height: 40px; padding: 0 14px; text-decoration: none; color: #FFF; }   #menu li a:hover{ color: #E4E4E4; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; background: #5FC6EB; } #menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer} #menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center} #menu label span{font-size:18px;position:absolute;left:35px} #menu ul.menus{ height: auto; overflow: hidden; width: 170px; background: #50B7DC; position: absolute; z-index: 99; display: none; } #menu ul.menus li{ display: block; width: 100%; font:normal 0.8em Arial; text-transform: none; text-shadow: none; border-bottom: 1px dashed #31AFDB; } #menu ul.menus a{ color: #FFF; line-height: 35px; } #menu li:hover ul.menus{display:block} #menu ul.menus a:hover{ background: #5FC6EB; color: #FFF; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; } @media screen and (max-width: 800px){   #menu{position:relative}   #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}   #menu ul.menus{width:100%;position:static;padding-left:20px}   #menu li{display:block;float:none;width:auto; font:normal 1.1em Arial;}   #menu input,#menu label{position:absolute;top:0;left:0;display:block}   #menu input{z-index:4}   #menu input:checked + label{color:white}   #menu input:checked ~ ul{display:block}

6 :- Ab Template Par niche diya code search kare .

<body>

7 :- ab niche diya code jo code apne dubara code search Kara hai niche paise kar dijiye .

Note :- iss code me Maine apni site ke link ADD kar rakhe hai Aap Unhe delete kar dijiye or site ke page link ADD kar dijiye .

Agar Aap mere bataye gaye rule Follow karte hai to yeha Menu bar apke Blog Par top Par show hoga . agar Aap or kahi show karna chahate hai to uss ke liye Aap ko apne hishab se 2nd code paste karna hoga . baki mai suggestion karuga ki Aap iss code ko Header image ki coding ke niche paise kare wo jagah best hai. Mere Blog Par check kar sakte hai.

Responsive website Menu Bar :- Blog Website Par Mobile friendly Menu Bar Add kaise karte hai, Menu Bar lagane ki puri jankar

Connect with Us