Stylish Subscription Widget With Hover Effect

Email Subscription
The main aim of the subscription widget is to make the visitors into readers or followers, so as to increase the traffic of your blog. Today lets learn how to implement a stylish, eye-catching subscription widget. Other than an email subscription form, the widget consist of social icons with hover effect. The widget is quiet catchy and is sure that the widget will force your visitors to subscribe to your updates. Its proven that the most effective position for your subscription widget is top of your sidebar, as it is easily visible to visitors.

Before moving into the tutorial please make sure that you have read my tutorial on How To Set Up Feedburner For Blogger Blog.

Take a look at the screenshot below :



 

 

 

 

 

 

Add Stylish Subscription Widget With Hover Effect To Your Blog

1) In the Blogger dashboard click the drop down menu for your blog > Choose 'Layout' > Click 'Add A Gadget' > Choose 'Html Javascript' > Paste In The Following Code > Click Save:

Widget Code

<a href="http://feeds.feedburner.com/Tweaks123" imageanchor="1" style="margin-left: .5em; margin-right: 1em; float: center;" rel="nofollow" target="blank"><img border="0" height="40" src="http://1.bp.blogspot.com/-0XcZX4EV36k/UKZo21Ff0rI/AAAAAAAAAqQ/3RG3EOCjM3M/s1600/Untitled-5.png" width="290" /></a>
<style>
.tweaks-email{
background:Fff no-repeat 0px 12px ;
width:270px;
float:center;
font-size:1.4em;
font-weight:bold;
margin:2px 20px 0px 35px;
color:#686B6C;
}
.tweaks-emailsubmit{
background:#0084CE;
cursor:pointer; 
color:#fff;
border:none;
padding:3px;
margin:0 0 0px 0;
text-shadow:0 -1px 1px rgbaundefined0,0,0,0.25);
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
font:12px sans-serif;
}
.tweaks-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:0px 2px 0px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); font-size:13px;  
width:170px;
color:#666;}
</style>
<style class="text/css">
.center
{
text-align:center;
font-weight:bold;
margin:10px;
}
</style>
<div class="center">
Submit your Email Address to Get Free Blogger Tips Directly to your Inbox
</div>
<div class="tweaks-email">
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=Tweaks123', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if undefinedthis.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if undefinedthis.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here..." type="text" />
<input type="hidden" value="Tweaks123" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="tweaks-emailsubmit" value="Submit" type="submit" />
</form>
</div>
<style class="text/css">
table
{
border-bottom: 0px solid #E6E6E6;
float: center;
width: 300px;
margin:10px 0 0 15px;
}
.subicons
{
border-right: 1px solid #E6E6E6;
}
#social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }

</style>
<div class="table">
<table>
<tr>
<td><div class="subicons"> <div id="social">  <a rel="nofollow" title="Grab Our Rss Feed" href="http://feeds.feedburner.com/Tweaks123" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-m3xgJspNUEM/UKZuywSh7VI/AAAAAAAAAq4/7lIchfowqnQ/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>  </div></div></td>
<td><div class="subicons"> <div id="social">  <a rel="nofollow" title="Like Our Facebook Page" href="https://www.facebook.com/Tweaks123" target="_blank"><img border="0" src="http://2.bp.blogspot.com/-fGM0ekp9njU/UKZuxJihU3I/AAAAAAAAAqs/F9JOMQ8Tji0/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> </div></div></td>
<td><div class="subicons"> <div id="social"> <a rel="nofollow" title="Follow Our Updates On Twitter" href="https://twitter.com/tweaks123" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-V9vyKkB7XG8/UKZuzuEU9WI/AAAAAAAAArA/DtoPgX98zYM/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> </div></div></td>
<td><div id="social"> <a title="Follow Us On Google+" rel="nofollow" href="https://plus.google.com/u/0/117395947435425050465" target="_blank"><img style="margin-right:1px;" src="http://3.bp.blogspot.com/-iK2W1nj0LJ8/UKZux9P0w3I/AAAAAAAAAqw/fZdYU_WnZak/s1600/GOOGLE-PLUS-48x48.png"/></a> </div> </td>
</tr></table>
</div>

2) Replace the yellow sections with your social profiles and feed URLs. 

That's it you have a very cool subscribe section on your blog.

Drop Your Comments And Questions Below.

No comments:

Post a Comment