ব্লগে যুক্ত করে নিন একটি Stylist Page Number Navigation

সব ধরনের ব্লগ কিংবা ওয়েবসাইটেই একটি Page Number Navigation যুক্ত করার প্রয়োজন হয়। কারণ ব্লগ পোষ্টের এক পাতা থেকে অন্য পাতায় যাওয়ার জন্য এই Page Number Navigation ব্যবহার করতে হয়। এই Page Number Navigation ছাড়া আপনা ব্লগ কোনভাবেই পূর্ণতা পাবে না। ভিজিটররা নিঃসন্দেহ ভাববে যে, আপনার ব্লগটি কোন কাজেরই নয়। আমি আপনাদের আজকে দেখাবো কিভাবে ব্লগে খুব সহজে একটি Page Number Navigation যুক্ত করবেন। আসলে ব্লগে Page Number Navigation যুক্ত করাটা খুব একটা সহজ কাজ নয়। এই জন্য ব্লগিং সম্পর্কে কিছু অভীজ্ঞতা থাকতে হয়। কারণ এটি যুক্ত করার জন্য আপনার ব্লগার টেমপ্লেটে কোডিং করতে হয়। আজ আমি আপনাদের যে পদ্ধতিতে দেখাবো এতে আপনার টেমপ্লেটে কোন প্রকার কাজ করতে হবে না। শুধু মাত্র আপনার ব্লগের Layout হতে Gadget ব্যবহার করেই খুবই সহজে এই Page Number Navigation টি যুক্ত করতে পারবেন। আপনি ইচ্ছা করলে এই লিংক হতে এর একটি ডেমো দেখে আসতে পারেন।
Blogger Page Navigation
কিভাবে এই Page Number Navigation যুক্ত করতে হয়ঃ
  • প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
  • এরপর ব্লগের ড্যাশবোর্ড হতে Layout এ ক্লিক করুন।
  • এখন ডান পাশের লেআউট হতে Add Gadget এ ক্লিক করুন।
  • তারপর HTML/JavaScript এ ক্লিক করুন।
  • এবার নিচের সম্পূর্ণ কোডগুলি HTML/JavaScript এর ঘরে পেষ্ট করুন।

 <style type='text/css'>
.blog-pager,#blog-pager {
font-family:"Times New Roman", Times, serif;
font-weight:normal;
font-size:12px;
width:700px;
padding:17px;
}

.showpageNum a,.showpage a {
background: rgb(15, 124, 241);
color:#FFF;
margin-right:.6em;text-decoration:none;
font-size:15px;
font-weight:bold;
line-height:0;
text-align:center;
padding:7px 13px 7px;
-moz-border-radius:36px;
-webkit-border-radius:8px;
border-radius:8px;
}

.showpageNum a:hover,.showpage a:hover {
background: rgb(0, 49, 247);
color:#000000;
margin-right:.6em;
text-decoration:none;
font-size:15px;
font-weight:bold;
line-height:0;
text-align:center;
padding:7px 13px 7px;
-moz-border-radius:36px;
-webkit-border-radius:12px;
border-radius:12px;
}

.showpageOf {
margin:0 8px 0 0;
font-family:'Coming Soon', cursive;
text-decoration:none;
font-size:100%;
}

.showpagePoint {
background: rgb(0, 49, 247);
color:#FFF;
margin-right:.6em;
text-decoration:none;
font-size:15px;
font-style:italic;
line-height:0;
text-align:center;
padding:7px 13px 7px;
-moz-border-radius:36px;
-webkit-border-radius:8px;
border-radius:8px;
}
</style>

<script type='text/javascript'>
var home_page_url = location.href;
var pageCount=2;
var displayPageNum=3;
var upPageWord ='Previous';
var downPageWord ='Next';

function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
  html += '<span class="showpageNum"><a href="/">1</a></span>';

}else{
 html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}}}
if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}
html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}}
function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
 thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;
}}itemCount++;}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}fFlag++;}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
 html = labelHtml+'1</a></span>';
}else{
 html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}}}
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}}
html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}}
</script>
<script type='text/javascript'>
var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}}
var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}}
</script>
</script>



  • এখন Save এ ক্লিক করুন। That's all.
কাষ্টমাইজেশনঃ
  • প্রতি পেজে কতটি পোষ্ট দেখাতে চান তা লিখে দিন- 'var pageCount=2'
  • প্রতি পেজে কতটি বাটন দেখাতে চান তা লিখে দিন- 'var displayPageNum=3'
 

Comments