ब्लॉग पर PreLoader (पेज लोड हो रहा है) संदेश कैसे दर्शायें

[Updated: 29-11-2012]

क्या आप का ब्लॉग लोड होने में समय लेता है? और आप अपने वेब-पेज पाठक को ‘पेज लोड हो रहा है‘ यह संदेश दिखाना चाहते हैं? ताकि वह आपके पेज पर बना रहे! क्या आप ने किसी साइट पर उसके खुलते समय कोई प्री-लोडर चिह्न देखा है? क्या आप इसे अपने ब्लॉग से जोड़ने के बारे में सोच रहे हैं? आइए, मैं आपको बताता हूँ कि इसे अपने ब्लोगर ब्लॉग पर कैसे जोड़ें। इसे अपने ब्लॉग से जोड़ने के लिए आपको अपने ब्लॉग टेम्प्लेट मं ज़्यादा तोड़-मरोड़ नहीं करनी पड़ेगी। इसे करने के लिए आपको आवश्यकता होगी:

1. पेज लोडिंग छवि का उदाहरण नीचे दिया है

2. मैं आपको आज बता रहा हूँ कि ब्लॉगर पर प्रीलोडर कोड कैसे जोड़ा जाए?

प्रश्न: प्री-लोडर साइट पर कैसा दिखता है?
उत्तर: इस उदाहरण के लिए आप नीचे दी गयी साइट देख सकते हैं

क्या आपके पास पेज लोडिंग इमेज नहीं है?, तो आप इसे http://loadinfo.net/ से प्राप्त कर सकते हैं

प्री-लोडर पेज से जोड़ने की विधि:

चरण 1:

नये ब्लॉगर प्लेटफ़ार्म पर
डैशबोर्ड(DashBoard) > टेम्पलेट(Template) > Proceed > Edit HTML पर जायें

पुराने ब्लॉगर प्लेटफ़ार्म पर
डैशबोर्ड(DashBoard) > लेआउट(Layout) > एडिट एच.टी.एम.एल(Edit HTML) पर जायें

चरण 2:अब आप body टैग कोड खोजें

<body>

नये ब्लॉगर टेम्पलेट में body टैग कोड इस प्रकार से होता है

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

आपको कोड खोजने में असुविधा हो तो body टैग कोड इतना टाइप करके खोजें

<body

चरण 3A: यदि आपका body टैग कोड <body> ही है तो इसे नीचे दिये कोड से बदल दें

<body onLoad='init()'>
  <span id='loading' style='position:fixed;text-align:center;top:340px; right:512px;z-index:9999;'><img border='0' src='http://goo.gl/cKla5'/></span>
<script>
var ld=(document.all);

var ns4=document.layers;
var ns6=document.getElementById&amp;&amp;!document.all;
var ie4=document.all;

if (ns4) ld=document.loading;
else if (ns6)
ld=document.getElementById(&quot;loading&quot;).style;
else if (ie4)
ld=document.all.loading.style;

function init() {
if(ns4){ld.visibility=&quot;hidden&quot;;}
else if (ns6||ie4) ld.display=&quot;none&quot;;
}
</script>

चरण 3B: यदि आपका body टैग कोड नये ब्लॉगर की तरह है तो इसे नीचे दिये कोड से बदल दें

<body onLoad='init()' expr:class='&quot;loading&quot; + data:blog.mobileClass'>
  <span id='loading' style='position:fixed;text-align:center;top:340px; right:512px;z-index:9999;'><img border='0' src='http://goo.gl/cKla5'/></span>
<script>
var ld=(document.all);

var ns4=document.layers;
var ns6=document.getElementById&amp;&amp;!document.all;
var ie4=document.all;

if (ns4) ld=document.loading;
else if (ns6)
ld=document.getElementById(&quot;loading&quot;).style;
else if (ie4)
ld=document.all.loading.style;

function init() {
if(ns4){ld.visibility=&quot;hidden&quot;;}
else if (ns6||ie4) ld.display=&quot;none&quot;;
}
</script>

आवश्यक: मैं अपनी प्री-लोडर छवि हटा सकता हूँ, इसलिए यह आपके ब्लॉग पर कुछ दिनों पश्चात न दिखे ऐसा हो सकता है, इसलिए इसे डाउनलोड [लिंक] कर लें और अपने Picasa या अन्य किसी छवि स्थान से संलग्न कर लें और उपरोक्त कोड में छवि कोड से बदल लें। छवि को डाउनलोड करने के लिए right click करके save (link) as का विकल्प चुनें।

छवि लिंक:

http://techprevue.googlepages.com/preloadr.gif

आप प्रीलोडर चित्रों [Preloader Images] के लिए डेवियंट आर्ट [link] पर जा सकते हैं जहाँ आपको छोटे एनिमेटेड प्रीलोडर छवियाँ मिल जायेंगी।

आशा है आप अब इस युक्ति का प्रयोग करके अपने ब्लॉग को और उन्नत कर पायेंगे।

Keywords: preloader, proloader gif, preloader images, preloader jquery, preloader javascript, preloader tutorial, preloader blogger, preloader for blogger, preloader for website