Add | Put Best Style Subscribe Box Widget/Gadget For Blogger Sidebar

In this tutorial i will show you how you can easily Add Stylish Subscribe Us Box widget in blog sidebar or in footer. Subscribe Box is the best way also to increase the blog traffic. Because when people Subscribe your blog then they daily visit your site for getting updated Content or Post on your blog. The heading Subscribe to Get Latest Tutorial Via Email is the one of the best heading which convince to blog reader to get daily updated content. Imagine if your blog readers means subscribe are upto 500 then you can get average daily 100 visitors from this widget by adding in your site or blog. Now i have a good and easy tutorial to explain or embed this widget on your blog in just 5 minutes.

How And Where I Put Or Add This Gadget:

Add | Put Best Style Subscribe Box Widget/Gadget For Blogger Sidebar

This is your question may be and i have good answer for this question if you want to more subscriber then place this widget or gadget in blog sidebar in between or below where your want and if you also want to put it in the blog footer widget then you also do that its upto you. But my suggestion place this widget in blog sidebar to get better results.

Now we are going to start this easy tutorial.
If you want to add this widget then work according to below tutorial.

Go to Blogger.com.
Go to Layout.
Click on Add A Gadget link.
Go to HTML/JavaScript.
Click on HTML/JavaScript.
And Paste the below code in the HTML Box. But few customization is required which is give below.

<style type="text/css">
#subscribe-wrapper {
background: url(http://softglad.at.ua/images/border.png) repeat scroll 0 0 transparent;
padding: 3px;
}
#subscribe-box {
background: url(http://softglad.at.ua/images/bg.png) repeat scroll 0 0 #F7F7F7;
border-radius: 15px;
padding:5px;
overflow: hidden;
}
a.linkopacity img {
filter:alpha(opacity=75);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;
-ms-transition:All .5s ease;
-o-transition:All .5s ease;
transition:All .5s ease;
padding: 3px;
border: 1px solid #999;
}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
-khtml-opacity: 1;
-moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.44);
-webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.44);
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.44);
}
#subscribe-box:hover table {
    top: 0;
}
#subscribe-box h1{
margin-top: 5px;
color: black;
font-family: arial;
font-size: 15px;
margin-bottom: 5px;
line-height: 14px;
font-weight: bold;
text-align: center;
letter-spacing: -1px;
}
#subscribe-box table {
position: relative;
top: 40px;
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;
-ms-transition:All .5s ease;
-o-transition:All .5s ease;
transition:All .5s ease;
margin-bottom: 0px;
}
#subscribe-box td {
padding: 2px;
}
#subscribe-box input{
background: white;
border: medium none;
font-size: 12px;
padding: 10px;
width: 150px;
color: #666;
font-family: arial;
margin-bottom: 3px;
width: 55%;
}
#subscribe-box input:focus{outline:none;}

#subscribe-box .submit{
background: #E73827;
color: #fff;
cursor: pointer;
font-weight: bold;
text-shadow: 0 1px 2px black;
width: 90px;
font-family: arial;
margin-left: -3px;
font-size: 14px;
}
</style>
<div id="subscribe-wrapper">
<div id="subscribe-box">
<h1>Subscribe to Get Latest Tutorial via email</h1>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Put your feedburner link for verifyication', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<center>
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;enter your email address...&quot;;}" onfocus="if (this.value == &quot;enter your email address...&quot;) {this.value = &quot;&quot;}" size="20" type="text" value="enter your email address..." />
<input name="uri" type="hidden" value="Trick Of Blogging" />
<input name="loc" type="hidden" value="en_us" />
<input class="submit" type="submit" value="subscribe" /></center></form>
<center>
<table>
<tbody><tr><td><a href="http://feeds.feedburner.com/blogspot/LPkip" class="linkopacity" target="_blank"><img src="http://softglad.at.ua/images/rss.png" /></a></td>
<td>
<a href="http://www.facebook.com/pages/Trick-Of-Blogging/447187668684161" class="linkopacity" target="_blank"><img src="http://softglad.at.ua/images/facebook.png" /></a>
</td>
<td>
<a href="https://twitter.com/trickofblogging" class="linkopacity" target="_blank"><img src="http://softglad.at.ua/images/twitter.png" /></a>
</td>
<td>
<a href="https://plus.google.com/u/0/113224303869289827964/posts" class="linkopacity" target="_blank"><img border="0" src="http://softglad.at.ua/images/Google.png" /></a>
</td>
</tr></tbody></table>
</center>
</div></div>

                      

Customization For Subscribe Box Widget:

Change Red Highlighted Color Text with your desire text. Subscribe to Get Latest Via Email.
Change Orange Highlighted  Color Text with your feed burner verification link. 
Change Sky Water Highlighted Color with your Google Feed Burner link http://feeds.feedburner.com/blogspot/LPkip
Change Pink Highlighted Color with your Blog Facebook Page link http://www.facebook.com/pages/Trick-Of-Blogging/447187668684161
Change Parrot Green Highlighted  Color with your Blog Twitter Page/Profile link https://twitter.com/trickofblogging
Change Purple Highlighted Color Text with your Google+ Profile or Post page link https://plus.google.com/u/0/113224303869289827964/posts

After Customization paste the code in HTML Box and save setting.
Now Select the desire place where you want to add this amazing widget in sidebar.
Again Save Setting.
Click on View Blog.
Now you have done correctly.

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.