|
नमस्कार, आज हम सीखने जा रहे हैं कि ब्लॉगर पोस्ट पर लंबन विज्ञापन (Parallax Ads) कैसे लगा सकते है।
क्या आप जानते हैं कि आप अपने ब्लॉग पर एक लंबन विज्ञापन (Parallax Ads) लगा कर विज्ञापनों की क्लिक दर को इस माध्यम से सुधार सकते हैं? जी हां, आपने सही सुना आप अपने ads के क्लिक दर को parallax ads लगा कर सुधार सकते है। वो भी केवल एक साधारण से कोड को अपनी ब्लॉगर साइट पर जोड़ कर।
जैसा की हम सभी जानते है की हम वर्डप्रेस की तरह आसानी से ब्लॉगर पर प्लगइन स्थापित नहीं कर सकते हैं, इसलिए आपको इस विजेट को अपने Html editor या Blogger Layout सेक्शन के माध्यम से मैन्युअल रूप से एड करना होगा।
अब समझते हैं कि पैरालैक्स विज्ञापनों से हमारा क्या अर्ध है।
What is Parallax Ads?
आइए, जानते है पैराल्लैक्स एड्स क्या हैं - सरल शब्दों में समझे तो लंबन एड्स मोबाइल वेब के लिए गूगल द्वारा डेवलप्ड किया गया एनीमेशन डिस्प्ले एड्स है। जो रीडर्स को उनकी दिलचस्प के अनुसार विज्ञापन को घुसपैठ तरीके से दिखाने में मदद करता है।
लंबन विज्ञापन वास्तव में क्या करते हैं, यह एक अनूठी धारणा है जिसका उपयोग तब किया जाता है जब वियर्स अपने मोबाइल डिवाइस पर आर्टिकल को पढ़ने के लिए स्क्रॉल डाउन करता है, तब विज्ञापन एनीमेशन के रूप में पूरी तरह से प्रकट होता है।
इस ट्यूटोरियल में,अब हम सीखेगे की आप अपने ब्लॉग में मेरे जैसे पैरालैक्स विज्ञापन पोस्ट में कैसे दिखाए।
विजेट के फर्स्ट लुक को देखने के लिए नीचे दिए गए लिंक पर क्लिक करें।
Insert Parallax Ads on Blogger Blog Post
कृपया सबसे पहले, एक एडसेंस एड बनाएं, जिसका उपयोग हम Parallax Ads को दिखाने के लिए करेगे। एडसेंस अकाउंट पर जाकर एक डिस्प्ले विज्ञापन का चयन करे , उसके बाद एक विज्ञापन इकाई बनाएं, जो एक वर्टिकल रिस्पॉन्सिव आकार की हो साथ ही आपके डेटा-विज्ञापन-क्लाइंट और डेटा-विज्ञापन-स्लॉट कोड को नोटपैड में कॉपी करें।
Adding CSS Code on Blogger Template
यह ध्यान देने योग्य है कि यह भाग थोड़ा जटिल होगा इसलिए ध्यान से देखें क्योंकि यदि थोड़ी सी भी त्रुटि है तो पैराल्लैक एड काम नहीं करेगा।
हमने एक विजेट तैयार किया है जिसका उपयोग आप पैराल्लैक्स एड्स के लेआउट के लिए कर सकते हैं ताकि आपको नीचे दिए गए HTML कोड को कॉपी और पेस्ट करना पड़े।
कृपया अपने टेम्पलेट को 'Edit HTML' मोड में एडिट करें। संक्षेप में, कृपया Theme पर क्लिक करें और नीचे दिखाए गए एचटीएमएल को क्लिक करें। यदि आवश्यक हो, तो एडीटिंग त्रुटियों से बचने के लिए सबसे पहले अपने टेम्पलेट का बैकअप जरूर ले।
First Step - Adding CSS Code
सबसे पहले आपको Edit HTML टेम्पलेट मेनू पर जाना होगा और नीचे दिए गए CSS कोड को अपने ब्लॉग थीम पर CSS कोड ग्रुप में जोड़ना होगा। आपको कोड को ]]></b:skin> या ]]></style> के ऊपर add करना होगा।
/* Paralax Ads By thewebtrick.com */
.twtparalax{position:relative;display:block;overflow:visible;width:100%;height:0;margin:auto;text-align:center;z-index:1}
.twtparalax > div{overflow:hidden;width:100%;height:100%;margin:0;position:absolute;top:0;left:0;clip:rect(auto auto auto auto)}
.twtparalax > div > div{width:calc(100% - 40px);height:100%;position:fixed;top:0;left:0;right:0;margin:0 auto;-moz-transform:translateZ(0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}
.twtparalax > div > div > div{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-align-content:center;align-content:center;-webkit-align-items:center;-ms-flex-align:center;width:100%;height:100%;position:absolute;left:0;right:0;top:37px;align-items:center;background:#fff}
.twtparalax > div > div > div > *{margin:auto}
.twtparalax > div > div > div > a{width:100%;height:100%}
.twtparalax img,.twtparalax iframe,.twtparalax ins{height:100%;border:0}
.clear{clear:both;display:block}
.twtparalax{width:100%;min-width:300px;min-height:600px;text-align:center}
.adParallax{width:100%;min-width:300px;min-height:600px;text-align:center;display:block; margin:10px 0px; padding:0px;}
.dark-mode.twtparalax, .dark-mode.adParallax{background-color:#1e1e1e}
Second Step - Writing Html Code
इस एचटीएमएल कोड को एड करने के लिए नीचे दिए गए कोड को कॉपी करें और इसे कोड के <data:post.body/>तहत में रखें, आमतौर पर यह कोड आपके द्वारा उपयोग किए जा रहे टेम्पलेट के आधार पर होते है कभी यह एक से अधिक होते है कभी एक कोड होते हैं, इसलिए कृपया एक - एक करके प्रयास करें।
<b:if cond='data:blog.isMobileRequest == "true"'>
<b:if cond='data:view.isPost'>
<div class='twtparalax'>
<div>
<div>
<div>
<ins class='adsbygoogle adParallax' data-ad-client='ca-pub-XXXXXXXXXXXXXXX' data-ad-slot='XXXXXXXCC' style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
<span class='clear'/>
</div>
<script> //<![CDATA[
function twtparalax(Ad1) {let paralax = document.getElementsByClassName ('twtparalax')[0]; if (paralax) {let Adsp = document.querySelectorAll ('.post-body p')[Ad1 - 1]; Adsp.parentNode .insertBefore (paralax, Adsp.nextSibling)}} twtparalax(3);/*]]>*/</script></b:if></b:if>
Update: Replace code .post-body to .postBody this update only for median UI 1.5
कृपया चिन्हित किए गए भाग को अपने'ca-pub-xxxxxxxxxxx' और data-ad-slot ='xxxxxxx:' को आपके कोड के साथ बदलें, आप एड्स को अपने अनुसार भी सेट कर सकते हैं कितने पैराग्राफ के बाद एड्स प्रदर्शित किए जाएंगे।
कृपया इस कोडtwtparalax(3) पर ध्यान दें; यह 3 नंबर का मतलब है कि विज्ञापन 3 पैराग्राफ के बाद दिखाई दे इसलिए कृपया इसे आवश्यकतानुसार बदलें।
Note:
विज्ञापनों को प्रदर्शित करने के लिए आर्टिकल लिखते समय <p> टैग का उपयोग जरूर करे। अगर आप <p> का उपयोग करना भूल गए है तो आर्टिकल में Parallax Ads widget नहीं दिखाई जाएगी ।
FAQ
क्या पैराल्लैक्स विज्ञापन को डेस्कटॉप में दिखाया जा सकता है?
जी हां, यदि आप इसे डेस्कटॉप पर प्रदर्शित करना चाहते हैं तो कोड <b:if cond='data:blog.isMobileRequest == "true"'> को बंद करना होगा। बंद करने के लिए आपको <b:if cond=....."true"'> और </b:if> के आगे close tag लगाए।
उदाहरण: <---<b:if cond='data:blog.isMobileRequest == "true"'>---> साथ ही <--</b:if>--> को बंद करे।
कैसे कुछ समय के लिए Parallax Ads को कैसे बंद करे?
अगर आप कुछ समय के लिए पैराल्लैक्स एड को बंद करना चाहते है तो <b:if cond='data:blog.isMobileRequest == "true"'> से लेकर </b:if> तक close tag लगाए।
उदाहरण: <---<b:if cond='data:blog.isMobileRequest == "true"'> ........<--</b:if>--> को बंद करे।