Hello Readers, Unziptech
has already shared many useful articles featuring premium blogger widgets,
plugins, tricks etc and this post focuses on the same category. In this post I am going to share another
social subscription widget for blogger. This social subscription will enable
users to like/follow you on the social networks such as Facebook, Twitter,
Google+ and subscribe your feeds using the built-in feedburner email
subscription widget. Social networks are playing a vital role in blogging these
days. The count of followers, fans and subscribers shows the popularity of your
blog/website. They also allow you to connect with your online readers and share
your content with them. Later in this article, you will find a tutorial to add
this widget to your blog and a live demo of this blogger widget.
Demo
This widget is purely
coded in HTML/CSS and there is no flash content, so it will be fast loading
widget. This widget contains 4 social icons with cool CSS effects and
feedburner email subscription form. Now let us see the procedure to add this
premium looking social subscription widget to your blog.
Recommended Blogger Widgets:
- Sticky Notification bar.
- Google+ widget with author image and circles.
- Facebook Like box style Twitter Follow Box.
How to add social subscription widget
- Login in to your Blogger account.
- Now navigate to the Layout section from your dashboard.
- Click to add a HTML/JavaScript gadget where you want this widget to appear.
- Copy and paste the following code in to it.
<style type="text/css">
#UT-ssw-wrap
{
height:250px;
width:250px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtSMvxL6C6Ai1qRk8cLbijn2uUJHKIP5GhvJq4wtEsxMyAKKU0lXJkqIh51GRmK4FUjoFhmCgAMRDOxqrE7SdLnZw5zTZxgNI6auYo05fUgl_4JPK3RzPSl8Af8S9xwVl_glF2v7p4SC7q/s1600/background.png) repeat;
color:#009;
font-family:Georgia, "Times New Roman", Times, serif;
padding:3px;
border:1px solid #dcdcdc;
box-shadow: 1px 1px 2px #000;
}
#UT-ssw-icons-wrap
{
text-align:center;
height:50px;
padding: 5px 0px;
}
.UT-ssw-icons
{
height:40px;
width:40px;
float:left;
margin-left:15px;
margin-bottom:10px;
}
.UT-ssw-icons:hover
{
opacity: .7;
filter:alpha(opacity=70);
height:40px;
width:40px;
cursor:pointer;
}
.UT-ssw-lbl
{
color:#0F4794;
font-weight:bold;
text-align:center;
padding: 2px 0px 10px 0px;
}
.UT-email-field
{
-moz-border-radius:4px;
-webkit-border-radius:4px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSqeZUoAayWD9v9CnB8OwKbEmJT99nHsGm6JqJjRl3Y0zQrxBp4P3dqZlKSfJhGaNqlUd5gJQQK6U8Ft67yb0Soxf67ua0R5hKfPCzKWYZQsC3u_P-Pll9nkZ00IEBVuA7g8HAG6c8kTL/s1600/icons.png) no-repeat 0 -27px;
border:1px solid #dcdcdc;
border-radius:4px;
color:#444;
margin:0 0 15px;
padding:10px 40px;
width: 166px;
}
#UT-ssw-submit
{
height:30px;
width:100px;;
background:#0F4794;
color:#FFF;
font-weight:bold;
text-align:center;
margin-left: 70px;
border-radius: 10px;
}
</style>
<div id="UT-ssw-wrap">
<div class="UT-ssw-lbl">Subscribe to Us!!</div>
<div id="UT-ssw-icons-wrap">
<a href="https://www.facebook.com/uniptech" rel="nofollow" title="Like us">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJLQtpmk-QvkSXWHUUfWWRY3vjY1R22xd9GM_EYUn9FdQRhqfQDIJzJV-9_lz_9oAxo6hJGuqQ34KbsKkjePm7Vu6iB-6q_oFg4foc5bP7K83zH7akzBzv-rxF8gizhXefeDVqxv-5pfTQ/s1600/Facebook.png" class="UT-ssw-icons" alt="FB"/>
</a>
<a href="https://www.twitter.com/unziptech" rel="nofollow" title="Follow Us">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR3thtVKjhg6UIv-qAYuT2YEYt-loo7j2Jhu6vyZzkQPHL0XlGb_LAax9DjuyyCtYgrPftZ45APcO2UP8eBDzdsD-8LVb9HFjtXe-FNLueyKpo3gc8NQTYbXtPf-a3V4Mbp6Sm-aWjg8S2/s1600/Twitter.png" class="UT-ssw-icons" alt="TW" />
</a>
<a href="https://plus.google.com/u/0/102111280721002623355" rel="nofollow" title="Follow us">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihwZn32k9WVAv87NMIagw0xdIpdN_tpQfpc0q2ArPPdOzabJ5olMY9xRBLk3RcKrd_gV2iV5lCSvMokht6LtScL7qektw6Wn9scrin22Oyo7FfvoACfQJuktEAiIVGduIsoPYQw1d2fdIa/s1600/Google+.png" class="UT-ssw-icons" alt="G+"/>
</a>
<a href="http://feeds.feedburner.com/unziptech">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFhdcTQWjxTcRqv6hQ8vOqVSvfutKaoaX-HdtgGqOs8ne7D9HWmEN2-E77UffxRQ4JamB6k7er0Fq4YbwXUAg1kCHaFFwDg1Wr7ljtF8K_w8hqGxg_egFdsHDXZr0GRAkkBaD2cvlt7tZw/s1600/RSS.png" class="UT-ssw-icons" alt="RSS"/>
</a>
</div>
<div class="UT-ssw-lbl">Get Pro Tutorials directly<br /> in to your Inbox</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Unziptech', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" class="UT-email-field" name="email" autocomplete="off" placeholder="Enter your email address"/><br />
<input type="hidden" value="Unziptech" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" id="UT-ssw-submit"/>
</form>
</div>
- Now before saving, we need to change the social networks and feedburner usernames.
- Replace my usernames highlighted in red color with yours.
- After you have changed the usernames, click on save.
- Now Click the View Blog button at the top and see this widget in action.
You have added a social subscription widget in your blogger blog. You may also customize the look and feel of this widget. The CSS style rules are given with the code above enclosed in the <style></style> tag. But if you don't have proper knowledge of HTML/CSS then I strongly recommend you to stick with the same code and do not try to modify it.
If you face any problem
adding this widget in your blog, you can comment here, I will be Glad to help
you. You can also checkout our Blogging and SEO optimization section for more cool Blogger tips and tricks.
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 stumbleupon 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:
This comment has been removed by the author.
ReplyDeletepls check http://techandfunworld.blogspot.in/ this widget not fit there what can i do
ReplyDeleteI checked it..If you want to increase the height and width of the widget you need to make the arrangements in the CSS style rules. Look for #UT-ssw-wrap it has got the height and width attributes, you can change it, according to your sidebar width..
Delete