Home Custom Scroll Top

How to Add Animation Subscribe Box 2021

Animation Subscribe Box:- The subscribe box is a very useful feature for the website. You can stay connected to your reader through the subscribe box. As soon as you publish the post in your blog, notification will be sent to all the subscriber readers via email, which will increase the number of your blog readers.

Let’s start step by step guide:-

First, you need to open Blogger

How to Add Animation Subscribe Box 2021

Then Select the Theme Menu and Click On the Edit HTML Button.

How to Add Animation Subscribe Box 2021

Add This CSS Code right Before the code </head>

<style type='text/css'>
/* Subscribe Box */
@keyframes rotate{100%{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
.rainbow{position:relative;z-index:0;overflow:hidden;padding:3px}.rainbow::before{content:&#39;&#39;;position:absolute;z-index:-2;left:-50%;top:-50%;width:200%;height:200%;background-color:#2ecc71;background-repeat:no-repeat;background-size:50% 50%,50% 50%;background-position:0 0,100% 0,100% 100%,0 100%;background-image:linear-gradient(#2ecc71,#2ecc71),linear-gradient(#fbb300,#fbb300),linear-gradient(#e74c3c,#e74c3c),linear-gradient(#3498db,#3498db);animation:rotate 8s linear infinite}.rainbow::after{content:&#39;&#39;;position:absolute;z-index:-1;left:5px;top:5px;width:calc(100% - 10px);height:calc(100% - 10px);background:#fff}#HTML99{padding:0}#HTML99 h2{color:#222;padding:0}#HTML99 h2:before{display:none}.subscribe-wrapper{color:#222;line-height:20px;margin:0;padding:20px}.subscribe-form{clear:both;display:block;margin:10px auto;overflow:hidden}.subscribe-wrapper p{margin:0;font-size:14px}form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}.subscribe-css-email-field{background:#fff;color:#222;margin:0 0 18px;padding:12px;width:100%;border:1px solid rgba(0,0,0,0.1);outline:0;font-size:14px;text-indent:10px;line-height:20px;border-radius:3px;transition:all .6s}.subscribe-css-email-field:hover,.subscribe-css-email-field:focus{border-color:rgba(0,0,0,0.3)}.subscribe-css-button{background:#2c3e50;color:#fff;cursor:pointer;font-weight:500;padding:7px;text-transform:none;width:100%;border:none;font-size:16px;border-radius:3px;transition:all .3s}.subscribe-css-button:hover{background:#34495e}
</style>

Click Save Theme.

Next Step, You want to add this code in a new widget in the blog layout menu.

Add this Animation Subscribe Box code in the widget

<div class="rainbow">
<div id="subscribe-css">
<div class="subscribe-wrapper">
<h2>Newsletter</h2>
<p>If you like articles on this blog, please subscribe for free via email.</p>
<div class="subscribe-form">
<form action='https://feedburner.google.com/fb/a/mailverify?uri=Add Feedburner Address' class="subscribe-form" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=Add Feedburner Address', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="Add Feedburner Address" />
<input name="loc" type="hidden" value="en_US" />
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email"/>
<input class="subscribe-css-button" title="" type="submit" value="Submit" />
</form>
</div>
</div></div></div>

Replace it all with your blog’s Feed burner address. If you don’t have a Feed Burner address you can visit this link https://feedburner.google.com/fb/a/myfeeds add your blog.

How to Add Animation Subscribe Box 2021

After that click the Save Button.

One More Thing You need to do Replace The widget Id Code with HTML99.

&lt;div class=&quot;rainbow&quot;&gt;
How to Add Animation Subscribe Box 2021 4

Click the save theme button and you’re done.

1. How To Add Star Ratings In Blogger 2021
2. How to add mouse cursor effect to your blog
3. How to add Sticky Ad to Your Blog
4. Best Blogger Template 2021

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply

Your email address will not be published.