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

লেখক : , প্রকাশকাল : 28 July, 2011

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

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

আজ আমি আলোচনা করবো কিভাবে আপনার ব্লগস্পট ব্লগে পেজ ন্যাভিগেশান মেন্যুর ব্যবহার করবেন। যেমন আপনি আমাদের 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;

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

সবাই ভাল থাকুন, সুস্থ থাকুন, ভালবাসাসহ আপনাদেরই আসিফ পাগলা সাব্বির।

comments

Comments

  1. অতিব গুরুত্বপূর্ণ একটা পোস্ট। নতুনদের জন্য খুব কার্যকরী তোমার পোস্ট টা। খুব ভালো হচ্ছে নিয়মিত পোস্ট করে যাও। তোমার লেখার স্টাইল খুব সুন্দর। ধন্যবাদ শেয়ার করার জন্য।

  2. অনেক গুরুত্বপূর্ণ পোস্ট। আমি নিযেও ব্যাপারটা জানতাম না। ধন্যবাদ সাব্বির ভাই এত সুন্দর করে পোস্টটি উপস্থাপন করার জন্য।

  3. সুন্দর হয়েছে পোস্টটি।

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

    ধন্যবাদ আমার মত নতুনদের অনেক কাজে লাগবে।

  5. Akter says:

    ভাইয়া,
    কোডের কোথাও বোধহয় ভুল আছে। আমার ব্লগে পেষ্ট করে সেভ করলে নিম্নরুপ বার্তা আসে।
    ঠিক করে দিলে উপকৃত হতাম।

    XML ত্রুটি বার্তা: The content of elements must consist of well-formed character data or markup.

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

  6. microbahar says:

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

    আপনার টেমপ্লেটটি সুগঠিত না হওয়ার ফলে বিশ্লেষণ করা যাবে না৷ অনুগ্রহ করে নিশ্চিত হয়ে নিন যে সকল XML উপাদান যথাযথভাবে বন্ধ আছে৷ XML ত্রুটি বার্তা: Open quote is expected for attribute “{1}” associated with an element type “type”.
    Error 500

  7. ভাই কিছুতেই হয়না।
    একটু চেক করে দেখলে ভাল হইত।
    ইনফর্মেশনটা আমার খুব দরকার

  8. MD. Asgar Ali says:

    প্রিয় ব্লগার ভাই…

    আপনারা যে পেজ navigation bar এর ব্যাপারে পোস্ট দিছেন, সেটার জন্য আমি খুব খুশি। কিন্তু ভাইয়া প্রবলেম হচ্ছে এটা আমি করতে গেছি ১ম স্টেপ ঠিক আছে কিন্তু ২য় স্টেপ করতে গেলে এই মেসেজ টা দেখায় : Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: Open quote is expected for attribute “{1}” associated with an element type “style”.

    যদি দয়া করে কোড টা একটু ঠিক করে রিপ্লে দিতেন তাহলে আমি খুব খুশি হতাম। আপনার মন্তব্যের জন্য অপেক্ষা করছি। ধন্যবাদ।

  9. সাব্বির ভাই, আমি চেষ্টা করেছি কিন্তু হয় না। ট্রাই করতে গেলে নিচের লেখাটা আসে-
    দয়া করে নীচের ত্রুটিটি সংশোধন করুন এবং আপনার টেমপ্লেটটি আবার জমা দিন৷
    আপনার টেমপ্লেটটি সুগঠিত না হওয়ার ফলে বিশ্লেষণ করা যাবে না৷ অনুগ্রহ করে নিশ্চিত হয়ে নিন যে সকল XML উপাদান যথাযথভাবে বন্ধ আছে৷
    XML ত্রুটি বার্তা: Open quote is expected for attribute “{1}” associated with an element type “style”.
    দয়া করে যদি সমাধানটা দিতেন।

  10. asik says:

    vai
    ami sara dina onakbar chasta korasi hoy na jodi akto apnar mail id ta dan taholy amar jonno valohoy karon ami akjon noton bloger .please please please please please please please please help me.my mail no.asikbd04@gmail.com

  11. Farid says:

    ভাই, আমি ১০ বারের অধিক বার চেষ্টা করলাম। কিন্তু হয়নি। এমনকি নতুন দুটো ব্লগ খুলেছি এটা টেস্ট করার জন্য। সববারই এরর মেসেজ দেখাচ্ছে। উপরে যারা এরর বলেছেন আমারটাতেও ঠিক তাই বলছে।
    “Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “style”.”

  12. মামুন says:

    ভাই, নিচের মেসেজটি দেখাচ্ছে কেন? সমাধান দিন প্লিজ…
    We were unable to save your template
    Please correct the error below, and submit your template again.
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “style”.

  13. Roni says:

    Via apnar ei code ta ami amar blog site a try kora chilam but eta kaj korcha na. Ekhon upay ki? Ki kora ami ey style ta use korta pari amr blog site a.

  14. Selim says:

    Sabbir Vhai,
    there is any mistake in your code.Please check and solve
    for us.

  15. vai amar blog a to coad gulo accept kortese na. akhon ki korbo? jodi aponi amake aktu poramorso deten tahole valo hoto. plz vi

  16. RITU says:

    amar wordpress a akta account ace…but ami design option khuje paccheina…ki kori bolle vhalo hoi!!1

  17. Bhiazan,

    Kaj hossena. Error message disse. Mone hoi kothao vul ase.
    Asha kori correction kore posti abar korben.
    Dhonnobad

  18. vaizan, apni ekbar ei post onushare ei post theke code gulo copy kore ekbar try korun apnar blog e . Asha kori apni vulta dhorte parben.

  19. Sumon says:

    Oshsho Dimbo hoyese! Check korun doya kore. Correct kore post korun.

  20. ভাই কোড টি মনে হয় ভুল আছে। দয়া করে আপডেট করুন।

  21. joss arif says:

    ভাই করতে পারলাম না প্লিজ একটু হেল্প করেন।আপ্নার লেখা অনুযায়ী সাবমিট করার সময় এই গুলা আসে
    Error parsing XML, line 951, column 65: Open quote is expected for attribute “{1}” associated with an element type “style”

মন্তব্য প্রদান করুন

*