How to Add Email Subscription Widget In Blogger
Email Subscription widget helps to improve blog followers and loyal readers, So today we will help you with this tutorial which is about, How to Add Email Subscription Widget In Blogger, This is a simple and elegant looking newsletter widget and has simple styling to match any design.
Lets move further and see How to Add Email Subscription Widget In Blogger. You can check a live preview of the Author Box widget by clicking the button below.
Lets move further and see How to Add Email Subscription Widget In Blogger. You can check a live preview of the Author Box widget by clicking the button below.
Adding The Widget
The First thing you need to do is to login into your Blogger account and go to >> Layout >> Click add a gadget any where into your layout >> Add HTML/JAVASCRIPT widget and paste the below code in the blank space.
<style>Change the highlighted red text with your feedburner id.
#soratemplates-sbox-v2 {
padding: 0;
padding-bottom: 5px;
font-family: inherit;
display: block;
margin: 0;
border-radius: 1px;
border: 5px solid #FFD439;
}
#soratemplates-sbox-v2 p {
font-size: 15px;
color: #000;
line-height: 27px;
padding: 5px 10px 5px;
text-align: center;
width: 80%;
margin: 5px auto 20px;
border-bottom: 2px solid #ebebeb;
border-radius: 20px;
}
#soratemplates-sbox-v2 .rssform {
padding: 0;
margin: 0 auto;
display: block;
}
#soratemplates-sbox-v2 .rssform input {
padding: 8px;
margin: 20px auto 15px;
font-size: 13px;
color: #000;
text-align: center;
display: block;
font-family: inherit;
font-weight: normal;
width: 90%;
height: 38px;
text-transform: uppercase;
outline: none !important;
border: 1px solid #ebebeb;
border-radius: 1px;
background-color: #FCFCFC;
box-sizing: border-box !important;
}
#soratemplates-sbox-v2 .rssform .button:hover {
opacity: 0.7;
-moz-opacity: 0.7;
-webkit-opacity: 0.7;
}
#soratemplates-sbox-v2 .rssform .button {
background: #222;
color: white!important;
margin-top: 15px;
outline: none !important;
transition: all .3s ease-in-out;
padding: 5px 2px !important;
float: none;
text-transform: uppercase;
font-size: 18px;
font-weight: normal;
cursor: pointer;
}
#soratemplates-sbox-v2 form {
margin-bottom: 10px !important;
}
</style>
<div id="soratemplates-sbox-v2">
<p>Get All The Latest Updates Delivered Straight Into Your Inbox For Free!</p>
<div class="rssform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=soratemplates', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" name="email" placeholder="Enter your email address..." vk_14173="subscribed" vk_1e723="subscribed">
<input type="hidden" value="soratemplates" name="uri">
<input type="hidden" name="loc" value="en_US">
<input value="Join Now" class="button" type="submit">
</form>
</div>
</div>
Conclusion
Congrats !! You have made it. now you have learned that How to Add Email Subscription Widget In Blogger. Visit your blog and check the awesome widget live in action, hope you liked this tutorial, if you enjoyed then please share it with your friends, we are working hard to develop more such awesome widgets please stay tuned with Us. अलविदा !! (Goodbye in Hindi).
How to Add Email Subscription Widget In Blogger
Reviewed by Sora Blogging Tips
on
January 03, 2017
Rating:
Can you please give me subscription box of mailchamp like this
ReplyDeleteStay tuned.
DeleteDo i have to edit it after paste the codes to my blog?
ReplyDeleteWe have updated the tutorial.
DeleteHelo, it goes fir soratemplates subscription instead of my blog
ReplyDeleteWe have updated the tutorial.
DeletePhase how can I no my Feed burner id
ReplyDeleteyou have to create one.
DeleteWHILE TYPING email in the "type you email box" its coming all in capital letters
ReplyDeleteit doesn't matter, its just for styling purpose.
DeleteHow To Change The Border Yellow Color
ReplyDeleteReplace the color code in this line.
Deleteborder: 5px solid #FFD439;
I have read all the comments and suggestions posted by the visitors for this article are very fine,We will wait for your next article so only.Thanks! entrar no hotmail
ReplyDelete