Jan 17, 2016

ব্লগ পোষ্টের নিচে Page Number Navigation যুক্ত করুন

প্রফেশনাল ব্লগার টেমপ্লেট তৈরির ৭ম পর্ব শুরু করছি। আগামী পর্বের মাধ্যমে প্রফেশনাল ব্লগার টেমপ্লেট তৈরির ১ম সিরিজের সবগুলি পোষ্ট সমাপ্ত হবে। তারপর আমাদের ঘোষণানুযায়ী পরবর্তী সিরিজ শুরু করব। আগামী পর্ব শেষ হওয়ার সাথে সাথে আমরা টেমপ্লেটটির ডেমো আপনাদের সাথে শেয়ার করব অর্থাৎ এই সিরিজের সবগুলি টিউটরিয়াল এর সমন্বয়ে যে ধরনের টেমপ্লেট তৈরি হবে কেবল সেই ধরনের টেমপ্লেটের ডেমো দেখাব।
ব্লগ পোষ্টের নিচে Page Number Navigation যুক্ত করুন
সব ধরনের ব্লগ/ওয়েবসাইটে একটি Page Number Navigation যুক্ত করা প্রয়োজন হয়। কারণ ব্লগ পোষ্টের এক পাতা থেকে অন্য পাতায় যাওয়ার জন্য Page Number Navigation ব্যবহার করতে হয়। এই Page Number Navigation ছাড়া আপনার ব্লগ কোনভাবেই পূর্ণতা পাবে না। ব্লগে Page Number Navigation না থাকলে ভিজিটররা নিঃসন্দেহ ভাববে যে, আপনার ব্লগটি কোন কাজেরই নয়। কাজেই ভালমানের ব্লগ তৈরি করার জন্য এটি অবশ্যই যুক্ত করতে হবে। আমরা ইতিপূর্বে এ ধরনের একটি Page Number Navigation Widget শেয়ার করেছিলাম। আজ যেটি শেয়ার করছি সেটি ব্লগার টেমপ্লেটের ভীতরে যুক্ত করা হবে। ফলে আপনার ব্লগটি আরও আকর্ষণীয় হবে।
সকল পোষ্ট দেখুন

কিভাবে যুক্ত করবেন?

  • প্রথমে ব্লগার ড্যাশবোর্ডে লগইন করুন।
  • তারপর Template > Edit Html এ ক্লিক করুন।
ব্লগ পোষ্টের নিচে Page Number Navigation যুক্ত করুন
  • এরপর কিবোর্ড হতে Ctrl+F চেপে id='nextprev'> অংশটি সার্চ করলে নিচের চিত্রেরমত কোড দেখতে পাবেন।
ব্লগ পোষ্টের নিচে Page Number Navigation যুক্ত করুন
  • এখন উপরের চিত্রে তীর চিহ্ন দ্বারা মার্ক করা অংশে ক্লিক করলে কোডটি নিচের চিত্রেরমত দেখতে পাবেন।
ব্লগ পোষ্টের নিচে Page Number Navigation যুক্ত করুন
  • উপরের চিত্রে হলুদ এবং কালো চিহ্ন দ্বারা মার্ক করা লাইনের শেষে কীবোর্ড হতে একটি Enter প্রেস করে নিচের কোডগুলি যুক্ত করুন।
<b:includable id='page-navi'>
 <div class='pagenav'>
  <script type='text/javascript'>
   var pageNaviConf = {
   perPage: 5,
   numPages: 4,
   firstText: &quot;First&quot;,
   lastText: &quot;Last&quot;,
   nextText: &quot;Next&quot;,
   prevText: &quot;Prev&quot;
  }
 </script>
 <script type='text/javascript'>
   //<![CDATA[
   function pageNavi(o){var m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var d=2;d<=e;d++){var c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var b='<span class="pages">Pages '+e+' of '+a+"</span> ";if(c>1){b+='<a href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span class="current">'+i+"</span>"}else{b+='<a href="'+f[i]+'">'+i+"</a>"}}if(e<a){b+='<a href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})();
   //]]>
 </script>
 <div class='clear'/>
 </div>
</b:includable>
  • আবার কিবোর্ড হতে Ctrl+F চেপে <!-- navigation --> অংশটি সার্চ করলে নিচের কোডগুলি দেখতে পাবেন।
<!-- navigation -->
<b:include name='nextprev'/>
  • উপরের কোডগুলির জায়গায় নিচের কোডগুলি কপি করে Replace করুন।
<!-- navigation -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
 <b:include name='page-navi'/>
  <b:else/>
   <b:if cond='data:blog.pageType == &quot;archive&quot;'>
 <b:include name='page-navi'/>
  <b:else/>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
 <b:include name='nextprev'/>
 </b:if>
</b:if>
</b:if>
  • পুনরায় কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • এখন নিচের CSS কোডগুলি ]]></b:skin> ট্যাগের ঠিক উপরে পেষ্ট করুন।
/* Page Number
-------------------------------------------------------- */
.pagenav{clear:both;margin:-5px 0 10px;margin-top:10px;padding:10px 0;text-align:center;font-size:13px;font-family:&#39;Open Sans&#39;;font-weight:400;border:1px solid #93DAF8;border-radius:2px}
.pagenav span,.pagenav a{padding:6px 15px;display:inline-block;background-color:#fff;color:#666;border:1px solid #BCCFCD;border-radius:2px;margin:0 5px;transition:initial;text-decoration:none;font-weight:bold}
.pagenav .pages{background-color:transparent;color:#666;font-weight:400;text-transform:uppercase;font-size:11px;font-weight:bold;padding:7px 15px}
.pagenav a:hover{background-color:#fdfdfd;color:#f53b3b;transition:initial}
.pagenav .current{background-color:#f53b3b;color:#fff;border:1px solid #F53B3B}
  • সবশেষে Save Template এ ক্লিক করলেই কাজ OK.
সর্বশেষঃ এই Page Number Navigation ব্লগের হোম পেজসহ সকল ধরনের Label পেজেও কাজ করবে। কিভাবে Label Page এর পোষ্ট সংখ্যা সিলেক্ট করে দিতে হয় তা এই লিংক থেকে জেনে নিতে পারেন। আশা করি এই পোষ্টটির কোথাও বুঝতে অসুবিধা হবে না। তারপরও যদি কারও কোন অংশে বুঝতে সমস্যা হয় তাহলে আমাদের জানাতে পারেন।
Subcribe to our all updates

and Share on
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট

4 টি মন্তব্য: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

  1. Amar blog e age thekei page navigation system add kora ache but okhane sudhu page 1 e show kore. Porer page gulo ase na. Kivabe thik korbo eta?? Help me please!

    ReplyDelete
    Replies
    1. টিউটরিয়াল ভালভাবে অনুসরণ করে সঠিক জায়গায় যুক্ত করুন, তাহলে অবশ্যই হবে। এই পদ্ধতীতে আমার তৈরি সবগুলি টেমপ্লেটেই ব্যবহার করা হয়েছে।

      Delete
  2. ভাইয়া আমার টেম্পলেট এ প্রথম কোড সার্চ দেয়ে পাচ্ছি কিন্তু পরের টা পাচ্ছিনা এন্টার প্রেস করলেও

    ReplyDelete
    Replies
    1. কাষ্টম টেমপ্লেটে এই সমস্যাটা হবে। এ ক্ষেত্রে আপনার টেমপ্লেটের সঠিক জায়গাটি খুজে বের করতে হবে।

      Delete

 
Subscribe for all Updates

Subscribe Now

কপিরাইট © 2015- প্রযুক্তি ডট কম ™, সর্বস্বত্ব সংরক্ষিত

Powered by: