Blogger Blog Ke Sidebar Widget Ko Sticky/floating kaise kare ?

Posted on

855 total views, 9 views today

Blogger Blog Ke Sidebar Widget Ko Sticky/floating kaise kare ? Jab blog banane ki baat aati hai to sabse pehle aapko Blogger.com ke jariye hi apna blog banana chahiye kyunki blogger.com ke jariye aap apna free blog bana sakte ho or apne article writing skill ko improve kar sakte ho. Maine blog banane ke liye blogger.com ko isliye recommend kar raha hu kyun ki maximum log blog banane ke bad apne blog ko thik se maintain nahi kar pate or blogging chhod dete hai. Blogger blog me aapko apne blogging skill imporve karne ka mauka milta hai or aap future me apne blog ko WordPress pe bhi transfer kar sakte ho, lekin jaha aapko WordPress me abhut sare features milte ha wahi blogger blog me aapko apne blog ko design karne ke liye bahut paresani ka samna karna padta hai.

Blogger Blog Ke Sidebar Widget Ko Sticky floating kaise kare image

Blogger blog ko apne hisab se design karne me kafi samay lagta hai or bar-bar blog theme change karne ke bad bhi hume wo look nahi mil pata jaisa hum chahte hai. Aise hi agar aapko apne blog ke sidebar widget ko floating/sticky/fixed karna hai to aapko iske liye apne blog design ko manually edit karna hota hai or aap confuse ho jate ho.

Blogger blog ko dsign karne ke liye aapko apne blog ke HTML code ko edit karni hi hota hai or agar aap new blogger ho to aapko ye sab samajhne me kafi samay lagta hai lekin samay ke sath sath aap sab sikh jate ho.

Blog ko design karne ke doran hum apne blog ke sidebar ko sticky karne ke liye na jane kitni bar apne theme, widget or HTML code ko edit karte hai lekin result kuch bhi haath nahi lagta.

Jab maine blogging ki suruwat ki thi to mujhe dusaro ke blog ko read karna or information collect karna accha lagta tha or maximum blog ko read karne ke bad mujhe ek chij common lagi ki wo sabhi blog ke sidebar widget floating hote hai.. Mere mind me bhi bahut curiosity thi or me chahta tha ki me bhi apne blog ke sidebar widget ko floating banau.

Par me to us samay new blogger tha or isliye mujhe HTML code edit karne ke bare me knowledge nahi thi, to maine google search ke jariye pata kiya ki kaise apne blog ke sidebar ko sticky banaye jaye.. Maine bahut se article ko follow kiye sabhi ne alag alag tarike bataye, sabhi ke tariko ko maine one by one follow kiya .. Lekin jitni bar maine guide follow ki me samajh gaya the ki ye to mere bas ki baat nahi..

Par aaj jab mujhe blogging karte huye 4 saal ho gaye hai to main samajh sakta hu ki ek professional blogger or new blogger me bahut differences hota hai, or internet par aapko aise bahut kam article dekhne ko milenge jo ek new blogger ko acche se guide kar sake. Agar us samay mujhe koi aisa article milte jo mujhe sahi sahi or sahi tarike se ye batata ki blog sidebar widget ko kaise fixed kiya jaye to main bar bar apne theme ko change nahi karta..

Anyway, me ek blogger hu me apne blog par aane wale har visitor ko ek new blogger ki tarah hi treat karta hu issay me apne article ko sabke liye informative banane me success hota hu. To friends ab aapko or jyada paresan hone ki jarurat nahi kyun ki me aaj aapko step by step simple guide ke jariye ye batane wala hu ki aap apne blogger blog me fixed widget kaise add kar sakte ho..

Friends agar aap apne blogger blog ke sidebar widget ko floating karna chahte hai to aapko ye to jarur pata hoga ki ye floating widget hota kya hai, lekin blog par fixed widget kaise lagaye ye janne se pehle aapko ye janna hoga ki aapko apne blog par kon se widget ko fixed karna chahiye taki aapke blog ka design or look kharab na lage.

Blogger blog ke sidebar me kon se widget ko floating karna sahi rahega ?

Blogger blog ke sidebar me kon se widget ko floating karna sahi rahega

Upar diye gaye image ko dekhe or samjhe. Maan lijiye ki aapke blog ke sidebar me aapne 3 widget lagaye huye hai jisme se aap kisi ek widget ko fixed karna chahte ho jo blog scroll hone se sath sath float karta rahe. To aap kaun se widget ko fixed karna chahoge ? Agar aap saoch rahe ho ki aap Widget-1 or widget-2 ko fixed karna hai to aisa karne par aapke blog ka design or look puri tarah se bigad jayega kyonki agar aap widget-1 ko fixed kar dete ho to jab koi aapke blog ko scroll karega to widget-1 fixed ho jayega or widget-1 , 2 or 3 aapas me overlap karenge.

Isliye aapko hamesa apne sidebar ke sabse last wale widget ko hi fixed karna chahiye taki aapke blog ke widget ek dusare se sath overlap na kare.

To friends ab aap samajh gaye hoge ki aapko apne blog sidebar ke last wale widget ko hi fixed/sticky karna hai.

Isliye aap apne blog ke sidebar ke jis widget ko fixed karna chahte hai usay sabse last me rakhiye.

FOR EXAMPLE –

drag widget blogger and save

Aap upar diye gaye GIF file ko dekh ke samajhiye. Mere blog ke sidebar me maine 5 widget use kiya huye hai, jisme se me apne Popular Posts widget ko fixed karna chahta hu. Jaisa ki maine aapko pehle kaha ki jis widget ko fixed karna hai usay sabse pehle sidebar ke sabse end me rakhna hoga, isliye maine apne Popular Posts widget ko sidebar ke end me drag kiya or Save arrangement par click kiya hai.

Aap bhi apne blog ke Layout me jakar us widget ko sidebar ke end me drag kare jisay aap fixed karna chahte hai. Apne selected widget ko end me locate karne ke bad Save Arrangement par jarur click kare.

Ye basic si baat hai jisay koi follow nahi karta or isliye maximum blogger apne blog sidebar ke widget ko properly floating nahi bana pate.

Itna karne ke bad ab aap apne blog ke sidebar widget ko floating bana sakte hai bas aapko niche diye gaye step ko follow karna hai.

Blogger Blog Ke Sidebar Widget Ko Sticky/floating kaise kare ?

STEP – 1

Sabse pehle aapko ye pata karna hoga ki jis widget ko aap floating karna chahte ho uski identity kya hai. Matlab ki uski coding name kya hai.

Blogger Blog Ke Sidebar Widget Ko Sticky floating kaise kare

1. Layout par click kare.

2. Sidebar ke last widget ke Edit option par click kare. Agar abhi tak aapne us widget ko apne sidebar ke end me nahi lagay hai to sabse pehle aapko us widget ko end me drag karke save karna hoga. Aap upar diye gaye imge me dekh sakte ho ki me apne Popular Posts widget ko end sidebar ke end me rakha hua hai, or iski identity code janne ke liye Edit par click karna hoga.

3. Edit option par click karte hi ek popup window open hoga jaha par aapko url box ke sabse end text me hi aapko apne widget ki identity milegi. Aap upar diye gaye image ko dekh kar clearly samajh sakte ho ki jo popup window open hua hai uske url ke end me WidgetID=PopularPosts1 likha hua hai , jissay ye clearly pata chalta hai ki widget ki identity hai PopularPosts1, bas aapko widgetID= ke bad wale text ko yani ki apne widget ki Identity ko copy karna hai. Copy karne ke bad apne widgetID ko notepad me paste kar lijiye kyunki next step me iski jarurat hogi.

PopularPosts1 widget id copy kare

WidgetID copy karne ke bad popup window ko close kare or STEP-2 ko follow kare.

STEP – 2

Blogger Blog Ke Sidebar Widget Ko Sticky floating kaise kare 2 edit html par click kare

1. Theme par click kare.

2. Edit HTML par click kare.

STEP – 3

Blogger Blog Ke Sidebar Widget Ko Sticky floating kaise kare finf body tag

Edit HTML par click karte hi aapko apne blog ka HTML code najar aayega. Bas aapko HTML code me kahi par bhi click karna hai or CTRL+F dabana hai. CTRL+F dabate hi ek search box open hoga waha par aapko </body> type karke search karna hai.

</body>

STEP – 4

Blogger Blog Ke Sidebar Widget Ko Sticky floating kaise kare finf body and paste code

</body> search karne ke bad aapko niche diye gaye code ko copy karna hai or </body> ke upar paste karna hai.

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js’ type=’text/javascript’/><script type=’text/javascript’>
//<![CDATA[
$(function() {
if ($(‘#WidgetID‘).length) {
var el = $(‘#WidgetID‘);
var stickyTop = $(‘#WidgetID‘).offset().top;
var stickyHeight = $(‘#WidgetID‘).height();
$(window).scroll(function() {
var limit = $(‘#footer-wrapper’).offset().top – stickyHeight – 20;
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: ‘fixed’,
top: 20
});
} else {
el.css(‘position’, ‘static’);
}
if (limit < windowTop) {
var diff = limit – windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>

Code ko past karne ke bad aapko WidgetID ki jagah apne Widget Identity dalni hogi. Aapne jo apne widget Identity code ko notepad me save kiya hua tha usay copy kare or WidgetID ke sath replace kare.

Note – Code me 4 bar WidgetID hai isliye aapko apne widget identity ko charo WidgetID ke sath replace karna hoga.

Jaisa ki maine kha tha ki me apne blog ke Popular Post widget ko fixed karna chahta hu jiski widget identity hai PopularPosts1, agar me WidgetID ko PopularPosts1 ke sath replace karu to code kuch aisa najar aayega.

Blogger Blog Ke Sidebar Widget Ko Sticky floating kaise kare re[lace widgetid with your widget id code and save theme

WidgetId ko apne Widget Identity code ke sath replace karne ke bad Save theme par click kare.

Itna karte hi almost aapke blog sidebar me aapne jo widget ko fixed karne ke liye code use kiya hai wo fixed ho jayega, aap apne blog ko check kare. Lekin agar aap apne blog ko mobile ke jariye open karte ho to aapne jo widget fixed kiya hai wo aapke blog design ko bigad deta hai or aapke blog mobile pe thik se kaam nahi karta. Aap apne blog ko mobile ke jariye open karke check kare aapko pata chal jayega ki kya problem ho rahi hai.

Isi problem ko solve karne ke liye aapko ek css code apne blog me dalan hoga taki aapne jo widget ko fixed kiya hai wo mobile me disable ho sake.

STEP – 5

add css to blogger

1. Theme par click kare.

2. Customise par click kare.

1. Advanced par click kare.

2. Add CSS par click kare.

3. Niche diye gaye code ko copy kare or paste kare.

#WidgetId{width:100%;max-width:320px}
@media only screen and (min-width:260px) and (max-width:989px){
#WidgetID:image/gif;base64,R0lGODlhCwAGAIABAGZmZv///yH5BAEAAAEALAAAAAALAAYAAAINjA2nCLnR4or00AvvLQA7Posts1{display: none!important;}}

WidgetID ki jagah apne widget Identity code ko dale, Ish code me aapko WidgetID 2 bar dikh raahi hai , bas aapko in dono WidgetID ki jagah apne Widget Identity code ko dalna hai.

4. Apply to Blog par click kare.

Bas itna karte hi aapke blog par wo widget fixed ho jayegi jisay aap fixed karna chahte ho. Or aapke fixed widget ki wajah se aapke blog design me koi issue nahi hogi.

To friends aaj aapne sikha ki Blogger Blog Ke Sidebar Widget Ko Sticky/floating kaise kare ? Agar aapne hamare diye gaye guide ko acche se follow kiya hai to aap apne sidebar widget ko fixed or floating karne me kamyab ho gaye hoge. Agar aapko guide follow karne ke doran koi problem face karni pad rahi hai to aap hume comment jarur kare taki hum aapki problem solve kar sake.

Agar aapko-

  • apne widget identity code pata karne me koi problem aa rahi hai to aap hume comment kare or hum aapko aapki widget identity code batayenge.
  • floating widget footer ke sath overlap kar raha hai to aap hume comment kare taki hum aapki issue solve kar sake.

Overall agar aapko blogging se related koi bhi problem face karni pad rahai hai to aap humse apni problem share kar sakte ho, kyunki problem solve hone ke bad blogging karne me bahut maja aata hai. HAPPY BLOGGING

🚣‍♀️ Agar aapko ye article acchi lagi to isay apne social network par jarur share kare 🤓 THANKS

2 thoughts on “Blogger Blog Ke Sidebar Widget Ko Sticky/floating kaise kare ?

Leave a Reply

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