Responsive website Menu Bar :- Blog Website Par Mobile friendly Menu Bar Add kaise karte hai, Menu Bar lagane ki puri jankar
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 .
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 .
<nav id='menu'> <input type='checkbox'/> <label>≡<span> MENU </span></label> <ul><li>#</li>
<li>#/li><br />
<li>#</li><br />
<br />
<li>#</li><br />
<br />
<li>#</li><br />
<br />
<li>#</li><br />
<br />
<li><a href='#'>Guest Feature <font size='2'>▼</font></a> <ul class='menus'><li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
<li><a href='#'>Tab 4</a></li>
<li><a href='#'>Tab 5</a></li>
<li><a href='#'>Tab 6</a></li>
</ul></li><br />
<br />
<li><a href='#'/></li><br />
<br />
<li><a href='#'>Guest-post <font size='2'>▼</font></a> <ul class='menus'><li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
</ul></li><br />
<br />
<li><a href='#'>Advertise</a></li><br />
<br />
</ul></nav>
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.
No comments: