Droidadda is one of worlds best online blogging portal where latest trending articles on Android,Blogging,Seo,Gadgets,Tricks,etc are daily published.
Hey Fellas, My name is Sunmughan Swamy & i'm back again with an amazing article for bloggers and HTML Webpage users. Today i would like to share an article on new below post subscription box for bloggers.
I have recieved requests from many bloggers to post on a newly designed Email Subscription Box for Bloggers. So atlast i got a new one from a blogger template. I have collected all the required codes (CSS & HTML) and experimented a while to test it out whether its working or not. and Finally i got it working and is ready to serve you 😊
So, What are you waiting for? Lets read the article now :p
How To Add Subscription Box ?
I will provide you all the necessary steps to add this subscription box in your blogger template to display it below your blog post.Follow the below steps to add this on your blogger template:-
- Step 1: Open Blogger and login to your account.
- Step 2: On the Dashboard Click on Theme.
- Step 3: On the Theme click on Edit HTML.
- Step 4: Now search for this code <data:post.body/> and paste the below code just above the code you searched.
<div class="subscribe-widget" id="subwid" style="display: block;">
<div class="form-promo">
<i class="fa fa-envelope"></i>
<h3>Wanna get our awesome news?</h3>
<h4>Sign up and get the best viral stories straight into your inbox!</h4>
</div>
<div class="tl-rssform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=feedburnerUserName', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email-field" name="email" placeholder="Enter your email address..." type="text">
<input name="uri" type="hidden" value="feedburnerUserName">
<input name="loc" type="hidden" value="en_US">
<input class="email-button" type="submit" value="Subscribe Now">
</form>
</div>
<div class="form-policy"><p><span>*</span>we won't spam you</p></div>
</div>
- Step 5: Now search for this code ]]></b:skin< and paste the below code just above it.
.subscribe-widget{background:#222;color:#fff;position:relative;overflow:hidden;border:1px solid #eee;text-align:center;margin:25px 0;padding:25px 0;}
.form-promo i{font-size:50px;margin-bottom:25px;}
.form-promo h3{text-transform:uppercase;margin:0;}
.form-promo h4{font-weight:400;font-size:17px;margin:0 0 15px;}
.form-policy p{font-size:12px;margin:10px 0 0;}
.form-policy p span{color:red;padding-right:5px;}
input.email-field{font:normal normal 14px 'Prompt', sans-serif;display:inline-block;width:50%;color:#ccc;background:none!important;border:1px solid #f5f5f5!important;text-indent:20px;outline:none!important;height:50px;padding:10px 0!important;}
input.email-button{font:normal normal 14px 'Prompt', sans-serif;font-weight:500;height:50px;cursor:pointer;border:1px solid #ffcc33;background:#ffcc33;outline:none;transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;padding:0 15px;}
input.email-button:hover{background:#333;color:#fff;}- Step 6: Now search for this line @media only screen and (max-width:767px) { and paste the below code after this code begins.
.subscribe-widget{padding:25px;}- Step 7: Now search for this line @media only screen and (max-width:479px) { and paste the below code after this code begins.
.form-promo h3{font-size:14px;}- Step 8: Now save your "Template". Congratulations! you have successfully added this subscription box below your blog post ♥
Final Words
This was the article on Animated Delete Button with Confirmation. I hope you'll like this article. If you need any extra help completing this guide, then you should tell me in comments.
Also Read: Pure CSS Colourful Progress Bar Line for Blogs&Forums
Also Read: Pure CSS Colourful Progress Bar Line for Blogs&Forums
Thankyou for visiting Droidadda. For fast access to our service Bookmark & Subscribe us now. Share this article with your friends and show how they can customize their Webpage. If any issues then feel free to comment below. Peace out.
