How to add Feedburner email subscription widget for blogger. Email subscribe widget is most important part of every blogger. Do you know what is email subscribe widget? Yes! this is collect huge amount traffic for your blog. Today I am sharing 2 beautiful blogger email subscription widget for your blog. Check this JSC Exam Result 2016 Earlier some days, I shared an another popup subscribe box for blogger and that is Popup Email Subscribe box for Blogger. But today I am sharing another 2 creative email subscription widget box for blogger and one subscription widget is with social icons.
A Feedburner email subscription widget can bring a huge number of visitors on your blog. Visitors are subscribing to your blog by putting their email and they always get your new updates on their email. Email subscription form on blogger is an important widget.
Email Subscribe Widgets for Blogger
If you place blogger email subscription widget on sidebar then, it will be better. But popup and below of every post is also the good place to add the email subscribe box in blogger. Today I am sharing 2 creative sidebar email subscribe box widget for blogger.- Dark background with social icons
- Colorful widget with name box
How it work?
Everyone know about google's Feedburner. In short, google Feedburner is most popular RSS web service feed. If anyone subscribes to your blog with their email, then Feedburner to deliver your latest posts on all subscribed emails. In this tutorial, i shared 2 subscribe box widget for blogger. Using this widget you can also grow up your blog's visitors.
How to registration on Feedburner? Go to the following link and registration with your blog address and your email: feedburner.google.com. If one's done, then collect your FeedBurner username and note it.
Now, let's start our tutorial.
1- Dark background with social icons
It's the awesome and cute email newsletter subscribe box widget for the blogger that created with pure CSS with font awesome icons. By using this email newsletter forms you can also use your social media links like Facebook, twitter, Linkedin, google plus, Pinterest, vine and Instagram social icons. Attractive subscription widget box is better for every blog. Our first widget is more attractive for blogger.
First, you have to need to add font awesome icon and PT Sans google font. If already added then ignore step 1.
Note: If you use our code, then you agree to give proper footer credit.
Step 1: Go to Blogger Dashboard > Template > Edit HTML and past below codes right after <head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>Step 2: Now need to add CSS Code before </style>
#subscribebox{background:#576269;padding:20px;font-family:'PT Sans',sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}
.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
.follow-subscribe-social ul li:last-child{margin:0}
.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.follow-subscribe-social ul li a:hover{color:#fff}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#f1d640}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: right; font-size: 8px;}Save Template.
Now go to Layout > Add a gadget > HTML/Javascript and past below HTML code and save widget.
<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>
<div class="creadit">
<a href="http://msdesignbd.com" rel="dofollow" target="_blank"> Get This Widget</a></div>Customization:
- Change all # tag with your all social media link.
- Change all YOUR-USER-NAME with your Feedburner username.
2 - Colorful widget with name box
You can use this widget below of every post. This subscribes box widget is created with simple CSS with the colorful background. In this email subscription widget, visitors are able to write their name. The name box makes this widget more professional. In this widget, you can change subscribe box heading. Default heading is: "Subscribe for our all latest news and updates". Now let's start this,
Step 1: Firstly need to add CSS code of this widget. So, copy past below CSS before </style>
#subscribe-box {background-color:#0CC388;font-family: 'PT Sans', sans-serif;}
#subscribe-box p {font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:91%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'PT Sans', sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;}
.creadit a{color: #A7A6A6; float: right; font-size: 8px
Save Template.
Now add a new HTML/Javascript gadget from Layout and the past below code.
Now add a new HTML/Javascript gadget from Layout and the past below code.
<div id="subscribe-box">
<center>
Subscribe for our all latest news and updates</center>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == "") {this.value = "Your Name";}" onfocus="if (this.value == "Your Name") {this.value = "";}" type="text" value="Your Name" />
<input name="email" onblur="if (this.value == "") {this.value = "Your Email";}" onfocus="if (this.value == "Your Email") {this.value = "";}" type="text" value="Your Email" />
<input name="uri" type="hidden" value="USER-NAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="Subscribe Now" />
</form>
</div>
</div>
<div class="creadit">
<a href="http://msdesignbd.com/" rel="dofollow" target="_blank"> Get This Widget</a></div>
Customization:
Hope this email subscribe box widget is helped you. If you found any problems, then inform me on the comment section, I will try to solve your problems. And finally, don't forget to share our posts with your friends. Thanks...
- Change all USER-NAME with your Feedburner username.
Hope this email subscribe box widget is helped you. If you found any problems, then inform me on the comment section, I will try to solve your problems. And finally, don't forget to share our posts with your friends. Thanks...
4 comments:
PSC Result 2019 (Primary School Certificate Exam Result 2019) will publish in the last week in December 2019! That’s Attractive and Great news for all PSC Examinee and Their Guardians. The Ministry of Primary Education, Bangladesh and Directorate of Primary Education (DPE) announced that they’ll publish the PSC Result 2019 as soon as possible and it will be the last week of December. A large Number of PSC Examine and other People don’t know how to check PSC Result 2019 Fast. PSC Result 2019 Marksheet will available on DPE Official Website, Teletalk DPE Result Website and also on PSC Result 2019 sms. Check your PSC Result Marksheet from this Website now.
If you are reading this post, don’t worry about checking PSC Exam Result 2019. Here are the complete Information and Guideline about JDC Result 2019 of Madrasah Education Board Bangladesh.
Thank you for writing amazing article. BD Jobs 2020
HSC Admission Result Recently Published. Government web: xiclassadmission.gov.bd. Student can download HSC Admission Result PDF File. Our Website Link : https://allresultsall.com
20 Public General, Science and Technology University will publish the GST primary selection result on Very Soon. According to the news, Guccho Admission Result will be published gstadmission.ac.bd. also check- NID Card Online Copy
sorkari chakrir khobor 2021 in our website.
All Source Find- jobnewsbd24.com/sitemap
Post a Comment