0
Tags:
Blogger,
Blogger Gadget
How to add Sign-Up for free weekly Newsletter subscription form as in ShoutMELoud
Posted by
Anonymous on 2/10/2012
You can see in many blogs displaying 'Sign-Up for weekly Newsletter' in the blog header. Even big blogs like 'ShoutMELoud' also uses its own customized code in their template to display the feed burner subscription form. It helps your blog to attract more and more visitors and sudden increase in the readership. Now I have tweaked the same customized code of ShoutMELoud into HTML code which can be used to make the same appearance in blogger blogs. You can also customize this code in WordPress blogs also. The benefit of adding the code in header part is you can see a flood of subscribers increasing in your feed count.
How to increase readership by adding 'Sign-Up for weekly Newsletter subscription form' in header?
If a reader lands on your blog searching from search engines for a catchy title or a content then you should make him engage with your blog with the quality content and catchy headings. If you become successful in attracting an visitor then that means you will get a permanent reader to your blog. You should make him to be curious to see the updates from your blog so that he will subscribe to your blog via feed burner by submitting his email ID. In this way if you convert search visitors into the regular readers of your blog at least 100 subscribers to your blog. You can get those 100 visitors to view your every new post whenever its published.
How to install this gadget in blogger?
1. Log in to your blogger account and in dashboard click on 'Design'.
2. Add a HTML/JavaScript gadget in your blog.
3. Copy and paste the below code in HTML box and drag the HTML box to header.
4. Code:
6. This is how the 'Sign-Up for weekly Newsletter' gadget appears in your blog. Click on the image to view how the gadget actually appears.
Tips to customize the gadget:
1. You need to replace the 'INTERNET' which is marked in blue color in HTML code with your feed burner ID or replace the whole feed burner URL.
2. You can edit background color of gadget by changing background CSS color codes with your desired color code.
Share the gadget with your friends. Also let us know if you find any sort of bug in installing gadget with this HTML code.
How to increase readership by adding 'Sign-Up for weekly Newsletter subscription form' in header?
If a reader lands on your blog searching from search engines for a catchy title or a content then you should make him engage with your blog with the quality content and catchy headings. If you become successful in attracting an visitor then that means you will get a permanent reader to your blog. You should make him to be curious to see the updates from your blog so that he will subscribe to your blog via feed burner by submitting his email ID. In this way if you convert search visitors into the regular readers of your blog at least 100 subscribers to your blog. You can get those 100 visitors to view your every new post whenever its published.
How to install this gadget in blogger?
1. Log in to your blogger account and in dashboard click on 'Design'.
2. Add a HTML/JavaScript gadget in your blog.
3. Copy and paste the below code in HTML box and drag the HTML box to header.
4. Code:
<style>
#feature_box{background:#f0f4f4; border-bottom: 1px solid #D4D4D4; padding:10px 15px 0px;}
#sleek-subscribe{display: block; margin:0 auto; }
.newsheadline {color:#222; font-size:16px; line-height:50px; float:left; font-weight:bold;}
.newsheadline span{font-size:38px; color:#444; line-height:14px; font-family: "Droid Sans",arial,sans-serif; font-weight:normal;}
.newsheadline cite{font-style:normal; color:#f00;}
.signform{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1x2kQGSq2gYVeq2AuoJHMfw_reiPW_feje6UrUoXqNAMChDMhf1UUjGdPTFzeqvPHyH9Rxc_4R9chyphenhyphenrLyXADaGsGCMggzLiHI77AVfydKeZV6LGENljvlkWWGpxWk6HzAWBOS-iWXGYQ/s1600/arrow.jpg') no-repeat;padding:0 0 10px 100px; float:right; }
.txt2, .txt2:focus{width:140px; font-size:15px; background:#f7f7f7; color:#004B80; border:1px solid #E36B0A; margin:0 5px; float:left; padding:10px; width:160px; border-radius: 10px;}
.btn2, .btn2:focus {background:#E36B0A; margin:0 5px; padding:8px 10px 9px; border:1px solid #AD5513; color:#fff; font-size:15px; border-radius:10px;}
.btn2:hover{background:#6689b0; }
</style>
<div id='feature_box'>
<div id='sleek-subscribe'>
<div class='newsheadline'><span>Sign-up</span> for <cite>FREE</cite> daily Updates.</div>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=INTERNET' class='signform' method='post' target='_new'>
<input class='txt2' name='name' onblur='if (this.value == '') {this.value = 'your name...';}' onfocus='if (this.value == 'your name...') {this.value = '';}' value='your name...'/>
<input class='txt2' name='email' onblur='if (this.value == '') {this.value = 'your email address...';}' onfocus='if (this.value == 'your email address...') {this.value = '';}' value='your email address...'/>
<input class='btn2' type='submit' value='subscribe me!'/>
</form>
5. If you are using a custom template in blogger then you need to copy and paste the HTML code in 'Edit HTML' section where you want the gadget to appear. You can paste this HTML code in your blog's header and you can see it in action (for only third party templates).#feature_box{background:#f0f4f4; border-bottom: 1px solid #D4D4D4; padding:10px 15px 0px;}
#sleek-subscribe{display: block; margin:0 auto; }
.newsheadline {color:#222; font-size:16px; line-height:50px; float:left; font-weight:bold;}
.newsheadline span{font-size:38px; color:#444; line-height:14px; font-family: "Droid Sans",arial,sans-serif; font-weight:normal;}
.newsheadline cite{font-style:normal; color:#f00;}
.signform{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1x2kQGSq2gYVeq2AuoJHMfw_reiPW_feje6UrUoXqNAMChDMhf1UUjGdPTFzeqvPHyH9Rxc_4R9chyphenhyphenrLyXADaGsGCMggzLiHI77AVfydKeZV6LGENljvlkWWGpxWk6HzAWBOS-iWXGYQ/s1600/arrow.jpg') no-repeat;padding:0 0 10px 100px; float:right; }
.txt2, .txt2:focus{width:140px; font-size:15px; background:#f7f7f7; color:#004B80; border:1px solid #E36B0A; margin:0 5px; float:left; padding:10px; width:160px; border-radius: 10px;}
.btn2, .btn2:focus {background:#E36B0A; margin:0 5px; padding:8px 10px 9px; border:1px solid #AD5513; color:#fff; font-size:15px; border-radius:10px;}
.btn2:hover{background:#6689b0; }
</style>
<div id='feature_box'>
<div id='sleek-subscribe'>
<div class='newsheadline'><span>Sign-up</span> for <cite>FREE</cite> daily Updates.</div>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=INTERNET' class='signform' method='post' target='_new'>
<input class='txt2' name='name' onblur='if (this.value == '') {this.value = 'your name...';}' onfocus='if (this.value == 'your name...') {this.value = '';}' value='your name...'/>
<input class='txt2' name='email' onblur='if (this.value == '') {this.value = 'your email address...';}' onfocus='if (this.value == 'your email address...') {this.value = '';}' value='your email address...'/>
<input class='btn2' type='submit' value='subscribe me!'/>
</form>
6. This is how the 'Sign-Up for weekly Newsletter' gadget appears in your blog. Click on the image to view how the gadget actually appears.
Tips to customize the gadget:
1. You need to replace the 'INTERNET' which is marked in blue color in HTML code with your feed burner ID or replace the whole feed burner URL.
2. You can edit background color of gadget by changing background CSS color codes with your desired color code.
Share the gadget with your friends. Also let us know if you find any sort of bug in installing gadget with this HTML code.
Subscribe To Get FREE Tutorials!
Subscribe to:
Post Comments (Atom)
Share your views...
0 Respones to "How to add Sign-Up for free weekly Newsletter subscription form as in ShoutMELoud"
Post a Comment