Jul 9, 2018

Blogger Blog में Sidebar Widget को Fixed Sticky कैसे करे

Tags

यदि आपका ब्लॉग Blogger Blogging Plateform पर है तो आज की पोस्ट आपके बहुत काम में आने वाली है.इस पोस्ट में मैं आपको बताने वाला हूँ की कैसे Blog के Sidebar Widget को Fixed Sticky करते है.जिससे ब्लॉग को एक नयी Look मिलती है.


Blogger पर ब्लॉग बनाने के बाद उसको अच्छे से Design करना बहुत महत्वपूर्ण होता है.क्योकि यदि हमारे ब्लॉग की Designing अच्छी है तो वह यूजर को भी पसंद आता है.आपने भी कई Popular Blogs देखे होंगे जिनको बहुत अच्छे से Design किया गया है.ऐसे ब्लॉग प्रोफेशनल डिजाइनिंग वाले होते है.


तो ब्लॉग को एक बेहतर तरीके से डिजाईन करने के लिए हमे कुछ Popular Widgets को Blog में Add करना बहुत ज़रूरी होता है.जिसमे Sidebar में Popular Posts,Subscription Box,Labels आदि होते है.लेकिन आप इन Sidebar Widget को और भी अधिक Stylish बना सकते है.इसके लिए आप इन Sidebar Widget को Fixed Sticky बना सकते है.जिससे यह Blog में Floating तरीके से लगे रहते है.


इसका Benefits हमे यह होता है की जब यूजर हमारे Blog के किसी Page या Post को Scroll करता है तो Sidebar में वह Fixed Widget Sticky बन जाता है.यानि की Page या पोस्ट तो Scroll होती है लेकिन वह Sidebar Widget Scroll नहीं होता है.जिससे Blog Desktop में बेहतर तरीके से Show होता है.



आपने भी कई प्रोफेशनल ब्लॉग को देखा होगा उसमे Post Area के Right और Left Sidebar में कई Widget Floating Sticky Fixed होते है.इसका सबसे ज्यादा Benefit हमे यह होता है की हमारे Blog के Users पर इसका सबसे ज्यादा Effect होता है.क्योकि हमारे ब्लॉग पर आने वाले Visitors की नजर इन पर सबसे ज्यादा पड़ती है.


यदि हम अपने Blog के Subscription या Popular Posts के Widget को Sticky Fixed कर दे तो हम अपने ब्लॉग के सब्सक्राइबर को बढ़ाने के साथ साथ ब्लॉग का ट्रैफिक बढ़ा सकते है.तो यदि आप भी अपने Blogger Blogspot Blog में Sidebar को Fixed Sticky करना चाहते है तो इस पोस्ट को पूरा ज़रूर पढ़े क्योकि इसमें आपको पूरी जानकारी दी गयी है.


Blogger Blogspot Blog Sidebar Widget को Fixed Sticky कैसे बनाये ?


हमे ब्लॉगर ब्लॉग को डिजाईन करने के लिए HTML और CSS लैंग्वेज के बारे में जानकारी होनी चाहिए.क्योकि इसमें हमे Plugins नहीं मिलते है.लेकिन यदि आपको यह लैंग्वेज नहीं आती है तो भी आप ब्लॉगर ब्लॉग को बेहतर तरीके से डिजाईन कर सकते है.इसके लिए आप नीचे दिए गये सभी निर्देशों की पालना करे.


स्टेप - 1- सबसे पहले Blogger DashBoard में Layout वाले आप्शन पर क्लिक करे.अब Layout Page में Sidebar में आप जिस Widget को भी Fixed करना चाहते है उसको Edit पर क्लिक करके उसकी विंडो ओपन कर ले.अब विजेट विंडो ओपन होने के बाद आपको उसके URL Link में Widget id को देखना है.जेसे की नीचे मैने स्क्रीनशॉट में Label Widget की विंडो को Open करके उसके Link में Widget id को Search किया है.


                            blogger-blog-sidebar-widget-fixed-sticky



ठीक इसी प्रकार आप भी Widget Id को link में देख कर Notepad में लिख ले.जेसे की Screenshot में Widget id = Label1 है.आपको = के आगे की ID लिखनी है.


स्टेप - 2- अब आपको Blogger Blog डैशबोर्ड में Theme पर क्लिक करके Edit HTML पर क्लिक करना है.Edit HTML पर Click करते ही आपके Blog Theme की Coding Open हो जाएगी.इसमें आपको </body> को सर्च करना है.आप Ctrl + f  कमांड की मदद से भी इस को सर्च कर सकते है.


जब आपको Theme Coding में यह </body> मिल जाये तो आपको नीचे दिया गया Code इसके ऊपर Paste कर देना है.Code Paste करने के बाद जिस स्थान पर WidgetID लिखा है उसकी जगह आपको अपने Widget की WidgetID लिखनी है जिसको आप Sticky बनाना चाहते है.इसके बाद आपको Save Theme पर Click करके Theme Coding Save कर देनी है.


  <script>
// Floating Widget By https://zonehindi.blogspot.com
//<![CDATA[
bsfloatingwidget("WidgetID"); // enter your widget ID here
function bsfloatingwidget(elem) {
    var bsfloat = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bsfloat.parentNode.insertBefore(scrollee, bsfloat);
    var width = bsfloat.offsetWidth;
    var iniClass = bsfloat.className + ' bsfloat';
    window.addEventListener('scroll', bsfloating, false);
    function bsfloating() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            bsfloat.className = iniClass + ' bsfloating';
            bsfloat.style.width = width + "px";
        } else {
            bsfloat.className = iniClass;
        }
    }
}
//]]>
</script>
<style>
.bsfloating {position:fixed; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);}
</style>


blogspot-blog-sidebar-fixed



Step – 3 - Save Theme पर क्लिक करने के बाद आप अपने Blog को Open करके देख सकते है की उसमे Sidebar Widget Fixed Sticky हो गया है जिसकी Floating Position है.



तो इस प्रकार आप आसानी से अपने ब्लागस्पाट ब्लॉग में भी साइडबार विजेट को स्टिकी फिक्स्ड बना सकते है.मुझे उम्मीद है की आपको आज की यह पोस्ट अच्छी लगी होगी.इसी तरह की Blogging से संबंधित Posts को पढ़ते रहने के लिए हमारे Blog का Newsletter ज़रूर सब्सक्राइब कर ले.आज की इस पोस्ट Blogger Blog में Sidebar Widget को Fixed Sticky कैसे करे को Social Media पर Share करना न भूले.


EmoticonEmoticon