आपने बहुत से websites में देखा होगा की site के header area में एक menu होता है. उस menu में कुछ important links होते हैं, जिससे visitors को आसानी होती है. इस post में हम आपको ब्लॉग में menu add करने के बारे में ही बताएँगे. अगर आपका ब्लॉग blogger में है और आप अपने ब्लॉग में menu add करना चाहते हो तो इस post को पढ़े हम यहाँ पर आपको stylish menu bar add करने के बारे में बताने जा रहे हैं।
Internet पर बहुत से ब्लॉगर है और हर कोई यही चाहता है की उसके ब्लॉग का design और सबसे better हो. इसके लिए लोग तरह तरह के widgets को अपने ब्लॉग में add करता है. यह सच है की ब्लॉग में अच्छी traffic लाने के लिए उसका design अच्छा होना बहुत important है. क्योकि आज कल लोग ज्यादा तर blog की design पर ही focus करता है. जिस ब्लॉग का design अच्छा होता है, उसमे visitors को भी आने का दिल करता है.
आज कल internet पर लाखों Themes, Templates हैं और इसकी design भी different है. लेकिन ब्लॉग को better और different look देने के लिए हमें template/theme को अपने से customize और design करना होता है. क्योकि एक ही template/theme को internet से हजारों लोग download करके अपने ब्लॉग में add करता है. तो इसीलिए अगर हमें अपने ब्लॉग को उन other सभी blog से better design करना है तो हमें अपने से theme/template को design करना होता है. Template को आपने से customize करके design करने के लिए आपको HTML, XML, CSS जैसे coding languages की जानकारी होनी चाहिए. यदि आपको coding की जानकारी नही है तो आप किसी दूसरे developer से design करवा सकते हो. Bye the way, हम इस post में आपको menu add करने के बारे में बताने वाले हैं. तो चलिए जानते हैं.
ब्लॉग में menu add करना बहुत जरुरी होता है. क्योकि इसमें हमारे ब्लॉग की कुछ popular links होता है और बहुत से लोग categories भी add करता है. इससे हमारे ब्लॉग के visitors को इधर उधर भटकने की जरुरत नही होती है. आज कल बहुत से template में पहले से भी menu add किया होता है. हम इस post में आपको wordpress blog की तरह menu add करने के बारे में बता रहे हैं. यह stylish और responsive menu है, जो की mobile devices में भी अच्छे से work करता है.
Blog में responsive और stylish menu कैसे add करते हैं.
हम आपको निचे कुछ simple steps बता रहे हैं. निचे दिए गए process को follow करके आप आसानी से menu को अपने blog में add कर सकते हो.
Step 1: सबसे पहले अपने ब्लॉग में login करें और Themes ->Edit HTML में जाएँ।
Step 2: अब CTRL+F बटन दबा कर <body> को find करें और <body> के निचे में निचे दिया हुआ code को add करें.
<!---Menu by www.blogginghindi.com--> <nav id='nav-main'>
<ul>
<li><a href="URL">Title</a></li>
<li><a href="URL">Title</a></li>
<li><a href="URL">Title</a></li>
<li><a href="URL">Title</a></li>
<li><a href="URL">Title</a></li>
</ul>
</nav>
<div id='nav-trigger'>
<span>Menu <i class='fa fa-list'/></span>
</div>
<nav id='nav-mobile'/>
Customize करें:
- ऊपर दिए हुए code में URL की जगह page या category का URL paste करें.
- Title की जगह में page या category का title add करें.
- अगर आप ज्यादा page या category को add करना चाहते हो तो </ul> के पहले <li><a href=”URL”>Title</a></li> को add करें.
Step 3: CTRL+F बटन दबा कर ]]></b:skin> को search करें और ]]></b:skin> के पहले निचे दिया हुआ CSS code को add करें।
/********** Blogger Stylish & Mobile Menu By BloggingHindi.com**********/
#nav-trigger {
display: none;
text-align: center;
}
#nav-trigger span {
display: block;
background-color: #279CEB;
cursor: pointer;
text-transform: uppercase;
padding: 0 25px;
color: #EEE;
line-height: 67px;
}
nav#nav-mobile {
margin: 0px;
}
nav {
margin-bottom: 30px;
}
#nav-main {
background-color: #279CEB;
margin: 0px;
float: left;
}
#nav-main ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
#nav-main li {
display: inline-block;
float: left;
ont-family: '
Open Sans'
, sans-serif;
}
#nav-main li:last-child {
border-right: none;
}
#nav-main a {
padding: 0 25px;
color: #EEE;
line-height: 67px;
display: block;
}
#nav-main a:hover {
background-color: #3AB0FF;
text-decoration: none;
color: #fff;
}
#nav-mobile {
position: relatifve;
display: none;
}
#nav-mobile ul {
display: none;
list-style-type: none;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #ddf0f9;
z-index: 10;
padding: 0px;
border-bottom: solid 1px #cc0028;
}
nav#nav-mobile li:last-child {
border-bottom: none;
}
nav#nav-mobile ul {
padding: 0;
margin: 0;
}
nav#nav-mobile a {
display: block;
color: #29a7e1;
padding: 10px 0px;
text-decoration: none;
border-bottom: 1px solid #00aeef;
text-align: center;
}
nav#nav-mobile a:hover {
background-color: #111;
color: #fff;
}
nav#nav-mobile li {
display: block;
}
nav#nav-mobile {
display: none;
}
/* =Media Queries
-------------------------------------------------------------- */
@media all and (max-width: 900px) {
#nav-trigger {
display: block;
}
#nav-main {
display: none!important;
}
nav#nav-mobile {
display: block;
}
}
Step 4: अब आपने css code को add कर दिया है. अब फिर से CTRL+F को दबाये और </head> को find करें, उसके बाद </head> के पहले निचे दिया हुआ code को add करें.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#nav-mobile").html($("#nav-main").html());
$("#nav-trigger span").click(function(){
if ($("nav#nav-mobile ul").hasClass("expanded")) {
$("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
$(this).removeClass("open");
} else {
$("nav#nav-mobile ul").addClass("expanded").slideDown(250);
$(this).addClass("open");
}
});
});
//]]>
</script>
Step 5: अब <head> को find करें और <head> के निचे में निचे दिया हुआ code add करें।
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script>
Step 6: अब finally template को save कर दीजिए.
Congratulations! आपने अपने ब्लॉग में menu को add कर लिया है. अब एक बार अपने ब्लॉग में visit करके देखें. अगर कोई problem हो तो हमें comment करें.
में उम्मीद करता हूँ की आपको यह post अच्छा लगा होगा और अपने इस post की मदद से अपने ब्लॉग में stylish menu add कर लिया होगा। अगर आपको इस post से सम्बंधित कोई सवाल पूछना है तो हमें comment करें और इस post को social media में share करें।
Sachinkumar says
Hallo me ek new blogger hu par mwn mobile se blogging karna chata hu per mujhe coding nhi athi h kiya aap mujhe sikha sakte ho ki mobile se coding kese adf kare mujhe coding k andar ]] / ( b:ski) coding nhi mil rhi he please help mi
Md Arshad Noor says
Bhai basic coding seekhne ke liye YouTube sabse achha tarika hai. Pahle aap YouTube video dekh kar seekho aur fir pdf bhi samjh me ayega.
SURAJ JOSHI says
VERY NICE SIR!
niranjan says
bahut achha likha hai aapne likin mera ek sawaal hain bahut saare famous blogger kahte hain jyada css ka use karne se blog ki speed slow ho jaati hain kya ye sach hain?
Md Arshad Noor says
True but simple site design rakhenge to css kam hoga. CSS se jyada JS slow load hota hai.
Mohammad Aejaz says
Bahut accha article hai aapka sirji
Aap hame aese hi guide karte rahe