ബ്ലോഗര്‍.കോം ഡിഫോള്‍ട്ടായി ലഭ്യമാക്കുന്ന രണ്ട് കോളങ്ങളുള്ള ലേഔട്ട് ടെംപ്ലേറ്റുകളാണ് സാധാരണയായി നാം ഉപയോഗിച്ചു വരുന്നത്. ടെംപ്ലേറ്റുകള്‍ നമ്മുടെ ഇഷ്ടാനുസരണം ക്രമീകരിക്കുവാനും മോടിപിടിപ്പിക്കുവാനും സാധിക്കുമെങ്കിലും അല്പം സാങ്കേതിക ജ്ഞാനം അതിനായി ആവശ്യമാണ്. ബ്ലൊഗിന്റെ രൂപഘടനയെ നമുക്കുതകുന്ന രീതിയില്‍ എങ്ങിനെ മാറ്റിയെടുക്കാമെന്ന് പടിപടിയായി വിവരിക്കുകയാണിവിടെ. മുന്‍‌കാലങ്ങളില്‍ ഏറെപ്പേരും ഉപയോഗിച്ചിരുന്ന 800 x 600 സ്ക്രീന്‍ റെസലൂഷന് അനുസൃതമായുള്ള വലുപ്പമാണ് രണ്ട് കോളം ടെംപ്ലേറ്റുകള്‍ക്കുള്ളത്. എന്നാലിന്ന് 1024 x 768 അല്ലെങ്കില്‍ അതിനു മുകളിലേക്കുള്ള വൈഡ് സ്ക്രീന്‍ റെസലൂഷനുകളാണ് കൂടുതലായി ഉപയോഗിച്ചുവരുന്നത്. ലഭ്യമായ സ്ക്രീന്‍ സ്പേസ് പ്രയോജനപ്പെടുത്തുവാനായി രണ്ടു കോളം ലേഔട്ടില്‍ നിന്നും മൂന്നു കോളത്തിലേക്ക് മാറുന്നത് ഏറെ പ്രയോജനകരമായിരിക്കും. എങ്ങിനെ മൂന്നു കോളം ടെംപ്ലേറ്റ് തയ്യാറാക്കാം എന്നതാണ് ഈ പോസ്റ്റില്‍ വിശദീകരിക്കുന്നത്.
Backup / Restore Template
|
|
ബ്ലോഗ് ടെമ്പ്ലേറ്റ് ഇഷ്ടാനുസരണം രൂപപ്പെടുത്തുവാന്‍ ഏറ്റവും എളുപ്പവും സൌകര്യവും Minima എന്ന ടെംപ്ലേറ്റില്‍ തുടങ്ങുന്നതാണ്. ബ്ലോഗര്‍ ഡാഷ്‌ബോര്‍ഡില്‍ Layout > Pick New Template എന്നിടത്തു നിന്നും Minima ടെംപ്ലേറ്റ് തിരഞ്ഞെടുക്കാവുന്നതാണ്. അതിനു ശേഷം തൊട്ടിടതുള്ള Edit HTML എന്ന ടാബ് സെലക്ട് ചെയ്യുക. എന്തെങ്കിലും മാറ്റം വരുത്തുന്നതിനു മുന്‍പായി Download Full Template എന്നതു സെലക്ട് ചെയ്ത് ഒരു *.xml ഫയലായി ഇപ്പോഴുള്ള രൂപകല്പന സൂക്ഷിക്കുന്നത് നന്നായിരിക്കും. എന്തെങ്കിലും തകരാറുണ്ടായാല്‍ തൊട്ടു താഴെയുള്ള Choose File സെലക്ട് ചെയ്ത് സേവ് ചെയ്ത ടെംപ്ലേറ്റ് ഫയല്‍ സെലക്ട് ചെയ്തതിനു ശേഷം Upload ചെയ്താല്‍ മുന്‍പുണ്ടായിരുന്ന ടെംപ്ലേറ്റ് തിരികെ ലഭ്യമാവും. നിങ്ങളുടെ യഥാര്‍ത്ഥ ബ്ലോഗ് ടെംപ്ലേറ്റ് എഡിറ്റു ചെയ്യുന്നതിലും നല്ലത്, മറ്റൊരു താത്കാലിക ബ്ലോഗ് തുടങ്ങി അതില്‍ ടെംപ്ലേറ്റ് രൂപപ്പെടുത്തിയതിനു ശേഷം, യഥാര്‍ത്ഥ ബ്ലോഗില്‍ ഉപയോഗിക്കുന്നതാവും.
ചിത്രത്തില്‍ കാണുന്നതുപോലെയാവും, ബ്ലോഗര്‍ ടെംപ്ലേറ്റ് ഇപ്പോള്‍ ദൃശ്യമാവുക. പോസ്റ്റുകള്‍ ദൃശ്യമാവുന്ന ഭാഗത്തിനു പുറമേ, ഒരു ഹെഡര്‍, വലതുവശത്തായി ആര്‍ക്കൈവ്, ലേബലുകള്‍ എന്നീ വിഡ്ജറ്റുകള് എന്നിവ കൂടി ചേര്‍ത്തിരിക്കുന്നതു കാണാം. Edit HTML എന്ന ടാബിലെത്തിയതിനു ശേഷം 'Expand Widget Templates' എന്ന ചെക്ക്ബോക്സ് ആദ്യമായി ടിക്ക് ചെയ്യുക. ടെംപ്ലേറ്റ് കോഡ് ലഭ്യമായ ഭാഗം സ്ക്രോള്‍ ചെയ്ത്, header-wrapper എന്നതിലെത്തുക.
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
ഇവിടെ width എന്നതിന്റെ വിലയായി 900px എന്നു നല്‍കുക. വീണ്ടും സ്ക്രോള്‍ ചെയ്ത് താഴെക്കാണുന്ന കോഡിലെത്തുക.
#outer-wrapper {
width:660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
ഇവിടെയും width എന്നതിന്റെ വിലയായി 900px എന്നു നല്‍കുക. 1024px ലഭ്യമാണെങ്കിലും, ഇരുവശത്തും അല്പം സ്ഥലം മിച്ചമിടുന്നതാണ് ലേഔട്ടിന് ഭംഗി നല്‍കുക, അതിനാലാണ് 900px എന്ന വില ഉപയോഗിക്കുന്നത്. വീണ്ടും സ്ക്രോള്‍ ചെയ്ത് താഴെയെത്തുമ്പോള്‍ #main-wrapper, #sidebar-wrapper എന്നിവ കാണപ്പെടും. ഇവയില്‍ ചില ചില്ലറ മാറ്റങ്ങള്‍ വരുത്തേണ്ടതുണ്ട്. താഴെക്കാണുന്ന രീതിയില്‍ ഇതുരണ്ടിലേയും വിലകള്‍ ക്രമീകരിക്കുക.
#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 */
margin-left:25px;
margin-right:25px;
}
#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 */
}
ഇതിനു താഴെയായി മറ്റൊന്നു കൂടി, #new-sidebar-wrapper എന്ന പേരില്‍ ചേര്‍ക്കുക.
#new-sidebar-wrapper{
width: 220px;
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 */
}
ഇപ്പോള്‍ #new-sidebar-wrapper എന്ന പേരില്‍ പുതിയൊരു കോളം ഡിഫൈന്‍ ചെയ്തു. അത് ലേ-ഔട്ടിലേക്ക് ചേര്‍ക്കുകയാണ് അടുത്ത പടി. വീണ്ടും താഴെക്ക് സ്ക്രോള്‍ ചെയ്ത് താഴെക്കാണുന്ന ഭാഗം കണ്ടെത്തുക.
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
...
ഇതിനു തൊട്ടു മുകളിലായി, പുതുതായുണ്ടാക്കിയ #new-sidebar-wrapper ഉപയോഗിക്കുന്ന ഒരു div കൂടി നല്‍കുക.
<div id='new-sidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
ശ്രദ്ധിക്കുക: ബ്ലോഗില്‍ മുന്‍പു തന്നെ ഒരു പ്രൊഫൈല്‍ വിഡ്ജറ്റ് ചേര്‍ക്കപ്പെട്ടിട്ടുണ്ടെങ്കില്‍ ഇവിടെ പിശകു കാണിക്കും. തുടക്കത്തില്‍ സൂചിപ്പിച്ചതുപോലെ; ആര്‍ക്കൈവ്, ലേബലുകള്‍ എന്നീ വിഡ്ജറ്റുകള് മാത്രമേ ബ്ലോഗില്‍ ചേര്‍ത്തിരിക്കുവാന്‍ പാടുള്ളൂ.
എങ്ങിനെയാണ് ഇവിടെ ഓരോന്നിലേയും width വിലകള്‍ ലഭ്യമായെതെന്ന് നോക്കാം. നമുക്ക് ആകെ ലഭ്യമായ വീതി 900px. (#header-wrapper, #outer-wrapper എന്നിവയില്‍ നല്‍കിയത്.) അതില്‍ ബ്ലോഗ് പോസ്റ്റുകള്‍ കാണിക്കുവാനുള്ള നടുഭാഗത്തിന് (#main-wrapper) 410px വീതി നല്‍കി. ഇരുവശവുമുള്ള കോളങ്ങള്‍ക്ക് (#sidebar-wrapper, #new-sidebar-wrapper) 220px വീതമാണ് വീതി, ആകെ 440px. മിച്ചമുള്ള 50px നടുഭാഗത്തിന് അപ്പുറവുമിപ്പുറവും 25px വീതം മാര്‍ജിനായി ഉപയോഗിച്ചു. ഇതേ രീതിയില്‍ മൊത്തം വീതി ഇഷ്ടാനുസരണം കൂട്ടുകയോ കുറയ്ക്കുകയോ ചെയ്തതിനു ശേഷം, മൂന്ന് കോളങ്ങളുടേയും വീതിയും മാര്‍ജിനും ക്രമീകരിച്ച് പല രീതിയില്‍ ലേഔട്ട് രൂപപ്പെടുത്താവുന്നതാണ്. ഇഷ്ടാനുസരണം float എന്ന വേരിയബിളിന്റെ വില മാറ്റി നല്‍കിയും ലേഔട്ടില്‍ വ്യത്യസ്തത കൊണ്ടുവരാം. ഒരു ഉദാഹരണം; #main-wrapper എന്നതിലെ float വില right എന്നും, #sidebar-wrapper, #new-sidebar-wrapper എന്നിവയുടെ രണ്ടിന്റേയും വില left എന്നും നല്‍കി നോക്കൂ. PREVIEW എന്ന താഴെക്കാണുന്ന ബട്ടണില്‍ അമര്‍ത്തിയാല്‍ ലേഔട്ട് എങ്ങിനെയാവും ഒടുവില്‍ ലഭ്യമാവുക എന്നത് ബ്ലോഗില്‍ പ്രയോഗിച്ച് താത്കാലികമായി കാണാവുന്നതാണ്. ഫലം തൃപ്തികരമെങ്കില്‍ SAVE TEMPLATE എന്ന ബട്ടണില്‍ ക്ലിക്ക് ചെയ്ത് ടെംപ്ലേറ്റ് സേവ് ചെയ്യുകയും ബ്ലോഗ് ലേഔട്ടായി ഉപയോഗപ്പെടുത്തുകയും ചെയ്യാവുന്നതാണ്.
ചില്ലറ മിനുക്കുപണികള്‍ കൂടി ഇതോടൊപ്പം നമുക്ക് ചെയ്യാവുന്നതാണ്. ഒന്നാമതായി, മുകളിലായി കാണുന്ന ബ്ലോഗര്‍ നാവിഗേഷന്‍ ബാര്‍ ഒഴിവാക്കുവാന്‍ എന്തുചെയ്യണമെന്നു നോക്കാം. തുടക്കത്തില്‍ നാം വ്യത്യാസപ്പെടുത്തിയ #header-wrapper എന്നതിനു മുകളിലായി താഴെക്കാണുന്ന കോഡ് ചേര്‍ത്താല്‍ മാത്രം മതി ഇതു സാധ്യമാകുവാന്‍. മറ്റൊരു അവസരത്തില്‍ നാവിഗേഷന്‍ ബാര്‍ തിരികെ വേണമെന്നു തോന്നിയാലോ, ഇത്രയും ഭാഗമങ്ങ് ഡിലീറ്റ് ചെയ്യുക.
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
അടുത്തതായി നമുക്കിഷ്ടമുള്ള ഒരു ഫേവ്‌ഐക്കണ്‍ (Favicon) ബ്ലോഗിലെങ്ങിനെ ചേര്‍ക്കാമെന്നു നോക്കാം. താഴെക്കാണുന്ന കോഡ് വളരെ തുടക്കത്തില്‍ തന്നെ ലഭ്യമായ <title><data:blog.pageTitle/></title> എന്നതിനു തൊട്ടുതാഴെയായി നല്‍കുക.
<link rel="shortcut icon" type="image/ico" href="Favicon URL"/>
Facicon URL എന്ന സ്ഥാനത്ത് നിങ്ങളുടെ ഐക്കണ്‍ ചിത്രത്തിന്റെ വെബ് അഡ്രസ് ചേര്‍ക്കുക. (ഉദാ: http://www.yoursite.com/favicon.jpg) 16x16 വലുപ്പത്തിലുള്ള JPEG, GIF, PNG ചിത്രങ്ങളൊക്കെയാണ് ഇതിനായി ഉപയോഗിക്കാവുന്നത്. എന്റെ ബ്ലോഗുകളില്‍ (ഉദാ: ഈ ബ്ലൊഗിന്റെ തന്നെ ഫേവ്‌ഐക്കണ്‍ ശ്രദ്ധിക്കുക.) കാണുന്ന രീതിയില്‍ ‘മ’ എന്ന ഐക്കണ്‍ ലഭിക്കുവാന്‍ താഴെക്കാണുന്ന കോഡ് ഉപയോഗിച്ചാല്‍ മതിയാവും.
<link rel="shortcut icon" type="image/png" href="http://sites.google.com/site/sankethikam/34_three-column-templates/ma_icon.png"/>
ആവശ്യമെങ്കില്‍ ടെംപ്ലേറ്റ് ഇവിടെ നിന്നും ഡൌണ്‍ലോഡ് ചെയ്യാവുന്നതാണ്.
Description: Tutorial on adding a third column to your blogger template. Creating a new layout by adding a third column. Blogger three-column template tutorial. Changing two-column Minima template to three-column MInima template. Customizing blogger templates. How to remove the Navbar from a blog and how to include a Favicon to a blog are also mentioned. An article by Hareesh N. Nampoothiri aka Haree | ഹരീ for Sankethikam (Sangkethikam) Blog.
--
