ব্লগার Home Page এ যুক্ত করুন Auto Read More with Thumbnail

এই পোষ্টটি প্রত্যেক ব্লগার Template এর জন্য খুবই গুরুত্বপূর্ণ। কারন ডিফল্ট ব্লগার টেমপ্লেটে Read More অপশন যুক্ত করা থাকে না কিংবা যুক্ত করার কোন অপশনও নেই। ফলে দেখা যায় ব্লগ পোষ্টটির সম্পূর্ণ লেখা হোম পেজে শো করে এবং পোষ্টটিগুলি খুবই বিশ্রি দেখায়। তাছাড়া ডিফল্ট সিস্টেমে আপনার ব্লগের হোম পেজে মাত্র ০৫ টি পোষ্ট শো করালে ব্লগের হোম পেজটি অনেক বড় হয়ে যাবে। এই সমস্যা থেকে পরিত্রান পাওয়ার জন্য আপনাকে Auto Read More অপশনটি যুক্ত করতে হবে। যার ফলে আপনার ব্লগের হোম পেজে পোষ্টের প্রথম ছবি ও কিছু লেখা শো করবে এবং বাকী অংশ Hide করা থাকবে। এই Hide করা বাকী অংশটি পড়ার জন্য Read More অপশনে ক্লিক করতে হবে। এই পদ্ধতী ব্লগের হোম পেজের সুন্দর্য অনেক গুন বেড়ে যাওয়ার পাশাপাশি এক সাথে অনেক পোষ্টও শো করাতে পারবেন।

উপরের ছবিতে দেখতে পাচ্ছেন যে, এই পদ্ধতীতে প্রথমে পোষ্টের হেডিং এরপর ইমেইজ, ব্লগ পোষ্ট এর কিছু অংশ এবং বাকী অংশ পড়ার জন্য Read More বাটন শো করবে। এটি XML, Css3 এবং JavaScript দিয়ে তৈরী করা হয়েছে। এটি আপনার ব্লগ পোষ্টকে স্লো কিংবা বাড়তী কোন ইফেক্ট করবে না।

 কিভাবে যুক্ত করতে হয়ঃ

• প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
• তারপর ব্লগার ড্যাশবোর্ড হতে Template > Edit Html এ ক্লিক করুন।

• এরপর কিবোর্ড হতে Ctrl+F চেপে <data:post.body/> অংশটি সার্চ করুন। এই কোডটি হয়তো আপনার ব্লগার টেমপ্লেটের একাধিক জায়গায় দেখতে পাবেন। আপনি সর্বশেষে যেটি পাবেন সেটিতে Try করে দেখতে পারেন। সর্বশেষটিতে না হলে ২য় টিতে Try করলে অবশ্যই হয়ে যাবে।
• এখন নিচের কোডগুলি কপি করে <data:post.body/> এর জায়গায় Replace করুন।

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

•  আবার কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
• এখন </head> অংশটির ঠিক উপরে নিচের JavaScript টি কপি করে পেষ্ট করুন।

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 130;
img_thumb_width = 240;
</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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom:15px;padding:5px;border:1px solid #93DAF8;border-radius:3px}
.readmore a {text-decoration: none;}
</style>
</b:if>
</b:if>

• সবশেষে Save Template এ ক্লিক করুন। That's All.

 কাষ্টমাইজেশনঃ

• যখন পোষ্টে কোন ইমেজ Thumbnail থাকবে না, তখন কতটি অক্ষর শো করাতে চান এখানে লিখুন posts_no_thumb_sum = 490
• পোষ্টটিতে যখন ইমেজ Thumbnail থাকবে, তখন কতটি অক্ষর শো করাতে চান এখানে লিখুন posts_thumb_sum = 400
• নীল কালারের ‍দুট অপশন এর মাধ্যমে Thumbnail Image এর Height ও Width পরিবর্তন করতে পারবেন।