பிளாக் டிப்ஸ்

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

முதலில் உங்கள் டெம்ப்ளேட்டில் உள்ள பகுதிகளை காணலாம்.

1. Header
2. Footer
3. Sidebar
4. Post

Header:
இது உங்களின் தலைப்பு பகுதி. உங்களின் பிளாக்குகான தலைப்புகளை இதில் இடலாம். தலைப்பை பற்றிய விளக்கமும், அல்லது தலைப்பிற்கு பதிலாக புகைப்படங்களையும் இவ்விடத்தில் பதிவு செய்யலாம்.

Footer:
இது வலைப்பூ பக்கத்தின் கீழ்பகுதியில் பதிவிடப்படும். லும் தலைப்பூ அல்லது புகைப்படங்களை பதிவு செய்யலாம்.

Sidebar:
வலைப்பூ பக்கங்களின் பக்கவாட்டில் உங்களின் தலைப்பூ, லிங்க், புகைப்படம் மற்றும் இன்னபிற புரோகிராம்களை பக்கவாட்டில் இட இது பயன்படுகிறது.

Post:
உங்கள் வலைப்பூவின் முக்கிய பகுதியாக இது உள்ளது. நீங்கள் இடும் பதிவுகளை வரிசைப்படுத்திக் காணலாம். போஸ்ட்டில் உங்களது வாக்கியங்களையும், புகைப்படங்களையும், லிங்க் மற்றும் இன்னபிற அனைத்து விஷயங்களையும் இதில் இடலாம்.


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

மூன்று பத்திகளாக வடிவமைக்கப்பட்ட டெனிம் டெம்ப்ளேட்டை இங்கே காணலாம்.


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

1. முதலாவதாக உங்களின் வடிவமைப்பை சேமிக்கவும்.

Dashboard => Layout >> Edit HTML




2. Layout --> HTML என்னும் பகுதிக்குச் சென்று கீழ்கண்ட வரியை தேடவும். அதில் இடப்பட்ட தலைப்பின் அகலத்தை 760 லிருந்து 950 ஆக மாற்றுக.

#header { width: 760px; margin: 0 auto; background-color: $headerBgColor; border: 1px solid $headerBgColor; color: $headerTextColor; padding: 0; font: $headerFont; }

கீழிடப்பட்டவாறு தலைப்பின் அகலத்தை 950 ஆக மாற்றவும்.

#header { width: 950px; margin: 0 auto; background-color: $headerBgColor; border: 1px solid $headerBgColor; color: $headerTextColor; padding: 0; font: $headerFont; }

3. கீழே கொடுக்கப்பட்ட வரிகளுக்குச் செல்லவும்.

#content-wrapper { width: 760px; margin: 0 auto; padding: 0 0 15px; text-align: left; background-color: $mainBgColor; border: 1px solid $borderColor; border-top: 0; } #main-wrapper { margin-left: 14px; width: 464px; float: left; background-color: $mainBgColor; display: inline; /* fix for doubling margin in IE */ word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { margin-right: 14px; width: 240px; float: right; background-color: $mainBgColor; display: inline; /* fix for doubling margin in IE */ word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

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

#content-wrapper { width: 950px; margin: 0 auto; padding: 0 0 15px; text-align: left; background-color: $mainBgColor; border: 1px solid $borderColor; border-top: 0; } #main-wrapper { margin-left: 14px; width: 464px; float: left; background-color: $mainBgColor; display: inline; /* fix for doubling margin in IE */ word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { margin-right: 14px; width: 215px; float: right; background-color: $mainBgColor; display: inline; /* fix for doubling margin in IE */ word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #newsidebar-wrapper { margin-left: 14px; width: 215px; float: left; background-color: $mainBgColor; display: inline; /* fix for doubling margin in IE */ word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

மேலே கொடுக்கப்பட்டுள்ளவாறு செய்வதனால் புதிதாக ஒரு பத்தியை நமது வலைப்பூவில் இடுவதற்கு இடம் ஏற்படுத்திக் கொடுக்கிறோம். அதே போல ஏற்கனவே உள்ள அளவுகளை நாம் செம்மைப் படுத்துகிறோம்.

இதன் அளவுகள் உங்களின் தேவைக்கேற்றார் போல் மாற்றிக் கொள்ளலாம், ஆனால் கணக்குகள் சரியானதாக இருக்க வேண்டும். அளவு கணக்குகளை சரியாக பார்க்க, content-wrapper -ன் அளவு main-wrapper, sidebar-wrapper, newsidebar-wrapper, margins இவற்றின் கூட்டாக இருக்க வேண்டும்.

அதாவது

(#content-wrapper width) = (#main-wrapper width) + (#sidebar-wrapper width) + (#newsidebar-wrapper width) + margins

மேலும் ஒரு தொகுப்பை body பகுதியில் இணைக்க வேண்டும். கீழே கொடுக்கப்பட்ட வரிகளுக்குச் சென்று பச்சை நிறத்தில் கொடுக்கப்பட்ட தொகுப்பை இணைக்கவும்.

<div id='newsidebar-wrapper'> <b:section class='sidebar' id='newsidebar' preferred='yes'> <b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/> </b:section> </div> <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div>

கொடுக்கப்பட்டது போல் sidebar wrapper, main-wrapperக்கு மேலே இருப்பது மிகவும் அவசியமானது. கொடுக்கப்பட்ட வழிமுறைகளை பின்பற்றிய பின் டெம்ப்ளேட்டை சேமிக்கவும்.
Preview பட்டனை சொடுக்கினால் உங்களுக்கு மூன்று பத்தி கொண்ட டெம்ப்ளேட் கிடைக்கும்.