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 I Can Boost Traffic With Targeted Country On Blogger
How I Can Make Internal Links In The Blog Post To Increase Rank
How I Can Use Webmaster Tools Properly For Blogger
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.
How I Can Boost Traffic With Targeted Country On Blogger
How I Can Make Internal Links In The Blog Post To Increase Rank
How I Can Use Webmaster Tools Properly For Blogger
How And Where I Put Or Add This Gadget:
 |
| Add | Put Best Style Subscribe Box Widget/Gadget For Blogger Sidebar |
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 == "") {this.value = "enter your email address...";}" onfocus="if (this.value == "enter your email address...") {this.value = ""}" 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.
And if you want to add this widget in Footer Column then first add the Three Footer Column and this this in the Blog Footer it also looks beautiful.
Add Three Or Four Column Footer Widget/Gadget In Blogger Blogspot
When you add this widget also then just pick your Subscribe Widget and drop the added widget in the Blogger Footer or Bottom. Now view your blog its look perfect now.
Related Articles:
Add | Put Three Tab Gadget/Widget In Blog Layout Sidebar On Blogspot
Add | Put 50 Flag Translator Widget | Gadget On Your Blogger Blogspot
Add | Make About Us Page Widget | Gadget On Your Blog Footer Or Sidebar
Add Facebook Like Box Widget/Gadget On Blogger By Facebook Developer Plugin
Add Manually CSS Jqeury Drop Down Menu On Blogger
Add | Put HTML Color Code Generator Tool To Your Blogger With Easy Tricks
Add Flickr/Picasa Web/Photobucket/Other Albums Slideshow On Blog Easy Tricks
How Easliy/Simple To Manage Page Layout In Blogger Blogspot
