সম্মানিত দর্শক আপনাকে স্বাগতম। আমাকে Facebook instagram Telegram এ পাবেন। কামরুলকক্স: ব্লগস্পটে রিলেটেড পোস্ট যুক্ত করুন

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


বিভিন্ন ব্লগে আমরা কোন পোষ্ট পড়লে দেখি যে Related Posts এর মাধ্যমে আরো কিছু পোষ্ট নিচে যুক্ত করে দেয়া হয়েছে। এর মাধ্যমে একজন পাঠক ঐ পোষ্টগুলো পড়তে উৎসাহিত বোধ করে যা পাঠকের জন্য উপকারী আবার ব্লগটিকেও করে তুলে জনপ্রিয়। আপনিও ইচ্ছে করলে সে রকম Related Psts এর জন্য নিজের পছন্দ অনুযায় আপনার ব্লগে Widget যুক্ত করতে পারেন। কাজটি মোটেই কঠিন নয় এবং একজন সাধারণ ইউজারও তা করতে পারেন কোন ঝামেলা ছাড়াই। 


 এ জন্য দুটি কোড আপনার টেমপ্লেটে এড করতে হবে। নিচের ধাপগুলো অনুসরণ করে খুব সহযে আপনি কাজটি করতে পারবেন।
 
  1. প্রথমে blogger.com এ গিয়ে লগিন করে আপনার ব্লগে ঢুকুন।
  2. এরপর Design থেকে Edit HTML এ যান।
  3. Download Full Template এর মাধ্যমে আপনার Present Template এর একটা Backup নিন যাতে আপনি ইচ্ছে করলে  Template টি রিপ্লেস করে আগের অবস্থায় ফিরে যেতে পারেন।
  4. Expand Widget Templates ঠিক চিহ্ন দিন।
  5. এবার /head কোডটি খুঁজে বের করুন। এ জন্য Ctrl+F চেপে Find এর ঘরে /head  লেখাটি পেষ্ট করে এন্টার চাপুন। 
  6. এখন নিচের কোডটি শুরু থেকে শেষ পর্যন্ত কপি করে ঠিক <  /head  > এর উপরে/আগে পেষ্ট করুন। প্রথম কোডের কাজ শেষ। এবার দ্বিতীয় কোডের জন্য 7 নাম্বারে চলে যান।

<!--RelatedPostsStarts by Kamrul -->
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 15px SolaimanLipi, Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;

margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : D8 BF D8;
no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/relatedposts_forblogger.js'
type='text/javascript'/>
<!--RelatedPosts End  by Kamrul -->


  1.  আবার 5 নাম্বার নিয়মের মত করে data:post.body/ কোডটি খুঁজে বের করুন। এখন নিচের কোডগুলো সব কপি করে ঠিক <   data:post.body/   > এর নিচে (আগের 6 নাম্বার নিয়মের মত) পেষ্ট করুন। হয়ে গেল আপনার কাজ।

<!--RELATED-POSTS-STARTS byKamrul -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='SolaimanLipi, Arial,' size='4'><b>Related Posts: </b></font><font
color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if
cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType
== &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script></div></b:if>
<!--RELATED-POSTS-STOPS by Kamrul-->

আপনি ইচ্ছে করলে Related Posts এর সংখ্যা বাড়াতে পারেন। এ জন্য max-result=xx x এর জায়গায় আপনার পছন্দের সংখ্যাটি বসান যতটা পোস্ট আপনি দেখতে চান। আমি 5বসিয়েছি। তাছাড়া Font এর জায়গায় আপনার পছন্দের ফন্টটিও বসাতে পারেন। আমি বাংলার জন্য SolaimanLipi বসিয়েছি। এবার Prevew দেখুন। তারপর সেভ দিন ভাল লাগলে।

বিঃদ্রঃ কোন Post পাবলিশ করার সময় Post টিতে Labels যুক্ত করতে ভুলবেন না। কারণ Labels এর উপর ভিত্তি করেই আপনার Related Posts গুলো দেখাবে। আর কোডগুলো কোনভাবে কাজ না করলে নিচের লিংক থেকে ডাউনলোড করে নিন। আমি ওখানে প্রথম অংশ এবং দ্বিতীয় অংশ একটি ফাইলে করে দিয়েছি।

ডাউনলোডঃ মিডিয়াফায়ার

৩টি মন্তব্য:

  1. ভাই কাজ তো হসসে না ।
    আমি কোড গুলো কপি পেস্ট করসি কিন্তু হসসে না ।

    উত্তরমুছুন
    উত্তরগুলি
    1. পোষ্টের শেষে মিডিয়াফায়ারে কোডগুলো তৈরি করে আপলোড করা আছে। ঐ কোডগুলো ব্যবহার করুন। ওখানে আমি 1st Part, 2nd Part নামে এড করে রেখেছি। হোস্টিং সমস্যা হওয়াতে পোষ্টের কোডগুলো কাজ করছে না।

      মুছুন
  2. বিস্তারিত এখানে http://www.banglatipsblog.blogspot.com

    উত্তরমুছুন

Comments করার জন্য Gmail এ Sign in করতে হবে।