সাজিয়ে নিন আপনার ব্লগস্পট ব্লগ : পেজ ন্যাভিগেশান মেন্যু (পর্ব ১)

সবাই কেমন আছেন ? আমি কিন্তু এখন স্বাধীন। সবাই জানেন যে আজ এইচ.এস.সি রেজাল্ট দিয়েছে। আপনাদের সবার দোয়ায় আমি পরীক্ষায় পাশ করেছি। যদিও প্রথমে আমার মনের অবস্থা ভাল ছিলোনা কারন প্রত্যাশিত রেজাল্ট হয়নি। তারপরও বাস্তবতাকে মেনে নিয়েছি আর নিতে তো হবেই। যাক এবার আমার কাজের কথায় আসি। আমি ব্লগের ডিজাইন নিয়ে ধারাবাহিক পোস্ট করার চিন্তা ভাবনা করছি। আপনাদের সবার সহযোগিতা পেলে ধারাবাহিক ভাবে পোস্ট করব। আসলে এ গুলো সম্পর্কে অনেকেই জানেন, আবার আমি মনে করি না জানার সংখ্যা ও কম নয়। তবে যারা আমার মত নতুন তারা আশা করি উপকৃত হবেন।

আজ আমি আলোচনা করবো কিভাবে আপনার ব্লগস্পট ব্লগে পেজ ন্যাভিগেশান মেন্যুর ব্যবহার করবেন। যেমন আপনি আমাদের EarnTricks এর পেজের নিচের দিকে গেলে দেখতে পাবেন যে পেজের পৃষ্ঠা নাম্বার দেওয়া আছে, কিন্তু ব্লগস্পট ব্লগে বাই ডিফল্ট এটা থাকেনা।

ব্লগার ব্লগের জন্য প্লাগিন হয়না, উইজেট ব্যাবহার করার মতো ভালো উইজেট তেমন নেই। তাই আজ আমরা এই কাজ টা টেমপ্লেটে Javascript কোড বসিয়ে  করার চেষ্টা করবো। প্রথমে আপনার ব্লগে লগইন করে Desired ব্লগ থেকে Design  আর তারপর Edit html এ যান। তারপর cont+F চেপে নিচের কোড টা খুঁজে বের করুন।

]]></b:skin>

কোডটি পেয়ে গেলে ঠিক তার উপরের লাইনে একটা Enter দিয়ে নিচের কোডটি কপি করে নিয়ে পেস্ট করে দিন।

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

এখন দ্বিতিয় পর্যায়ে টেম্পলেট সেইভ না করেই এবার নিচের কোডটি খুঁজুন ।

</body>

নিচের কোডটি পেলে এর ঠিক আগের লাইনে নিচের জাভা কোডটি বসিয়ে দেন।

<script style=’text/javascript’>
var pageCount=5;
var displayPageNum=2;
var upPageWord=&quot;Previous&quot;;
var downPageWord=&quot;Next&quot;;
</script>
<script type=’text/javascript’>
//<![CDATA[
var home_page_url=location.href;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><a href=”/”>’+upPageWord+’</a></span>’}else{upPageHtml=’<span><a href=”‘+htmlMap[p]+’”>’+upPageWord+’</a></span>’}fFlag++}if(p==(thisNum-1)){html+=’<span>’+thisNum+’</span>’}else{if(p==0){html+=’<span><a href=”/”>1</a></span>’}else{html+=’<span><a href=”‘+htmlMap[p]+’”>’+(p+1)+’</a></span>’}}if(eFlag==0&&p==thisNum){downPageHtml=’<span> <a href=”‘+htmlMap[p]+’”>’+downPageWord+’</a></span>’;eFlag++}}}if(thisNum>1){html=”+upPageHtml+’ ‘+html+’ ‘}html=’<div><span style=”COLOR: #000;”> 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><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><a href=”‘+htmlMap[p]+’”>’+upPageWord+’</a></span>’}fFlag++}if(p==(thisNum-1)){html+=’<span>’+thisNum+’</span>’}else{if(p==0){html=labelHtml+’1</a></span>’}else{html+=’<span><a href=”‘+htmlMap[p]+’”>’+(p+1)+’</a></span>’}}if(eFlag==0&&p==thisNum){downPageHtml=’<span> <a href=”‘+htmlMap[p]+’”>’+downPageWord+’</a></span>’;eFlag++}}}if(thisNum>1){if(!isLablePage){html=”+upPageHtml+’ ‘+html+’ ‘}else{html=”+upPageHtml+’ ‘+html+’ ‘}}html=’<div><span style=”COLOR: #000;”> 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}}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&&thisUrl.indexOf(“.html”)==-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>

এবার টেম্পলেট টি সেইভ করুন আশাকরি হয়ে যাবে। এখন আপনার ব্লগে গিয়ে লুক টা দেখুন নিচের এই ছবিটার মতোই দেখা যাবে। হুররে আপনি পেরে গেলেন !!!

এখানে কথা হচ্ছে আপনি যদি চান 2 টার বেশি পোস্ট পেজে সো করাতে তবে নিচের কোড টি খুজে 2 এর স্থানে আপনার ইচ্ছা আর সুবিধা মতো সংখ্যা বসিয়ে নিন।

var displayPageNum=2

আর আপনি ইচ্ছা করলে নিচের কোড টি খুজে নিয়ে কয়টা পেজ শো করবে সেটাও আপনার সুবিধা মতো পরিবর্তন করে নিতে পারেন…

var pageCount=5;

আশা করি আপনারা ব্যাপারটা বুঝতে পেরেছেন। আমার মনে হয় এখন আপনারা সবাই করতে পারবেন। আর হ্যাঁ কোন সমস্যা হলে অবশ্যই কমেন্ট করে জানাবেন। আমার এই পোস্ট টা আপনাদের উপকারে লাগলে আমার কষ্ট সার্থক হবে।
সবাই ভাল থাকুন, সুস্থ থাকুন, ভালবাসাসহ আপনাদেরই মাহ মুদুল হাসান প্রিন্স।