Hello
Friends, we have already provided many useful & quality blogger widgets. We are concentrating on making and sharing more quality social subscription and sharing widgets. Social networks are playing an important role in
blogging these days and it is very important to provide an easy way to your
online readers to subscribe and follow you in order to get latest updates and
stay connected. In this article we will check out another great social
subscription widget with a built in feedburner email subscription form and
feedburner readers count. 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. Subscribers count shows 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>
.subscribebtrix {
border: 2px solid #000000;
padding: 8px;
width: 310px;
-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;
}
.subscribebtrix:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-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;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-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;
}
.btrixsubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.btrixsubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.btrixsubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>
<br />
<div class="subscribebtrix">
<div style="color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;">
Free Updates to your Inbox</div>
<div style="margin: 10px 0 0 6px;">
<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 class="tbimailbox" name="email" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" type="text" value="Enter your email..." />
<input alt="" class="btrixsubmit" title="" type="submit" value="Subscribe" />
</form>
</div>
<div style="border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;">
Follow us:</div>
<div style="margin: -32px 0 0 120px;">
<a href="http://www.facebook.com/unziptech" target="_blank" title="Join us on Facebook"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1jeri5ILo69EIKhD84d9AvMIRrC3OjBBuKQL1yplhbpHOHROH9jqQML6lZKPU3K4afX8cbbkJ3NsQh5Hjbw8X6HiNAz1R23wGrNydavud_QPAIKJscWp9_ZrhbOQvq0gxpk7J-QPdNUw/s1600/facebook_btrix.png" /></a>
<a href="http://www.twitter.com/unziptech" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYJWrsK9-W5S2E_5708oFwErzseT0IRlfkevpLN2h2oKv3EBrQ_BeBpN4OBBbOqcO6-W9mBzW2L-RNtKGcVe1wlgPoHurSVQxESW7-y8btX0GecQC7Vj2FY2PEJWO4KK9OgHOvFXJYfRU/s1600/twitter_btrix.png" /></a>
<a href="https://plus.google.com/+ZafarAhmad" rel="nofollow" target="_blank" title="Follow us on Google+"><img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkU-lCEy_AYn7NbTRM5XQHcOFB4Z0rgVY5XTG1oVWDXsdz93tRrq9QN77Ca0Rtf2aFAcn6woYcz-LUWif74OL9Ra9M52Y2KrHi6eOFr5qffJNmkayxJbhNzjyu47a9OT8Y0Mo4R5DMqdg/s1600/googleplus_btrix.png" /></a>
<a href="http://www.pinterest.com/username" rel="nofollow" target="_blank" title="Follow us on Pinterest"><img alt="pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAvF9RkbZsvdm9vqpnGLxqNgOTrf5CaV4NZt88QQbD6521hbLmJ2fyqZLxVG8W0wdhxgNy23b_jCL1BN42EvyXQbpDEXAIssRppRwsvFXfHqmVYo77ibCpJT60utoIQc2MhyphenhyphennkBZe2CTk/s1600/pinterest_btrix.png" /></a>
<a href="http://feeds2.feedburner.com/unziptech" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOmEgLIGCub_h6kSBDD1ryxupPbtWD0tGI6pbALkfeeK5qbCk2bJUxCJb8gFEsTwd3EGI7PlMHphqtEu_bllqc_rPtifAL9d7LVlt3KQsJ49DUAXr31X-QwZhTWkb4bgJngZFBJvEcbkM/s1600/rss_btrix.png" /></a>
</div>
<div align="center">
<a href="http://feeds.feedburner.com/unziptech"><img alt="" height="26" src="http://feeds.feedburner.com/~fc/unziptech?bg=FF9900&fg=444444&anim=1" style="border: 0;" width="88" /></a></div>
</div>
- Click on save and then check out the widget in action using the “View Blog” button on the top.
Customizations:
I have highlighted my usernames by red color in the above code. Please replace the highlighed usernames with your usernames. If you want to change the width of the widget or border style change the code highlighted with blue color.
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