#eTubeGuideBangla : ব্লগার ব্লগস্পট ওয়েবসাইটে পৃষ্ঠা নম্বর যুক্ত করার জন্য কীভাবে জাভাস্ক্রিপ্ট করবেন

» #eTubeGuideBangla ভিডিও বিবরণ :

ব্লগস্পট বা ব্লগার ওয়েবসাইটে পৃষ্ঠা নম্বর (Pagination) যোগ করার জন্য, আপনাকে কিছু কাস্টম জাভাস্ক্রিপ্ট এবং HTML কোড যুক্ত করতে হবে। এটি আপনার ব্লগের পোস্ট পৃষ্ঠাগুলির মধ্যে নেভিগেট করতে সহায়তা করবে এবং ভিজিটররা সহজেই আপনার ব্লগের পরবর্তী বা পূর্ববর্তী পৃষ্ঠায় যেতে পারবে।

এখানে ব্লগস্পট ব্লগে পৃষ্ঠা নম্বর যোগ করার জন্য একটি উদাহরণ দেওয়া হলো:

১. ব্লগার ওয়েবসাইটে পৃষ্ঠা নম্বর কাস্টমাইজড কোড:

html
<!-- Pagination Start -->
<script type="text/javascript">
  var numPerPage = 5;  // Change the number of posts per page
  var totalPages = Math.ceil(document.querySelectorAll('.post').length / numPerPage);
  var currentPage = 1;
  
  function showPage(pageNumber) {
    var posts = document.querySelectorAll('.post');
    var startIndex = (pageNumber - 1) * numPerPage;
    var endIndex = pageNumber * numPerPage;
    for (var i = 0; i < posts.length; i++) {
      if (i >= startIndex && i < endIndex) {
        posts[i].style.display = 'block';
      } else {
        posts[i].style.display = 'none';
      }
    }
    currentPage = pageNumber;
    updatePagination();
  }
  
  function updatePagination() {
    var pagination = document.getElementById('pagination');
    pagination.innerHTML = '';
    for (var i = 1; i <= totalPages; i++) {
      var pageLink = document.createElement('a');
      pageLink.href = 'javascript:void(0)';
      pageLink.innerHTML = i;
      pageLink.setAttribute('onclick', 'showPage(' + i + ')');
      pagination.appendChild(pageLink);
      if (i < totalPages) {
        pagination.appendChild(document.createTextNode(' | '));
      }
    }
  }

  window.onload = function() {
    showPage(currentPage);
  };
</script>

<div id="pagination"></div>
<!-- Pagination End -->

২. ব্লগ পোস্ট কোড (HTML):

ব্লগস্পট ব্লগের পোস্টের মধ্যে, প্রতিটি পোস্টের HTML কোডে .post ক্লাস অবশ্যই থাকতে হবে। ব্লগার পোস্টে যদি .post ক্লাস না থাকে, তবে আপনাকে সিএসএস (CSS) কোডের মাধ্যমে পৃষ্ঠা নম্বরের জন্য এই ক্লাসটি যুক্ত করতে হবে।

৩. পৃষ্ঠা নম্বর কোড ব্লগে যুক্ত করার ধাপ:

1. ব্লগার ড্যাশবোর্ডে লগইন করুন।
2. Layout অপশনে ক্লিক করুন।
3. Add a Gadget বাটনে ক্লিক করুন।
4. HTML/JavaScript উইজেটটি নির্বাচন করুন।
5. ওপেন হওয়া উইন্ডোতে উপরের কোডটি পেস্ট করুন এবং Save বাটনে ক্লিক করুন।

৪. কাস্টমাইজেশন:

• numPerPage: এটি নির্ধারণ করবে প্রতিটি পৃষ্ঠায় কতটি পোস্ট দেখানো হবে। উদাহরণস্বরূপ, এখানে ৫টি পোস্ট এক পৃষ্ঠায় দেখানো হবে।
• totalPages: এটি পৃষ্ঠাগুলির মোট সংখ্যা নির্ধারণ করবে। এটি পোস্টের সংখ্যা অনুযায়ী স্বয়ংক্রিয়ভাবে গণনা হবে।

৫. ব্লগের ডিজাইনে পরিবর্তন:

• আপনি আপনার ব্লগের ডিজাইনে সঠিকভাবে Pagination অপশন এবং লিঙ্কগুলি সাজাতে CSS কোড ব্যবহার করতে পারেন, যেমন:

css
#pagination {
  text-align: center;
  padding: 20px;
}

#pagination a {
  color: #007BFF;
  margin: 0 5px;
  text-decoration: none;
}

#pagination a:hover {
  text-decoration: underline;
}

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

» #eTubeGuideBangla ভিডিও #হ্যাশট্যাগ :

#ব্লগার #ব্লগস্পট #ওয়েবসাইট #পৃষ্ঠানম্বর #জাভাস্ক্রিপ্ট #ব্লগারজাভাস্ক্রিপ্ট #পৃষ্ঠাঙ্কন #জাভাস্ক্রিপ্টকোড #ব্লগস্পটটিপস #ব্লগপোস্ট #ব্লগস্পটওয়েবসাইট #জাভাস্ক্রিপ্টএড #পেজনাম্বার #ব্লগারপৃষ্ঠানির্দেশনা #পৃষ্ঠানম্বরএড #ব্লগসাইট #জাভাস্ক্রিপ্টগাইড #ব্লগারটিউটোরিয়াল #জাভাস্ক্রিপ্টসেটআপ #ব্লগস্পটফিচার #পৃষ্ঠাসেটআপ #ব্লগারফিচার #জাভাস্ক্রিপ্টইনস্টল #পেজনম্বরসক্রিপ্ট #ব্লগস্পটএপ্লিকেশন #জাভাস্ক্রিপ্টলাইন #পেজনম্বরকোড #ব্লগারট্রিক #ব্লগস্পটটুল #জাভাস্ক্রিপ্টকাস্টম #ব্লগস্পটগাইড #পেজফাংশন #জাভাস্ক্রিপ্টপৃষ্ঠাসেটিংস #ব্লগস্পটকোড #জাভাস্ক্রিপ্টডেভেলপমেন্ট #পেজফিচার #ব্লগস্পটচেঞ্জ #পৃষ্ঠাকোড #ব্লগারসেটআপ #পৃষ্ঠাঙ্কনগাইড #জাভাস্ক্রিপ্টঅপটিমাইজেশন #পেজকাস্টমাইজেশন #জাভাস্ক্রিপ্টকোডটিউটোরিয়াল #পেজনম্বরকাস্টম #ব্লগস্পটএডভান্স #পৃষ্ঠানির্দেশনা #জাভাস্ক্রিপ্টএডজাস্ট #পেজনম্বরইনস্টল