इस Tutorial में हम आपको बताने जा रहे हैं कि Blogspot blog ke sidebar me fixed widget kaise lagate hai, जबकि मैने अपनी पिछली पोस्ट में Sticky widget kya hai aur ise apne blog par Kyo use karna chahiye के बारे में बताया था। यदि आपको थोड़ी confusion पैदा हो रही हो तो में आपका बता दूँ कि Sticky widget को ही Fixed widget कहते हैं। यदि आपका blog blogger platform पर बना हुआ है और अपने blog के साइडबार के किसी widget को sticky बनाना चाहते हैं, लेकिन इसके बारे में आपको मालूम नहीं है कि Blogger Sidebar Widget Ko Sticky Kaise Karte hai. तो ये post आपके लिए ही है, इसे last तक जरुर पढ़ें जिससे आप भी अच्छे से समझ पाएंगे कि Blogger blog के sidebar में किसी भी widget को fix widget कैसे बना सकते हैं।
जैसा कि हम अपनी पिछली post में बता चुके हैं कि ये एक ऐसा widget होता है जो आपके blog के sidebar में fix होजाता है। I mean, जब हम किसी post को read करते समय page को scroll down करते हैं तो fixed widget को छोड़कर सारे widgets ऊपर की तरफ जाकर hide हो जाते हैं। यदि आपको fixed widget के बारे में ज्यादा जानकारी चाहिए, जैसे fixed widget kya hota hai ? और इसको अपने blog के sidebar में किस तरह से use करने पर क्या फायदे होते हैं तो आगे बढ़ने से पहले, आप इसे जरुर पढ़िए sticky widget ke kya profits hote hai ?
अब में समझता हूँ कि आपको इस तरह के widget के बारे में अच्छे से basic जानकारी हो गयी होगी। अब हम आगे बढ़ते हैं और आपको बताते हैं कि How to make fixed widget in blogger blog ?.
Blogger Sidebar me Fixed widget Kaise banaye ?
अब आप अपने blog के sidebar me किसी भी widget को sticky या fix करने के लिए पूरे तरीके से ready होंगे, इसलिए आप चाहे तो इस video tutorial को watch करके widget को fix कर सकते हैं –
यदि आप Video guide को follow नहीं करना चाहते तो आप हमारे द्वारा आगे बताये गए steps को carefully follow कर सकते हैं –
Step – 1
- सबसे पहले अपने Blogger Dashboard को login कीजिये।
- अब Template पर click कीजिये।
- Edit html पर click कीजिये।
अब आपके सामने आपके template का whole code open हो जायेगा जिसे आप आसानी से edit कर सकते हैं। तो चलिए आगे बताते हैं कि क्या करना है आपको।
Step – 2
- अभी जो code आपको दिखाई दे रहे होंगे उनमें से कुछ code folded रूप में होंगे। इसलिए code के left side में जहाँ numbering show होती है वहाँ एक छोटा सा black color का arrow (तीर) दिखाई देगा, इस तरह के सभी arrow पर one by one click करके code को unfold कर लें।
- अब CTRL+F दबाकर </body> tag को search कीजिये और नीचे दिए गए code को </body> के just ऊपर paste कर दीजिये।
<script> //<![CDATA[ HG_makeSticky("WIDGET_ID"); // enter your widget ID here function HG_makeSticky(elem) { var HG_sticky = document.getElementById(elem); var scrollee = document.createElement("div"); HG_sticky.parentNode.insertBefore(scrollee, HG_sticky); var width = HG_sticky.offsetWidth; var iniClass = HG_sticky.className + ' HG_sticky'; window.addEventListener('scroll', HG_sticking, false); function HG_sticking() { var rect = scrollee.getBoundingClientRect(); if (rect.top < 0) { HG_sticky.className = iniClass + ' HG_sticking'; HG_sticky.style.width = width + "px"; } else { HG_sticky.className = iniClass; } } } //]]> </script> <style> .HG_sticking {background:#ffffff !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative9 !important;} </style>
3. अब जिस widget को fixed widget बनाना है, code में दिए गए Line No. 3 में WIDGET_ID की जगह अपने widget की ID paste कर दीजिये।
4. अब Save template पर click करके code को save कर दीजिये।
यदि आपको नहीं मालूम कि अपने blogger blog me added widget की ID कैसे पता करते हैं तो आगे हम आपको इसके बारे में भी अच्छे से बताने जा रहे हैं।
How to get Blogger Sidebar Widget ID ?
अपने blogspot blog sidebar की widget ID मालूम करने के लिए आगे बताये गए Points को follow कीजिये –
- Layout पर click कीजिये।
- जिस widget की ID find करनी है उसके Edit option पर click कीजिये।
- ऊपर widget URL के last में आपको widget ID मिल जाएगी, समझने के लिए नीचे दिए गए screen shot को देखिये –
अब में समझता हूँ कि आप अच्छी तरह से समझ गए होंगे कि Blogger sidebar men fixed widget (sticky) kaise banate hai. यदि Fixed widget से related कोई problem है तो आप मुझसे comment के माध्यम से पूछ सकते हैं। और यदि ये fixed widget guide आपको पसंद आये तो social media पर share करना न भूलें।
Ashish Sahu says
sir fix widget blogger par bhi enable karne wala ye post blogger user ke liye bahut kaam ka hai,iske through ham bahut easily subcriber ya affiliate marketing grow ka sakte hai. thanks sir blog ke homepage par 2 post ke bich me adsense ad kaise lagaye iske liye bhi post kijiye. aur header me ads lagne ke liye plugin use kare ya coding se.[ribbon theme}
Surendra Singh says
Thanks ashish sahu ji, me is bare me jald hi post dalne wala hu next post me aapki problem ko solve Kar diya jayega. Keep visiting on BlogLon.
Vishnu Kant Maurya says
Aapne jo post ke bich me video lagya hai vo kaise add karte hai aur isase loading time par kya effect padata hai?
Surendra Singh says
Bhai ise Maine post ke beech me embed Kiya hai, jiski Jankari me de chuka hu “YouTube video ko post me kaise add kare”
Isse loading time me koi fark nahi padta kyonki ye page Load hone ke baad load hota hai.
Nasir says
Surendra Sir, Apne jo instruction diya hai wo kaam to kar raha hai lekin isme problem ye a rahi hai ki ye footer par overlap karta hai jab poora niche tak scroll karte hain. Koi option batayie jiske ki ye footer ate hi scroll kar jaye.
Surendra Singh says
Aapke blog par mujhe koi fixed widget nahi dikha isliye koi solution nahi de sakta.
Micky verma says
Nice tips broo
Ray says
Thank you for sharing the code. Yet I wish the code can work better at mobile. it don’t allow me to scroll down to footer, Any advice? Thank you.
BS.Gusain says
Nice post !
I have done fixed successfully this code.
Thank you Bro
Bryan Williams says
The sidebar didn’t fix at the footer? can you fix it?
Surendra Singh says
If you have html css knowledge then you can fix it by adding padding rules.