Customizing Blogger Widgets : Blogger විජ්ට්ටු වෙනස් කිරීම

අපේ බ්ලොග් අඩවියට ඒකාකාර තේමා යොදාගන්නේ නැතුව තමන්ටම කියලා වෙනස් තේමාවක් යොදාගන්න හැමෝම ආසයි. ඒක නිසා සාමාන්‍යයෙන් මාස කිහිපයකට සැරයක් අළුත් තේමාවක් හොයාගෙන බ්ලොග් අඩවියට යොදා ගන්නවා. මේම තේමා තව දුරටත් unique කර ගැනීමට අපට ක්‍රම කිහිපයක් තිබෙනවා. Header image එක වෙනස් කිරීම, අකුරු වල පාට වෙනස් කිරීම, අපේම images යොදාගැනීම වැනි ක්‍රම අත්හදා බැලිය හැකියි.
මෙම සටහනින් කියාදෙන්නේ Blogger (xxxxx.blogspot.com) අඩවියක ඇති විජට්ටුවක් (Widget), CSS යොදාගනිමින් customize කර ගැනීමයි. මේ සඳහා මුලින්ම ඔබේ බ්ලොග් අඩවියට log වී (http://www.blogger.com/home) එහි Dashboard එකේ ඔබට Widget customize කිරීමට අවශ්‍ය බ්ලොග් එක යටින් ඇති Layout මත click කරන්න.
දැන් පැමිණෙන පිටුවේ Edit HTML මත click කරන්න. අපි දැන් කරන්නේ කේත වෙනස් කිරීමක් නිසා යම් හෙයකින් වැරදුනොත් නැවත මුල සිට පටන් ගැනීම සඳහා දැනට පවතින template එක බාගත කර backup කර ගැනීම වටිනවා. මේ සඳහා Download full template මත click කර එයින් ලබා දෙන xml ගොනුව ආරක්ෂිතව බාගත කර ගන්න. ඉන්පසුව HTML කේත උඩින් ඇති Expand Widget Template check box එක check කරන්න.

ඉන්පසුව බ්‍රව්සරයේ search/find dialog box එක විවෘත කරගෙන ඔබේ විජට්ටුවේ නමින් search කරන්න. උදාහරණයක් ලෙස මට මගේ බ්ලොග් එකේ ඇති “කියවන්න” විජට්ටුව සඳහා search කිරීමක් කල හැකියි. එවිට පහත ආකාරයේ ප්‍රථිපලයක් සඳහා සොයන්න.
මෙහි id attribute සඳහා ඇති value එක copy කර ගන්න. අප කරන්න යන්නේ ඒ නමින්ම CSS id selector එකක් සෑදීමයි.
ඒ සඳහා පහත සඳහා කේත කොටස සඳහා search කර එම ස්ථානයට යන්න.

[xml]
]]>
[/xml]

ඉන්පසුව ‍ඉහත කේත කොටසට උඩින් පහත ආකාරයට ඔබේ විජට්ටුවේ නමින් id selector එකක් සාදාගන්න. මට මෙහිදී අවශ්‍ය වන්නේ “කියවන්න” විජට්ටුවේ අකුරු වල පාට වෙනස් කිරීමයි.

[css]
#BlogList1{
color: #cccccc;
text-align:justify;
}
[/css]

ඉහත කේත කොටස ඇතුලත් කල යුත්තේ ]]></b:skin> කොටසට ඉහලින් ඇති අන්තිම කොටස ලෙසටයි.
මෙම id selector එක සඳහා ඔබට අවශ්‍ය ඕනෑම CSS විධාන ලබා දිය හැක. CSS නිවැරදිව යොදාගැනීමට W3Schools CSS Tutorial එකට යොමුවන්න.

ඔබට අවශ්‍ය වෙනස් කම් කර දැන් template එක save කරගත හැකියි. මේ ආකාරයට අවශ්‍ය ඕනෑම විජට්ටුවක් customize කර ගැනීමට එම විජට්ටුවේ id එක නමින් CSS id selector එකක් පාවිච්චි කිරීමට හැකියි.

3 thoughts on “Customizing Blogger Widgets : Blogger විජ්ට්ටු වෙනස් කිරීම

  1. බොහොම වැදගත් ලිපියක්, මොකද මමත් මගේ ටෙම්ප්ලේට් එකත් එක්ක නිතරම ඔට්ටු වෙන කෙනෙක්.

  2. මාත් ඔහොම සෙල්ලං දාල තමයි මගේ එකත් හදාගත්තේ. wide screen එකේ හදපු නිසා පොඩි අවුලක් තියෙනවා. ආයිම බලන්න ඕන. බැකප් කරල ඕන තරම් වෙනස් කරල බලන්න වැරදුනොත් බැකප් එක පිහිටයි!!

  3. මාත් ඔය ඔට්ටු මිට්ටු තියලා තමා දෙකම හදා ගත්තේ. එකක් නම් අල තමා.