আসসালামু আলাইকুম। সবাই কেমন আছেন? আশা করি সবাই ভাল আছেন। আজ আপনাদের সাথে শেয়ার করব কিভাবে ব্লগ পোস্টের মধ্যে অটোমেটিক রিলেটেড পোস্ট উইজেট যুক্ত করবেন বা দেখাবেন।
এই উইজেট যুক্ত করলে, যখন একজন ভিজিটর আপনার সাইটের একটি ব্লগ পোস্ট ওপেন করবেন, তখন তিনি একাধিক ইনলাইন রিলেটেড পোস্টের লিঙ্ক খুঁজে পাবেন। ইনলাইন রিলেটেড পোস্ট মূলত একটি ব্লগ পোস্টের মাঝখানে আপনার সাইটে পোস্ট করা অন্য একাধিক রিলেটেড আর্টিকেলের একটি লিঙ্ক যা অন্য সব পোস্টগুলোর পেজভিউ বাড়াতে সাহায্য করে। এই আর্টিকেলে, ব্লগারে পোস্টের মধ্যে কিভাবে ইনলাইন রিলেটেড পোস্টগুলি অটোমেটিক ভাবে যুক্ত করবেন তার একটি টিউটোরিয়াল দেখাবো।
আপনার ব্লগে ইনলাইন রিলেটেড পোস্ট যুক্ত করার মাধ্যমে, অনেক দর্শক অন্য ব্লগ পোস্ট গুলোও পড়তে আগ্রহী হবে এবং পছন্দ করবে। তাই ব্লগারে রিলেটেড পোস্ট লিঙ্ক যুক্ত করার মাধ্যমে আপনার সাইটের আরও পেজভিউ বাড়াতে পারবেন। এটি SEO তেও সাহায্য করে কারণ এটি মূলত আপনার সাইটের আর্টিকেল গুলোর ইন্টারলিঙ্ক লিস্ট।
কিভাবে ব্লগার পোস্টের মাঝখানে অটোমেটিক পোস্ট উইজেট যোগ করবেন?
1. প্রথমে আপনার ব্লগার ড্যাশবোর্ড থেকে আপনার ব্লগার অ্যাকাউন্টে লগ ইন করুন৷
2. থিমে ক্লিক করে >> Edit HTML অপশনে ক্লিক করুন।
3. </head> ট্যাগ খুঁজতে (Ctrl+F টিপুন) </head> ট্যাগের উপরে বা পূর্বে, নীচের CSS কোড টা কপি করে পেস্ট করুন।
<style type='text/css'>
/* Blogger 4 Ever Multi Related Post */
.blogger4evermultirelated{color:#0984e3;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;border:1px solid rgba(0,0,0,0.2);transition:all .3s}
.blogger4evermultirelated .content{padding:8px 15px}
.blogger4evermultirelated .content .text{margin-right:5px}
.blogger4evermultirelated .content a{color:#000;text-decoration:none;line-height:1.5em}
.blogger4evermultirelated .icon{height:auto;min-width:55px;background:transparent url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23000'/%3E%3C/svg%3E") center / 40px no-repeat;border-left:1px solid rgba(0,0,0,0.2);transition:all .3s}
.blogger4evermultirelated:hover .icon,.blogger4evermultirelated .content a:hover{color:#0984e3}
</style>
</b:if>
4. এখন আবার (Ctrl+F টিপুন) <data:post.body/> ট্যাগটি খুঁজতে এবং এর পরে নিচের Javascript কোডটি পেস্ট করুন।
<script type='text/javascript'>
//<,a = jumlah + 1,b = post['length'] / a;c = Array['from']({length: jumlah}, (redfx, blufx) => blufx + 1);
for (let d = 0; d < c['length']; d++) {let e = c[d],f = parseInt((b * e)),g = document['createElement']('div');g['className'] = 'blogger4evermultirelated';if (post[f]['nodeName'] == 'P') {post[f]['parentNode']['insertBefore'](g, post[f])} else {post[f]['parentNode']['insertBefore'](g, post[f]['nextSibling'])}}})();
var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();function related_results_labels(nerdfx) {for (var desfx = 0; desfx < nerdfx['feed']['entry']['length']; desfx++) {var nefx = nerdfx['feed']['entry'][desfx];relatedTitles[relatedTitlesNum] = nefx['title']['$t'];for (var ciafx = 0; ciafx < nefx['link']['length']; ciafx++) {if (nefx['link'][ciafx]['rel'] == 'alternate') {relatedUrls[relatedTitlesNum] = nefx['link'][ciafx]['href'];relatedTitlesNum++;break}}}}
function removeRelatedDuplicates() {var viefx = new Array(0);var labfx = new Array(0);for (var desfx = 0; desfx < relatedUrls['length']; desfx++) {if (!contains(viefx, relatedUrls[desfx])) {viefx['length'] += 1;viefx[viefx['length'] - 1] = relatedUrls[desfx];labfx['length'] += 1;labfx[labfx['length'] - 1] = relatedTitles[desfx]}};relatedTitles = labfx;relatedUrls = viefx}
function contains(yelfx, yufx) {for (var grefx = 0; grefx < yelfx['length']; grefx++) {if (yelfx[grefx] == yufx) {return true}};return false}
//]]>
</script>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:view.isPost'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=100"'/>
</b:if>
</b:loop>
</b:if>
<script type='text/javascript'>
//< * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.blogger4evermultirelated');while (i < relatedTitles['length'] && i < jumlah['length']) {for (let a = 0; a < jumlah['length']; a++) {jumlah[a]['innerHTML'] = '<span class="content"><span class="text">' + text + '</span><a href="' + relatedUrls[r] + '" title="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></span><span class="icon"></span>';if (r < relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})();
//]]>
</script>
</b:if>
5. এখন টেমপ্লেটি সেভ করুন।
That's It... আপনার কাজ শেষ। আপনাকে আর কিছু করা লাগবে না। এখন অটোমেটিক আপনার পোস্টগুলোর মাঝে রিলেটেড পোস্ট গুলো যুক্ত হয়ে যাবে।
অটোমেটিক রিলেটেড পোস্ট উইজেট কাস্টমাইজ করুন:
আপনি যদি চান তবে Also Read এর টেক্সটটা আপনার ইচ্ছা অনুযায়ী পরিবর্তন করতে পারবেন। আপনি চাইলে You might also like লিখাটা অ্যাড করতে পারেন বা আপনি অন্য কিছু সেখানে প্রদর্শন করতে চাইলে সেটিও দিতে পারেন।
ব্লগ পোস্টে কয়টি রিলেটেড পোস্ট প্রদর্শিত করবে সেটা যদি পরিবর্তন করতে চান তবে সেটিও করতে পারবেন। এর জন্য আপনাকে কোড বক্সে মার্ক করা 4 সংখ্যা টিকে পরিবর্তন করে আপনার ইচ্ছা অনুযায়ী নাম্বার দিয়ে দিতে হবে।
Auto রিলেটেড পোস্ট উইজেট এর সুবিধা কি?
- আপনাকে পোস্ট গুলোতে আর ম্যানুয়ালি লিংক বসিয়ে রিলেটেড পোস্ট যুক্ত করতে হবে না।
- রিলেটেড পোস্ট যুক্ত করার জন্য আলাদাভাবে আর কোন সময় দিতে হবে না। ফলে কম সময়ে আর্টিকেল লেখা সম্ভব হবে।
- আপনার নতুন এবং পুরাতন সকল পোস্ট গুলোতে এটি অটোমেটিক ভাবে যুক্ত হয়ে যাবে।
- এটি আপনার সাইটকে একটি প্রফেশনাল লুক দিবে।
- ভিজিটররা খুব সহজেই তাদের পছন্দের পোস্ট গুলো খুজে পাবে এবং পড়তে পারবে।
উপসংহার:
আশা করি এই পোস্টটি আপনার ভালো লেগেছে। এই পোস্টটিতে ব্লগার ব্লগস্পটে আর্টিকেলের মাঝখানে কীভাবে অটোমেটিক ইনলাইন রিলেটেড পোস্ট যুক্ত করবেন তা দেখানো হয়েছে। পোস্টটি ভালো লাগলে আপনার বন্ধুদের সাথে অবশ্যই শেয়ার করবেন। আপনার যদি এই বিষয়ে কোন সমস্যা থাকে তবে নির্দ্বিধায় কমেন্ট করে আমাকে জানতে পারেন।
ধন্যবাদ।