TuTe පංතිය: Blogger Template Design කරමු (2)

ඔක්කොටම කලින් මේ tut එකේ පළමුවැනි කොටස බැලුවෙ නැත්නම් මෙතනින් ගිහින් බලන්න.

<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>

මම හිතනවා ඔයාලා මේ code 1 දාලා බලන්න ඇති කියලා. වැඩේ හරිනම් ඔයාලගේ post ටිකත් preview එකේ පෙන්නන්න ඕනේ. ( උඩ තියෙන රූපය වගේ ) ටිකක් අපිළිවෙලයි නේද? ගණන් ගන්න එපා පස්සේ CSS Use කරලා ඕක පිළිවෙල කල හැකියි. දැන් අපි තව section දෙකක් add කරමු. <body> සහ </body> අතරට මේ code එක දාලා බලන්නකෝ.

<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelements='yes'>
<b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>

<b:section class='footer' id='footer' maxwidgets='' showaddelements='yes'>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>

පළමු වැනි section එකෙන් අපි define කරලා තියෙන්නේ sidebar එකයි. ඒ වගේම අපි ඒකට BlogArchive, Profile කියන widget දෙක add කරලා තියෙනවා. දෙවැනි එක footer section එක. (footer එක අවශ්‍ය නැත්නම් ඒක delete කරලා දාන්න.

දැන් ඉතින්

කියන එක click කරලා template එක save කරන්න.

සමහර විට widget වගයක් delete කරන්න ඕනේද කියලා අහයි. Delete Widget කියන එක click කරලා කැමතිනම් Widget delete කරන්න. නැත්නම් Keep Widget කියන එක click කරලා Widget ටික use කරන්න.

දැන් Editor එක close කරලා Blogger Dashboard එකේ Layout කියන එක click කරන්න. හ්ම් දැන් ඉතින් ඔයාලට කැමතිනම් Gadget එහෙම add කරගන්න පුළුවන්. ඒ වුනාට දැන්ම ඕවා add කරන්න යන්න එපා පස්සේ add කරමු.

දැන් තියෙන්නේ මේකට CSS use කරලා Layout එක ලස්සනට හදාගන්න. ඊට කලින් තව පොඩි වැඩක් කරන්න තියෙනවා. මේකේ තියෙන Section ටිකත් අපිට ලේසි වෙන විදිහට group කර ගන්න ඕනේ. ඒකට අපිට HTML වල එන <div> කියන tag එක use කරන්න පුළුවන්. ඔය පල්ලෙහා තියෙන් රූපය පොඩ්ඩක් බලලා දල අදහසක් ගන්නකෝ.

මේකේදී අපි කරන්නේ සියලුම section ටික outer-wrapper කියව <div> එකටත්, main,sidebar කියන section දෙක content-wrapper කියන <div> එකටත් group කරගන්නවා. දැන් <body> සහ </body> කියන tag ඇතුලේ මෙන්න මේ code එක තිබිය යුතුයි.

<body >
<div id='outer-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Another testing (Header)' type='Header'/>
</b:section>
  
<div id='content-wrapper'>
<b:section class='main' id='main' maxwidgets='' showaddelements='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>

<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelements='yes'>
<b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

<b:section class='footer' id='footer' maxwidgets='' showaddelements='yes'>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>
</div>
</body>

අම්මෝ අදට ඇති වගේ? ඉතුරු ටික ඊළඟ post එකෙන් බලමු. පුළුවන් උනොත් අද රෑම දාන්නම්. :D කොමෙන්ටුවක් දාලා යන්න අමතක කරන්න එපා හොඳේ.