வலைப்பூக்களில் பதிவுகள் இடும் போது அது ஒன்றன் கீழ் ஒன்றாக இடப்படும். உங்களின் வலைப்பூவின் முகப்பு பகுதி பல பகுதிகளாக பிரிக்கப்பட்டு அதில் உங்களின் பதிவுகளை இடுவதற்கு ஏற்றவாறு வடிவமைக்கப்பட்ட HTML புரோகிராம்களை பயன்படுத்திக் கொள்ளலாம். தயாராக உள்ள இவ்வகை HTML புரோகிராம்களை டெம்ப்ளேட் என்கிறோம். இவ்வகை டெம்ப்ளேட்களை உங்களின் வசதி மற்றும் பயன்பாட்டிற்கு ஏற்றவாறு நீங்கள் வடிவமைத்துக் கொள்ளலாம்.
முதலில் உங்கள் டெம்ப்ளேட்டில் உள்ள பகுதிகளை காணலாம்.
1. Header
2. Footer
3. Sidebar
4. Post
Header:
இது உங்களின் தலைப்பு பகுதி. உங்களின் பிளாக்குகான தலைப்புகளை இதில் இடலாம். தலைப்பை பற்றிய விளக்கமும், அல்லது தலைப்பிற்கு பதிலாக புகைப்படங்களையும் இவ்விடத்தில் பதிவு செய்யலாம்.
Footer:
இது வலைப்பூ பக்கத்தின் கீழ்பகுதியில் பதிவிடப்படும். லும் தலைப்பூ அல்லது புகைப்படங்களை பதிவு செய்யலாம்.
Sidebar:
வலைப்பூ பக்கங்களின் பக்கவாட்டில் உங்களின் தலைப்பூ, லிங்க், புகைப்படம் மற்றும் இன்னபிற புரோகிராம்களை பக்கவாட்டில் இட இது பயன்படுகிறது.
Post:
உங்கள் வலைப்பூவின் முக்கிய பகுதியாக இது உள்ளது. நீங்கள் இடும் பதிவுகளை வரிசைப்படுத்திக் காணலாம். போஸ்ட்டில் உங்களது வாக்கியங்களையும், புகைப்படங்களையும், லிங்க் மற்றும் இன்னபிற அனைத்து விஷயங்களையும் இதில் இடலாம்.
பிளாக்ஸ்பாட்டில் பல வகையான வடிவங்களில், வண்ணங்களில் டெம்ப்ளேட்டுகள் உள்ளன. இவ்வனைத்து டெம்ப்ளேட்டுகளும் போஸ்ட் மற்றும் சைடுபார் கொண்ட இரண்டு பத்தி கொண்டதாகவே இருக்கும். இதில் டெனிம் என்னும் டெம்ப்ளேட்டை மூன்று பத்திகளாக அமைப்பது எப்படி என்பதை இங்கே காண்போம்.
மூன்று பத்திகளாக வடிவமைக்கப்பட்ட மினிமா டெம்ப்ளேட்டை இங்கே காணலாம்.
நீங்கள் டெம்ப்ளேட்டை வடிவமைப்பதற்கு முன் தற்சமயம் உள்ள டெம்ப்ளேட்டை சேமித்துக் கொள்வது நல்லது. புதிய வடிவமைப்பு தவறாக அமைந்து விட்டது எனில் உங்களின் பழைய வடிவை திரும்பப் பெற ஏதுவாயிருக்கும்.
1. முதலாவதாக உங்களின் வடிவமைப்பை சேமிக்கவும்.
Dashboard >> Layout >> Edit HTML >> Download
Thisaway Template
உங்களின் இறுதி வடிவ டெம்ப்ளேட் கீழ்கண்டவாறு காணப்படும்.
2. கீழே கொடுக்கப்பட்டுள்ள வரிகளுக்குச் செல்லவும்.
/* global
-------------- */
body {
margin: 0;
text-align: center;
min-width: 760px;
background: #ce8b43 url(http://www.blogblog.com/thisaway/bg_body.gif)
repeat-x left top;
color: $textColor;
font-size: small;
}
blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #f7e8d8;
border-right: 6px solid #f7e8d8;
color: $postTitleColor;
}
code {
color: $postTitleColor;
}
hr {
display: none;
}
/* layout
-------------- */
#outer-wrapper {
margin: 0 auto;
width: 760px;
text-align: left;
font: $bodyFont;
}
#header-wrapper {
padding-bottom: 15px;
background: url(http://www.blogblog.com/thisaway/bg_header_bottom.gif)
no-repeat left bottom;
}
#header {
background: #634320 url(http://www.blogblog.com/thisaway/bg_header.gif) repeat-x
left bottom;
}
#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway/bg_main_wrapper.gif) repeat-y
left top;
}
#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
padding: 0;
width: 483px;
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
*/
}
#main {
padding: 22px 8px 0 8px;
background: url(http://www.blogblog.com/thisaway/bg_content.gif) repeat-x
left top;
}
.post {
margin: 0 8px 14px 21px;
padding: 0;
border-bottom: 3px solid #f7e8d8;
}
#comments {
margin: 0 16px 14px 29px;
padding: 10px;
border: 1px solid #f0e0ce;
background-color: #f5ede4;
}
#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 269px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x
left top;
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 {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway/bg_sidebar_arrow.gif)
repeat-y 179px 0;
}
#sidebar .widget {
margin-bottom: 20px;
}
#footer-wrapper {
padding-top: 15px;
background: url(http://www.blogblog.com/thisaway/bg_footer_top.gif)
no-repeat left top;
clear: both;
}
#footer {
background: #493015 url(http://www.blogblog.com/thisaway/bg_footer.gif) repeat-x
left top;
text-align: center;
min-height: 2em;
}
|
3. சிவப்பு நிறங்களில் கொடுக்கப்பட்டுள்ளவற்றை கீழ்க்கண்டவாறு மாற்றவும் அல்லது இணைக்கவும்.
/* global
-------------- */
body {
margin: 0;
text-align: center;
min-width: 987px;
background: #ce8b43 url(http://www.blogblog.com/thisaway/bg_body.gif) repeat-x left top;
color: $textColor;
font-size: small;
}
blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #f7e8d8;
border-right: 6px solid #f7e8d8;
color: $postTitleColor;
}
code {
color: $postTitleColor;
}
hr {
display: none;
}
/* layout
-------------- */
#outer-wrapper {
margin: 0 auto;
width: 987px;
text-align: left;
font: $bodyFont;
}
#header-wrapper {
padding-bottom: 15px;
background: url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_header_bottom_2.gif) no-repeat left bottom;
}
#header {
background: #634320 url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_header_2.gif) repeat-x
left bottom;
}
#content-wrapper {
position: relative;
width: 987px;
background: #f7f0e9 url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_main_wrapper_2.gif) repeat-y
left top;
}
#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
padding: 0;
width: 483px;
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
*/
}
#main {
padding: 22px 8px 0 8px;
background: url(http://www.blogblog.com/thisaway/bg_content.gif) repeat-x
left top;
}
.post {
margin: 0 8px 14px 21px;
padding: 0;
border-bottom: 3px solid #f7e8d8;
}
#comments {
margin: 0 16px 14px 29px;
padding: 10px;
border: 1px solid #f0e0ce;
background-color: #f5ede4;
}
#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 247px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x
left top;
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 {
padding: 7px 11px 0 14px;background: url(http://www.blogblog.com/thisaway/bg_sidebar_arrow.gif) repeat-y 159px 0;
}
#sidebar .widget {
margin-bottom: 20px;
}
#newsidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
width: 247px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x left top;
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 {
padding: 7px 11px 0 14px;
background:
url(http://www.blogblog.com/thisaway/bg_sidebar_arrow.gif) repeat-y 159px 0;
}
#newsidebar .widget {
margin-bottom: 20px;
}
#footer-wrapper {padding-top: 15px;
background: url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_footer_top_2.gif) no-repeat left top;
clear: both;
}
#footer {
background: #493015 url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_footer_2.gif) repeat-x
left top;
text-align: center;
min-height: 2em;
} |
பின்பக்க படங்களுக்கு ஏற்ப அளவுகள் மாறுபட்டுள்ளது. அதே போல சைடுபாரின் அளவுகளும் குறைக்கப்பட்டுள்ளதை காணலாம்.
4. கீழே கொடுக்கப்பட்டுள்ள வரிகளுக்குச் செல்லவும்.
/**
Page structure tweaks for layout editor wireframe */
body#layout #main,
body#layout #sidebar {
padding: 0;
}
|
அவற்றை கீழ்க்கண்டவாறு மாற்றவும்.
Change them to this:-
/**
Page structure tweaks for layout editor wireframe */
body#layout #main,
body#layout #sidebar,
body#layout
#newsidebar
{
padding: 0;
}
|
மேலும் கீழே கீழே சிவப்பு நிறங்களில் கொடுக்கப்பட்ட வரிகளை இணைக்கவும்.
<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>
|
இது உங்களின் Profile ஐ இடது பக்கத்தில் இணைக்கும். தேவைப்படும் சமயங்களில் எடுத்து விடலாம். உங்களின் வடிவமைப்பை “Preview” செய்து கொள்ளுங்கள். அனைத்தும் சரியாய் இருக்கும் சம்யத்தில்
Save Template” சொட்டி சேமித்து வைத்துக் கொள்ளுங்கள்.
0 comments