How to add Preloader/Loader Animation Effects on Blogger
ब्लॉगर पर प्रीलोडर / लोडर एनिमेशन इफेक्ट्स कैसे जोड़ें
इस समय हम आपके ब्लॉग पर एक रिस्पॉन्सिबल प्रीलोडर (Preloader) एनीमेशन कैसे लगाए , इस बारे में इस पोस्ट में बतायेंगे , लेकिन इससे पहले हम यह जान लेते है आपके ब्लॉग के लिए प्रीलोडर का उपयोग क्या है?
प्रीलोडर (Preloader) क्या है?
अनिवार्य रूप से, प्रीलोडर्स (Preloader) (लोडर के रूप में भी जाना जाता है) वे हैं जो आप स्क्रीन पर देखते हैं जबकि पेज की बाकी सामग्री अभी भी लोड हो रही है। प्रीलोडर (Preloader) अक्सर सरल या जटिल एनिमेशन होते हैं, जो सर्वर संचालन समाप्त होने के दौरान आगंतुकों का मनोरंजन करने के लिए उपयोग किए जाते हैं। दुर्भाग्य से, ज्यादातर परियोजनाओं के विकास की प्रक्रिया में उनकी अक्सर अनदेखी की जाती है। प्रीलोडर भी व्यापक रूप से आपके वेबसाइट को सुशोभित करने के लिए एक एनीमेशन के रूप में उपयोग किया जाता है।
प्रीलोडर (Preloader) क्यों महत्वपूर्ण है?
प्रीलोडर्स(Preloader) महत्वपूर्ण इंटरफ़ेस तत्व हैं जो आगंतुकों को यह बताते हैं कि वेबसाइट दुर्घटनाग्रस्त नहीं हुई है, यह सिर्फ प्रोसेसिंग डेटा है। वे आमतौर पर चलती पट्टियों या ब्लिंकिंग सर्कल के रूप में डिज़ाइन किए जाते हैं जो लोडिंग के लिए आवश्यक समय का प्रतिनिधित्व करते हैं, जो हालांकि, कार्यात्मक, सभी के लिए मनोरंजक नहीं है। दिलचस्प एनिमेशन आपके उपयोगकर्ताओं को व्यस्त रख सकते हैं, जबकि वे पृष्ठ लोड होने की प्रतीक्षा कर रहे हैं।
तो चलिए प्रीलोडर (Preloader) एनीमेशन स्थापित करते है।
नोट: यह विधि तभी काम करती है यदि आपके टेम्पलेट पहले से ही JQuery Ajax का उपयोग करता है, उदाहरण के लिए नीचे दिया गया कोड है:
1. Sign in Blogger
2. Themes> Edit HTML
3. यदि आपने निचे दर्शाया कोड अपने थीम में नहीं डाला है तो कृपया , आपको </head> कोड सर्च करना है | </head> कोड के ऊपर निचे दिया गया कोड लगा दीजिए
[<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>]
4. अब आपको </head> कोड सर्च करना है | </head> कोड के ऊपर निचे दिया गया कोड लगा दीजिए
[<style type='text/css'>/* Preloader */#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}.spinner{position:absolute;top:50%;left:49.5%;z-index:1;height:20px;width:20px;transform:translate(-50%,-50%)}[class^="ball-"]{position:absolute;display:block;left:30px;width:6px;height:6px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0}@keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}}.ball-1{z-index:-1;background-color:#2196F3;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)}.ball-2{z-index:-2;background-color:#03A9F4;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)}.ball-3{z-index:-3;background-color:#00BCD4;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)}.ball-4{z-index:-4;background-color:#009688;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)}.ball-5{z-index:-5;background-color:#4CAF50;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)}.ball-6{z-index:-6;background-color:#8BC34A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)}.ball-7{z-index:-7;background-color:#CDDC39;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)}.ball-8{z-index:-8;background-color:#FFEB3B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)}@media screen and (max-width:800px){.spinner{left:43%}}</style>]
5. अब आपको <body> या <body expr:class='data:blog.pageType'> कोड सर्च करना है | <body> या <body expr:class='data:blog.pageType'> कोड के निचे, दिया गया कोड लगा दीजिए
[<div id='preloader'><div class='spinner'><span class='ball-1'></span><span class='ball-2'></span><span class='ball-3'></span><span class='ball-4'></span><span class='ball-5'></span><span class='ball-6'></span><span class='ball-7'></span><span class='ball-8'></span></div></div> ]
6. अब आपको </body> कोड सर्च करना है | </body> कोड के ऊपर निचे दिया गया कोड लगा दीजिए
[<script type='text/javascript'>//<![CDATA[// Preloader$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});//]]></script> ]
अब आप सेव कर सकते है |
See the Pen Preloader by Ade Irawan (@ade-irawan) on CodePen.
