பிளாக்கரில் Labels-களை அழகுப்படுத்த
பிளாக்கர் தளங்கள் வைத்திருக்கும் ஒவ்வொருவரும் தங்களுடைய வலைப்பூவை அழகாக வைத்திருக்கவே நினைப்பார்கள்.
அந்த வகையில் பிளாக்கரில் ஒவ்வொரு பதிவையும் வகைப்படுத்த உதவும் LABEL களை எப்படி அழகு படுத்துவது என்பதை பார்ப்போம்.
சாதாரண Default Blogger Template களில் லேபிள்கள் எந்த டிசைனும் இல்லாமல் சாதாரணமாக இருக்கும். இது பார்ப்பதற்கு நன்றாக இருக்காது.
CSS Code பயன்படுத்துவதன் மூலம் Label களுக்கு ஒரு Stylish Look கொடுக்க முடியும்.
பிளாக்கர் தளத்தில் டேபிள்களை இரண்டு முறைகளில் வைக்கலாம்.
ஒன்று: List முறை. (லேபிள்களின் எண்ணிக்கை அதிகரித்தால் இது நீண்டு அதிக இடத்தை எடுத்துக்கொள்ளும்)
இரண்டு: Cloud முறை. (இது பெயருக்கேற்றவாறு கூட்டமாக இருக்கும்)
Cloud முறையில் லேபிளைப் பயன்படுத்தி, அதற்கு Style கொடுப்பதன் மூலம் லேபிள்கள் அட்ராக்டிவாக தெரியும்படி செய்யலாம்.
செய்முறை:
Cloud Label கள் கீழுள்ளவாறு அழகாக காட்சியளிக்கும்.
அந்த வகையில் பிளாக்கரில் ஒவ்வொரு பதிவையும் வகைப்படுத்த உதவும் LABEL களை எப்படி அழகு படுத்துவது என்பதை பார்ப்போம்.
சாதாரண Default Blogger Template களில் லேபிள்கள் எந்த டிசைனும் இல்லாமல் சாதாரணமாக இருக்கும். இது பார்ப்பதற்கு நன்றாக இருக்காது.
CSS Code பயன்படுத்துவதன் மூலம் Label களுக்கு ஒரு Stylish Look கொடுக்க முடியும்.
பிளாக்கர் தளத்தில் டேபிள்களை இரண்டு முறைகளில் வைக்கலாம்.
ஒன்று: List முறை. (லேபிள்களின் எண்ணிக்கை அதிகரித்தால் இது நீண்டு அதிக இடத்தை எடுத்துக்கொள்ளும்)
இரண்டு: Cloud முறை. (இது பெயருக்கேற்றவாறு கூட்டமாக இருக்கும்)
Cloud முறையில் லேபிளைப் பயன்படுத்தி, அதற்கு Style கொடுப்பதன் மூலம் லேபிள்கள் அட்ராக்டிவாக தெரியும்படி செய்யலாம்.
செய்முறை:
- உங்கள் பிளாக்கர் தளத்தில் லாகின் செய்துகொள்ளுங்கள்.
- ஏற்கனவே இருக்கும் லேபிள் விட்ஜெட்டை List முறையிலிருந்து Cloud முறைக்கு மாற்றிக்கொள்ளுங்கள்.
- பிறகு கீழுள்ள கோடிங்கை காப்பி செய்து பிளாக்கரில் Add Gadget ==> HTML/JavaScript ==> சென்று அதில் பேஸ்ட் செய்து சேமிக்கவும்.
<style type="text/css">முடித்த பிறகு உங்களுடைய வலைத்தளத்தை புதிய விண்டோவில் திறந்து பார்க்கவும்.
/*<![CDATA[*/
.Label a{float:left;padding:5px 8px;margin:2px 2px 0px 0;background-color:#1295C9;color:white;font-size:14px;text-decoration:none;text-shadow:
0 -1px -1px rgba(0, 0, 0, 0.2);-webkit-transition:all .4s
ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s
ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s
ease-in-out;}
.Label a:hover{background-color:#303030;}
/*]]>*/
</style>
Cloud Label கள் கீழுள்ளவாறு அழகாக காட்சியளிக்கும்.
Tags: blogger tips, label design, blogger label, brick style label
mikaum nanru
ReplyDelete