How to Customize Blogger Navigation Bar or Menu Bar in Hindi

How to customize menu bar of blogger

Custom Template ko apne blog par install karne par apko usme kafi sari cheezey theek karni padti hai, jaise ki Nav bar, Side Bars etc. Par jise Coding nahi ati uske liye ye kisi challenge se kam nahi hai. Toh usi ko dhyaan me rakh kar me Puri "Blog Customization Guide" likhne jaa rha hu. Jisse aap Favicon se lekar Naviation Bar, Sidebars sab kuchh achhe se customize kar sakte hain.

Related Post: Favicon Kya hai or kaise Custom Favicon Design kare?

Yeh Blogpost meri usi series ka hissa hai. Aaj hum sikhenge ke kaise aap apni Custom blog ke Navigation bar ya Menu Bar ko design kar sakte hain.

Toh sabse Pahle Hum jaan lete hain...

What is a Navigation Bar? 

Jyadatar Websites par aapne dekha hoga sabse upar ki taraf ek "Bar" hoti hai jisme kuchh links di gyi hoti hai jaise ki HOME, ABOUT, CONTACT, etc. Isi Bar ko hum Navigation Bar bolte hai. Yeh Bar aapke viewers ko apki blog par unki jarurat ke hisaab se kuchh bhi Content asaani se search karne ki sahuliyat deti hai. 

Aisa koi jaruri nahi hai ki Nav Bar blog ke Top par hi ho ise aap Left ya Right side bhi rakh sakte hain or chahe toh aap Top, Bottom ya Right ya Left me apni jarurat ke hisaab se kahi bhi rakh sakte hain. Aap niche screenshot me Horizontal or Vertical NavBars dekh sakte hai. 

screenshot of Navigation Bars

Ab aap samajh gye honge ki Navigation Bar ya Menu Bar kya hota hai. Toh aaiye ab hum ise kaise Customize kar sakte hain, jaan lete hain...

How to Customize Navigation Bar?

In kuchh simple se steps ko follow karke  asaani se apne Custom Template ke Menu Bar ko customize kar sakte hain Par apni blog ke template me kuchh bhi changes karne se pahle Template ka backup jarur bana le....

Step 1: Sabse Pahle Blogger Dashboard>>Template>>Edit HTML ke vikalp par click kare. Isse apke samne "HTML Editor" khul kar aa jayega. Screenshots me dekhey.

Screenshot of blogger dashboard

Screenshot of HTML Editor of blogspot

Step 2: Ab HTML Editor me apko NavBar ke codes ko dhundna padege, par apko pta hona chahiye ki apko konse codes dhundne hai. Niche Screenshot me dekhe, hume yaha "All Posts" ki link ko change karna hai toh iske code ko search karne ke liye aap "All Posts" ko copy kar   le.

Screenshot of hinditechblog website

Step 3: Ab apne HTML Editor me jaaye or jaha apko codes likhe dikhai de rahe hai us box me kahi bhi click karke keyboard me CTRL+Fpress kijiye. Ab ek search box apke samne khulega. Us Box me aap CTRL+Vpress karke jo apne copy kiye tha use paste kar de or enter press karen. Niche screenshotsme dekhen.

Customizing menu bar of blogger

Step 4: Ab mene yahan All Posts ko Download me badal diya hai or dhyaan rakhe ki aapko href="your code here" attribute me bhi change karna padega. "href" attribute me aap wo link dale jiska aap Tab bana rahe hain.

  Jaise agar aap About ka page Navbar me dikhana chahte hai to sabse pahle to apke paas about ka page hona chahiye or fir aap uski link ko href=" add link here" attribute ke andar dale.  

Jaise mene pahle ek download Page banaya or fir uski link ko href=""   attribute me dala. Niche dekhe...

Related Post: How to make pages in blogger?

Change karne se pahle...

 <a href='http://www.hinditechblog.in/p/all-posts.html'>

lt;span>All Posts</span>

 </a>

Change karne ke baad...

<a href='http://www.hinditechblog.in/p/downloads.html'>

<span>Downloads</span>

</a>

save template screenshot

Step 5: Ab sare changes karne ke baad aap template ko save kar de. Template ko save karne ke baad apni blog ko check kare. Ab usmeDownload ka "Tab" dikhai de raha hoga. Screenshot me dekhey.

Hindi Tech blog website

Step 6: Aap aise hi changes karke apne Navigation Bar ko apne hisaab se                      Customize Kar sakte hain. Bas apko codes ko khojna padega.  

....Starts Here...

<nav id='nav'> 
<div class='conty'>
       
        <ul class='nav menubar2' id='menu-main'>
          <li>
            <a class='active' href='/'>
             
             <span>Home</span>
            
            </a>
          </li>
          <li>
            <a href='http://www.hinditechblog.in/search/label/Blogger'>
            <span> Blogger</span>
            </a>
            <ul style='display: none;'>
              <li>
                <a href='#'>
                 
                </a>
              </li>
              <li>
                <a href='#'>
                  Fashion1
                </a>
              </li>
              <li>
                <a href='#'>
                  Fashion2
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href='http://www.hinditechblog.in/p/all-posts.html'>
              <span>All Posts</span>
            </a>
            <ul style='display: none;'>
              <li>
                <a href='#'>
                  Sub Menu 1
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Menu 2
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Menu 3
                </a>
              </li>
            </ul>
          </li>
<li>
            <a href='#http://www.hinditechblog.in/p/about.html'>
             <span> About Us</span>
            </a>
          </li>
          <li>
            <a href='http://www.hinditechblog.in/p/contact.html'>
            <span> Contact Us</span>
            </a>
          </li>
       
          <li>
            <a href='http://www.hinditechblog.in/p/privacy-policy.html'>
             <span> Privacy Policy</span>
            </a>
          </li>
        </ul>
        <div id='searchformfix'>
          <form action='/search' id='searchform'>
            <input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Text to Search...&quot;;}' onfocus='if (this.value == &quot;Text to Search...&quot;) {this.value = &quot;&quot;;}' type='text' value='Text to Search...'/>
            <input type='submit' value=''/>
          </form>
        </div>
        </div>

      </nav>

....end of code...

Jab bhi aap koi Navigation Bar customize karna chahe bas apko upar likhe jaise codes ko khojna padega or Red color me highlited dono jagah par changes karna padega. Jaise mujhe upar Download ka page dikhana tha toh mene download type karke download ka link "href" me dala.

I hope, me apko achhe se samjhaa paya par agar ab bhi apke man me koi doubts hai toh ap mujhse puchh contact kar puchh sakte hain. 

Apko yeh post kaisi lagi yeh bhi jarur btaiyega. 

Email: thepradeeptyagi@gmail.com