খুব সহজে ওয়েবসাইট তৈরি(পর্ব-৯)ব্লগে যুক্ত করুন অটোমেটিক রিড মোর অপশন

ads

খুব সহজে ওয়েবসাইট তৈরির ৯ম পর্বে আপনাদের সবাইকে স্বাগতম।আশকরি সবাই ভাল আছেন।আজ যে বিষয়টি নিয়ে আলোচনা করবো সেটি হলো

ব্লগে অটোমেটিক রিড মোর ফাংশন যুক্ত করা।ব্লগের ডিফল্ট ব্লগার টেমপ্লেটে Read More অপশন যুক্ত করা থাকে না এর জন্য আমাদের ব্রেক বাটুন ইউস করতে।যা অনেকটা বিরক্তিকর।তাছারা যারা মোবাইল দিয়ে ব্লগে পোস্ট লিখেন তাদের রিড মোর ফাংশন এড করার কোন অপশন থাকে না।

 

ব্লগে যুক্ত করুন অটোমেটিক রিড মোর অপশন

কিভাবে ব্লগে অটোমেটিক রিডমোর ফাংশন যোগ করেবনঃ

•    প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।

•    তারপর ব্লগার ড্যাশবোর্ড হতে Template এ ক্লিক করে ব্যাকআপ নিয়ে।এবার Edit Html এ ক্লিক করুন।

 আপনার জন্য আরো পোস্ট আয় করুন ফেইসবুক,গুগল,টুইটার থেকে খুব সহজে

popads আয় করুন popcash এর চেয়ে তিন গুন বেশি

Captcha type করে আয় করুন ডলার সহজে(যারা একেবারে নতুন)

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

•    খুজে পেলে নিচের কোডগুলি কপি করে <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>

Get code

•    আবার কিবোর্ড হতে 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>

Get code

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

•    যখন পোষ্টে কোন ইমেজ Thumbnail থাকবে না, তখন কতটি অক্ষর শো করাতে চান এখানে লিখুন posts_no_thumb_sum = 490

•    পোষ্টটিতে যখন ইমেজ Thumbnail থাকবে, তখন কতটি অক্ষর শো করাতে চান এখানে লিখুন posts_thumb_sum = 400

•    নীল কালারের দুট অপশন এর মাধ্যমে Thumbnail Image এর Height ও Width পরিবর্তন করতে পারবেন।

•    সবশেষে Save Template এ ক্লিক করুন।

আশাকরি সকল ব্লগার ভাইয়েরা বুঝতে পেরেছেন।ভাল লাগলে একটি কমেন্ট এবং শেয়ার করতে কৃপণতা বোধ করবেন না।