How to make Followers Button In Blogger

Are you a Blogger user looking to enhance the navigation experience within your blog posts? If so, you've come to the right place! Pagination plays a crucial role in breaking down lengthy content into more manageable chunks, improving readability and user experience. In this blog post, we'll delve into how to effectively implement pagination within your Blogger posts using the PlusUI theme.

Why Pagination Matters

Before we dive into the technical details, let's understand why pagination is essential.

1. Improved Readability: Long, uninterrupted blocks of text can overwhelm readers. Pagination breaks content into smaller sections, making it easier to digest.
2. Enhanced Navigation: Visitors can navigate your content more efficiently, jumping to specific sections or pages.
3. Reduced Load Time: Loading smaller portions of content at a time can improve page load speed, especially for users on slower connections or mobile devices.

Let's start the process

First, go to your theme HTML file.
Then copy and paste the below code to your theme </body> tag (above).

<div class="widget-content">
<style>
  :root {
    --background-light: #f9f9f9;
    --text-light: #333;
    --button-background-light: #3498db;
    --button-text-light: #fff;
    --button-hover-light: #2980b9;

    --background-dark: #2c2c2c;
    --text-dark: #fff;
    --button-background-dark: #1a1a1a;
    --button-text-dark: #fff;
    --button-hover-dark: #333;
  }

  .follow-widget {
    text-align: center;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
  }

  .follow-btn {
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  /* Light mode styles */
  .follow-widget.light-mode {
    background-color: var(--background-light);
    color: var(--text-light);
  }

  .follow-btn.light-mode {
    background-color: var(--button-background-light);
    color: var(--button-text-light);
  }

  .follow-btn.light-mode:hover {
    background-color: var(--button-hover-light);
  }

  /* Dark mode styles */
  .follow-widget.dark-mode {
    background-color: var(--background-dark);
    color: var(--text-dark);
  }

  .follow-btn.dark-mode {
    background-color: var(--button-background-dark);
    color: var(--button-text-dark);
  }

  .follow-btn.dark-mode:hover {
    background-color: var(--button-hover-dark);
  }

  /* Other common styles */
  .follow-widget h3,
  .follow-widget p {
    color: var(--text-light);
  }

  @media (prefers-color-scheme: dark) {
    /* Apply dark mode styles when user prefers dark mode */
    .follow-widget {
      background-color: var(--background-dark);
      color: var(--text-dark);
    }

    .follow-btn {
      background-color: var(--button-background-dark);
      color: var(--button-text-dark);
    }

    .follow-btn:hover {
      background-color: var(--button-hover-dark);
    }
  }
</style>

<div class="follow-widget light-mode">
  <p>Join our community and stay updated with the latest content.</p>
  <button class="follow-btn light-mode" onclick="incrementFollowerCount()">
    Follow Us (${followerCount})
  </button>
</div>

<script>
  let followerCount = parseInt(localStorage.getItem('followerCount')) || 25009;

  const followWidget = document.querySelector(".follow-widget");
  const followBtn = document.querySelector(".follow-btn");

  followBtn.innerHTML = `Followers (${followerCount})`;

  function incrementFollowerCount() {
    followerCount += 1;
    localStorage.setItem('followerCount', followerCount);
    followBtn.innerHTML = `Followers (${followerCount})`;
    window.location.href = "https://www.blogger.com/follow.g?view=FOLLOW&blogID=1589933473100425130";
  }
</script>
</div>
  

Conclusion

Pagination is a valuable tool for enhancing the navigation and readability of your blog posts, and with the PlusUI theme for Blogger, implementing it has never been easier. By following the steps outlined in this guide and adhering to best practices, you can provide your audience with a seamless browsing experience, keeping them engaged and coming back for more. Happy blogging!