Blogger Blog Me Floating Navigation MenuBar kaise Lagaye


Hello Bloggers,Aap sabhi jante honge ki Navigation Menu/Bar kya hota hai aur ye blog ke liye kitna important hota hai because jab bhi koi visitor aapki site par visit karta hai to uski nazar sabse pehle site/blog ke Navigation Menu par hi padti hai ese me hamare liye sabse important hota hai ki ham blog ke Navigation menu ek better look de taaki visitors ko ye pasand aaye.Is liye mai aaj aapko is post mai bataunga ki Blog ke liye  Floating Navigation Menu kaise banaye.Sabse pehle to ham ye jaan lete hai ki Floating Navigation kya hota hai.

 
Blogger mai floating menu bar kaise lagaye


Floating Navigation Menu

Floating Navigation ka matlab hai ki Navigation menu ki position Fixed rahe yaniki jab bhi aap site par mouse ko scrolldown/up karen to  menu dikhti rahe.Agar aap abhi bhi nahi samjhe to aap meri site ko scrolldown/up karke dekh sakte hain ki kaise Navigation menu fixed hai.Esa karne ka benefit ye hai ki Apki site/blog ka look Awsome dikhega aur Visitors ko blog ki menu ke liye har bar mouse ko scroll nahi karna padega.To chaliye ab ham baat karte hai ki kaise Floating Navigation menu banaye blog me.


Blogger blog me Floating menu kaise banaye



-: Navigation Menu ko Float karane ke liye hame kuch Codes apne blog me add karne honge .In steps ko Follow karke aap bhi apne blog ke navigation bar ko Float karwa sakte hain 

Step1- Apne blogger Template me jaiye  aur Ctrl+f press karke Navigation bar/menu ko search karen
       Go to Template→Edit→Ctrl+f→Find Navigation menu

Agar aap Navigation menu find nahi kar paa rahe hain to to kisi bhi word ko search karen jo aapki menu mai hai. Menu codes kuch is type se honge ab menu ko float karwane ke liye hame Code ke starting and end me <div id="nav"> , </div> code add karna hai.Jaise mene niche extra code add kiye hain aapko bhi usi tarah add karna hai.
 <div id="nav">
 <div class='widget-areanbt'>
<nav class='nav-headernbt' role='navigation'>
<ul class='thefunk-nav-menunbt thefunk-head-navnbt'>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Business</a>
<ul class='sub-menu'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</div>
Ab Save template par click kare


 Step2
Ab hame puri menu ko Float karwana hai iske liye hame javascript code ko add karna hoga.To fir se Template section me <head> code ko search kare[Ctrl+f].
 <Head> ke just niche is code ko paste kar de.
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    // Stick the #nav to the top of the window
    var nav = $('#nav');
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = $(window);
    $w.scroll(function() {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if (shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                top: 0,
                left: nav.offset().left,
                width: nav.width()
            });
            isFixed = true;
        }
        else if (!shouldBeFixed && isFixed)
        {
            nav.css({
                position: 'static'
            });
            isFixed = false;
        }
    });
});
//]]>
</script>
Step3
Ab hame ek last css code add karna hai jisse Floating Menu properly work kar sake. To iske liye ]]></b:skin> code ko Search kare aur thik iske niche(Below) is code ko paste kar den.
#nav{ z-index: 999; }
Ab save template par click karke apne Blog ko dekhe 100% aapke blog ki Navigation menu Float karne lagegi.


Conclusion

To friends is post mai mene aapko bataya ki  Blogger Blog me Floating Navigation menu kaise banate hai.Aur mai aasha karta hun ki 100% ye trick aapke liye bhi kaam karegi kyuki maine bhi isi Trick se Floating menu Create ki hai.Agar aapko ye tricks/post pasand aayi to ise Share jaroor kariye.Thanks

9 comments

Ye default menu bar hai ....template ke sath hi milega

Ye code add karne ke baad phele bale menu code ka kya kare.

Is code ko 'nav' me add karne ke baad purane menu html code ka kya kre.

@Shailendra,AAp post ko dhyan se padhiyekyuki Ye koi New Navigation ki Html Code nahi balki in Codes ki help se aapki Purani Vali Navigation menu Float karegi...

Welcome and keep visiting......


EmoticonEmoticon