பிளாக் டிப்ஸ்: மூன்று பத்தியாக மினிமா (Minima) டெம்ப்ளேட்

மூன்று பத்தியாக மினிமா (Minima) டெம்ப்ளேட்

Posted by Posted by Nilavan On 11:18 AM

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

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

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

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

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

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

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

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

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

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

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

Dashboard >> Layout >> Edit HTML >> Download

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

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: left;
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 {
width: 220px;
float: right;
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 */
}

இந்த டெம்ப்ளேட்டில் மூன்று பாகங்கள் உள்ளது. அவை:-

#outer-wrapper – முழு பிளாக் பகுதிகளை குறிக்கிறது.
#main-wrapper – மத்தியில் பிளாக் பதிவுகள் இடும் பகுதியை குறிக்கிறது.
#sidebar-wrapper – வலது பக்கத்திலுள்ள பட்டியலைக் குறிக்கிறது.

இதில் புதிதாக சைடுபாரை இணைக்க கீழே சிவப்பு நிறத்தில் கொடுக்கப்பட்ட வரிகளை HTML code-ல் ஒட்டவும். இதில் #sidebar-wrapper” என்பதை “#newsidebar-wrapper" என பெயர் மாற்றம் செய்யவும்.
அடுத்ததாக பக்கங்களின் அகலங்களை செம்மைப்படுத்துவது மிக அவசியம். Outer-wrapper க்கு 750px-ம், main-wrapper-க்கு 400px-கும்,sidebar-wrapper க்கு 150px-கும் என கொடுக்கலாம். இந்த அளவுகள் உங்களின் தேவைக்கேற்றார் போல் கூட்டியோ குறைத்தோ வைத்துக் கொள்ளலாம்.
உங்களுடைய வடிவமைப்பில் கீழ்கண்டவாறு உள்ளனவா என சரிபார்த்துக் கொள்ளுங்கள்.

#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 400px;
margin-left: 25px;
float: left;
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 {
width: 150px;
float: right;
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 {
width: 150px;
float: left;
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 */
}

மேலும் Layout Editor -ல் புதியவைகளை சேர்த்துக்கொள்ள மாற்றம் செய்வது அவசியம். கீழே கொடுக்கப்பட்ட Code-னை Copy செய்து /* Comments ----*/ என ஆரம்பிக்கும் Code-ற்கு மேலை ஒட்டவும்.

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}

body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer {
width: 750px;
padding: 0px;
}

body#layout #main-wrapper {
width: 400px;
margin-left: 20px;
}

body#layout #sidebar-wrapper,
body#layout #newsidebar-wrapper {
width: 150px;
}

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

கீழே கொடுக்கப்பட்டுள்ள சிவப்பு நிற வரிகளை div id='main wrapper' என்னும் வரிகளுக்கு மேலே இருக்குமாறு சேர்த்துக் கொள்ளவும்.

<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>

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'/>

</div>

மேலே கொடுக்கப்பட்டுள்ள ஆலோசனைகளை பின்பற்றும் சம்யத்தில் உங்களுக்கு மூன்று பத்திகள் கொண்ட டெம்ப்ளேட்டுகளை கிடைக்கும்.
மேலும் மிகவும் எளிதாக வேண்டுமெனில் கீழே கொடுக்கப்பட்டுள்ளவற்றை தேர்வு செய்து உங்களின் HTML Code பகுதியில் Paste செய்யவும்.

<?xml version="1.0" encoding="UTF-8" ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
 <head>
 <b:include data='blog' name='all-head-content'/>
 <title><data:blog.pageTitle/></title>
 <b:skin><![CDATA[/*
 -----------------------------------------------
 Blogger Template Style
 Name: Minima
 Designer: Douglas Bowman
 URL: www.stopdesign.com
 Date: 26 Feb 2004
 Updated by: Blogger Team
 ----------------------------------------------- */
 
 /* Variable definitions
 ====================
 <Variable name="bgcolor" description="Page Background Color"
 type="color" default="#fff" value="#ffffff">
 <Variable name="textcolor" description="Text Color"
 type="color" default="#333" value="#333333">
 <Variable name="linkcolor" description="Link Color"
 type="color" default="#58a" value="#5588aa">
 <Variable name="pagetitlecolor" description="Blog Title Color"
 type="color" default="#666" value="#666666">
 <Variable name="descriptioncolor" description="Blog Description Color"
 type="color" default="#999" value="#999999">
 <Variable name="titlecolor" description="Post Title Color"
 type="color" default="#c60" value="#cc6600">
 <Variable name="bordercolor" description="Border Color"
 type="color" default="#ccc" value="#cccccc">
 <Variable name="sidebarcolor" description="Sidebar Title Color"
 type="color" default="#999" value="#999999">
 <Variable name="sidebartextcolor" description="Sidebar Text Color"
 type="color" default="#666" value="#666666">
 <Variable name="visitedlinkcolor" description="Visited Link Color"
 type="color" default="#999" value="#999999">
 <Variable name="bodyfont" description="Text Font"
 type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
 <Variable name="headerfont" description="Sidebar Title Font"
 type="font"
 default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
 <Variable name="pagetitlefont" description="Blog Title Font"
 type="font"
 default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
 <Variable name="descriptionfont" description="Blog Description Font"
 type="font"
 default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
 <Variable name="postfooterfont" description="Post Footer Font"
 type="font"
 default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
 <Variable name="startSide" description="Side where text starts in blog language"
 type="automatic" default="left" value="left">
 <Variable name="endSide" description="Side where text ends in blog language"
 type="automatic" default="right" value="right">
 */
 
 /* Use this with templates/template-twocol.html */
 
 body {
 background:$bgcolor;
 margin:0;
 color:$textcolor;
 font:x-small Georgia Serif;
 font-size/* */:/**/small;
 font-size: /**/small;
 text-align: center;
 }
 a:link {
 color:$linkcolor;
 text-decoration:none;
 }
 a:visited {
 color:$visitedlinkcolor;
 text-decoration:none;
 }
 a:hover {
 color:$titlecolor;
 text-decoration:underline;
 }
 a img {
 border-width:0;
 }
 
 /* Header
 -----------------------------------------------
 */
 
 #header-wrapper {
 width:660px;
 margin:0 auto 10px;
 border:1px solid $bordercolor;
 }
 
 #header-inner {
 background-position: center;
 margin-left: auto;
 margin-right: auto;
 }
 
 #header { 
 margin: 5px;
 border: 1px solid $bordercolor;
 text-align: center;
 color:$pagetitlecolor;
 }
 
 #header h1 {
 margin:5px 5px 0;
 padding:15px 20px .25em;
 line-height:1.2em;
 text-transform:uppercase;
 letter-spacing:.2em;
 font: $pagetitlefont;
 }
 
 #header a {
 color:$pagetitlecolor;
 text-decoration:none;
 }
 
 #header a:hover {
 color:$pagetitlecolor;
 }
 
 #header .description {
 margin:0 5px 5px;
 padding:0 20px 15px;
 max-width:700px;
 text-transform:uppercase;
 letter-spacing:.2em;
 line-height: 1.4em;
 font: $descriptionfont;
 color: $descriptioncolor;
 }
 
 #header img {
 margin-$startSide: auto;
 margin-$endSide: auto;
 }
 
 
 /* Outer-Wrapper
 ----------------------------------------------- */
 #outer-wrapper {
 width: 750px;
 margin:0 auto;
 padding:10px;
 text-align:left;
 font: $bodyfont;
 }
 
 #main-wrapper {
 width: 400px;
 margin-left: 25px;
 float: left;
 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 {
 width: 150px;
 float: right;
 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 {
 width: 150px;
 float: left;
 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 */
 }
 
 
 /* Headings
 ----------------------------------------------- */
 
 h2 {
 margin:1.5em 0 .75em;
 font:$headerfont;
 line-height: 1.4em;
 text-transform:uppercase;
 letter-spacing:.2em;
 color:$sidebarcolor;
 }
 
 
 /* Posts
 -----------------------------------------------
 */
 h2.date-header {
 margin:1.5em 0 .5em;
 }
 
 .post {
 margin:.5em 0 1.5em;
 border-bottom:1px dotted $bordercolor;
 padding-bottom:1.5em;
 }
 .post h3 {
 margin:.25em 0 0;
 padding:0 0 4px;
 font-size:140%;
 font-weight:normal;
 line-height:1.4em;
 color:$titlecolor;
 }
 
 .post h3 a, .post h3 a:visited, .post h3 strong {
 display:block;
 text-decoration:none;
 color:$titlecolor;
 font-weight:normal;
 }
 
 .post h3 strong, .post h3 a:hover {
 color:$textcolor;
 }
 
 .post-body {
 margin:0 0 .75em;
 line-height:1.6em;
 }
 
 .post-body blockquote {
 line-height:1.3em; 
 }
 
 .post-footer {
 margin: .75em 0;
 color:$sidebarcolor;
 text-transform:uppercase;
 letter-spacing:.1em;
 font: $postfooterfont;
 line-height: 1.4em;
 }
 
 .comment-link {
 margin-$startSide:.6em;
 }
 .post img {
 padding:4px;
 border:1px solid $bordercolor;
 }
 .post blockquote {
 margin:1em 20px;
 }
 .post blockquote p {
 margin:.75em 0;
 }
 
 /** Page structure tweaks for layout editor wireframe */
 body#layout #header {
 margin-left: 0px;
 margin-right: 0px;
 }
 
 body#layout #outer-wrapper,
 body#layout #header-wrapper,
 body#layout #footer {
 width: 750px;
 padding: 0px;
 }
 
 body#layout #main-wrapper {
 width: 400px;
 margin-left: 20px;
 }
 
 body#layout #sidebar-wrapper,
 body#layout #newsidebar-wrapper {
 width: 150px;
 }
 
 /* Comments
 ----------------------------------------------- */
 #comments h4 {
 margin:1em 0;
 font-weight: bold;
 line-height: 1.4em;
 text-transform:uppercase;
 letter-spacing:.2em;
 color: $sidebarcolor;
 }
 
 #comments-block {
 margin:1em 0 1.5em;
 line-height:1.6em;
 }
 #comments-block .comment-author {
 margin:.5em 0;
 }
 #comments-block .comment-body {
 margin:.25em 0 0;
 }
 #comments-block .comment-footer {
 margin:-.25em 0 2em;
 line-height: 1.4em;
 text-transform:uppercase;
 letter-spacing:.1em;
 }
 #comments-block .comment-body p {
 margin:0 0 .75em;
 }
 .deleted-comment {
 font-style:italic;
 color:gray;
 }
 
 #blog-pager-newer-link {
 float: $startSide;
 }
 
 #blog-pager-older-link {
 float: $endSide;
 }
 
 #blog-pager { 
 text-align: center;
 }
 
 .feed-links {
 clear: both;
 line-height: 2.5em;
 }
 
 /* Sidebar Content
 ----------------------------------------------- */
 .sidebar { 
 color: $sidebartextcolor;
 line-height: 1.5em;
 }
 
 .sidebar ul {
 list-style:none;
 margin:0 0 0;
 padding:0 0 0;
 }
 .sidebar li {
 margin:0;
 padding-top:0;
 padding-$endSide:0;
 padding-bottom:.25em;
 padding-$startSide:15px;
 text-indent:-15px;
 line-height:1.5em;
 }
 
 .sidebar .widget, .main .widget { 
 border-bottom:1px dotted $bordercolor;
 margin:0 0 1.5em;
 padding:0 0 1.5em;
 }
 
 .main .Blog { 
 border-bottom-width: 0;
 }
 
 
 /* Profile 
 ----------------------------------------------- */
 .profile-img { 
 float: $startSide;
 margin-top: 0;
 margin-$endSide: 5px;
 margin-bottom: 5px;
 margin-$startSide: 0;
 padding: 4px;
 border: 1px solid $bordercolor;
 }
 
 .profile-data {
 margin:0;
 text-transform:uppercase;
 letter-spacing:.1em;
 font: $postfooterfont;
 color: $sidebarcolor;
 font-weight: bold;
 line-height: 1.6em;
 }
 
 .profile-datablock { 
 margin:.5em 0 .5em;
 }
 
 .profile-textblock { 
 margin: 0.5em 0;
 line-height: 1.6em;
 }
 
 .profile-link { 
 font: $postfooterfont;
 text-transform: uppercase;
 letter-spacing: .1em;
 }
 
 /* Footer
 ----------------------------------------------- */
 #footer {
 width:660px;
 clear:both;
 margin:0 auto;
 padding-top:15px;
 line-height: 1.6em;
 text-transform:uppercase;
 letter-spacing:.1em;
 text-align: center;
 }
 ]]></b:skin>
 </head>
 
 <body>
 <div id='outer-wrapper'><div id='wrap2'>
 
 
 
 <a href='#main'>skip to main </a> |
 <a href='#sidebar'>skip to sidebar</a>
 
 
 <div id='header-wrapper'>
 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
 <b:widget id='Header1' locked='true' title='Click F5 (Header)' type='Header'/>
 </b:section>
 </div>
 
 <div id='content-wrapper'>
 
 <div id='crosscol-wrapper' style='text-align:center'>
 <b:section class='crosscol' id='crosscol' showaddelement='no'/>
 </div>
 
 <div id='newsidebar-wrapper'>
 
 <b:section class='sidebar' id='newsidebar' preferred='yes'>
 <b:widget id='Profile2' 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>
 
 <div id='sidebar-wrapper'>
 <b:section class='sidebar' id='sidebar' preferred='yes'>
 <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
 <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
 </b:section>
 </div>
 
 
 <div class='clear'> </div>
 
 </div> 
 
 <div id='footer-wrapper'>
 <b:section class='footer' id='footer'/>
 </div>
 
 </div></div> 
 </body>
 </html>

டெம்ப்ளேட், மினிமா

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

மூன்று பத்தியாக மினிமா (Minima) டெம்ப்ளேட்

0 comments