අවශ්‍ය වූ විට පෙට්ටියක් තුලට අකුරු කොටු කිරීම

මේ ලිපියෙන් කියන්නට යන්නේ අපගේ බ්ලොග් ලිපි නිර්මාණයේදී ප්‍රයෝජනවත් වෙන කරුණක් පිළිබදවයි. ඔබට මතකද කලින් ලිපියේ සුළු වෙනසක් තිබුන බව. ඒ ගැන එතරම් මතකයක් හෝ දැනීමක් නැතිනම් මෙන්න ඒ ලිපිය නැවත පහසුවෙන්ම බැලීමට එහි සබැඳිය http://sathsamudura.blogspot.com/2012/07/blog-post_09.html.

ඔබ දැක්කද වෙනදා දකින පසුබිමට වඩා වෙනස් පැහැයකින් අකුරු කොටු කර තිබෙන බව. මේ කොටුවකට අකුරු කොටු කිරීම CSS පිළිබදව දන්නා අයට නම් මහ දෙයක් නොවෙයි. ඒත් ඒ ගැන වැටහීමක් නැතිනම් මෙහි දැක්වෙන සරළ ක්‍රියාකාරකම් ඔස්සේ ඔබගේ ලිපියේ යම් කැපී පෙනෙන තැනක අකුරු මේ වගේ කොටුවක දැක්වීම ටිකක් වෙනස් අත්දැකීමක් වේවි.

මේක ක්‍රම දෙකකට කරගන්නා ආකාරය කියන්නම්. මුල්ම ක්‍රමය තමයි Template Designer වල Add CSS වලදී CSS කේතය paste කර එම කේතයේ ක්‍රියාකාරීත්වය බ්ලොග් ලිපියේ අවශ්‍ය ස්ථානයේදී HTML editor mode එකේදී තවත් සුළු HTML කේතයක් තුලට අකුරු රැගෙන ඒමෙන් සිදුකිරීම. මේ සදහා CSS code Add CSS තුලට කේතය යෙදවීම සදහා ‍එම ස්ථානයට යන ආකාරය
බ්ලොගයේ අකුරු ලොකු පොඩි කරගන්න ලේසියි කියල හිතෙන උපක්‍රමයක්...

සහ 

පින්තූර වලට Bump Effect එකක් දෙන්න කැමතිද?

යන ලිපිවල තිබෙන නිසා එම මූලික පියවර මෙහිදීත් කියන්නට යන්නේ නැහැ. එම ස්ථානයට ඇලවිය යුතු කේතය සදහන් කරන්නම්. මෙම කේතය CSS class එකක් විදියට තියෙන නිසා ඕනෑම විටක නැවත නැවත ප්‍රයෝජනයට ගන්න පුළුවන්. හැබැයි එක අවාසියක් තිබෙනවා ඒ තමයි  ඒ සෑම අවස්ථාවකම ලැබෙන කොටුවේ තිබෙන්නේ එකම වර්ණය, රාමුවේ ඝනකම වගේ Properties ඒ ආකාරයෙන්මයි. ඔබට වෙනස් ආකාරයේ Box කිහිපයක් ලබා ගන්න නම් Box 1, Box 2 ලෙස සුළු සුළු වෙනස්කම් Properties වල සිදුකරන ලද කේත කොටස් කිහිපයක් අලවා ගන්නට සිදුවේවි මේ ක්‍රමයෙන් මෙම Box එක නිර්මාණය කරන විටදී නම්. මෙන්න කේතය ;

.box{
padding:5px 5px 5px 5px;/*Border සිට අකුරු වලට ඇති දුර*/
background-color:#FFFFCC;/*පසුබිම් වර්ණය*/
border: 2px double #336600;/*Border ඝනකම එහි ස්වභාවය හා වර්ණය*/
width:520px; /*මෙම Box එකේ පළල*/
}

මින් පසුව තිබෙන්නේ යම් ලිපියකදී ඔබට මෙම පෙට්ටිය තුලට අකුරු කොටු කරන්න ඕන ස්ථානයේදී මෙන්න මේ පියවර අනුගමනය කිරීමයි.

• අදාල ලිපියේදී Compose mode සිට HTML mode වෙත ගොස් අදාල ඡේදය ඇති ස්ථානයේ මුලට යන්න.

• එතනදී මෙම කේතය පිටපත් කරන්න‍.
  <div class="box"> මෙහිදී අවශ්‍ය ඡේදය සම්පූර්ණයෙන්ම paste කරන්න.</div>

‍

• මෙහි රතු පැහැයෙන් දිස්වන වචන වෙනුවට ඔබට අවශ්‍ය ජේදය අලවන්න. 

• දැන් Preview කළ විට ඔබගේ එම අවශ්‍ය ඡේදය හෝ කොටස ‍කොටුව තුල දිස්වනු ඇත.

මේ ක්‍රමය නැතුව ඔබට අවශ්‍ය මොහොතේදී ඒ ඒ අවස්ථාවට සුදුසු ආකාරයේ වෙනස් කම් ඇති box එකක් නිර්මාණය කර ගැනීමේ හැකියාවකුත් තිබෙනවා.

මෙන්න ඒ ක්‍රමයත්, මෙහිදී මුල් පියවරයන් වූ Add CSS සදහා කේතයක් එකතු කිරීම සිදුකරන්නේ නැහැ. මුලින්ම අදාල ලිපියේදී Compose mode සිට HTML mode වෙත ගොස් අදාල ඡේදය ඇති ස්ථානයේ මුලට යන්න.

දැන් මෙම කේතය එම ස්ථානයේ Paste කරන්න.

<div id="box" style="background-color: #cc66cc; border-color: #009900; color: #330066; padding: 5px 5px 5px 5px; width: 550px;">The text</div>

ඔබට අවශ්‍ය ආකාරයට රතු පැහැහෙන් දක්වා තිබෙන අගයන් වෙනස් කිරීම කළ හැකියි. ඒ වගේම The text ලෙස දම් පැහැයෙන් යුතු වචන වෙනුවට ඔබට කොටුව තුලට රැගෙන ඒමට අවශ්‍ය වචන යොදන්න.