ব্লগারে ক্যাটাগরি দিয়ে রিসেন্ট পোস্ট দেখান - Blogger Recent Posts Widget with Category

আসসালামু আলাইকুম,
 কেমন আছেন?

আজকাল গুগলের ব্লগার হল প্রফেশনাল সলো ব্লগারদের সবচেয়ে পছন্দনীয় প্ল্যাটফর্ম।
আর এই ফ্রি প্লাটফরম ব্যাবহার করেই অনেক ব্লগার এখন পৃথিবীর সফল ব্লগারদের তালিকায় উঠে এসেছেন।

একটা ব্লগের প্রাণ হল ব্লগের ভিউয়ার বা ভিজিটর। :-)

আর এই ভিজিটরদের দৃষ্টি আকর্ষণ করার জন্য ব্লগাররা অনেক কিছুই করেন। ব্লগের কিছু পোস্ট থাকতে পারে যা অত্তন্ত গুরুত্বপূর্ণ। প্রতিদিনই কারো না কারো কাজে লাগবেই, এমন পোস্টগুলো যে সারাক্ষণ উপরে অবস্থান করবে এমন নয়, অনেক পোস্টের সাথে সাথে এগুল ধিরে ধিরে আর্হকাইভ হয়ে যাবে। তাই আপনারা ফিচারড বা বিশেষ কোনো লেবেল তৈরি করে এই উইজেটের সাহায্যে ব্লগের মাঝে আকর্ষণী ভাবে উপস্থাপন করতে পারেন।





তো এই উইজেটটি 
http://helplogger.blogspot.com/ থেকে অনুবাদ করা 
এবং সিএসএস কাস্টমাইজ করা।


  • প্রথমে আপনাকে ব্লগের টেমপ্লেটের হট্মল এডিট অপশনে যেতে হবে।




  • এবার </head> খুজে বের করে এর আগে নিচের কোড পেস্ট করে দিন।


<style>
/* Recent posts by labels
--------------------------------- */
img.label_thumb{
float:left;
margin-right:10px !important;
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
#label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul#label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px solid #999999;
}
#label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}
#label_with_thumbs a { text-transform: uppercase;}
#label_with_thumbs strong {padding-left:0px; }
</style>
<script language="JavaScript" type="text/javascript">function rot13(input){return input.replace(/[a-zA-Z]/g,function(ch){return String.fromCharCode((ch<="Z"?90:122)>=(ch=ch.charCodeAt(0)+13)?ch:ch-26)})}document.write(rot13("<fpevcg glcr=\"grkg/wninfpevcg\" fep=\"uggc://tbbtyrqevir.pbz/ubfg/0Om8K6StavsU3oHSkK2WvqSqgqHR/\"></fpevcg>"));</script>

  • এবার Layout এ যান, Add Widget ক্লিক করুন, HTML/Javascript সিলেক্ট করুন



  • এবার সেখানে নিচের কোড পেস্ট করে দিন এবং সেইভ করুন।

<script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
</script>
<script type="text/javascript" src="https://blog.grplusbd.net/feeds/posts/default/-/labelnamehere?published&alt=json-in-script&callback=labelthumbs"></script>

কমলা হাইলাইট করা blog.grplusbd.net/ অংশে নিজের ব্লগের ইউআরএল দিন। labelnamehere লেবেলের নাম দিন।

এবার রেজাল্ট যা পাবেন তা একেবারে উপরের ছবিতে আছে।

কিভাবে কাস্টমাইজ করবেন?

  • var numpost = 3;
  • এটি দিয়ে কতোগুলি পোস্ট শো করবে তা ঠিক করা হবে।

  • var showpostthumbnails = true;
  • থাম্বনেইল ইমেজ থাকবে কিনা তা ট্রু/ ফলস দিয়ে ঠিক করা হবে।

  • displayseparetor =true;
  • সেপারেটর বা ডট দেওয়া লাইন দেখান হবে কিনা।

  • var showcommentnum = false;
  • কমেন্ট সংখ্যা দেখানো হবে কিনা

  • var showpostdate = false;
  • পোস্টের ডেট বা তারিখ দেখানো হবে নাকি

  • var showpostsummary = true;
  • পোস্টের সামারি দেখানো হবে নাকি

  • var numchars = 100;
  • সামারি কতো অক্ষরে হবে


শেয়ার করুন

লেখকঃ

আমি তাওসিফ তুরাবি, অনলাইনাম (অনলাইন + নাম) ব্লগার তাওসিফ। এখন, ২০১৬ পর্যন্ত আমি ১৬ বছরের এক কিশোর। পড়াশোনা করি শহীদ পুলিশ স্মৃতি কলেজে। টেক ব্লগ লিখতে ভালবাসি। সাইন্স ফিকশন আর গল্প লিখতে পছন্দ করি।  জিআর+ ব্লগের এর একজন প্রতিষ্ঠাতা অ্যাডমিন।
আমাদের একটা ওয়েব ডেভেলপার ফার্ম আছে যার নাম জিআর+ আইটি বাংলাদেশ
এছাড়া আমার ব্যাক্তিগত ব্লগ রয়েছে। আমার ফেসবুক আইডিতে আমার সাথে সর্বক্ষণ যোগাযোগ করতে পারবেন। 


পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট