ബ്ലോഗര്‍.കോം ഡിഫോള്‍ട്ടായി ലഭ്യമാക്കുന്ന രണ്ട് കോളങ്ങളുള്ള ലേഔട്ട് ടെംപ്ലേറ്റുകളാണ് സാധാരണയായി നാം ഉപയോഗിച്ചു വരുന്നത്. ടെംപ്ലേറ്റുകള്‍ നമ്മുടെ ഇഷ്ടാനുസരണം ക്രമീകരിക്കുവാനും മോടിപിടിപ്പിക്കുവാനും സാധിക്കുമെങ്കിലും അല്പം സാങ്കേതിക ജ്ഞാനം അതിനായി ആവശ്യമാണ്. ബ്ലൊഗിന്റെ രൂപഘടനയെ നമുക്കുതകുന്ന രീതിയില്‍ എങ്ങിനെ മാറ്റിയെടുക്കാമെന്ന് പടിപടിയായി വിവരിക്കുകയാണിവിടെ. മുന്‍‌കാലങ്ങളില്‍ ഏറെപ്പേരും ഉപയോഗിച്ചിരുന്ന 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.
--
മൊബൈല്‍ ഫോണുകള്‍ സംസാരിക്കുവാനും, മെസേജുകള്‍ അയയ്ക്കുവാനും എന്ന സങ്കല്പം ഇന്ന് വളരെ മാറിയിരിക്കുന്നു. ക്യാമറ, എം.പി.3 പ്ലയര്‍, വീഡിയോ പ്ലെയര്‍, റിക്കാര്‍ഡര്‍, വൈ-ഫൈ, ബ്ലൂടൂത്ത് എന്നിങ്ങനെ വളരെയധികം സൌകര്യങ്ങള്‍ ഇന്ന് മൊബൈല്‍ ഫോണുകളില്‍ ലഭ്യമാണ്. ക്യാമറ ലഭ്യമായ മൊബൈലുകളെ, ക്യാമറ ഫോണുകള്‍ എന്നും വിളിക്കാറുണ്ട്. CMOS സാങ്കേതിക വിദ്യ ഉപയോഗിച്ചാണ് ഇന്ന് ലഭ്യമായ ഭൂരിഭാഗം ക്യാമറ ഫോണുകളും പ്രവര്‍ത്തിക്കുന്നത്.
മെഗാപിക്സല്‍ ക്യാമറ ഫോണുകളുടെ കാര്യം പറയുകയാണെങ്കില്‍, 8 മെഗാപിക്സല്‍ ക്യാമറ ഫോണുകള്‍ വരെ ഇന്ന് വിപണിയില്‍ ലഭ്യമാണ്. (ഉദാ: സോണി എറിക്സണ്‍ C905; 3264x2448; 7990272 Effective Pixels; 7.99 മെഗാപിക്സല്‍) എന്നാല്‍ മെഗാപിക്സലുകള്‍ വളരെക്കൂടുതലുണ്ട് എന്നതുകൊണ്ടുമാത്രം ചിത്രങ്ങള്‍ മികച്ചതാവണമെന്നില്ല. ലഭ്യമായ സെന്‍സറുകളില്‍ എത്രയെണ്ണം ചിത്രം പകര്‍ത്തുവാനായി ഉപയോഗിക്കപ്പെടുന്നു(Effective Pixels) എന്നതിനും ഇവിടെ പ്രാധാന്യമുണ്ട്. അതായത് ലഭ്യമായ മുഴുവന്‍ സെന്‍സറുകളും ചിത്രം പകര്‍ത്തുന്നതിനായി ഉപയോഗിക്കപ്പെടണമെന്നില്ല. അരികുകളിലും മറ്റുമുള്ള സെന്‍സറുകള്‍ പലപ്പോഴും ഉപയോഗിക്കപ്പെടാറില്ല. എന്നാല്‍ മിക്ക ക്യാമറ ഫോണ്‍/ഡിജിറ്റല്‍ ക്യാമറ നിര്‍മ്മാതാക്കളും Total Pixels-ന്‌ അനുസൃതമായ മെഗാപിക്സല്‍ വിലയാവും ക്യാമറയുടെ വിവരണത്തില്‍ നല്‍കിയിരിക്കുക. അതിനാല്‍ ക്യാമറയില്‍ ലഭ്യമായ ഏറ്റവും കൂടിയ റെസലൂഷന് അനുസൃതമായ ഇഫക്ടീവ് പിക്സലുകള്‍ മനസിലാക്കിയതിനു ശേഷം ക്യാമറ വാങ്ങുവാന്‍ തീരുമാനിക്കുക.
പോയിന്റ്-ആന്റ്-ഷൂട്ട് ക്യാമറകള്‍ അഥവാ കോം‍പാക്ട് ക്യാമറകള്‍ വലുപ്പം കുറഞ്ഞ ഡിജിറ്റല്‍ ക്യാമറകളാണ്. സെന്‍സറില്‍ പതിയുന്ന, ലെന്‍സിലൂടെ കടന്നുവരുന്ന ചിത്രവും; വ്യൂഫൈന്‍ഡറില്‍ അല്ലെങ്കില്‍ എല്‍.സി.ഡി. സ്ക്രീനില്‍ കാണുന്ന ചിത്രവും തമ്മില്‍ ബന്ധമൊന്നുമില്ല എന്നതാണ് SLR ക്യാമറകളില്‍ നിന്നും ഇവയെ വ്യത്യാസപ്പെടുത്തുന്ന പ്രധാന ഘടകം. വ്യൂഫൈന്‍ഡറിലൂടെ കാണുന്ന ചിത്രം മറ്റൊരു ലെന്‍സിലൂടെ കടന്നുവരുന്നതാണെന്ന് സാരം. മിക്ക കോം‍പാക്ട് ക്യാമറകള്‍ക്കും ആട്ടോ-ഫോക്കസുള്ള ലെന്‍സുകളാവും ഉപയോഗിക്കുക. അകലെയുള്ള വസ്തുക്കളെ, നിലവാരം നഷ്ടപ്പെടാതെ പകര്‍ത്തുവാന്‍ സഹായിക്കുന്ന ഒപ്റ്റിക്കല്‍ സൂം എന്ന സാധ്യതയും ഇത്തരം ക്യാമറകളില്‍ ലഭ്യമായിരിക്കും. വിവിധ കളര്‍ മോഡുകള്‍, ഇഫക്ടുകള്‍, ക്യാമറയോട് ഘടിപ്പിച്ചിരിക്കുന്ന ഫ്ളാഷ്, റെഡ്-ഐ ഒഴിവാക്കുവാനുള്ള സം‍വിധാനം എന്നിവയൊക്കെയും സാധാരണയായി ഇത്തരം ക്യാമറകളില്‍ ഉണ്ടാകുവാറുണ്ട്. കാനന്‍ പവര്‍ഷോട്ട് IXUS 950 IS, സോണി സൈബര്‍-ഷോട്ട് W80 എന്നിവയൊക്കെ കോം‍പാക്ട് ക്യാമറകള്‍ക്ക് ഉദാഹരണങ്ങളാണ്. ഒരു ക്യാമറ ഫോണ്‍ എന്നതുപോലെ ഉപയോഗിക്കുവാന്‍ വളരെ എളുപ്പമാണ് എന്നതു തന്നെയാണ് ഇതിന്റെയും ജനപ്രീതിക്ക് കാരണം. ആട്ടോ മോഡില്‍ ചിത്രങ്ങളെടുത്താല്‍, ആ സാഹചര്യത്തില്‍ ലഭിക്കാവുന്ന മികച്ച ചിത്രം ക്യാമറ തന്നെ സെറ്റിംഗുകള്‍ ക്രമീകരിച്ച് പകര്‍ത്തുന്നതാണ്. ഇതുകൂടാതെ ചെറിയ രീതിയില്‍ മാനുവല്‍ ക്രമീകരണങ്ങള്‍ നടത്തുവാനും സാധ്യതയുള്ള കോം‍പാക്ട് ക്യാമറകള്‍ ഇപ്പോള്‍ പ്രചാരത്തിലുണ്ട്.