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.
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.
-: 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<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>
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>
<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.
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
No comments:
Post a Comment