• Home
  • Blogging
    • WordPress
    • Blogger
  • SEO
  • Paise Kamaye
  • Adsense
  • Affiliate Marketing
  • Social Media
  • Web Hosting
  • WordPress Settings

Hindi Me Online

HindiMeOnline | SEO | Make Money Online Ki Jankari Hindi Me

Apne Blogger Blog me Fixed Widget kaise Add kare ?

04/10/2016 by Surendra Singh 11 Comments

इस 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 कैसे बना सकते हैं। Blogger Blog me Fixed Widget kaise Add kare

जैसा कि हम अपनी पिछली 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

  1. सबसे पहले अपने Blogger Dashboard को login कीजिये।
  2. अब Template पर click कीजिये।
  3. Edit html पर click कीजिये।Blogger Edit html

अब आपके सामने आपके template का whole code open हो जायेगा जिसे आप आसानी से edit कर सकते हैं। तो चलिए आगे बताते हैं कि क्या करना है आपको।

Step – 2

  1. अभी जो code आपको दिखाई दे रहे होंगे उनमें से कुछ code folded रूप में होंगे। इसलिए code के left side में जहाँ numbering show होती है वहाँ एक छोटा सा black color का arrow (तीर) दिखाई देगा, इस तरह के सभी arrow पर one by one click करके code को unfold कर लें।
  2. अब 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 कीजिये –

  1. Layout पर click कीजिये।
  2. जिस widget की ID find करनी है उसके Edit option पर click कीजिये।
  3. ऊपर widget URL के last में आपको widget ID मिल जाएगी, समझने के लिए नीचे दिए गए screen shot को देखिये –How to get Blogger Sidebar Widget ID

अब में समझता हूँ कि आप अच्छी तरह से समझ गए होंगे कि Blogger sidebar men fixed widget (sticky) kaise banate hai. यदि Fixed widget से related कोई problem है तो आप मुझसे comment के माध्यम से पूछ सकते हैं। और यदि ये fixed widget guide आपको पसंद आये तो social media पर share करना न भूलें।

Share This Content :-
TwitterFacebookWhatsAppGoogle+Pin It

About Surendra Singh

Surendra Singh is Founder and Author of BlogLon. I am Full Time Blogger and having experience of 5 years in Blogging & SEO.

Comments

  1. Ashish Sahu says

    05/10/2016 at 7:54 am

    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}

    Reply
    • Surendra Singh says

      05/10/2016 at 10:01 am

      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.

      Reply
  2. Vishnu Kant Maurya says

    30/12/2016 at 3:15 pm

    Aapne jo post ke bich me video lagya hai vo kaise add karte hai aur isase loading time par kya effect padata hai?

    Reply
    • Surendra Singh says

      31/12/2016 at 9:48 am

      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.

      Reply
  3. Nasir says

    16/07/2017 at 3:01 am

    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.

    Reply
    • Surendra Singh says

      17/07/2017 at 3:45 pm

      Aapke blog par mujhe koi fixed widget nahi dikha isliye koi solution nahi de sakta.

      Reply
  4. Micky verma says

    03/09/2017 at 9:20 am

    Nice tips broo

    Reply
  5. Ray says

    16/01/2018 at 9:20 pm

    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.

    Reply
  6. BS.Gusain says

    04/02/2018 at 10:22 pm

    Nice post !

    I have done fixed successfully this code.

    Thank you Bro

    Reply
  7. Bryan Williams says

    15/07/2018 at 8:19 pm

    The sidebar didn’t fix at the footer? can you fix it?

    Reply
    • Surendra Singh says

      16/07/2018 at 7:32 am

      If you have html css knowledge then you can fix it by adding padding rules.

      Reply

Leave a Reply Cancel reply

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

Search Topic Here

Join Also 6,814 Bloggers

Facebook
Twitter
Instagram
Google+
YouTube
Subscriber

Hindi Me Online



Free Subscribe Here

HindiMeOnline

Free Subscribe Kare Aur Apne Email Par Internet Ki Latest Jankari Daily Paye

Copyright ©2019 · Hindi Me Online - All Rights Reserved ·
Contact US | About US | Sitemap | Disclaimer | Privacy Policy