Create a Cute Subscription widget

Today we are going to share a beautiful RSS subscribe for blogger and WordPress. it is new in style cute and i am sure it will attract your readers.
so let's start ...

How to add Cute subscription widget to blogger?

1. Go To Blogger > Design > Page Elements
2. Choose HTML JavaScript Widget
3. Paste the following code in it, 

<style>

.bordered {
    border: 10px solid rgba(82, 82, 82, 0.7);
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;      
    width:273px;
}
.bordered2 {
height: 25px;
     background-color: rgb(36, 39, 41);
     color: rgb(221, 221, 221);    
     text-shadow: 1px 1px 2px rgb(0, 0, 0);
}
</style>
<div class="bordered">
<div class="bordered2">
<center>
<span style="color: #ffffff; font-size: 16px;"><b>Subscribe Now</b></span></center></div>
<a href="http://feeds2.feedburner.com/blogspot/UONsI" rel="alternate" title="Subscribe now to avail the unthinkable" type="application/rss+xml"><img border="0" alt="" style=" padding-bottom:20px; margin: 0pt 10px 10px 0pt; float: left; width:100px; height:100px;" src="http://4.bp.blogspot.com/-3nrfMcLh7LM/UXQFWkOP2EI/AAAAAAAABCE/0_N9JwyKD_4/s1600/rss_icon.png"/></a><p><a href="http://feeds2.feedburner.com/blogspot/UONsI" rel="alternate" title="Subscribe to my feed" type="application/rss+xml">Get free email updates </a><span style="color: rgb(36, 39, 41); font-weight: bold;">By submitting your email address here</span></p>
<style>
input.bt {
color:#fff;
font: bold 10px Arial, sans-serif;
background:#F39100;
border:0;
padding:3px;

}
input.bthov {
color:#fff;
font: bold 10px Arial, sans-serif;
border:2px solid #F39100;
padding:3px;
}
</style>
<form action="http://feedburner.google.com/fb/a/mailverify" style="padding: 5px; " target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/UONsI', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input style=" color:rgb(36, 39, 41); background: #fff; border:1px solid #ff7417; width: 90px;" name="email" type="text"/>
<input value="blogspot/UONsI" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/> <input onmouseover="this.className='bt bthov'" onmouseout="this.className='bt'" value="GO!" class="bt" type="submit"/></form><br/>
</div>

Now make these changes,

• Now replace http://feedburner.google.com/fb/a/mailverify?uri=blogspot/UONsI with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions. 


• Replace blogspot/UONsI with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=blogspot/UONsI

Save your widget and view your blog to see it showcasing live! :)

That’s All!

Do let me know if you needed any help in customizing the widget.

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you Subscribe to our regular Email Updates !

Complicated ?

If you have any question about any Post, Don't hesitate to ask question.You can simply drop a comment below post or contact via contact Us form by Clicking Here Your Feedback always appreciated.