আপনার ব্লগার ব্লগে যুক্ত করে নিন দুটি সুন্দর Comments Page Navigation Widget আশাকরি আপনাদের কাজে আসবে ।

বন্ধুরা অনেক দিন পর ব্লগার নিয়ে পোস্ট করতে বসলাম নতুন কিছু নিয়ে পোস্ট করার ইছে ছিল এটা আমার কাছে একটু নতুন মনে হল তাই পোস্ট করতে বসেগেলাম । এই পোস্টটি আবার অনেকের কাজে আসবে না কারন এই Page Navigation Widget সুধু মাত্র কমেন্ট এর জন্য । বুঝতে পারলেন না , ধরুন আপনার ব্লগের প্রতিটি পোস্টে ১৫০ -২০০ কমেন্ট আছে তখুন এইটি আপনার ব্লগে কাজে আসবে । আমি জানি আমাদের ব্লগে ২০০ তো দূরের কথা ২ টি কমেন্ট হয় না তবুও নতুন কিছু জানতে ক্ষতি কি । তাহলে আর দেরি না করে নীচে থেকে দেখে নিন কি ভাবে যুক্ত করবেন ।

১// আপনার ব্লগার ব্লগ লগ ইন করুন তারপর ড্যাশবোর্ড থেকে Template এ ক্লিক করে Edit HTML এ ক্লিক করুন । তার আগে অবশ্যই আপনার ব্লগের ব্যাক আপ নিয়ে নিবেন ।


২// এবার আপনার কীবোর্ড এর Ctrl+F প্রেস করে নীচের কোডটি খুজে বের করুন ।


<b:includable id='comments' var='post'>


৩// এবার উপরের কোডটি খুজে পেলে তার ঠিক পরে নীচের কোডটি কপি করে পেস্ট করুন ।

<b:if cond='data:post.commentPagingRequired'>
<script type='text/javascript'>
var w2bTotalComments = <data:post.numComments/>;
var w2bPrevBtnText = "Prev";
var w2bNextBtnText = "Next";
</script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-comments-pagination.js"></script>
</b:if>

৪// এবার Save Template এ ক্লিক করে Save করে নিন ।


নোট  ঃ আপনি ইছে করলে Prev আর Next মুছে সেখানে আপনার পছন্দ মতো লিখা দিতে পারেন ।

এবার দেখে নিন কিভাবে স্টাইল যুক্ত করবেন  ঃ 

১//  উপরের নিয়ম অনুযায়ী নীচের কোডটি কে খুজে বের করুন ।

]]></b:skin>

২// উপরের কোডটি খুজে পেলে তার ঠিক আগে নীচের যে স্টাইল পছন্দ তার কোডটি কপি করে পেস্ট করুন ।

স্টাইল - ১

.w2bCommentsPaging{
font-size:13px;
display: block;
}
.commPageOf{
padding:4px 8px;
margin-right:6px;
}
.commPrev a,.commNext a,.commentNum a {
text-decoration: none;
border: 1px solid #ddd;
background: #efefef;
padding: 4px 8px;
margin: 0 4px;
text-decoration: none;
color: #666;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

.commPrev a:hover, .commNext a:hover, .commentNum a:hover, .commentNum.commCurrent a{
border:1px solid #CDCDCD;
background:#ddd;
color: #222;
}
.paging-control-container {
clear: both;
display: block;
float: none;
font-size: 80%;
margin: 10px 0;
overflow: hidden;
padding: 10px 0;
text-align: right;
}

স্টাইল - ২ 

.w2bCommentsPaging{
font-size:12px;
display: block;
}
.commPageOf{
padding:5px 10px;
margin-right:6px;
}
.commPrev a,.commNext a,.commentNum a {
text-decoration:none;
background: #4E4E4E;
padding: 5px 10px;
margin: 0 4px;
text-decoration: none;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.commPrev a:hover, .commNext a:hover, .commentNum a:hover, .commentNum.commCurrent a{
background:#8956B8;
color:#fff;
}
.paging-control-container {
clear: both;
display: block;
float: none;
font-size: 80%;
margin: 10px 0;
overflow: hidden;
padding: 10px 0;
text-align: right;
}

৩// Save Template এ ক্লিক করে সেভ করে নিন ।


=/> তাহলে আজকের মতো এই পর্যন্ত আবারও দেখা হবে নতুন কিছু নিয়ে । ভাল থাকবেন সুস্থ থাকবেন । আল্লাহ্‌ হাফেজ ।