Hello
Friends, Unziptech as already provided many useful & quality blogger widgets
and in this article we will check out another great social subscription widget
with a built in feedburner email subscription form. Social networks has been playing an important role in
blogging these days and it is very important to give an easy mean to your
online readers to subscribe and follow you in order to get latest updates and
stay connected. Later in this article we will check out a live demo and
tutorial to add this widget.
Recommended for you:
With the new search engine updates social networks gained more
importance to measure the online presence of a blog. Similarly online readers
check the subscribers count to measure the popularity of any blog so
it is important to improve these counts. This widget will surely help you to
improve your social count. Now let us check out the tutorial to add this widget
in your blog.
How to add Social subscription widget
- First of all login into your blogger account.
- Now navigate to the layout from the dashboard.
- Click on add a gadget from the layout (preferably from the sidebar).
- Now choose an HTML/JavaScript gadget.
- Copy and Paste the following code into it.
<style type='text/css'>
.btsubscribe1
{ padding: 8px;
background-color:#fa6121;
background-position:center;
background-size:100%;
background-repeat:no-repeat;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.btsubscribe2
{
padding: 8px;
padding-top:0px;
background-color:#ffb739;
background-position:center;
background-size:100%;
background-repeat:no-repeat;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
text-align:center;
}
.buttonSubHomepage2
{
height:24px;
width:80px;
border:solid;
border-color:white;
font-family:arial black;
font-size:14px;
padding-bottom:21px;
color:white;
background-color:#ffb739;
border-radius: 10px;
margin-top: 10px;
}
.buttonSubHomepage2:hover
{
background-color:#EA9500;
}
.imgs a
{
text-decoration: none;
}
#ssw-main-wrap
{
height: 250px;
width: 300px;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div id='ssw-main-wrap'>
<div class='btsubscribe1' align="center">
<div style='color: #FFFFFF; font-weight: bold; font: 22px Oswald; margin: 0px 0px 10px 15px;'>
Subscribe Now
</div>
<div style='color: #FFFFFF; font-weight: bold; font: 16px Calibri, cursive; margin: 0px 0px 10px 15px;'>
Enter your email to get
<span style="color:#000000;">
<u>FREE</u>
</span>
Tips Daily.
</div>
<div style='margin: 10px 0 0 6px;'>
<!--Subscription Box-->
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=unziptech', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true'style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='unziptech' />
<input name='loc' type='hidden' value='en_US' />
<input style="height:24px;width:200px;border:solid;border:hidden;border-radius:5px;font-size:12px; text-indent: 10px;" class='btmailbox' name='email' placeholder='Enter a valid email id'/>
<br/>
<input class="buttonSubHomepage2" alt='' title='' type='submit' value='Submit'/>
</form>
</div>
</div>
<div class="btsubscribe2">
<div style='color: #FFFFFF; font-weight: bold; font: 22px Oswald; margin: 0px 0px 10px 15px;'>
Follow us on
</div>
<div class='imgs'>
<!--Facebook URL-->
<a href='http://www.facebook.com/unziptech' target='_blank' title='Join us on Facebook'>
<img src='http://3.bp.blogspot.com/-ChHaXU5VfIE/UJkIg5tptTI/AAAAAAAABEg/kzXjQ2QxEPo/s1600/facebook.png' alt='facebook'/>
</a>
<!--Twitter URL-->
<a href='http://twitter.com/unziptech' rel='nofollow' target='_blank'title='Follow us on Twitter'>
<img src='http://3.bp.blogspot.com/-aG-POFOiBHc/UJkIkayVTGI/AAAAAAAABE4/hhun4Hjaudw/s1600/twitter.png' alt='twitter'/>
</a>
<!--Google+ URL-->
<a rel="publisher" href='https://plus.google.com/102111280721002623355' target='_blank'title='Follow us on Google+'>
<img src='http://2.bp.blogspot.com/-gxpckVUYzWI/UJkIh5kHQ5I/AAAAAAAABEo/IlR9Bt-FVBE/s1600/googleplus.png' alt='gplus'/>
</a>
<!--LinkedIn URL-->
<a href='#' rel='nofollow' target='_blank'title='Follow us on LinkedIn'>
<img src='http://1.bp.blogspot.com/-c7m7fLXHewI/UJPaWsVTZ6I/AAAAAAAAA-M/uvdMMglb8fE/s1600/linkedin-circle-2.png' alt='linkedin'/>
</a>
<!--RSS URL-->
<a href='http://feeds.feedburner.com/unziptech' rel='nofollow' target='_blank'title='Subscribe to RSS'>
<img src='http://4.bp.blogspot.com/-aN0dAN4mIno/UJkIje-dmSI/AAAAAAAABEw/gyK0zwpvjdE/s1600/rss.png' alt='rss'/>
</a>
<br/>
</div>
</div>
</div>
- Click on save and then check out the widget in action using the “View Blog” button on the top.
Customizations:
This
widget is sized 350 x 250; to change it you can modify the values of
#ssw-main-wrap. The CSS style sheet is given along with the code; you can
easily change the look and feel of the widget by changing the CSS style rules. Replace the social network usernames (highlighted with red color) with your own usernames.
I hope
you like this widget. If you face any problem adding this widget in your blog
or you need any assistance regarding the CSS rules, please comment here. I will
be glad to help you.
You can
check out other blogger widgets published earlier from our blogger
tips and tricks section.
If you like my work; you
can show your regards by hitting Facebook like
button, following us on Google+ or Twitter, stumbling our posts on stumble upon
or giving us a link back via the links below. Stay tuned for more
updates
Do you like this post? Please link back to this article by copying one of the codes below.
URL: HTML link code: BB link code:
No comments:
Post a Comment