தானாகப் பொருந்தும் தன்மையுள்ள விளம்பரக் குறியீட்டை எப்படி மாற்றுவது?

எங்களின் தானாகப் பொருந்தும் தன்மையுள்ள விளம்பரத்திற்கான குறியீடு உங்கள் தேவைகளைப் பூர்த்திசெய்யவில்லை எனில் இணக்கமாகும் வலைதளத்தின் தேவைகளுக்கேற்ப உங்களின் விளம்பரக் குறியீட்டை மாற்றலாம். இந்தக் கட்டுரையில் உள்ள உதாரணங்கள் இந்த மாற்றங்களை எப்படிச் சரியாகச் செய்வது என்பதைக் காட்டுகின்றன.

தொடங்கும் முன்:

• நீங்கள் CSS மீடியா வினவல்களை முதன்முறையாகப் பயன்படுத்துகிறீர்கள் மற்றும் விளம்பரக் குறியீட்டை முதன்முறையாக மாற்றுகிறீர்கள் எனில் திரை அகலத்திற்கேற்ற சரியான விளம்பர யூனிட் அளவின் உதாரணத்திலிருந்து தொடங்கவும்.
• CSS மீடியா வினவல்களை ஏற்கெனவே பயன்படுத்தியுள்ளீர்கள் மற்றும் விளம்பரக் குறியீட்டை ஏற்கெனவே மாற்றியுள்ளீர்கள் எனில் தானாகப் பொருந்தும் தன்மையுள்ள மேம்பட்ட விளம்பரக் குறியீடு அம்சங்களின் உதாரணங்கள் பிரிவுக்குச் செல்லவும்.

கவனத்திற்கு: இந்தக் கட்டுரையில் விவரிக்கப்பட்டுள்ள உதாரணங்கள் அனைத்துமே AdSense விளம்பரக் குறியீட்டில் ஏற்கத்தக்க மாற்றங்களாகும். இந்த அங்கீகரிக்கப்பட்ட வழிகளைப் பயன்படுத்தி உங்களின் 'தானாகப் பொருந்தும் தன்மையுள்ள விளம்பரக் குறியீட்டை' மாற்றுவது AdSense திட்டக் கொள்கைகளை மீறுவதாகக் கருதப்படாது.

திரை அகலத்திற்கேற்ற சரியான விளம்பர யூனிட் அளவு உதாரணம்

மொபைல், டேப்லெட், டெஸ்க்டாப் ஆகிய மூன்று வகையான திரை அகலங்களுக்கேற்ப உங்கள் 'தானாகப் பொருந்தும் தன்மையுள்ள விளம்பரக் குறியீட்டை' எப்படி மாற்றுவதென இந்த உதாரணம் விளக்கும். இதற்கு CSS ஊடக வினவல்களிலோ விளம்பரக் குறியீட்டை மாற்றுவதிலோ முன்அனுபவம் தேவையில்லை.

'திரை அகலத்திற்கேற்ற சரியான விளம்பர யூனிட் அளவுகளை' அமைப்பதற்கு உதவும் சில 'மாற்றப்பட்ட பொருந்தும் தன்மையுள்ள விளம்பரக் குறியீடுகள்':

• 500px வரையுள்ள திரை அகலங்களில்: 320x100 விளம்பர யூனிட்.
• 500pxக்கும் 799க்கும் இடைப்பட்ட திரை அகலங்களில்: 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 கணக்கில் ஒரு காட்சி விளம்பர யூனிட்டை உருவாக்கவும், "விளம்பர அளவு" பிரிவில் தானாகப் பொருந்தும் தன்மை என்பது தேர்வுசெய்யப்பட்டிருப்பதை உறுதிப்படுத்திக்கொள்ளவும். தானாகப் பொருந்தும் தன்மையுள்ள விளம்பரக் குறியீட்டிலிருந்து கீழுள்ள தகவல்களைக் குறித்துக்கொள்ளவும்:
   • உங்கள் வெளியீட்டாளர் ஐடி, எ.கா. ca-pub-1234567890123456
   • உங்கள் விளம்பர யூனிட் ஐடி (data-ad-slot), எ.கா. 1234567890.
2. மாதிரிக் குறியீட்டில் இவற்றைச் செய்யவும்:
   • example_responsive_1 என வரும் இடங்களிலெல்லாம் அதற்குப் பதிலாக ஒரு தனித்துவமான பெயரை உள்ளிடவும், எ.கா. Home_Page, front_page_123, போன்றவை.
     குறிப்புகள்:

     • உங்களின் தனித்துவமான பெயர் ஆங்கில எழுத்துகள் (A-Z), எண்கள், அடிக்கோடுகளை மட்டுமே உள்ளடக்கியதாகவும் ஆங்கில எழுத்தோடு தொடங்குவதாகவும் இருக்க வேண்டும்.
     • இந்த மாதிரிக் குறியீட்டை மாற்றியமைக்கும் ஒவ்வொரு முறையும் ஒரு புதிய தனித்துவமான பெயரைப் பயன்படுத்த வேண்டும்.
   • ca-pub-1234567890123456 என்பதற்குப் பதிலாக உங்களின் சொந்த வெளியீட்டாளர் ஐடியை உள்ளிடவும்.
   • 8XXXXX1 என்பதற்குப் பதிலாக உங்களின் சொந்த விளம்பர யூனிட் ஐடியை உள்ளிடவும்.
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க்கும் குறைவாக இருந்தால் விளம்பரம் எதுவும் காட்டப்படாது.

குறிப்பு: மேலுள்ளவற்றில் எந்த முறையை நீங்கள் பயன்படுத்தினாலும் அது எங்களின் விளம்பரங்களைக் காட்சிப்படுத்துதல் கொள்கைகளுடன் இணங்குவதை உறுதிசெய்யவும். உங்கள் குறியீட்டில் குறிப்பிட்ட மாற்றங்களைச் செய்ய மட்டுமே எங்கள் திட்டக் கொள்கைகள் அனுமதிக்கின்றன.