How to Add Animation Subscribe Box 2021

How to Add Animation Subscribe Box 2021
How to install Cool Animation Subscribe Box in you blog 2021

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 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>

Plz, replace it all with your blog’s Feedburner address. If you don’t have a FeedBurner 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;

Click the save theme button and you’re done.

0 Shares:
0 Share
0 Share
0 Tweet
0 Share
0 Share
0 Share
Leave a Reply

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

You May Also Like