How to Add Subscribe Button In Blogger Template

byAddu Shaikh Lakhera •

Creating a subscription box in your Blogger template allows visitors to subscribe to your blog updates via email. Here’s a step-by-step guide on how to add a subscription box:

Step 1: Access Your Blogger Dashboard

(a). Log in to Blogger.
(b). Select the blog you want to edit.

Step 2: Go to Layout

(a). In the left sidebar, click on Layout.
(b). Choose where you want to add the subscription box (e.g., sidebar, footer).

Step 3: Add a Subscription Gadget


(a). Click on Add a Gadget in the desired section.
(b). In the pop-up window, scroll down and look for the "Follow by Email" gadget.
(c). Click the + icon next to it.

Step 4: Configure the Subscription Gadget

(a). Title: You can enter a title like "Subscribe to My Blog" or "Join Our Mailing List."
(b). Layout Options: You can customize the layout options if needed.
(c). Click Save to add the gadget.

Step 5: Save Your Layout

(a). After adding the subscription gadget, click Save Arrangement to save your changes.

Step 6: Preview Your Blog

(a). Click on View Blog to see how the subscription box looks.
(b). Test the subscription form by entering an email address to ensure it works.

Step 7: Customize the Subscription Box (Optional)

If you want to customize the appearance of the subscription box, you can add some CSS to your template.

(a). Go to Theme in the left sidebar.
(b). Click on Edit HTML.
(c). Find the <b:skin> section and add your custom CSS at the end:

/* Subscription Box Styles */
#Email {
    padding: 10px;
    width: 70%;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 5px;
}

input[type="submit"] {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #0056b3;
}{codeBox}


Step 8: Save Your Changes

(a). After adding the CSS, click Save in the HTML editor.
(b). View your blog again to check the new styles applied to the subscription box.


To create a subscription box with a unique design for your Blogger template, follow these steps, including the HTML and CSS you'll need to implement.

Step 1: Access Your Blogger Dashboard

(a). Log in to Blogger.
(b). Select the blog you want to edit.

Step 2: Go to Layout

(a). Click on Layout in the left sidebar.
(b). Choose where you want to add the subscription box (e.g., sidebar, footer).

Step 3: Add a Custom HTML Gadget

(a). Click on Add a Gadget in the desired section.
(b). Select HTML/JavaScript from the pop-up window.

Step 4: Insert Subscription HTML Code

In the content box of the HTML/JavaScript gadget, insert the following code:


<div class="subscription-box">

    <h3>Subscribe to My Blog</h3>

    <p>Get the latest updates delivered straight to your inbox!</p>

    <form action="https://your-blog-name.blogspot.com/feeds/posts/default/-/YOUR_LABEL_NAME?alt=json-in-script&callback=callback" method="post" id="subscribe-form">

        <input type="email" name="EMAIL" placeholder="Enter your email" required>

        <input type="submit" value="Subscribe">

    </form>

</div>{codeBox}


Note: Replace YOUR_LABEL_NAME with a relevant label for organizing subscriptions.

Step 5: Add Custom CSS

To style the subscription box, you can add CSS code. Go to Theme in the left sidebar, then click on Edit HTML.

(a). Scroll to find the <b:skin> section.
(b). Add the following CSS at the end:

.subscription-box {
    background: #f9f9f9;
    border: 2px solid #007BFF;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin: 20px auto;
    max-width: 400px;
}

.subscription-box h3 {
    color: #333;
    margin-bottom: 10px;
}

.subscription-box p {
    color: #666;
    margin-bottom: 15px;
}

.subscription-box input[type="email"] {
    padding: 10px;
    width: calc(100% - 22px); /* Account for padding and border */
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
}

.subscription-box input[type="submit"] {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.subscription-box input[type="submit"]:hover {
    background-color: #0056b3;
}{codeBox}


Step 6: Save Your Changes

(a). After adding the CSS, click Save in the HTML editor.
(b). Return to the Layout section and click Save Arrangement.

Step 7: Preview Your Blog

(a). Click on View Blog to see the new subscription box in action.
(b). Test the subscription form by entering an email address.

To set up a subscription box in Blogger correctly, we can use Google FeedBurner, which allows you to collect email subscriptions. Here’s how to create a subscription box that works without the 400 error:

Step 1: Set Up FeedBurner

(a). Go to FeedBurner:

  • Visit FeedBurner.
  • Sign in with your Google account.

(b). Create a Feed:

  • Enter your blog's URL and click Next.
  • Choose a feed title and click Next.

(c). Configure Email Subscriptions:

  • On the next screen, click on Publicize.
  • Select Email Subscriptions from the sidebar and activate it.

(d). Get the Subscription Form Code:

  • After setting up, you'll find a section that provides a subscription form code.
  • Copy the code provided for the subscription form.

Step 2: Add Subscription Box to Blogger

(a). Log in to Blogger.
(b). Select your blog and go to Layout.

(a.1). Add a Gadget:

  • Click on Add a Gadget where you want to place the subscription box (e.g., sidebar).
  • Choose HTML/JavaScript.

(a.2). Insert the Subscription Form Code:

  • Paste the FeedBurner subscription form code you copied earlier into the content box.

(a.3). Customize the Title:

  • You can give it a title like "Subscribe to My Blog" or "Join Our Mailing List."

(a.4). Save the Gadget:

  • Click Save to add the gadget.

Step 3: Save Your Layout

(a). After adding the gadget, click Save Arrangement in the Layout section.

Step 4: Preview Your Blog

(a). Click on View Blog to see how the subscription box looks.
(b). Test the form by entering an email address to ensure it works properly.

Additional Styling (Optional)

If you want to style the subscription box, you can add custom CSS:

(a). Go to Theme in the left sidebar.
(b). Click on Edit HTML.
(c). Scroll to the <b:skin> section and add CSS like this:

.subscription-box {
    background: #f9f9f9;
    border: 2px solid #007BFF;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin: 20px auto;
    max-width: 400px;
}

.subscription-box h3 {
    color: #333;
    margin-bottom: 10px;
}

.subscription-box p {
    color: #666;
    margin-bottom: 15px;
}

.subscription-box input[type="email"] {
    padding: 10px;
    width: calc(100% - 22px); /* Account for padding and border */
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
}

.subscription-box input[type="submit"] {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.subscription-box input[type="submit"]:hover {
    background-color: #0056b3;
}{codeBox}


The "invalid data found in FeedBurner" error typically occurs when FeedBurner is unable to properly access or parse your blog's feed. Here are steps to troubleshoot and fix this issue:

Step 1: Check Your Blog Feed URL

  1. Get Your Feed URL:
    • Your feed URL usually looks like this: http://yourblogname.blogspot.com/feeds/posts/default.
    • Visit this URL directly in your browser to ensure it’s accessible. You should see an XML feed if it's working correctly.

Step 2: Validate Your Feed

  1. Use a Feed Validator:
    • Go to a feed validation site like W3C Feed Validation Service.
    • Enter your feed URL and check for errors. This tool will help identify issues with your feed.

Step 3: Fix Feed Errors

  1. Common Issues:

    • Missing Titles or Content: Ensure all your posts have titles and content.
    • Special Characters: Check for special characters in your post titles or content that may break the feed.
    • HTML Errors: Remove any invalid HTML tags from your posts.

  2. Update Posts:

    • If you find problematic posts, edit them to remove any issues, then save your changes.

Step 4: Re-Submit Your Feed in FeedBurner

  1. Log in to FeedBurner.
  2. If you have already created a feed, you might need to delete it and create a new one with the corrected URL.
  3. Re-enter your blog's feed URL in FeedBurner and follow the setup steps again.

Step 5: Wait for Propagation

  • After making changes, it may take some time for FeedBurner to re-index your feed. Give it a few hours and check again.

Step 6: Monitor for Errors

  1. Check FeedBurner Settings:
    • Go back to your FeedBurner account and check for any error messages or issues in the Analyze tab.
  2. Test the Subscription Form:
    • Ensure that the subscription form works correctly after fixing the feed.

Additional Help

If you continue to experience issues, consider:

  • Blogger Help Forum: Seek assistance from the Blogger Help Community.
  • Blogger Support: You can contact Blogger support for specific issues.

Following these steps should help you resolve the "invalid data found in FeedBurner" error. If you need further assistance, feel free to ask! 

Tags

Post a Comment

Previous Post Next Post
Share to other apps
Copy Post Link

نموذج الاتصال

//]]>