১৩ এপ্রিল, ২০১৫

ব্লগে যুক্ত করে নিন একটি Stylist Page Number Navigation

ব্লগে যুক্ত করে নিন একটি Stylist Page Number Navigation
4/ 5 stars - "ব্লগে যুক্ত করে নিন একটি Stylist Page Number Navigation" সব ধরনের ব্লগ কিংবা ওয়েবসাইটেই একটি Page Number Navigation যুক্ত করার প্রয়োজন হয়। কারণ ব্লগ পোষ্টের এক পাতা থেকে অন্য পাতায় যাওয়ার জন্য এ...
-
সব ধরনের ব্লগ কিংবা ওয়েবসাইটেই একটি Page Number Navigation যুক্ত করার প্রয়োজন হয়। কারণ ব্লগ পোষ্টের এক পাতা থেকে অন্য পাতায় যাওয়ার জন্য এই Page Number Navigation ব্যবহার করতে হয়। এই Page Number Navigation ছাড়া আপনা ব্লগ কোনভাবেই পূর্ণতা পাবে না। ভিজিটররা নিঃসন্দেহ ভাববে যে, আপনার ব্লগটি কোন কাজেরই নয়। আমি আপনাদের আজকে দেখাবো কিভাবে ব্লগে খুব সহজে একটি Page Number Navigation যুক্ত করবেন। আসলে ব্লগে Page Number Navigation যুক্ত করাটা খুব একটা সহজ কাজ নয়। এই জন্য ব্লগিং সম্পর্কে কিছু অভীজ্ঞতা থাকতে হয়। কারণ এটি যুক্ত করার জন্য আপনার ব্লগার টেমপ্লেটে কোডিং করতে হয়। আজ আমি আপনাদের যে পদ্ধতিতে দেখাবো এতে আপনার টেমপ্লেটে কোন প্রকার কাজ করতে হবে না। শুধু মাত্র আপনার ব্লগের Layout হতে Gadget ব্যবহার করেই খুবই সহজে এই Page Number Navigation টি যুক্ত করতে পারবেন। আপনি ইচ্ছা করলে এই লিংক হতে এর একটি ডেমো দেখে আসতে পারেন।
Blogger Page Navigation
কিভাবে এই Page Number Navigation যুক্ত করতে হয়ঃ
  • প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
  • এরপর ব্লগের ড্যাশবোর্ড হতে Layout এ ক্লিক করুন।
  • এখন ডান পাশের লেআউট হতে Add Gadget এ ক্লিক করুন।
  • তারপর 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>
  • এখন Save এ ক্লিক করুন। That's all.
কাষ্টমাইজেশনঃ
  • প্রতি পেজে কতটি পোষ্ট দেখাতে চান তা লিখে দিন- 'var pageCount=2'
  • প্রতি পেজে কতটি বাটন দেখাতে চান তা লিখে দিন- 'var displayPageNum=3'
Subcribe to our all updates

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

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

  1. ভাই লে আউট থেকে ডান পাশের কোন ঘরটায় এই কোড গুলো add করবো screenshot deti prben

    উত্তরমুছুন
    উত্তরগুলি
    1. Layout হতে Add Gadget এ ক্লিক করার পর যা আসবে, সেখান থেকে এই চিত্রটিরমত HTML/JavaScript নামের একটি অপশন দেখতে পাবেন। এটিতে ক্লিক করলে যে খালি ঘর আসবে সেখানে কোডগুলি পেষ্ট করুন।

      চিত্রটি দেখতে - এখানে ক্লিক করুন

      মুছুন

 
Subscribe for all Updates

Subscribe Now

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

Powered by: