কিভাবে Blogger Home Page এ Posts Summary ,Thumbnail & Read More link যুক্ত করা যায় Java script দিয়ে?

অনেক টেমপ্লেট এ ডিফল্ট সেটিং হিসাবে হোম পেজ এ Full Post দেখা যায। এটি ভালে তবে অনেক ব্লগার চায় যে হোম পেজ এ যেন অনেক গুলো Post Summary আকারে প্রদর্শিত হয়। তারই প্রেক্ষিতে এ পোষ্টটি । এটি একটি Java Script সমৃদ্ধ পোষ্ট যেটির সাহায্যে আপনি আপনার পোষ্ট গুলোকে হোম পেজ এ Summary আকারে প্রদর্শন করতে পারেবেন তবে সব নয় আপনার ইচ্ছা মতো।যেমন ৫/৭/১০ ইত্যাদি সংখ্যক।যাই হোক আসল কাজে আসা যাক নিচে প্রক্রিয়াটি দেখানো হলো।

প্রথমে আপনার Blogger Dashboard এ Login করুন।তারপর আপনার টেমপ্লেট(Template)টির একটি ব্যাকআপ ফাইল Download করে রাখেন।

এখন Edit HTML এ বক্লিক করুন।

এখন আপনাকে যে কাজটি করতে হবে তা হলো নিচের কোডটি </head> এর আগে মানে পূর্বে বসাতে হবে। তাহলে CTRL+F  চাপুন এবং Find  Box এর ভিতর </head> বসান এবং কংক্ষিত কোডটি পেলে নিচের দেয়া কোড গুলো কপি করে </head> এই কোড এর পূর্বে Paste করুন।

<script type='text/javascript'>

    summary_noimg = 300;

    summary_img = 300;

    img_thumb_height = 250;

    img_thumb_width = 350;

    </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>

উপরের কোড থেকে ভালো করে লক্ষ করুন:

১.summary_noimg= 300 মানে বুঝানো হয়েছে এতো গুলো ক্যরেকটার(character)দেখানো হবে যদি কোন ছবি না থাকে। সতরাং আপনি আপনার ইচ্ছে মতো এটির পরিবর্তন করতে পারেন।

২.summary_img= 300মানে বুঝানো হয়েছে এতো গুলো ক্যরেকটার(character)দেখানো হবে যদি কোন ছবি থাকে। সতরাং আপনি আপনার ইচ্ছে মতো এটির পরিবর্তন করতে পারেন।

৩.img_thumb_height = 250 এখানে Summary  তে যে ছবি প্রদর্শিত হবে তার উচ্চতার মাপ।

৪.img_thumb_width = 350 এখানে Summary  তে যে ছবি প্রদর্শিত হবে তার প্রসস্থ এর মাপ।

এখনো কাজ শেষ হয়নি। এখন আপনাকে যা করতে হবে Find  Box ভিতরে <data:post.body/> এই কোডটি পেষ্ট করে খুজে বের করুন এবং পুরো টেমপ্লেট এ এটি দুইবার পাবেন প্রথমটি না নিয়ে দ্বিতীয়টি সিলেস্ট করুন এবং নিচের কোডটি দ্বারা পরিবর্তন করুন মানে দ্বিতীয় কোডটি মুছে নিচের কোডটি বসান।

 <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;);</script>

<div class='readmore-wrap'>

<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text- align:right;'>

<a expr:href='data:post.url'>Read More&#187;</a>

</span>

</div>

</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>

ব্যাস কাজ শেষ এখন টেমপ্লেটি সেভ করুন এবং হোম পেজ এ গিয়ে রিফ্রেশ দিন। যদি কারো কোন প্রশ্ন থাকে করতে পারেন।