আপনার ব্লগে যুক্ত করুন Stylish Page Number Navigation


হ্যালো বন্ধুরা, TechRajjo.Com – Create Your Own Creativity তে আপনাকে স্বাগতম । কেমন আছেন সবাই ? নিশ্চয় ভালো আছেন । আর ভালো আছেন বলেই হয়তো আমাদের টেক রাজ্য থেকে আপনার পছন্দের এই আর্টিকেলটি পড়তে বসছেন । আমরা আমাদের টেক রাজ্যে প্রতিনিয়ত প্রযুক্তি বিষয়ক বিভিন্ন আর্টিকেল শেয়ার করে থাকি । যাতে মানুষ প্রযুক্তিকে সহজে জানতে ও বুঝতে পারে ।  তারই ধারাবাহিকতায় আজকে আপনাদের জন্য নিয়ে এসেছি প্রযুক্তি বিষয়ক আরেকটি আর্টিকেল । পোস্টের টাইটেল পড়ে এতক্ষণে নিশ্চয় বুঝে গেছেন যে, আজকে আমরা কোন বিষয় নিয়ে আলোচনা করবো ।

তাহলে চলুন আর কথা না বাড়িয়ে মূল আলোচনায় ফিরে যাই ।

সব ধরনের ব্লগ কিংবা ওয়েবসাইটেই একটি Page Number Navigation যুক্ত করার প্রয়োজন হয়। কারণ ব্লগ পোষ্টের এক পাতা থেকে অন্য পাতায় যাওয়ার জন্য এই Page Number Navigation ব্যবহার করতে হয়। এই Page Number Navigation ছাড়া আপনা ব্লগ কোনভাবেই পূর্ণতা পাবে না। ভিজিটররা নিঃসন্দেহ ভাববে যে, আপনার ব্লগটি কোন কাজেরই নয়। ফলে অনেকেই আপনার ব্লগ থেকে বেরিয়ে যাবে আর আপনি আপনার ভিজিটর হারিয়ে ফেলবেন ।

কিন্তু আমি আপনাদের আজকে দেখাবো কিভাবে ব্লগে খুব সহজে একটি Page Number Navigation যুক্ত করবেন। আসলে ব্লগে Page Number Navigation যুক্ত করাটা খুব একটা সহজ কাজ নয়। এই জন্য ব্লগিং সম্পর্কে কিছু অভীজ্ঞতা থাকতে হয়। কারণ এটি যুক্ত করার জন্য আপনার ব্লগার টেমপ্লেটে কোডিং করতে হয় যেটা বিগিনারদের জন্য খুবই ঝামেলার একটা কাজ কারণ ব্লগের টেমপ্লেটে আপনি যদি কোন কোড উল্টাপাল্টা করে ফেলেন তাহলে আপনার ব্লগের ডিজাইন বাজেভাবে বদলে যেতে পারে । আর আপনি বিগিনার হওয়ার কারনে পরে সেই ডিজাইনটা ঠিক করতে নাও পারেন ।

কিন্তু আজ আমি আপনাদের যে পদ্ধতিতে দেখাবো এতে আপনার টেমপ্লেটে কোন প্রকার কাজ করতে হবে না। শুধু মাত্র আপনার ব্লগের Layout হতে Gadget ব্যবহার করেই খুবই সহজে এই Page Number Navigation টি যুক্ত করতে পারবেন। অনেকেই হয়তো ভাবতে পারেন যে, এত বড় কোড ব্লগে যুক্ত করলে ব্লগে লোড বেশি পড়ে যাবে । কিন্তু আমি আপনাদের বলছি এটি HTML এবং CSS দিয়ে এমনভাবে ডিজাইন করা হয়েছে যাতে এটি ব্লগের টেম্পলেটে কোন লোড না ফেলে । এটি একদম Website Friendly করে তৈরি করা হয়েছে । তাই এটি আপনার ব্লগে নিশ্চিন্তে ব্যবহার করতে পারেন ।

তার আগে আপনার কাছে আমাদের রিকুয়েস্ট, আপনি যদি আমাদের ব্লগটি সাবস্ক্রাইব না করে থাকেন, তাহলে এখনি সাবস্ক্রাইব করে নিন । তাহলে প্রযুক্তি বিষয়ক নিত্যনতুন আর্টিকেল সবার আগে পৌঁছে যাবে আপনার কাছে

Blogger Page Navigation


যেভাবে Page Number Navigation যুক্ত করতে হয়ঃ
  • প্রথমে আপনার ব্লগার একাউন্টে Login করুন।
  • এরপর ব্লগের ড্যাশবোর্ড হতে বাম পাশের Layout এ ক্লিক করুন।
  • এখন ডান পাশের সাইটবার হতে Add Gadget এ ক্লিক করুন।
  • তারপর HTML/JavaScript নামের অপশনটিতে ক্লিক করুন। এতে আপনার সামনে HTML/JavaScript  এর খালি ঘর সম্বলিত একটি বক্স ওপেন হবে এখানে আপনি দুটি ঘর দেখতে পারবেন । প্রথমতি ছোট একটি ঘর যেখানে টাইটেল লেখতে হয় । আর দ্বিতীয়টি বড় ঘর যেখানে আপনাকে কোড পেস্ট করতে হবে । তবে এক্ষেত্রে আপনার টাইটেল লিখার কোন প্রয়োজন নেই ।
  • এবার নিচের সম্পূর্ণ কোডগুলি HTML/JavaScript এর বড় খালি ঘরে পেষ্ট করুন।


<style type='text/css'>

.blog-pager,#blog-pager {
font-family:"Times New Roman", Times, serif;
font-weight:normal;
font-size:12px;
width:700px;
padding:17px;
}

.showpageNum a,.showpage a {
background: rgb(15, 124, 241);
color:#FFF;
margin-right:.6em;text-decoration:none;
font-size:15px;
font-weight:bold;
line-height:0;
text-align:center;
padding:7px 13px 7px;
-moz-border-radius:36px;
-webkit-border-radius:8px;
border-radius:8px;
}

.showpageNum a:hover,.showpage a:hover {
background: rgb(0, 49, 247);
color:#000000;
margin-right:.6em;
text-decoration:none;
font-size:15px;
font-weight:bold;
line-height:0;
text-align:center;
padding:7px 13px 7px;
-moz-border-radius:36px;
-webkit-border-radius:12px;
border-radius:12px;
}

.showpageOf {
margin:0 8px 0 0;
font-family:'Coming Soon', cursive;
text-decoration:none;
font-size:100%;
}

.showpagePoint {
background: rgb(0, 49, 247);
color:#FFF;
margin-right:.6em;
text-decoration:none;
font-size:15px;
font-style:italic;
line-height:0;
text-align:center;
padding:7px 13px 7px;
-moz-border-radius:36px;
-webkit-border-radius:8px;
border-radius:8px;
}
</style>

<script type='text/javascript'>
var home_page_url = location.href;
var pageCount=2;
var displayPageNum=3;
var upPageWord ='Previous';
var downPageWord ='Next';

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 class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
  html += '<span class="showpageNum"><a href="/">1</a></span>';

}else{
 html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}}}
if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}
html = '<div class="showpageArea"><span  class="showpageOf"> 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 class="showpageNum"><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 class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}fFlag++;}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
 html = labelHtml+'1</a></span>';
}else{
 html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}}}
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}}
html = '<div class="showpageArea"><span  class="showpageOf"> 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;
}}
</script>
<script type='text/javascript'>
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){
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>
</script>
Code ID No. TRCN-5190009 Download
  • এখন Save এ ক্লিক করুন। এবার আপনার ব্লগ বা ওয়েবসাইটটি ভিজিট করে দেখুন খুব সুন্দর একটি Page Number Navigation  এড হয়ে গেছে ।

কাষ্টমাইজেশনঃ
  • প্রতি পেজে কতটি পোষ্ট দেখাতে চান সেটা সেট করার জন্য উপরের কোডের  'var pageCount=2' এই লাল অংশে পরিবর্তন করুন । 
  • প্রতি পেজে কতটি বাটন দেখাতে চান সেটা সেট করার জন্য উপরের কোডের  'var displayPageNum=3' এই লাল অংশে পরিবর্তন করুন ।

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

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

আজ এ পর্যন্তই । আবার আপনাদের সামনে হাজির হবো অন্য কোন প্রযুক্তি বিষয়ক আর্টিকেল নিয়ে । ততদিন সবাই ভালো থাকুন, সুস্থ্য থাকুন আর টেক রাজ্যের সাথেই থাকুন । ধন্যবাদ...

আপনার ব্লগে যুক্ত করুন Stylish Page Number Navigation আপনার ব্লগে যুক্ত করুন Stylish Page Number Navigation Reviewed by CEO on Thursday, June 13, 2019 Rating: 5

No comments:

It can be commented that the post was good. You can also comment on any problem. We will try to solve as much as possible.

Powered by Blogger.