හැමෝටම තේරෙන්න සරලවම කියන්නම්, වැඩ දන්න අයටනම් කියල තියන විදිය දැක්කහම හිනා යයිද දන්නෑ. මුලින්ම මේ පහල තියන තඩි code එක copy කරගන ඒක Text Editor එකේ save කරගන්න. ඒක දිග උනාට ගනන් ගන්න එපා, ඒකෙ එච්චර දෙයක් නෑ.
දැන් කරන්න තියෙන්නෙ document එක .html විදිහට save කරගන්න එක. එහෙම කරන්නනම් File --> Save As ගිහින් නම අගට .html දෙන්න විතරයි තියෙන්නෙ. දැන් Browser එකක Open කරල බලන්න Menu Bar එක පේනවද කියල. පොතේ හැටියටනම් පේන්න ඕන. ඊට පස්සෙ කරන්න තියෙන්නෙ තමන්ට ඕන විදිහට Edit කරගන්න එක. මම එක උදාහරනයක් දෙන්නම්කො, code එක බැලුවොත් ඔයාලට පහල තියන පේළිය වගේ පේළි ගොඩක් පෙනෙයි.
<a href="#" title="test title"><span>Blogger Tips</span>
දැන් ඔය "#" තියන තැන් වලට ඔයාගෙ සටහනේ Link එක දෙන්න, "test title" තියන තැන් වලට සටහන අදාල Title එකක් දෙන්න, එතකොට mouse එක ඒක උඩට ගෙනිච්චහම අපි දීපු title එක පෙන්නනව. උඩින්ම තියන රූපෙ බැලුවොත් පෙනෙයි. "Blogger Tips" කියන්නෙ අපිට පේන නම, ඒකත් ගැලපෙන විදිහට දෙන්න. ඔය විදිහට edit කලහම මෙන්න මේ වගේ එකක් එන්න ඕන, මේ විදිහට ඔයා හැම Link එකක්ම edit කර ගන්න. CSS එහෙම දන්නවනම් ඔයාට කැමති විදිහට styles වෙනස් කරගත්තට මගෙ කිසිම තරහක් නෑ.
<a href="http://www.google.com" title="ගූගල් වලින් සොයන්න"><span>සොයන්න</span>
දැනට ගානට යනව නේද? දැන් තමයි හරියටම වැඩේට බහින්න යන්නෙ. ඔයාගෙ බ්ලොග් එකට Log වෙලා "Edit HTML" පිටුවට යන්න, එතකොට මේ වගේ එකක්නෙ එන්නෙ.
දැන් මුලින්ම කරන්න ඕන දේ තමයි දැනට තියන template එක download කරල save කරගන්න එක, මොකද කොච්චර වැඩ දන්න ඩයල් එකක් උනත් template එක අවුල් ගියොත් ගොඩ ගන්න අමාරු වෙන්න පුලුවන්.
දැන් මම කියල දෙන පියවරවල් ටික ඒ විදිහට කලොත් ලේසියෙන්ම Menu Bar එක දා ගන්න පුලුවන්,
1. ඔයාගෙ template එකේ "b:section class='header'" කියල එකක් තියනවද බලන්න, ඒකට කරන්න තියෙන්නෙ Ctrl + F ගහල Find කරන එක. එහම එකක් නෑම කියනවනම් "maxwidgets" කියල එකක් තියනවද බලන්න. "maxwidgets" ගොඩ සැරයක් තියනවනම් "header" වචනෙ අහල පහල තියන පේළිය තෝරගන්න.
2. දැන් maxwidgets තියන ගානට වඩා දෙකක් වැඩි කරන්න, ඒ කිව්වෙ "1" තියනවනම් "3" දෙන්න. ඒත් එක්කම showaddelement වල "no" තිබ්බොත් "yes" කරන්න. උදාහරණයක් විදිහට මේ වගේ එකක් තමයි අන්තිමට තියෙන්න ඕන. (maxwidgets='3' showaddelement='yes')
3. දැන් template එකේ </head> තියන තැන කලින් විදිහටම හොයාගන්න. ඊට පස්සෙ කරන්න තියෙන්නෙ අපි අර කලින් save කරගත්තු .html file එකේ styles ටික copy කර ගන්න එක. ඒකෙ <style type="text/css"> ඉඳන් </style> වෙනකන් copy කරගන්න. මතක ඇතුව ඒ කෑලි දෙකත් එක්කම copy කරගන්න ඕන. ඊට පස්සෙ අර හොයාගත්තු </head> තියන තැනට උඩින් ඒටික paste කරන්න.
4. දැන් අපි වැඩේ ගොඩක් දුරට ඉවරයි. Template එක save කරල බලන්න අවුලක් නෑ නේද කියල. Save කරන්න බෑ අවුල් තියනව කියල කිව්වොත් කලබල නැතිව ආයෙ පාරක් බලන්න කොතනද අවුල කියල.
5. ඊට පස්සෙ කරන්න තියෙන්නෙ "HTML/JavaScript" ගැජට් එකක් Headder එකට දාගන්න එක. ඒකනම් ඉතින් සුපුරුදු විදියම තමයි, වෙනසකට තියෙන්නෙ මේපාර දාන්නෙ Header එකට වීම. Layout ගිහින් Header එකට උඩින් තියන "Add a Gadget" යන්න. මේ රූපෙත් බලලම ඉන්නකො.
6. දැන් අපි අර කලින් save කරගත්තු .html file එකේ <body> සහ </body> කියන code කෑලි ඇතුලෙ තියන ටික gadget එකේ content එකට දෙන්න. ඊට පස්සෙ save කරල බ්ලොග් එක බලන්න අලුතින් දාගත්තු Menu Bar එක වැඩද කියල.
ඔන්න මගේ පළවැනි සටහන මෙතනින් ඉවර කරන්නයි යන්නෙ. කොතන හරි තේරෙන්නෙ නැති තැනක් තියනවනම් අහන්න ඕන හොඳද. සටහන ගැන අදහසකුත් දීලම ගියානම් තමයි හොඳ, මොකද මේක මම මුලින්ම ලියපු එකනෙ. ඔබට ජය !
Posts
පට්ට
ReplyDeleteඑල කොල්ලෙක්නේ... දිගටම ඔහොම යං
ReplyDelete@ Koombiya, උකුස්සා
ReplyDeleteප්‍රතිචාර වලට තුති...
සාරංග මල්ලි, මම නම් මේ වැඩ කිඩ එච්චර දන්නෙ නැහැ. ඒත් මේ උපදෙස් පියවරෙන් පියවර පිළිපැදලා menu bar එකක් මගේ සිංහල blog එකට වැඩි අපහසුවක් නැතිව දාගත්තා. බොහොව ස්තූතියි!
ReplyDelete@ Sujeewa,
ReplyDeleteඔය තියෙන්නෙ නියමෙට,
ඕකෙ styles වල #d8d8d8 තියන තැන් වලට #445566 දැම්මොත් ඔයාගෙ theme එකට ගොඩක් ගැලපෙයි.
@Saranga
ReplyDeleteඒකත් කළා. ඔය තියෙන්නෙ දැන් ගින්දර වගේ. ස්තූති කරන්න වචන නැහැ.
@ sujeewads,
ReplyDeleteතව දෙයක් අමතක උනානෙ, mouse එක උඩට ගෙනිච්චහම අකුරු පේනව අඩුයිනෙ, ඒකට කරන්න ඕන #eeeeee තියන තැන් දෙකට #aabbaa දාන එක. එතකොට වැඩේ පට්ටම පට්ට.
@Saranga
ReplyDeleteමල්ලි, ඒකත් හරි දැන්. වැඩේ පට්ටම පට්ටමදත් අහනව. ගොඩේ ගොඩ. මෙච්චර උදව් කළාට ගොඩක් පිං!
@ Sujeewa,
ReplyDeleteඔය තියෙන්නෙ නියමෙට, මටත් සතුටුයි උදවු කරන්න ලැබීම ගැන.
පට්ට
ReplyDeleteපට්ට
ReplyDelete@ Anonymous , බුද්ධි
ReplyDeleteප්‍රතිචාරයක් දුන්නට ගොඩක් ස්තූතියි.. !