How to Add Call to Action Box in Blogger Website

ByAbhishek padhi Updated on
Call to action Buttons using HTML and CSS
  • Save

If you want to increase engagement and drive more clicks or conversions on your Blogger site, adding a Call to Action (CTA) box is a smart move. A CTA box helps guide your readers to take specific actions—like subscribing to your newsletter, downloading a freebie, or visiting a product page.

In this guide, you’ll learn how to add a Call to Action box in Blogger easily using HTML and CSS Codes.

What is a Call to Action (CTA) Box?

A Call to Action box is a highlighted section of your blog post that encourages users to take a specific action. Examples include:

  • Subscribe to our Newsletter
  • Download the Free E-Book
  • Buy Now
  • Watch the Video Tutorial

Why Use CTA Boxes in Blogger?

CTA boxes help:

  • Boost user interaction
  • Improve conversion rates
  • Reduce bounce rates
  • Enhance SEO with internal linking

How to Add a Call to Action Box in Blogger

Go to Blogger Post Editor. Login to your Blogger dashboard.

Click on Posts > New Post or Edit an existing one.

Switch to HTML View (top-left corner of the editor).

Copy and paste the following HTML where you want the CTA box to appear:

<div class="cta-box">
  <h3>💡 Enjoying the content?</h3>
  <p>Boost your blog with our recommended tools.</p>
  <div class="cta-buttons">
    <a href="https://your-affiliate-link.com" class="cta-btn primary">Get Hosting</a>
    <a href="https://your-newsletter-link.com" class="cta-btn secondary">Join Newsletter</a>
  </div>
</div>


<style>
/* CTA Box Styling */
.cta-box {
  background: #f0f8ff;
  border: 3px solid #0073e6;
  padding: 20px;
  margin: 30px 10px;
  border-radius: 2px;
  box-shadow: #0073e6 2.4px 2.4px 0px;
  text-align: center;
  font-family: system-ui;
}

.cta-box h3 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  color: #0073e6;
  font-family: Oswald;
}

.cta-box p {
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: #333;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cta-btn {
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s;
}

.cta-btn.primary {
  background-color: #0073e6;
  color: white;
}

.cta-btn.primary:hover {
  background-color: #005bb5;
}

.cta-btn.secondary {
  background-color: #e0e0e0;
  color: #333;
}

.cta-btn.secondary:hover {
  background-color: #cfcfcf;
}

</style>

Now you can change the Button text and it’s links. You can also customize the heading and paragraph within the box.

Video Tutorial

How to Customize the Call to Action Box in Blogger

Here’s how you can customize the text, buttons, colors, fonts, and spacing to match your blog’s branding and goals.

1. Change the Headline and Message Text

Locate this part of the code:

<h3>💡 Enjoying the content?</h3>
<p>Boost your blog with our recommended tools.</p>

Customize it based on your goal:

  • Newsletter:
    • <h3>📬 Want More Tips?</h3>
      <p>Subscribe to our newsletter for weekly blogging advice.</p>
  • Affiliate Promotion:
    • <h3>🚀 Need a Fast Website?</h3>
      <p>Check out our recommended hosting services.</p>

2. Customize Colors

In the CSS section, change the hex color codes:

.cta-box {
  border: 3px solid #0073e6;     /* Blue border */
  box-shadow: #0073e6 2.4px 2.4px 0px;
}

Replace #0073e6 with your brand’s primary color. Use HTML Color Picker if needed.

Primary Button Color:

.cta-btn.primary {
  background-color: #0073e6;
}
.cta-btn.primary:hover {
  background-color: #005bb5;
}

Secondary Button Color:

.cta-btn.secondary {
  background-color: #e0e0e0;
}
.cta-btn.secondary:hover {
  background-color: #cfcfcf;
}

3. Change Fonts

You’re using this font setup:

.cta-box {
  font-family: system-ui;
}
.cta-box h3 {
  font-family: Oswald;
}

If you want to use Google Fonts (like Poppins, Roboto, etc.):

#1: Go to https://fonts.google.com

#2: Choose a font and copy the <Link> tag (for example):

<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

#3: Add it to Blogger → Theme → Edit HTML, inside the <head> section.

#4: Update the CSS:

font-family: 'Poppins', sans-serif;

4. Adjust Spacing & Size

Change padding and margin for more or less space:

.cta-box {
  padding: 20px;
  margin: 30px 10px;
}
  • padding: inside space
  • margin: outside space

You can also change font sizes:

.cta-box h3 {
  font-size: 1.5rem;
}
.cta-box p {
  font-size: 1.2rem;
}

Pro Tips for Effective CTA Boxes

  • Use Action Words: Like “Download”, “Get Started”, “Subscribe”.
  • Keep It Short & Clear: Users should know exactly what to do.
  • Add Visual Contrast: Use a different background to make the box stand out.
  • Make it Mobile-Friendly: Test it on both desktop and mobile.
  • Use Internal Links: Linking to your own pages boosts SEO.

SEO Benefits of Using CTA Boxes

  • Improves dwell time by encouraging more clicks.
  • Enhances UX, which is a ranking signal.
  • Helps funnel readers to high-converting or important content.
  • Encourages sharing and interactions, increasing visibility.

Final Thoughts

Adding a Call to Action box in Blogger is simple and super effective. Whether you’re growing your email list, promoting affiliate links, or guiding readers to other blog posts, a CTA box helps grab attention and drive results.

Start adding CTA boxes to your posts today, and you’ll likely see a boost in engagement and conversions!

Have questions or want a custom CTA box design? Let me know in the comments! 👇

Avatar of Abhishek padhi

Hello there. I am Abhishek Padhi, an Indian digital entrepreneur. With a handful of years of practice and experiment, I currently share top-notch Tutorials related to Blogging & SEO.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *