اپنے ریسپانسیو اشتہار کوڈ میں ترمیم کرنے کا طریقہ

اگر آپ کو لگتا ہے کہ ہمارا ریسپانسیو اشتہار کوڈ آپ کی ساری ضرورتوں کو پورا نہيں کرتا ہے تو آپ اپنے اشتہار کے کوڈ میں ترمیم کر سکتے ہيں تاکہ آپ کی ریسپانسیو سائٹ کے تقاضوں کو بہتر طریقے سے پورا کیا جا سکے۔ درجہ ذیل مثالیں آپ کو یہ بتاتی ہیں کہ ان ترامیم کو کرنے کا صحیح طریقہ کیا ہے۔

اہم:

• اگر آپ CSS میڈیا استفسارات سے واقف نہیں ہیں اور اپنے اشتہار کے کوڈ میں ترمیم کر رہے ہیں تو ہم آپ کو اسکرین کی چوڑائی کے مطابق اشتہار یونٹ کے قطعی سائز کی مثال کے ساتھ شروعات کرنے کی تجویز کرتے ہیں۔
• اگر آپ CSS میڈیا استفسارات سے واقف ہیں اور اپنے اشتہار کے کوڈ میں ترمیم کر رہے ہیں تو بلا جھجھک سیدھے جدید ترین ریسپانسیو اشتہار کوڈ کی خصوصیات کی مثالوں کے سیکشن پر جائیں۔

نوٹ: اس مضمون میں وضاحت کردہ مثالیں AdSense اشتہار کے کوڈ کی قابل قبول ترامیم ہیں۔ ان منظور شدہ طریقوں سے اپنے ریسپانسیو اشتہار کوڈ میں ترمیم کرنے سے آپ کی طرف سے AdSense پروگرام کی پالیسیوں کی خلاف ورزی نہیں ہوگی۔

اسکرین کی چوڑائی کے مطابق اشتہار یونٹ کے قطعی سائز کی مثال

یہ مثال آپ کو اسکرین کی چوڑائیوں کی تین قسموں یعنی موبائل، ٹیبلیٹ اور ڈیسک ٹاپ کیلئے مخصوص اشتہار یونٹ سائزز متعین کرنے کیلئے آپ کے ریسپانسیو اشتہار کوڈ میں ترمیم کرنے کا طریقہ دکھاتی ہے: اس مثال کی پیروی کرنے کیلئے آپ کے پاس پہلے سے CSS میڈیا استفسارات یا AdSense اشتہار کوڈ میں ترمیم کرنے کا کوئی تجربہ ہونا ضروری نہیں ہے۔

یہ کچھ ایسے ترمیم شدہ ریسپانسیو اشتہار کوڈ ہیں جو اسکرین کی چوڑائی کے مطابق اشتہار یونٹ کے درجہ ذیل قطعی سائزز کو سیٹ کرتے ہیں:

• ایسی اسکرین کیلئے جس کی چوڑائی 500px تک ہو: 320x100 اشتہار یونٹ۔
• ایسی اسکرین کیلئے جس کی چوڑائی 500px سے 799px کے درمیان ہو: 468x60 اشتہار یونٹ۔
• ایسی اسکرین کیلئے جس کی چوڑائی 800px اور اس سے زیادہ ہو: 728x90 اشتہار یونٹ۔

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

اپنی ذاتی سائٹ کیلئے اس نمونہ کوڈ کو موزوں بنانے کیلئے:

1. یہ یقینی بناتے ہوئے کہ آپ نے "اشتہار کا سائز" سیکشن میں ریسپانسیو کو منتخب کر رکھا ہے، اپنے AdSense اکاؤنٹ میں، ڈسپلے اشتہار یونٹ تخلیق کریں۔ اپنے ریسپانسیو اشتہار کوڈ سے درج ذیل معلومات لکھ لیں:
   • آپ کی ناشر ID، مثلاً، ca-pub-1234567890123456
   • آپ کے اشتہار یونٹ کی ID ، (‏data-ad-slot)، مثلاً، 1234567890۔
2. نمونہ کوڈ میں:
   • example_responsive_1 کی تمام مثالوں کو کسی منفرد نام، جیسے کہ Home_Page، ‏front_page_123 وغیرہ سے تبدیل کریں۔
     نوٹس:

     • آپ کے منفرد نام میں صرف انگریزی حروف (A-Z)، نمبرز اور انڈر اسکورز شامل ہونے چاہئیں اور پہلا حرف انگریزی کا ایک حرف ہونا چاہیے۔
     • اس نمونہ کوڈ کو ہر بار موزوں بناتے ہوئے آپ کو ایک مختلف منفرد نام استعمال کرنا چاہیے۔
   • ca-pub-1234567890123456 کو اپنی ذاتی ناشر ID سے تبدیل کریں۔
   • 8XXXXX1کو اپنے ذاتی اشتہار یونٹ کی ID سے تبدیل کریں۔
3. اسکرین کی چوڑائی کے مطابق اپنے اشتہار یونٹ کیلئے اپنی پسند کے سائزز طے کریں:
   • اگر آپ نمونہ کوڈ میں دیے گئے اشتہار یونٹ کے موجودہ سائزز کے ساتھ خوش ہیں تو پھر آپ کو کوئی اضافی تبدیلی کرنے کی ضرورت نہیں ہے۔
   • اگر آپ اسکرین کی چوڑائی کے مطابق اشتہار یونٹ کے مختلف سائزز کو سیٹ کرنا چاہتے ہیں تو پھر اس نمونہ کوڈ میں:
     • 500px تک چوڑائی والی اسکرین کیلئے، آپ 320px اور 100px کو اشتہار یونٹ کی اس چوڑائی اور لمبائی سے تبدیل کریں جسے آپ استعمال کرنا چاہتے ہیں۔
     • 500px سے 799px کے درمیان چوڑائی والی اسکرین کیلئے، آپ 468px اور 60px کو اشتہار یونٹ کی اس چوڑائی اور لمبائی سے تبدیل کریں جسے آپ استعمال کرنا چاہتے ہیں۔
     • 800px اور اس سے زیادہ چوڑائی والی اسکرین کیلئے، آپ 728px اور 90px کو اشتہار یونٹ کی اس چوڑائی اور لمبائی سے تبدیل کریں جسے آپ استعمال کرنا چاہتے ہیں۔
4. اپنے ترمیم شدہ اشتہار کوڈ کو کاپی کر کے اس صفحہ کے HTML ماخذ کوڈ میں پیسٹ کریں جہاں آپ اشتہارات دکھانا چاہتے ہیں۔
   نوٹ: جب آپ اپنا اشتہار کوڈ ڈال دیں، تو ہم تجویز کرتے ہیں کہ آپ مختلف آلات اور اسکرینز پر اپنے اشتہارات کی جانچ کر کے اس بات کو یقینی بنائیں کہ ریسپانسیو برتاؤ درست طریقے سے کام کر رہا ہے۔

جدید ترین ریسپانسیو اشتہار کوڈ کی خصوصیات کی مثالیں

اگر آپ کو پتا چلتا ہے کہ ہمارا ریسپانسیو اشتہار کوڈ آپ کی ساری ضرورتوں کو پورا نہيں کرتا ہے تو آپ CSS کے ذریعے اپنے اشتہار یونٹ کے قطعی سائز کا تعین کرنے کیلئے اپنے اشتہار کوڈ میں ترمیم کر سکتے ہيں۔

نوٹ: ہم اس وقت تک ان جدید ترین خصوصیات کو استعمال کرنے کی تجویز نہیں کرتے جب تک کہ آپ اپنے اشتہار کوڈ میں ترمیم کرنے کے بارے میں پُر یقین نہ ہوں۔

قابل توسیع چوڑائی اور مقررہ لمبائی کا تعین کریں

آپ CSS کے ذریعے اپنے اشتہار یونٹ کی قابل توسیع چوڑائی اور مقررہ لمبائی کا تعین کرنے کیلئے اپنے ریسپانسیو اشتہار کوڈ میں ترمیم کر سکتے ہیں۔ مندرجہ ذیل مثال آپ کو یہ بتاتی ہے کہ یہ ترامیم کیسے کریں:

مقررہ لمبائی کے ساتھ قابل توسیع چوڑائی کی مثال

یہ مثال آپ کو بتاتی ہے کہ 90px کی مقررہ لمبائی اور کم از کم 400px چوڑائی سے لیکر زیادہ سے زیادہ 970px چوڑائی تک تغیر پذیر چوڑائی کا تعین کرنے کیلئے اپنے رسپانسیو اشتہار کوڈ میں ترمیم کیسے کریں:
<ins class="adsbygoogle"
   style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

اسکرین کی چوڑائی کے مطابق قطعی سائز کا تعین کریں

آپ CSS کے ذریعے اپنے اشتہار یونٹ کے قطعی سائز کا تعین کرنے کیلئے اپنے ریسپانسیو اشتہار کوڈ میں ترمیم کر سکتے ہیں۔ مندرجہ ذیل مثال آپ کو یہ بتاتی ہے کہ یہ ترامیم کیسے کریں:

اسکرین کی چوڑائی کے مطابق قطعی سائز کی مثال

اگر آپ کو آلہ کے مطابق اشتہار یونٹ کے قطعی سائزز کے بارے میں معلوم ہے جو آپ کی ریسپانسیو سائٹ میں بہترین طریقے سے فٹ ہو جاتے ہیں تو پھر آپ اپنے ریسپانسیو اشتہار یونٹ کا سائز سیٹ کرنے کیلئے CSS3 میڈیا استفسارات کا استعمال کر سکتے ہیں۔ درج ذیل مثال آپ کو یہ بتاتی ہے کہ CSS3 میڈیا استفسارات استعمال کرنے کیلئے اپنے اشتہار کوڈ میں ترمیم کیسے کریں:
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
    style="display:block;"
    data-ad-client="ca-pub-1234567890123456"
    data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

‎@media کے اصول CSS3 نحوی ترکیب ہوتے ہیں اور یہ سبھی جدید براؤزرز پر تعاون یافتہ ہوتے ہیں۔ نوٹ کریں کہ بیرونی سٹائل شیٹس میں CSS کے ذریعے اشتہار یونٹ کا سائز ترتیب دینا آفیشل طور پر تعاون یافتہ نہیں ہے۔

اشتہار یونٹ کو چھپانا

کچھ معاملات میں، خاص طور پر قدرے چھوٹے موبائل آلات پر ہو سکتا ہے کہ آپ بالکل بھی اشتہار دکھانا نہ چاہیں۔ اگر آپ اشتہار یونٹ کو چھپانا چاہتے ہیں تو آپ CSS میڈیا استفسارات کے ساتھ ایک پیرامیٹر سیٹ کر سکتے ہیں، تاکہ اشتہار کی کوئی درخواست نہ کی جا سکے اور کوئی اشتہار دکھائی نہ دے۔ مندرجہ ذیل مثال آپ کو یہ بتاتی ہے کہ یہ ترامیم کیسے کریں:

اسکرین کے مخصوص سائزز کیلئے اشتہارات کو چھپانے کی مثال

اگر آپ اسکرین کے کچھ مخصوص سائزز کیلئے ہی اشتہارات دکھانا چاہتے ہیں تو آپ ایسا کرنے کیلئے CSS کا استعمال کر سکتے ہیں۔ درج ذیل مثال آپ کو یہ بتاتی ہے کہ اسکرین کے مخصوص سائزز کیلئے اشتہارات چھپانے کی خاطر CSS3 میڈیا استفسارات استعمال کرنے کیلئے اپنے اشتہار کوڈ میں ترمیم کیسے کریں:
<style type="text/css">
.adslot_1 { display:block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

اس مثال میں، اگر اسکرین کی چوڑائی 400px سے کم ہے تو کوئی اشتہار ڈسپلے نہیں کیا جائے گا۔

اس سہولت کے باوجود، براہ کرم ہماری اشتہار کے مقام کی پالیسیوں کی پیروی کرنا نہ بھولیں۔ ذہن میں رکھیں کہ ہماری پروگرام کی پالیسیوں کی جانب سے آپ کے کوڈ میں صرف محدود ترامیم ہی کی اجازت ہے۔