blog template එකක් design කරන්න තියෙන ලේසිම ක්‍රමය තමයි Artisteer වගේ software එකක් use කරන එක. ඒ වගේම පොඩි HTML/ CSS දැනුමක් තියෙනව නම් තමන්ගේම කියලා blog template එකක් design කරන එක හරිම ලේසියි. මම මෙම tut එකෙන් කියලා දෙන්න යන්නේ මේ දෙවැනි ක්‍රමය. දැන් ඉතින් මට css මෙලෝ සංසාරයක් බෑ කියලා වැඩේ අතහරින්න එපා. මටත් HTML/CSS ගැන ලොකු දැනුමක් නෑ. ඒත් යමක් කමක් කරගන්න පුළුවන්. HTML/CSS බැරිනම් පොඩ්ඩක් w3schools.com එක පැත්තේ පොඩි රවුමක් දාලා එන්නකෝ. මමත් ඉගෙන ගත්තේ ඒකෙන් තමා. (ඉදිරියේදි HTML/CSS පිළිබඳවත් පොඩි tut එකක් දාන්න හිතේ තියෙනවා. ඒක ඉතින් ඔයාලගේ අදහස් අනුව තමා තීරණය වෙන්නේ)
ඉස්සෙල්ලාම ඔයාලගේ blogger account එකට log වෙලා ඔය වැඩක් නැති නමක් දාලා blog එකක් හදන්නකෝ. ඊළඟට test කරන්න පොඩි post 2,3 දාන්න. blog template එක විදිහට simple blog template එකක් තෝරන්න.
දැන් templates කියන එකේ Edit HTML යන්න තෝරන්න.
දැන් ඔය ලැබෙන template editor එකේ තියෙන code ටික delete කරන්නකෝ. දැන් ඔය පල්ලෙහා තියෙන code එක copy කරලා template editor එකේ paste කරලා preview කියන button එක click කරන්න.
<?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[]]></b:skin>
</head>
<body>
</body>
</html>
හ්ම් මොකක්ද එන error එක.We did not find any section in your template. A template must have at least one b:section tag.Error 500
මේකයි අපි තාම මේකේ section එකක් define කරලා නෑ. ඒකයි අවුල. මේ රූපේ දිහා පොඩ්ඩක් බලන්කෝ.
මම හිතන්නේ section එකක් කියන්නේ මොකක්ද කියලා තේරෙන්න ඇති. section එක්ක use කරන්නේ blogger template එක කොටස් වලට වෙන් කරගන්න. උදාහරණයක් විදිහට tutslanka blog template එකේ section 4ක් use කරලා තියෙනවා.(header,main,footer and sidebar) මේ section එකක් ඇතුලේ විතරයි අපිට widget එකක් use කරන්න පුළුවන්. හරි දැන් අපි section එකක් define කරමු. <body>...</body> tag දෙක ඇතුලේ මේ code එක paste කරලා preview button එක click කරලා බලන්න. (මතක තියාගන්න template එක edit කරාට පස්සේ save කරන්න කලින් preview කියන එක click කරලා බලන්න code එක හරියට වැඩද කියලා...)
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'> </b:section>
දැන්නම් අර අවුල නෑ නේද ? ඒත් ඉතින් මොකුත් නෑ සුදු පාට page එකක් විතරයිනේ තියෙන්නේ නේද ? අපි තාම මේකට widget add කරේ නෑ. ඒකයි ඔය සුදු පාට හිස් page එකක් පේන්නේ.
"section එකක් define කරද්දී class and id කියන එකට "section එක හඳුනගන්න පුළුවන් විදිහේ කැමති නමක් දෙන්න. id and class කියන දෙකටම එකම නමක් දෙනවනම් පැටලෙන එක අඩුයි."
පලමු widget එක දාමු
<b:section..... සහ </b:section> එක අතරට මේ code එක add කරන්න.
<b:widget id='Header1' locked='true' title='Testing Header' type='Header'/>
"මෙහිදී මතක තියාගන්න id and type කියන එකට කැමති නමක් දාන්න බෑ. මෙන්න මේවා තමයි widget type
- BlogArchive
- Blog
- Feed
- Header
- HTML
- SingleImage
- LinkList
- List
- Logo
- BlogProfile
- Navbar
- VideoBar
- NewsBar
id කියන එකට type එකේ නමම දැමිය යුතුයි. ඒ වගේම අගට 1,2...ආදි වශයෙන් යෙදිය යුතුයි.
උදාහරණයක් ලෙස HTML widget එකක් add කරනවනම් code 1 මේකයි.
<b:widget id='HTML1' locked='true' title='Testing HTML' type='HTML'/>
තව HTML widget එකක් add කරනවනම් එකේ id එක 'HTML2' ලෙස විය යුතුයි.
මම හිතන්නේ ඔයාලා preview button එක click කරලා බලන්න ඇති නේද? තාම වෙනසක් නෑනේ. මේකයි ඒකට හේතුව නම් මම දන්නේ. blogger template එකක අඩුම තරමේ section දෙකක්වත් තියෙන්න ඕනේ. දැන් මේ code එකත් <body> සහ </body> අතරට දාලා බලන්නකෝ.
<b:section class='main' id='main' maxwidgets='' showaddelements='yes'> <b:section>
දැන් preview එක click කරලා බලන්න. වැඩේ ගොඩ නේද? ඔයාලගේ title එක preview එකේ පෙන්නනවා නේද. හරි ගියේ නැත්තම් complete code 1 මෙන්න. හරිද කියලා බලන්නකෝ.
<?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[]]></b:skin> </head> <body> <b:section class='header' id='header' maxwidgets='1' showaddelement='yes'> <b:widget id='Header1' locked='true' title='Another testing (Header)' type='Header'/> </b:section> <b:section class='main' id='main' maxwidgets='' showaddelements='yes'> </b:section> </body> </html>
Blog ලියන එකත් ලේසි වැඩක් නෙමෙයි වගේ. ඔක්කොටම හපන් සිංහලෙන් කොටන්නඩනේ එපා වෙන්නේ. :D යන්න කලින් තව code එකක් දීලාම යන්නම්කෝ. main section එක ඇතුලේ මේ code එක දාලා බලන්නකෝ.
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>එහෙනම් ඊළඟ post එකෙන් meet වෙමු. කොමෙන්ටුවක් දාලා යන්න අමතක කරන්න එපා හොඳේ.
Blogger Template එකක් Design කරමු (2)
:)
:(
;)
:D
;;-)
:-/
:x
:P
:-*
=((
:-O
X(
:7
B-)
:-S
#:-S
7:)
:((
:))
:|
/:)
=))
O:-)
:-B
=;
:-c
:)]
~X(
:-h
:-t
8-7
I-)
8-|
:-a
:-$
[-(
:O)
8-
2:-P
(:|
=P~
#-o
=D7
:-SS
@-)
:^o
:-w
7:P
2):)
X_X
:!!
\m/
:-q
:-bd
^#(^
:ar!
menna magen comment ekak saho.. ela wedak digatama kragena yanna...
ReplyDelete1st comment එක දැම්මට ස්තූතියි සහෝ. ලොකු හයියක්
DeletePatta Machan...
ReplyDeletethnx machn
Deleteniyamai saho,danne nathi apita loku haiyak
ReplyDeletethnx saho.ඔයාගේ ඔය වචන ටික ලොකු හයියක් මට මේක දිගටම කරගෙන යන්න.
DeleteWaaaaaaaaw ela ela..
ReplyDeleteela ela
ReplyDelete