Monday, August 5, 2013

ব্লগারে খুব সহজে যুক্ত করুন পেইজ নেভিগেশন

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

এবার আসুন এটি ব্লগারে যুক্ত করিঃ
১. আপনার ব্লগের Layout এ যান।
২. ব্লগ পোষ্টের এডিট এ ক্লীক করুন।
৩. Configure Blog Posts নামে একটি ইউন্ডো আসবে। সেখানে Number of posts on main page: এ 5  দিয়ে দিন।
৪. Save এ ক্লীক করুন।
[বিঃদ্রঃ উপরের এই সেটিংটি পরিবর্তন না করলে যখন আপনি নেক্সট বাটনে ক্লীক করবেন তখন প্রথমে একই পোষ্ট আবার আসবে। এবং পরের পেজ অর্থাৎ ২ পেজ থেকে ঠিক মতই আসবে।]
এবার আসুন কোডটি ইন্সটল করিঃ
প্রথমে নিচের বাটনটিতে ক্লীক করুন।

যা কিছু আছে সব কিছু ডিফল্ট রেখে দিন।
এবার প্রথমে Customize বাটনে ক্লীক করুন এবং পরে Add Widget To My Blog বাটনে ক্লীক করুন।

ব্লগারে লগইন করা না থাকলে লগইন করুন।
লগইন করা থাকলে আপনার ব্লগটি সিলেক্ট করুন। টাইটেলে লিখুন Page Navigation। তার পর Add Widget বাটনে ক্লীক করুন।
Widget টি আপনার লেআউটের যেকোন জায়গায় রাখুন এবং লেআউটটি সেভ করুন।
১. এবার আপনার ব্লগের Layout থেকে Edit HTML এ যান।
[বিঃদ্রঃ Expand Widget Templates বক্সে ক্লীক দিবেন না]
এবার নিচের কোডটি খুজুঁনঃ

নিচের কোডটি কপি করুন। যে কোডটি খুজে পেলেন তার পরিবর্তে পেষ্ট করে দিন।
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
]]>

আবার নিচের কোডটি খুজুঁনঃ

নিচের কোডটি কপি করুন। যে কোডটি খুজে পেলেন তার পূর্বে যে কোন স্থানে পেষ্ট করে দিন।
var pageCount=5;
var displayPageNum=5;
var upPageWord =’Previous’;
var downPageWord =’Next’;
এবার আপনার টেমপ্লেটটি সেভ করুন।
এখন আপনার ব্লগে যান। দেখবেন যেখানে Newer Post and Older Post ছিল সেখানে এখন Page Navigation রয়েছে।

No comments:

Post a Comment