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 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 == "") {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/LPkipChange Pink Highlighted Color with your Blog Facebook Page link
http://www.facebook.com/pages/Trick-Of-Blogging/447187668684161Change 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/postsAfter
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
