How to Add Beautiful Email Subscription Form

Earlier at Software Wanted  we share How to Create Beautiful RSS Feed Banners to Add Below Your Blog Posts. Today we have another beautiful and smart looking Email Subscription Form, injected with new CSS effects, for your Blogs/Websites.

We have designed neat and clean yet beautiful and cute Email Subscription Form you. 

How to Add Beautiful Email Subscription Form

Log-In to your Blogger Account.
Choose Your Blog.
Move to Template > Edit HTML > Proceed.
Tick mark the box Expand Widget Template.
Take a Backup of your Template before making any alteration.
Press Ctrl+F and Find.

</head>

Just above the head tag add the following piece of code and Save Template

<style> .sw-email{ background:url(http://2.bp.blogspot.com/ -H6H1-_6JIe4/T4M7lHM4XqI/AAAAAAAABLQ/Csgq37AeqkE/ s1600/email.png) no-repeat 0px 12px ; width:300px; padding:10px 0 0 55px; float: left; font-size:1.4em; font-weight:bold; margin:0 0 10px 0; color:#686B6C; } .sw-emailsubmit{ background:#028bc4; cursor: default; color:#ffffff; border: inherit; padding:2px; text-shadow:0 -1px 1px rgba(0,0,0,0.25); -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; font:12px sans-serif; } .sw-emailsubmit:hover{ background:#06b2f9; } .textarea{ padding:2px; margin:6px 2px 6px 2px; background:#f9f9f9; border:1px solid #ccc; resize:none; box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px; width:170px; color:#666;} .textarea1 {padding:2px; margin:6px 2px 6px 2px; background:#f9f9f9; border:1px solid #ccc; resize:none; box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px; width:170px; color:#666;} </style>

Once You saved Template
Move to Layout section of your blog.
Click Add a Gadget
Select HTML/Java Script from the Gadget list.
Copy the following code and Paste it where you want your Beautiful Email Subscription Form to Appear.

<div class="sw-email" style="float:left"> <a href='http://tinyurl.com/chbbxym'> <img alt='Top Softwares and Bogging Tips' src='http://2.bp.blogspot.com/-y14HwixDKkQ/ T4KL1l3lupI/AAAAAAAABLI/97r5utdAQCs/ s1600/Untitled-3.png'/> </a>Subscribe via Email <form action="http://feedburner.google.com/fb/a/ mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open ('http://feedburner.google.com/fb/a/mailverify? uri=freesoftwarewanted', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input gtbfieldid="3" class="textarea1" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" /> <input type="hidden" value="TntByStc" name="uri"/> <input type="hidden" name="loc" value="en_US"/> <input class="sw-emailsubmit" value="Submit" type="submit" /> </form> </div>

Replace the Red color URL http://feedburner.google.com/fb/a/mailverify?uri=freesoftwarewanted with your own FeedBurner E-mail link.
You can find your Feed Email Link from your own Feed Burner Account and navigating to Publicize and then to Email Subscriptions. 
Or 
From abovr Red URL you can only replace freesoftwarewanted with your Feed Burner Title.   

Read more

How to Insert Eye Catching RSS Feed Banners Below Posts

Keeping the blog readers/visitors busy at your blog is not that difficult that we think, all that required is some garnishing and topping onto your blog so that it looks interesting and beautiful to your readers. But garnishing is not the only thing that you should be doing to your blog, the first thing that matters is Quality and your Own Original Posts to your blog. Do not post the copied content onto your blog this will lead to you a serious trouble. Well once you started posting quality stuff on your blog what more needed?
There are a lot of things that can be done to keep your blog readers busy to your blogs. This will lead to increase in Average Time Spent on your Blog, Page Views per visit. Which indirectly affects the Blog Health! It Improves.

When the blog reader ends up with reading your quality post, he reaches at the end and he goes off. Then as a blogger your duty comes in that is to Make Sure your Visitors don't Miss any of your good post that will be helpful to them. It is the reason all of the blogs have Recent Posts Widgets, Email Subscription Forms, RSS Feed Subscription Banners below their Posts.
You should also be adding the Beautiful RSS Feed Banners below your Blog Posts, this will help your users to stay in touch and will not let them miss any of your Great Quality Blog Posts that might be of their help. Here are some of the beautiful RSS Feed Banners that you'll surely love to Add.

Book Mark Us   We will be regularly Updating this Post New RSS Feed Banner Designs and Unique Ideas

How to Add Eye Catching RSS Feed Banner Below Blog Posts

Now to add any of the above Banners first of all you need to access to your blog HTML code. How its done. (We assume that you are using the latest upgraded Blogger Layout)
LogIn to your Account and Select you Blog
Now Click Template

Now Hit edit HTML Button and from pop-up window select Proceed

Now tick mark the box Expand Widget Template
Press Ctrl+F and Find

<data:post.body/>

Just below this paste Respective RSS Feed Banner Code of any of the RSS Feed Banners you want.
You must replace the Red Color Feed URL in Banner Code with your Feed URL

Eye Catching RSS Feed Banners for Below Blog Posts

RSS Sofa Banner

Code

<a href='http://tinyurl.com/chbbxym'> <img alt='Best Softwares and Apps' src='http://2.bp.blogspot.com/-y14HwixDKkQ/ T4KL1l3lupI/AAAAAAAABLI/97r5utdAQCs/s1600/Untitled-3.png'/> </a><a href="http://feeds2.feedburner.com/FreeSoftwareWanted" title="Subscribe To Our Rss Feed"><img border="0" src="http://1.bp.blogspot.com/-jzcb-zcDL9Y/T3Osqafo2OI/ AAAAAAAAA8E/M7gLWH8YSjo/s1600/RSS+FEED+@+ Software+Wanted.png"/></a>

RSS Bot Banner

Code: 2

<a href='http://tinyurl.com/chbbxym'> <img alt='Best Softwares & Apps' src='http://2.bp.blogspot.com/-y14HwixDKkQ/T4KL1l3lupI/ AAAAAAAABLI/97r5utdAQCs/s1600/Untitled-3.png'/> </a><a href="http://feeds2.feedburner.com/FreeSoftwareWanted" title="Subscribe To Our Rss Feed"><img border="0" src="http://1.bp.blogspot.com/-7mY8MqV4qC0/T4KKb75zH2I/ AAAAAAAABLA/aZBJoPz0qug/s1600/RSS+Feed+Banner.png"/></a>

RSS 3D Banner

Code: 2

<a href='http://tinyurl.com/chbbxym'> <img alt='Best Softwares & Apps' src='http://2.bp.blogspot.com/-y14HwixDKkQ/T4KL1l3lupI/ AAAAAAAABLI/97r5utdAQCs/s1600/Untitled-3.png'/> </a><a href="http://feeds2.feedburner.com/FreeSoftwareWanted" title="Subscribe To Our Rss Feed"><img border="0" src="http://3.bp.blogspot.com/-00-Rj-o9l5w/T4NXk48izqI/ AAAAAAAABLw/7FG62C8uoz8/s1600/ Subscribe+Now+Banner.png"/></a>

Banner . . .

Read more

How to Add Recent Post Widget Below Blog Post

Blogging is a really fun to do. The more the visitors you get on your blog, the more will be the chances of improved earnings and being noticed. What should be done by blogger to attract more and more traffic. Obviously writing interesting and informative articles that people are looking for. The more you write the more your blog will be noticed by search engines. But getting traffic is not the only thing that will be helpful in improving your Blog Rank. You need a quality stuff and more and more display of your work so that visitors find ever interesting thing right in front of them.
he more you have quality content posted onto your blog plus the more your display your work will definitely make visitors stick to your blog and average time spent on your blog will be increased. Inserting the Recent Posts Widget to your Blog will definitely make your visitors engaged to your blog. Today we are sharing about How to Add Beautiful Recent Post Widget to Your Blog 

How to Insert Recent Post Widget to Blogger

Method 1 (For Beginners)

• Login to your blogger account and navigate to "Design>>Page Elements". Click on "Add a Gadget" and select "HTML/JavaScript".
• Copy the following code and paste in the pop up window that appears.

<center> <script language='javascript'> imgr = new Array(); imgr[0] = &quot;http://i43.tinypic.com/orpg0m.jpg&quot;; imgr[1] = &quot;http://i43.tinypic.com/orpg0m.jpg&quot;; imgr[2] = &quot;http://i43.tinypic.com/orpg0m.jpg&quot;; imgr[3] = &quot;http://i43.tinypic.com/orpg0m.jpg&quot;; imgr[4] = &quot;http://i43.tinypic.com/orpg0m.jpg&quot;; showRandomImg = true; boxwidth = 298; cellspacing = 8; borderColor = &quot;#ffffff&quot;; bgTD = &quot;#000000&quot;; thumbwidth = 40; thumbheight = 40; fntsize = 12; acolor = &quot;#666&quot;; aBold = true; icon = &quot; &quot;; text = &quot;comments&quot;; showPostDate = false; summaryPost = 40; summaryFontsize = 10; summaryColor = &quot;#666&quot;; icon2 = &quot; &quot;; numposts = 5; home_page = &quot;http://softwarewanted.blogspot.com/&quot;; </script> <script src='http://xrl.us/bhtuun' type='text/javascript'> </script> </center>

• Don't forget to replace Our URL with yours, else this widget will be showing Software Wanted  Recent Posts
• Click Save 

This method will Add Recent Post Widget to the place where you Put your Gadget Element.

Add Recent Post Widget Below Posts

Method 2 (Recommended For Experts)

Note:  Download Template as backup

• Login to your blogger account and navigate to "Design>>Edit HTML". Check the check-box "Expand Widgets Template "
• Find (Press CTRL+F) <data:post.body/>
• Below the above (Step 2) code paste the code given in Method 1.
• Click Save Template

Read more