Home page එකේ සම්පුර්ණ blog posts පෙනෙන එක වෙනුවට, පොස්ට් එකෙන් කොටසක්, පින්තුරයක් හා read more button එකක් එකතු කරගමු.

ඔබ දන්නවා blogger default template වල Blog එකේ home page එකේ සම්පුර්නම බ්ලොග් පොස්ට් එක පේනවා. ඉතින් ඒ විදියට තියෙන එකෙන් ඔබේ බ්ලොග් එක load වෙන එකට ටිකක් slow වෙනවා. ඒ වගේම අපි වෙන විදියකට බැලුවොත් ඒ විදියට සම්පුර්නම පොස්ට් හෝම පේජ් එකේ පෙනෙන එකෙන් බ්ලොග් එකේ පිටු බැලූ අයගේ ප්‍රමාණයත් අඩුවෙනවා. මොකද බ්ලොග් එකට එන අයට පුළුවන් බ්ලොග් පොස්ට් ඔක්කොම හෝම් පේජ් එකේ ඉදල කියවන්න.

ඉතින් සමහර බ්ලොග් හෝම් පේජ් එකට එකට ගියහම ඔබ දැකලා ඇති බ්ලොග් පොස්ට් එකේ කොටසක් සහ බ්ලොග් පොස්ට් එකට ඇතුලත් කර ඇති පින්තුරයක් සමග “Read More”  ලෙස තිබෙන බව. විවිද blogger templates වෙබ් අඩවි වලින් ලබාදෙන බොහොමයක් template වල ඒ විදියට පේන්න template එක හදල තියෙන්නේ. ඉතින් මොහොමයක්‌ අය ඔය ප්‍රශ්නය නිසා මම කලින් කියුවා වගේ පේන විදියට හදලා තියෙන Templates බාවිතා කරනවා. ඉතින් ඔය ප්‍රශ්නය නිසා සම්පුර්ණ template එකම මාරු කරන්න අවශ්‍ය නැහැ. අද මම කියල දෙන්න යන්නේ ඔබේ template එක ඒ විදියට පෙනෙන්න සකසා ගන්නේ කොහොමද කියලයි. මේ ගැන කතා කරන්න හිතුවේ මෑතකදී මගේ මිතුරෙකුට මෙය ප්‍රශ්නයක් උණු නිසයි. හොදයි අපි වැඩේට බහිමු.

කොහොමද මේ විදියට Template එක සකසා ගන්නේ?


මුලින්ම template එක edit කරන්න කලින් එය backup කරගන්න. යම් හෙයකින් ඔබ අතින් යම් වැරද්දක් උවහොත් ඔබ backup කරගත් template එක ලේසියෙන්ම ඔබට restore කරගන්න පුළුවන්.

• ඔබේ Blogger Dashboard එකට log in වෙලා,  Template –> Edit HTML  වෙත යන්න.
• “Expand Widget Templates” යන්නට tick එකක් දාන්න.
• දැන් Ctrl+F බාවිතයෙන් ]]></b:skin> යන්න සොයා ගෙන එයට ඉහළින්, මේ පහත දී තියෙන codes ටික එකතු කරගන්න.
• 
  

.readmore{ float:right; background:#a5ddf4; padding:4px 10px; margin:10px 0; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; }

• ඊට පස්සේ </head> යන්න සොයාගෙන එයට ඉහළින මේ පහත දී තිබෙන කේතයන් එකතු කරගන්න.
• 
  

<script type='text/javascript'>var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } var summary = imgtag + '<div> ' + removeHtmlTag(div.innerHTML,summ) + '</div> '; div.innerHTML = summary; } //]]> </script>

අනතුරුව කලින් විදියටම Crtl+F බාවිතයෙන් පහත කේතය සොයාගන්න.

<data : post.body/>

සොයාගෙන ඒ වෙනුවට පහත කේතයන් එකතු කරගන්න. ඒ කියුවේ replace කරන්න කියලා.

<b:if cond='data:blog.pageType == "static_page"'><br/> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'> <data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <span class='readmore' style='float:right;'><a expr:href='data:post.url'> Read More</a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> </b:if>

හොදයි දැන් වැඩේ කරගෙන ඉවරයි. ඔයාට ඕනේ නම් template එක save කරලා බලන්න පුළුවන්. ඉතින් දැන් ඔබ දකින්න ඇති හෝම් පේජ් එකේ සම්පුර්ණ පොස්ට් එක වෙනුවට පොස්ට් එකෙන් කොටසක් හා ඔබේ පොස්ට් එකේ තියෙන පින්තුරයක් සමග Read More යනුවෙන් button එකක් ඇති බව. දැන් ඔය button එකේ පාට සමහර විට ඔබේ බ්ලොග් එකට ගැලපෙන්නේ නැති වෙන්න පුළුවන්. ඔබට පුළුවන් ඔබේ බ්ලොග් එකට ගැලපෙන විදියට ඒ බට්න් එකේ වර්ණය වෙනස් කරගන්න.

මුලින්ම “Gadgematic Lanka color code generator” එක බාවිතා කරලා ඔබට අවශ්‍ය වර්ණයක code එක අරගන්න. අපි මේ වැඩේ පටන් ගද්දී මුලින්ම ]]></b:skin> යන්නට ඉහළින් එකතු කරගත් පහත කේතයේ ඇති “a5ddf4” යන්න වෙනුවට ඔබ කලින් ලබාගත්, ඔබට අවශ්‍ය වරණයේ code එක එකතු කරන්න.

.readmore{
float:right;
background:#a5ddf4;
padding:4px 10px;
margin:10px 0;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}

එච්චරයි. දැන් ඔබ සාර්ථකව වැඩේ කරගෙන ඉවරයි. ඉතින් අද අපි කතා කරපු කාරනාව සම්බන්දයෙන් ඔබට ඇති ගැටළු හා ඔබේ අදහස් කමෙන්ට් කරන්න.මතක ඇතුව අපේ fb page එකට like එකකුත් දාලම යන්න. :)

මේ ගැන ඔයාලගෙ අදහස් මොනවද?