Stylish Social Bookmarking & Subscription Widget for Blogger

byAdmin - 0
Blogging alone doesn’t make any sense if no one reads it. Social bookmarking is considered as on of the top traffic resource for a website. Moreover having loyal readers to your blog earns some reputation in the social networking sites as the readers interact for one or other post you’ve posted.

The following is the social bookmarking widget that I’m using it on Amfas Tech. I’m going to give you the code along with the ‘how-to-customize’ it guide. Let’s take a look at the installation process and customization.

DEMO: For demo of this widget checkout subscription widget in the sidebar of this site.

Stylish social bookmarking & subscription widget

Installation Process

Step 1: Login to your blogger and go to your blog’s dashboard.

Step 2: Click on ‘layout’ and then click on ‘add a gadget’ to add this widget.

Step 3: Click on ‘HTML/JavaScript’

Step 4: Now add the following code in it.

<style>
#socialwidget {
border: 1px solid #ebebeb;
width: 320px;
}
.TZ-social{
padding: 10px 10px 10px 10px;
border-bottom: 1px solid #ebebeb;
}
.TZ-social img:hover{opacity:0.8}
.googleplus {
background: #ffffff;
border-top: 1px solid white;
border-bottom: 1px solid #ebebeb;
font-size: 12px;
color: #000;
padding: 9px 11px;
ine-height: 1px;
font-family: Verdana, Geneva, sans-serif;
}
.googleplus span {
color: #000;
font-size: 11px;
position: absolute;
margin: 9px 70px;
width: 310px;
}
.g-plusone {
float: left;
}
.twitter {
background: #ffffff;
border-bottom: 1px solid #ebebeb;
padding: 10px;
}
.TZ {
background: #ffffff;
border-top: 1px solid white;
font-size: 12px;
color: #000;
padding: 9px 11px;
line-height: 1px;
font-family: Verdana, Geneva, sans-serif;
}
.TZ span {
color: #000;
font-size: 11px;
position: absolute;
margin: -12px 100px;
width: 330px;
}
#widgetbox .author-credit a {
font-size: 10px;
font-size: 10px;letter-spacing: 1px;
color: #1E598E;
text-decoration: none;
}
.email-subscribe-emailbox {
padding: 5px 10px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 0;
border-image: initial;
height: 42px;
background: #EFF8FB;
width: 280px;
}
.email-subscribe-emailbox form {width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.email-subscribe-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 5px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.email-subscribe-emailbox input.emailu:focus {color: #333;}
.email-subscribe-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 35px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.email-subscribe-emailbox input.submitu:hover {text-decoration: none;}
.TZDefault {border: 1px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
.TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
</style>
<div id="socialwidget">
<!-- Begin Widget -->
<div class="TZ-social">
<!-- social ico -->
<center>
<a style="margin-right: 10px;" href="http://facebook.com/askmeforasolution" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7LAr_xyC8kE3VNH81JNV9ZGl37JlUEBO2CckFQx372HZm3fus6fW394jNDVuzHZ3rPnMrfN1Hxul8rYYQhBaNprKH4jvaC_gE9MJNlorg-BdBxr8lFFyCODFkLrKJ9vAgMCO63iaDWmI/s1600/facebook.png" title='Facebook'/></a>
<a style="margin-right: 10px;" href="http://twitter.com/amfastech" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglqh-FIiHU2SnSN-rq3avh706_rWzee8hOQI5qsDk78koHZ6gPYRGQgegoF_1vNB_VUsLtwCSAZpasQxcIUONTB8NE38ZXB_uKCXqSkAUA2ZEK4bGTxH9DA384zrpyGEa0d0Tfy5_LEKE/s1600/twitter.png" title='Twitter'/></a>
<a style="margin-right: 10px;" rel="me" href="https://plus.google.com/112850548996825291523" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2k8wvRS4JQelwrVcqAKCnoly7sMRX3mLZTZs4dKbOOrb_UYOa0dI-LUibXq-u5qSEN_BWTQLHLX2QXquguel5_Z2uLNruzWO2-O6iUjl7oIDw_UFDjz1Xn5eTnTAUr6-gZefjCNgH6v8/s1600/gplus.png" title='Google Plus'/></a>
<a style="margin-right: 10px;" href="http://pinterest.com/sasikareti/amfas-tech/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrCb5d9UN-AI0D8wQe2A6vTk2xemDECGSFPmNjD0z3opPy3Ewfs0-eJDLbqHkzUHXIW5Af7IsIAae5V0APXG11Ya_Hy3eZVFn0U2kqoM25OaklKNo9P4SSh3f77E5mEyxdOxTfxD9V4F4/s1600/pinterest.png" title='Pinterest'/></a>
<a style="margin-right: 10px;" href="http://feeds.feedburner.com/amfastech" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNqK7Lzfq2aaGqy-afzmBfkwcWSPFwPeWHut_XKe7otYSy_pjAoe6vYyRQsq4kN4SQZd0FDYsTVNBmgAQIBqkMTZVcVaZFnDIsfuIHHFdotAPvvdudzfH2bNHiOVkT17KU28xVJcQA3mk/s1600/rss.png" title='RSS Feed'/></a>
</center>
</div>
<div class="googleplus">
<span><font><font>Recommend Us On Google </font></font></span>
<!-- GooglePlus -->
<!-- Place this tag where you want the 1 button to render -->
<g:plusone size="medium" href="http://www.amfastech.com/"></g:plusone>
<!-- Place this render call where appropriate -->
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div class="TZ">
<!-- facebook -->
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Faskmeforasolution&amp;send=false&amp;layout=button_count&amp;width=450&amp;
show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowtransparency="true">
</iframe>
<span>Like Us On Facebook</span>
</div>
<div class="twitter">
<!-- Twitter -->
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=amfastech&amp;show_count=true&amp;
show_screen_name=true&amp;size=m" class="twitter-follow-button" style="width: 244px; height: 20px; " title="Twitter Follow Button">
</iframe>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>
<div class="email-subscribe-emailbox">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=amfastech', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table width="100%">
<tr>
<td>
<input class="emailu" name="email" placeholder="Enter your email" type="text"/>
</td>
<td width="50px">
<input class="submitu TZDefault" type="submit" value="Subscribe"/>
</td>
</tr>
</table>
<input name="uri" type="hidden" value="amfastech"/>
<input name="loc" type="hidden" value="en_US"/>
</form>
</div>
<!-- End Widget -->
</div>
Step 5: ‘Save’ it and ‘view blog’.

Customization

1. Press Ctrl+F and search for ‘amfastech’(without quotes) & replace all search results with your feedburner uri and twitter handle respectively.
Note: In my case my feedburner uri & twitter handle is same.
2. Find ‘askmeforasolution’ and replace your facebook page name with it.

3. Find ‘Google+’ page and profile ID and replace it with yours.

4. Find ‘Pinterest’ and replace your ‘Pin board’ URL.

Width of the objects is variable. You can vary them as per your requirement.

I hope I have covered every customization in it. Comment below if you need any help in the installation.
Tags

0/Post a reply/Replies

Post a Comment

Previous Post Next Post