Numbered Page Navigation ব্লগার ব্লগের জন্য !!

আসসালামু অলাইকুম বন্ধুরা সবাই কেমন আছেন ! আশাকরি সবাই খুব ভালো ও সুস্থ আছেন । যাই হোক আজকে আমি আপনাদের সাথে কিছু Numbered Page Navigation শেয়ার করবো । আশাকরি বুঝতেই পেরেছেন এই Numbered Page Navigation কি ! হুম ঠিক ধরেছেন আজকে আমি আপনাদের কয়েক ধরনের স্টাইল দেবো আশাকরি আপনাদের পছন্দ হবে । নীচে থেকে দেখে নিন এবং পছন্দ মতো আপনার ব্লগে সেট করে নিন ।

☞ কিভাবে আপনার ব্লগে যুক্ত করবেনঃ

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

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

]]></b:skin>

৩// উপরের ট্যাগ এর ঠিক উপরে নীচের যে স্টাইলটি আপনি ব্যবহার করতে চান সেটি ব্যবহার করুন । 

Style → 1 { image demo } 

 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
 #blog-pager .pages{border:none;}

Style → 2 { image demo }

  #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style → 3 { image demo } 

  #blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}

Style → 4 { image demo } 

 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

আপনি যদি First এবং Last বাটন বাবিহার না চান তাহলে উপরের কোডের ঠিক নীচে নীচের কোড বসান।.

 .firstpage, .lastpage {display: none;}

৪// এবার নীচের ট্যাগটি খুজে বের করুন CTRL + F প্রেস করে ।


</body>


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

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>

ব্যাস সব শেষে Save Template এ ক্লিক করে বেরিয়ে আসুন ।


৬// আপনি চাইলে কিছু পরিবর্তন করে নিতে পারেন উপরের কোড থেকে । এর জন্য লাল কালার এর লিখা মুছে সেখানে আপনার পছন্দ মতো সেটিংস করে নিন ।



☞ তাহলে আজকের মতো এই পর্যন্ত কোন সমস্যা হলে যানাবেন । পোস্টটি ভালো লাগলে বন্ধুদের সাথে শেয়ার করবেন । ভালো থাকবেন সুস্থ থাকবেন । আল্লাহ্‌ হাফেজ ।