BloggingHindi - Blogging Aur Internet Ki Sabhi Jankari

  • About Us
  • Contact Us
  • Blogging
  • WordPress
  • SEO

Blogger Blog Me WordPress Jaisa Menu Kaise Add Kare.

Last Updated on January 5, 2021 by Md Arshad Noor 6 Comments

आपने बहुत से websites में देखा होगा की site के header area में एक menu होता है. उस menu में कुछ important links होते हैं, जिससे visitors को आसानी होती है. इस post में हम आपको ब्लॉग में menu add करने के बारे में ही बताएँगे. अगर आपका ब्लॉग blogger में है और आप अपने ब्लॉग में menu add करना चाहते हो तो इस post को पढ़े हम यहाँ पर आपको stylish menu bar add करने के बारे में बताने जा रहे हैं।

Blogger me WordPress jaisa menu kaise add kare
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 करें:

  1. ऊपर दिए हुए code में URL की जगह page या category का URL paste करें.
  2. Title की जगह में page या category का title add करें.
  3. अगर आप ज्यादा 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: &#39;
    Open Sans&#39;
    , 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 करें। 

You May Also Like

  • Blog Homepage Me Only Post Title Kaise Dikhaye

    Blog Homepage Me Only Post Title Kaise Dikhaye

  • Blogger Me Facebook Open Graph Data Kaise Add Kare

    Blogger Me Facebook Open Graph Data Kaise Add Kare

  • Blog Post Copy Hone Par Copyright Post Me Automatic Apne Blog Ki Link Add Kare

  • Blogger Me Duplicate Content Issue Kaise Fix Kare [Complete Guide]

    Blogger Me Duplicate Content Issue Kaise Fix Kare [Complete Guide]

About Md Arshad Noor

हेलो दोस्तों, मेरा नाम मोहम्मद अरशद नूर है. में इस ब्लॉग में रेगुलर नई नई आर्टिकल्स लिखता हूँ. यहाँ पर हम ज्यादातर Blogging, Make Money, SEO, WordPress आदि से सम्बंधित Article मिलेगी. आपको हमारी लेख पसंद आती है तो इसे सोशल मीडिया में शेयर करें। अगर आपको कोई सहायता चाहिए तो कमेंट कीजिए।

COMMENTs ( 6 )

  1. 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

    Reply
    • 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.

      Reply
  2. SURAJ JOSHI says

    VERY NICE SIR!

    Reply
  3. 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?

    Reply
    • Md Arshad Noor says

      True but simple site design rakhenge to css kam hoga. CSS se jyada JS slow load hota hai.

      Reply
  4. Mohammad Aejaz says

    Bahut accha article hai aapka sirji
    Aap hame aese hi guide karte rahe

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Please do not spam! otherwise your comment will be removed.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get it on Google Play

Useful Articles

Khush Nahi Rahne Wale Logo Ki 5 Buri Aadte

Revenue Hits kya hai aur isme Account kaise banaye

Blogspot Blog me Country Specific Redirect Disable kaise Kare

Spam Mail Sender Se Unsubscribe Karke Spam Mail Se Kaise Bache

Google Me Search Karne Ke Top 10 Tips & Trick – [Get Right Results Fast]

Google Search Results Me Blog Ke Sabhi Posts Me Star Rating Kaise Dikhaye

Blog Homepage Me Only Post Title Kaise Dikhaye

Blogging me fail hone ka 10 sabse Bada Karan

Social Media se More Traffic Pane ke Liye 10 Important Tips

Quora Se Blog Ki Traffic Kaise Badhaye? 5 Tips

Blog Post me Keyboard key kaise lagaye

YouTube Se PR9 Dofollow Backlink Kaise Receive Kare

Blog Post Copy Hone Par Copyright Post Me Automatic Apne Blog Ki Link Add Kare

About Us

mdarshadnoorहेल्लो दोस्तों, मेरा नाम मोहम्मद अरशद नूर है. में अररिया, बिहार का रहने वाला हूँ. मुझे नयी चीजें सीखना-सिखाना बहुत पसंद है. में पिछले 5 सालों से ब्लॉगिंग के फील्ड में हूँ. इस ब्लॉग में आपको ब्लॉगिंग और इन्टरनेट से सम्बन्धित जानकारी मिलेगी.

SUBSCRIBE OUR NEWSLATTER

हमारे ब्लॉग के रेगुलर विजिटर हो तो अभी Subscribe कर लीजिए ताकि आप हमारे नए पोस्ट को सबसे पहले पढ़ पाएँ!

Posts for WP Users:

WordPress Me Login Username Kaise Change Kare [3 Methods]

WordPress Blog Ke All External Links Ko New Tab Me Open Kaise Kare (Without Plugin)

WordPress Blog URL Ko www Ya Without www Setup Kaise Kare

PHP Version Ko Upgrade Karke Site Speed Ko 20% Increase Kare

WordPress Blog Me Free HeatMap Kaise Banaye [Sumo Me Plugin Setup]

More Posts from this Category

Recommended For You

WordPress Ya Blogger Me Drop Caps Kaise Use Kare/Banaye [Complete Guide]

Post ke Image ko SEO Friendly Banane ke Liye 10 Tips

Facebook Instant Article Kya Hai? Iske Pros And Cons

Google search console Me Preferred domain (www or non www) Kaise Setup Kare

YouTube Par Video Upload Kaise Kare [Beginner Guide]

Backlinks Pane ke liye 20 Best Ways.

Blog Traffic Kam (Decrease) Hone Par Kya Kare [5 Tips]

10 Mistake Jo Blog Ki Traffic Decrease Kar Deta Hai

Google Images Se Copyright Free Images Kaise Find (Download) Kare

Copyright © 2020 - All rights reserved.AboutContactSitemapDisclaimer