இன்றைய வடிவமைப்பு
உங்கள் வலைத்தளத்தில் இன்றைய வடிவமைப்பு உட்பொதியுங்கள்
இன்றைய வடிவமைப்பு ஒவ்வொரு நாளும் ஒரு புதிய அம்சத்தை வெளியிடுகிறது. பட முகவரி மாறாது, ஆனால் அதன் பின்னால் உள்ள படம் மாறும், எனவே நீங்கள் குறியீட்டை ஒருமுறை சேர்த்தால் போதும், உங்கள் பார்வையாளர்கள் இன்றைய அம்சத்தை தானாகவே பார்ப்பார்கள்.
இது எவ்வாறு செயல்படுகிறது
ஒவ்வொரு நாளும் ஒரு நிலையான முகவரியில் புதிய படம் வெளியிடப்படுகிறது. உங்கள் பக்கம் அந்த முகவரியை ஏற்றுகிறது, எனவே அது எப்போதும் தற்போதைய அம்சத்தைக் காட்டுகிறது, மேலும் ஒரு கிளிக் உங்கள் பார்வையாளர்களை முழுக் கதை சொல்லப்படும் இன்றைய வடிவமைப்பு தளத்திற்கு அழைத்துச் செல்கிறது.
ஸ்கிரிப்ட் விரும்புகிறீர்களா? ஒரு கொள்கலன் மற்றும் ஒரு ஸ்கிரிப்ட் சேருங்கள்: விட்ஜெட் நீங்கள் data-dotd-variant மூலம் தேர்ந்தெடுக்கும் பாணியை (image, cta அல்லது card) வரையும், அந்த மொழி கிடைக்கும்போது ஸ்கிரிப்ட் முகவரியின் மொழியில் காட்டும். ஸ்கிரிப்ட்களை இயக்க முடியாவிட்டால், அதே வகையின் HTML பதிப்பைப் பயன்படுத்துங்கள்.
வகை A: படம் மட்டும்
இன்றைய படம், இன்றைய வடிவமைப்பு தளத்திற்கு இணைக்கப்பட்டது. மிகவும் இலகுவான விருப்பம்.
நேரடி முன்னோட்டம்
<a href="https://designoftheday.org/ta/" target="_blank" rel="noopener">
<img src="https://competition.adesignaward.com/design-of-the-day/today.png" alt="விருது பெற்ற படைப்பாற்றல் சிறப்பை வெளிப்படுத்தும் இன்றைய சிறப்பு வடிவமைப்பு" loading="lazy" style="max-width:100%;height:auto">
</a>
<div data-dotd="designoftheday.org" data-dotd-variant="image"></div>
<script async src="https://designoftheday.org/feature.js?lang=ta"></script>
வகை B: படம் மற்றும் செயல் அழைப்பு
இன்றைய படம், கீழே ஒரு செயல் அழைப்புடன்.
நேரடி முன்னோட்டம்
<a href="https://designoftheday.org/ta/" target="_blank" rel="noopener" style="display:block;max-width:100%;color:inherit;text-decoration:none;text-align:center">
<img src="https://competition.adesignaward.com/design-of-the-day/today.png" alt="விருது பெற்ற படைப்பாற்றல் சிறப்பை வெளிப்படுத்தும் இன்றைய சிறப்பு வடிவமைப்பு" loading="lazy" style="display:block;max-width:100%;height:auto;margin:0 auto">
<span style="display:block;margin-top:.5em;font:600 15px/1.3 system-ui,sans-serif">இன்றைய வடிவமைப்பைக் கண்டறியுங்கள்</span>
</a>
<div data-dotd="designoftheday.org" data-dotd-variant="cta"></div>
<script async src="https://designoftheday.org/feature.js?lang=ta"></script>
வகை C: Bootstrap அட்டை
படம், அம்சத்தின் தலைப்பு, ஒரு சிறிய பத்தி மற்றும் செயல் அழைப்பு பொத்தான் கொண்ட Bootstrap அட்டை. உங்கள் பக்கத்திற்கு Bootstrap தேவை.
நேரடி முன்னோட்டம்
<div class="card" style="max-width:24rem">
<a href="https://designoftheday.org/ta/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/design-of-the-day/today.png" class="card-img-top" alt="விருது பெற்ற படைப்பாற்றல் சிறப்பை வெளிப்படுத்தும் இன்றைய சிறப்பு வடிவமைப்பு" loading="lazy"></a>
<div class="card-body">
<h5 class="card-title">இன்றைய வடிவமைப்பு</h5>
<p class="card-text">A' Design Award ஒவ்வொரு நாளும் ஒரு சிறந்த வடிவமைப்பு படைப்பு, மிகவும் புதுமையான தயாரிப்பு அல்லது மிகவும் படைப்பாற்றல் மிக்க திட்டத்தை இன்றைய வடிவமைப்பாக வெளிப்படுத்துகிறது, படைப்பாற்றல் மற்றும் சிறந்த வடிவமைப்பின் குறிப்பிடத்தக்க எடுத்துக்காட்டுகளை முன்னிலைப்படுத்துகிறது.</p>
<a href="https://designoftheday.org/ta/" class="btn btn-danger" target="_blank" rel="noopener">இன்றைய வடிவமைப்பைக் கண்டறியுங்கள்</a>
</div>
</div>
<div data-dotd="designoftheday.org" data-dotd-variant="card"></div>
<script async src="https://designoftheday.org/feature.js?lang=ta"></script>
விருப்பம் 3: JSON
டெவலப்பர்கள், செயலிகள் மற்றும் தானியங்கிக்கானது. JSON இல் பெயர், விளக்கம், பட முகவரி, இணைப்புகள் மற்றும் தேதி உள்ளன. குறுக்கு-மூல கோரிக்கைகள் அனுமதிக்கப்படுகின்றன.
fetch("https://designoftheday.org/feature.json?lang=ta")
.then(function (r) { return r.json(); })
.then(function (d) {
// d.name, d.feature, d.paragraph, d.image, d.url, d.date ...
});
எடுத்துக்காட்டு பதில்
{
"domain": "designoftheday.org",
"name": "இன்றைய வடிவமைப்பு",
"feature": "இன்றைய வடிவமைப்பு",
"paragraph": "A' Design Award ஒவ்வொரு நாளும் ஒரு சிறந்த வடிவமைப்பு படைப்பு, மிகவும் புதுமையான தயாரிப்பு அல்லது மிகவும் படைப்பாற்றல் மிக்க திட்டத்தை இன்றைய வடிவமைப்பாக வெளிப்படுத்துகிறது, படைப்பாற்றல் மற்றும் சிறந்த வடிவமைப்பின் குறிப்பிடத்தக்க எடுத்துக்காட்டுகளை முன்னிலைப்படுத்துகிறது.",
"description": "இன்றைய வடிவமைப்பு ஒவ்வொரு நாளும் ஒரு சிறந்த வடிவமைப்பு படைப்பு, மிகவும் புதுமையான தயாரிப்பு அல்லது மிகவும் படைப்பாற்றல் மிக்க திட்டத்தை வெளிப்படுத்துகிறது, மிகவும் மதிப்புமிக்க A' Design Award and Competition அங்கீகரித்த படைப்பாற்றல் மற்றும் சிறந்த வடிவமைப்பின் குறிப்பிடத்தக்க எடுத்துக்காட்டுகளை முன்னிலைப்படுத்துகிறது.",
"call_to_action": "இன்றைய வடிவமைப்பைக் கண்டறியுங்கள்",
"date": "2026-11-08",
"language": "ta",
"image": "https://competition.adesignaward.com/design-of-the-day/today.png",
"image_alt": "விருது பெற்ற படைப்பாற்றல் சிறப்பை வெளிப்படுத்தும் இன்றைய சிறப்பு வடிவமைப்பு",
"url": "https://designoftheday.org/ta/",
"feature_url": "https://competition.adesignaward.com/design-of-the-day.html",
"registry_url": "https://competition.adesignaward.com/designs-of-the-days.php",
"embed_url": "https://designoftheday.org/ta/embed/"
}
அறிந்து கொள்ளுங்கள்
- படத்தைச் சுற்றியுள்ள இணைப்பை வைத்திருங்கள், அதனால் உங்கள் பார்வையாளர்கள் முழு அம்சத்தைக் கண்டறிய முடியும்.
- எப்போதும் மேலே காட்டப்பட்ட பட முகவரியைப் பயன்படுத்துங்கள், நகலை சேமிக்காதீர்கள், அதனால் உங்கள் பக்கம் புதுப்பித்த நிலையில் இருக்கும்.
- படம் பதிலளிக்கக்கூடியது: அதன் கொள்கலனை விட அகலமாக வளராது.
- உதவி அல்லது தனிப்பயன் வடிவம் தேவையா? தயவுசெய்து எங்களைத் தொடர்புகொள்ளுங்கள்.