How to Add New Follow Widget On Blogger

Custom Blogger Follow Button with Follower Count Integration Blogger A Step by Step Guide

This custom follow button widget lets you encourage visitors to follow your Blogger blog using a stylish and interactive design. It includes a follower count display and a redirect link to your Blogger's follow page.

Features:

Clean, modern design with rounded corners

Displays follower count (you can update manually or via dynamic fetch later)

Button redirects to your Blogger follow link

Optimized for any sidebar or footer widget area

Code Overview:

You’ve been given two sections:

1.  HTML Structure

2.  CSS Styling

3.  JavaScript Functionality (for redirect)

Where to Place This Code:

Option 1: Add to Sidebar/Footer via Layout > HTML/JavaScript Widget

1. Go to  Blogger Dashboard > Layout 

2. Click  "Add a Gadget" in your desired section (e.g., Sidebar or Footer)

3. Choose  "HTML/JavaScript"

4. Paste the entire code below inside the content box

5. Save and drag to reposition if needed

Option 2: Add Directly to Theme

1. Go to  Blogger Dashboard > Theme

2. Click  "Customize > Edit HTML"

3. Locate the </body> tag or a sidebar container like:

4. Paste the widget HTML+CSS+JS code there

5. Save changes

html
<!-- Start Follow Widget -->
<div class="jet-follow-box">
  <p>Join Our Community And Stay Updated With The Latest Content.</p>
  <a href="https://www.blogger.com/follow.g?blogID=YourBlogID" target="_blank" class="jet-follow-btn">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="18" height="18" fill="white" viewBox="0 0 24 24">
      <path d="M12 12c2.7 0 4.9-2.2 4.9-4.9S14.7 2.2 12 2.2 7.1 4.4 7.1 7.1 9.3 12 12 12zm0 2c-3.3 0-10 1.7-10 5v2h20v-2c0-3.3-6.7-5-10-5z"/>
    </svg>
    Follow Us <span>(14011)</span>
  </a>
</div>

<style>
.jet-follow-box {
  background: var(--widget-bg, #ffffff);
  color: var(--text-color, #333);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  font-family: "Segoe UI", sans-serif;
  max-width: 320px;
  margin: 20px auto;
  text-align: center;
  transition: background 0.3s ease, color 0.3s ease;
}
.jet-follow-box p {
  font-size: 15px;
  margin-bottom: 18px;
  line-height: 1.5;
}
.jet-follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #2196f3;
  color: #fff;
  padding: 10px 22px;
  font-weight: bold;
  font-size: 15px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.jet-follow-btn:hover {
  background: #1976d2;
  transform: translateY(-2px);
}
.jet-follow-btn .icon {
  fill: white;
}
</style>
<!-- End Follow Widget -->  

Customization Tips:

Update the follower count (<span>(4011)</span>) manually or connect it dynamically with Blogger’s API if needed.

Change the follow link  in the <a href="..."> to match your blog’s unique blogID.

You may replace SVG icon or adjust styles to match your theme.

Download

Go to Link