কীভাবে ব্লগারে In-article রিলেটেড পোস্ট সিস্টেম যুক্ত করবো বিস্তারিত

এটি আপনারা কীভাবে করবেন সেটি আমি এই পোস্টে দেখাবো কীভাবে আপনারা আপনাদের ব্লগার ওয়েবসাইটে ইন্টারনাল পোস্টের লিংক দিবেন সেটিই আমি এই পোস্টে দেখাবো এটির আপনি এই পোস্টটি ভালোভাবে পড়লেই বোঝতে পারবেন।
এই সিস্টেমটি আপনার সাইটে যুক্ত করলে আপনাকে ম্যানুয়ালীভাবে আপনাকে কষ্ট করে কারমজ করতে হবে না এই সিস্টেমটি অটোমেটিকভাবেই এই কাজটি করে ফেলবে।

প্রথম কথাঃ

এই সিস্টেমটি আমি আমার সাইটে চেক করেছি যেটি সফলভাবে কাজ করছে যেটি নিশ্চয় ইতিমধ্যেই দেখতে পেয়েছেন Also Read দিয়ে কতগুলো পোস্টের লিংক আছে।
আপনার সাইটেও আপনি ট্রাই করে দেখতে পারেন এটির আমার সাইটে খুবভালোভাবে কাজ করছে।
যদি আপনার সাইটে সিস্টেমটি কাজ না করে তাহলে কমেন্ট করে জানাবেন কারন এটির কিছু থিমে কাজ নাও করতে পারে।

কীভাবে যুক্ত করবেন?

এটি যুক্ত করতে আপনাকে বেশি কিছু করতে হবে না আপনাকে আপনার ব্লগার সাইটে মাত্র একটি স্টাইলশিট ইনস্টল করতে হবে এবং আরো একটি জাবাস্ক্রিপ্ট কোড ইনস্টল করতে হবে।

সতর্কতাঃ

এই কাজগুলো করার জন্য আপনাকে আপনার সাইটের টেমপ্লেটটি এডিট করতে হবে।
তাই সর্বপ্রথম আপনার বর্তমান টেমপ্লেটটি ব্যাকআপ রেখে দিন তারপর টেমপ্লেট এর এই কাজগুলো করুন।
যদি কাজগুলো করার পর সাইটে কোনো সমস্যা হয় তবে ব্যাকআপ করা টেমপ্লেটটি সাইটে ইনস্টলেশন করে নিবেন।

প্রথম ধাপঃ

তো প্রথমে আপনি আপনার সাইটে আমার নিচের দেওয়া CSS কোডগুলো আপনার ব্লগার টেমপ্লেট এর ]]</b:skin> এর পূর্বে পেস্ট করবেন।
এই css গুলো যুক্ত করার মূল কারন হচ্ছে যাতে আপনার In-article রিলেটেডগুলো দেখতে সুন্দর দেখায়।
তো প্রথমে কোডগুলো কপি করে নিন তারপর যেখানে বলেছি সেখানে পেস্ট করে দিবেন।

.bspostRelatedIn{text-align: left;
padding: 15px;
margin: 30px 0;
border: 1px solid #ddd;
border-radius: 3px;
font-size: 15px;
position: relative;}
#bspostRelatedIn_title{font-size: 16px;
margin: 0;
display: inline-block;
padding: 0 10px;
position: absolute;
top: -14px;
left: 10px;


background-color: #fefefe;
color: #7d7d7d;}
.bspostRelatedIn ul {
list-style: none;
padding: 3px 22px 0;
}
.bspostRelatedIn li{ border-radius: 5px;
line-height: 1.7em;
margin-bottom: 0.433333em;
list-style: disc;
} .bspostRelatedIn li:hover {text-decoration: underline;}

দ্বিতীয় ধাপঃ

এবার আসুন দ্বিতীয় ধাপে এই ধাপে আপনাতে আপনার ওয়েবসাইটে একটি জাভাস্ক্রিপ্ট কোড যুক্ত করতে হবে।
এই জাবাস্ক্রিপ্ট কোডটি আপনি আপনার ব্লগার সাইটের </head> এর পূর্বে পেষ্ট করে দিবেন।
এটিই গুরুত্বপূর্ণ একটি জাভাস্ক্রিপ্ট কোড তাই এটিকে শুধু </head> এর পূর্বেই যুক্ত করবেন অন্যকোথাও যুক্ত করলে সাইটের সমস্যা হকে পারে।
নিচে থেকে কোডটি কপি করে নিন তারপর যেখানে বলেছি সেখানে পেস্ট করে দিন।

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
// InArticles Related to Middle of Posts by https://www.bloggerspice.com/
var bspostRelatedIn = new Array(); var bspostRelatedInNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; bspostRelatedIn[bspostRelatedInNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[bspostRelatedInNum] = entry.link[k].href; bspostRelatedInNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = bspostRelatedIn[i];}} bspostRelatedIn = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((bspostRelatedIn.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < bspostRelatedIn.length && i < 3) { document.write('<li><a href="' + relatedUrls[r] + '">' + bspostRelatedIn[r] + '</a></li>'); if (r < bspostRelatedIn.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');let element = document.createElement('a');element.href = 'https://www.blogbn.xyz/';element.pathname = 'embed' + element.pathname;console.log(element.toString());}//]]>
</script>
</b:if>
এবার আসুন তৃতীয় ধাপে যেখানে মুলত পোস্ট পেইজ এর অংশ যেটিকে আপনি রিপ্লেস করে আমার দেওয়া কোডটি পেস্ট করে দিবেন তবেই আপনার কাজ শেষ হবে।

তৃতীয় ধাপঃ

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

<div expr:id='"post1" + data:post.id'/>
<div class='bspostRelatedIn'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<div id='bspostRelatedIn_title'>Also Read</div>
<script type='text/javascript'>
removeRelatedDuplicates();


printRelatedLabels();
</script>
</div>
<div expr:id='"post2" + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>
var obj0=document.getElementById("post1<data:post.id/>");
var obj1=document.getElementById("post2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf("<br>");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
তাহলেই আপনার কাজ শেষ হবে তবে এই কাজগুলো খুবই সাবধানে করবেন যাতে এই অংশটুকু ছাড়া অন্যকোনো অংশ কেটে না যায়।

জ্বিজ্ঞাসাঃ

• এই সিস্টেম যুক্ত করলে সাইটের কোনো সমস্যা হবে?

আমি বলছি আপনি যদি ভালোভাবে কাজ গুলো করতে পারেন তবে আপনার সাইটোর কোনো সমস্যা হবে না।

• সাইটের লোডিং স্পিড কী কমে যাবে?

না সাইটের লোডিং স্পিড কমবে না। এটি আমিও আমার সাইটে ব্যবহার করছি।

• বাউন্স রেটকী বেড়ে যাবে?

আপনার৷ ওয়েবসাইটের বাউন্স রেট বাড়বে না যেহেতু আপনি এটি আপনার সাইটের ইন্টারনাল লিংক এর মতো ব্যবহার করছেন।
এটির ফলে আপনার ওয়েবসাইট এসইও এর জন্য আরো উপকারি হবে।

আশা করি আপনি বিষয়গুলো খুব ভালোভাবে বোঝতে পেরেছেন যদি কোনো অংশ বোঝতে সমস্যা হয় তবে কমেন্ট করতে পারেন।