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 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