Page Navigation

1. 
   

   বিসমিল্লাহির রহমানির রহিম​

   
   

   ​

   
   কেমন আছেন সবাই। আজ আমি এমন একটি বিষয় নিয়ে আপনাদের সামনে হাজির হয়েছি যেটা নিয়ে এর আগেও অনেক পোষ্ট হয়েছে। আমি সেই পোষ্টগুলোয় দেখলাম যে অধিকাংশ মন্তব্যে "কাজ হচ্ছে না" বা "বুঝলাম না" টাইপের কথা লেখা।
   তাই নিজেই আজ হাজির হলাম। যারা ব্লগার, তাদের ব্লগে প্রতিটি পেজের পেজ নাম্বার Add করবেন কিভাবে আজ আমরা সেটা নিয়েই আলোচনা করব। আমি বিশ্বাস করি এখানে যে ধাপগুলো বর্ণনা করা হয়েছে আপনি যদি হুবহু তা অনুসরণ করতে পারেন তাহলে ব্যর্থ হবার কোন সম্ভাবনা নাই।
   তারপরও যদি কোন সমস্যা দেখা দেয় তাহলে তা সমাধানের জন্য আমি রয়ে গেলাম। আমাকে একটু স্মরণ করলেই আপনি পেয়ে যাবেন আপনার কাঙ্খিত সমাধান।
   ব্লগারে পেজ নেভিগেশনের জন্য ডিফল্ট হিসাবে শুধুমাত্র "ওল্ডার পোষ্ট" আর "নিউ পোষ্ট" অপশন পাবেন। কিন্তু একটি ব্লগে যখন ২০-২৫টা পেজ থাকে আর আপনি যদি মাঝামাঝি জায়গা থেকে নির্দিষ্ট কোন পেজে যেতে চাইবেন তো সেক্ষেত্রে ডিফল্ট অপশনে আপনি সরাসরি যেতে পারবেন না। আপনাকে "ওল্ডার পোষ্ট" "নিউ পোষ্ট" বাটন চেপে চেপে যেতে হবে যা বিরক্তকর এবং সময় সাপেক্ষ ব্যাপার। আর এর হাত থেকে মুক্তি পেতে চাইলে ব্যবহার করতে হবে স্টাইলিশ নাম্বারড পেজ নেভিগেশন অপশন।
   তো চলুন ধাপে ধাপে দেখে নিই কিভাবে আপনার ব্লগে স্টাইলিশ নাম্বারড পেজ নেভিগেশন ব্যবহার করবেন।

   
   

   ধাপ ১#

   
   

   প্রথমে Blogger Dashboard >>Template>>Edit HTML Button এ যান। (চিত্র দেখুন)
   

   
   

   হ্যা দেখার অপেক্ষায় রইলাম।

   
   

   ধাপ ২#
   Edit HTML Button বাটনে ক্লিক করার পর যে কোড সম্বলিত এরিয়াটা উন্মুক্ত হবে তার যে কোন জায়গায় মাউস দিয়ে ক্লিক করে কিবোর্ড হতে Ctrl+F চাপুন একসাথে দেখবেন একটি সার্চ বক্স এসে হাজির হয়েছে। এই সার্চ বক্সে ]]>

লেখাটি কপি করে পেষ্ট করুন। আর ঠিক ]]>লেখাটির উপরে আপনার পছন্দমত নিচের দেয়া ৩ধরণের যেকোন একটি নেভিগেশন কোড কপি করে পেষ্ট করুন।

স্টাইল ১#

Code:

.pagenavi{clear:both;margin:30px auto;text-align:center;}
.pagenavi span,.pagenavi a{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.pagenavi a:hover,.pagenavi .current{background:#CECECE;text-decoration:none;color: #000;}
.pagenavi .pages,.pagenavi .current{font-weight:bold;color: #888;}
.pagenavi .pages{border:none;}

স্টাইল ২#

Code:

     .pagenavi{clear:both;margin:30px auto;text-align:center;}
    .pagenavi span,.pagenavi a{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);}
    .pagenavi a:hover,.pagenavi .current{background:#EC8D04;text-decoration:none;color: #fff;}
    .pagenavi .pages,.pagenavi .current{font-weight:bold;color: #fff;-webkit-box-shadow: inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);-moz-box-shadow:inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);box-shadow:inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);}
    .pagenavi .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);}

স্টাইল ৩#

Code:

.pagenavi{clear:both;margin:30px auto;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;}
.pagenavi span,.pagenavi a{padding: 3px 10px;margin-right:5px; color: #fff;}
.pagenavi a:hover,.pagenavi .current{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;}
.pagenavi .pages{border:none;background: none;}

চিত্র দেখুনঃ


ধাপ ২# এর কাজ সফল ভাবে শেষ হলো।

ধাপ ৩#

এবার স্ক্রিপ্ট এ্যাড করার পালা। প্রথমে যে সার্চ বক্স (Ctrl+F চেপে) খুজে বের করেছিলেন তাতে এবার নিচের কোডটি কপি করে পেষ্ট করুন আর এন্টার চাপুন। দেখবেন কোডটি হাইলেটেড হয়ে দেখা দিয়েছে।

Code:

এই কোডটির ঠিক নিচে পেষ্ট করুন এই স্ক্রিপ্ট এর অংশটুকুঃ

Code:

2:56:00 PM