09/18/13 ~ தகவல் தொழில்நுட்பக் களஞ்சியம்

உங்கள் வலைபூவில் வாசகர்களின் வரவை அதிகரிக்க, உங்களது வலைபூ அழகாகவும், படிப்பதற்கு ஏற்றதாகவும் இருக்க வேண்டும். என்னதான் பதிவுகளை நேர்த்தியாக எழுதி இருந்தாலும், அது பார்ப்பதற்கு உருத்தாதவண்ணம் இருந்தால் ப்டிக்க முடியும். நிறைய பேர் யார திட்டி பதிவு எழுதலாம்?, எந்த படத்த கடிச்சு குதறி எழுதலாம் (இதுக்காக பிளாக்ல டிக்கெட் எடுத்து படம் பார்ப்பதாய் கேள்வி) னே இருக்காங்க..

கொஞ்சம் வலைபூ அலங்காரத்தையும் கவனிக்கனும். அப்படினாத்தான் நிறைய பேருக்கு பிடித்த வலைபூவா, உங்களோடது இருக்கும். இப்ப கெளவி என்னன்னா? (மன்னிச்சுகுங்க கேள்வி!) ஒரு பதிவுக்கும், அடுத்த பதிவுக்கும் உள்ள இடைவெளிய நிரப்பமுடியுமா? அதில் ஒரு அலங்காரம் போட்டா பாக்க எப்படி இருக்கும்! அதுக்குதான் இந்த Page Divider இருக்கு… இதுல ரெண்டு பதிவுக்கும் இடையில உங்களுக்கு பிடிச்ச டிசைன் எதுவானாலும் போட்டுகலாம். அழகான் பூக்கள் நிறைந்த ஒரு லைன் போடலாம், இல்லனா ஒரு அனகொண்டாவ படுக்க வைக்கலாம். உங்க வலைபூவ பாத்தாவே தாறுமார் டாருடார் ஆயிடும். (இதெல்லாம் சின்ன பசங்க மொழி புரிஞ்சுகனும்). சரி, இப்ப மேட்டருக்கு போவோம்….

இது கொஞ்சம் இல்ல, நிறையவே குழப்பும் இருந்தாலும் கவனமா பார்த்தீங்கனா புரியும். புரியலனா இத பாருங்க Demo

1. உங்க பிளாக்கர Login செஞ்சு Dashboard >> Layout >> Edit html போங்க,

.post

2. மேல காட்டின கோடிங்கை Ctrl+F அடிச்சு தேடுங்க,

/* Footer

----------------------------------------------- */

.footer-outer {

color:$(footer.text.color);

background: $(footer.background);

-moz-border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);

-webkit-border-top-left-radius: $(footer.border.radius.top);

-webkit-border-top-right-radius: $(footer.border.radius.top);

-webkit-border-bottom-left-radius: $(footer.border.radius.bottom);

-webkit-border-bottom-right-radius: $(footer.border.radius.bottom);

-goog-ms-border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);

border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);

-moz-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);

-webkit-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);

-goog-ms-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);

box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);

}

.footer-inner {

padding: 10px $(main.padding.sides) 20px;

}

.footer-outer a {

color: $(footer.link.color);

}

.footer-outer a:visited {

color: $(footer.link.visited.color);

}

.footer-outer a:hover {

color: $(footer.link.hover.color);

}

.footer-outer .widget h2 {

color: $(footer.widget.title.text.color);

}

.postCode{

background: none repeat scroll 0 0;
border:2px solid Silver;
height:'auto';
margin:10px;
overflow:auto;
padding:6px;
text-align:left;
}

3. மேலே காட்டி இருக்கறது ஒரு Exampleகாக என்னோட பிளாக்கரல இருந்து எடுத்து போட்டிருக்கேன். இங்க கலர்ல குறிச்சி இருக்கேன். அத தேடி { } – இந்த அடைப்புகுறிகுள்ள இருக்குற, கோடிங்கை தூக்கிட்டு அதாவது Cut பண்ணிட்டு (குறிப்பு: இவை எல்லா செய்யறதுக்கு முன்னாடி, உங்க Template-அ Backup எடுத்துகுங்க, எடுத்தவுடனே Save பண்ணிடாதீங்க, Preview பாருங்க கோடிங் Work ஆனா மட்டும் Save பண்ணுங்க) கீழே உள்ள கோடிங்கை அந்த அடைப்புகுறிகுள்ள Paste பண்ணுங்க.

background: url(Separator-Image-Url); background-repeat: no-repeat;background-position: bottom center; margin:.5em 0 1.5em;padding-bottom:2.5em;

4. மேலே காட்டின கோடிங்கல நீங்க, Separator-Image-Url இடத்துல உங்களுக்கு தேவையான படத்தோட Url –ல கொடுத்துக்கலாம். 2.5em-கரது சைஸ் அதயும் மாத்திக்கலாம்.

.post{margin: 0 0 40px 0;width: 90%; background: url(http://www.imagehost.com/separator.jpg); background-repeat: no-repeat;background-position: bottom center; margin:.5em 0 1.5em;padding-bottom:2.5em;}

5. உங்க Url கோடையும் சேர்த்த பிறகு இப்படி இருக்கும்.

Free Imager Url: