Ads By Blogger

Monday, January 07, 2019

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

খুব সহজে ওয়েবসাইট তৈরির ৯ম পর্বে আপনাদের সবাইকে স্বাগতম।আশকরি সবাই ভাল আছেন।আজ যে বিষয়টি নিয়ে আলোচনা করবো সেটি হলো
ব্লগে অটোমেটিক রিড মোর ফাংশন যুক্ত করা।ব্লগের ডিফল্ট ব্লগার টেমপ্লেটে Read More অপশন যুক্ত করা থাকে না এর জন্য আমাদের ব্রেক বাটুন ইউস করতে।যা অনেকটা বিরক্তিকর।তাছারা যারা মোবাইল দিয়ে ব্লগে পোস্ট লিখেন তাদের রিড মোর ফাংশন এড করার কোন অপশন থাকে না।
 
ব্লগে যুক্ত করুন অটোমেটিক রিড মোর অপশন
ব্লগে যুক্ত করুন অটোমেটিক রিড মোর অপশন
কিভাবে ব্লগে অটোমেটিক রিডমোর ফাংশন যোগ করেবনঃ
    প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
    তারপর ব্লগার ড্যাশবোর্ড হতে Template এ ক্লিক করে ব্যাকআপ নিয়ে।এবার Edit Html এ ক্লিক করুন।


    এরপর কিবোর্ড হতে 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>
    আবার কিবোর্ড হতে 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>
কাষ্টমাইজেশনঃ
    যখন পোষ্টে কোন ইমেজ Thumbnail থাকবে না, তখন কতটি অক্ষর শো করাতে চান এখানে লিখুন posts_no_thumb_sum = 490
    পোষ্টটিতে যখন ইমেজ Thumbnail থাকবে, তখন কতটি অক্ষর শো করাতে চান এখানে লিখুন posts_thumb_sum = 400
    নীল কালারের দুট অপশন এর মাধ্যমে Thumbnail Image এর Height ও Width পরিবর্তন করতে পারবেন।


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

No comments:

Leave A Comment

আমাদের পোস্টগুলি ভালো লাগলে কমেন্ট করে আমাদের উৎসাহ দিন

Get post by Email

copyright 2014-19@bdtipstech DMCA.com Protection Status