Hello Friends, in this post we will learn how to put a cool
social sharing and subscription widget in your blogger posts. You can place
this widget at the end of every post or at the beginning as per your
requirements. Social networks like facebook, twitter, G+ are playing an
important role in blogging these days. They do not only let you connect with
your online readers but they are also a great source of traffic. The social
fans, followers or subscriber’s count shows the popularity of your blog and you
should make it easy for your readers to share or subscribe to you. This widget
will help you in this task. You can check the screen shot and live demo of this
widget below. Later in this post we will
learn how to add this cool social sharing and subscription widget in your blog.
Unziptech has already shared many cool blogger widgets for
social networks sharing & subscription and this post focuses on the same
category. This widget contains facebook share, tweet this, Google+ share, Stumble upon submit, RSS and email subscription. Now we should see how to add this widget to your blog.
Recommended Widgets:
- All in one social networks widget.
- FeedBurner email subscription Widget.
- Sliding Sticky notification bar.
How to add social sharing widget in blogger
- Login in to your blogger account.
It is recommended to take backup of your blog so that you don’t loose anything while editing the blog’s template. - After taking the backup, navigate to the template tab and click on EDIT HTML.
- Now search for the code written below:
]]</b:skin>
- Add the following code just before the above written code:
#UT-ps-wrap
{
box-shadow:0px 0px 1px 1px #dcdcdc;
border:1px solid #dcdcdc;
height:auto;
margin-top:20px;
}
#UT-ps-wrap a, #UT-ps-wrap a:hover
{
text-decoration:none;
}
#UT-ps-icons
{
height:30px;
width:100%;
color:#444;
}
.UT-ps-align
{
text-align:center;
vertical-align:middle;
width:16%;
padding-top:5px;
padding-bottom:5px;
}
.UT-ps-img
{
height:30px;
widows:30px;
}
.UT-ps-img:hover
{
opacity: .7;
filter:alpha(opacity=70);
cursor:pointer;
}
.UT-ps-label
{
text-align:center;
font-family:Georgia;
background-color:#333;
color:#fff;
}
.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 43px;
color: #fff;
content: attr(title);
left: 15%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 230px; font-weight:bold;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom:37px;
content: "";
left: 50%;
position: absolute;
z-index: 99; font-weight:bold;
}
- Now search for the code written below:
<data:post.body/>
- It might occur more than once in your template you need to find out the right one yourself. In my template I added the code after the second one.
- If you want this widget to appear at the end of every post, place the following code just after the above written code.
<b:if cond='data:blog.pageType == "item"'>
<div id="UT-ps-wrap">
<table id="UT-ps-icons">
<tr>
<td colspan="6" class="UT-ps-label">
Like this Article? Please Share it..
</td>
</tr>
<tr>
<td class="UT-ps-align">
<a class='tooltip' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' rel='nofollow' target='_blank' title='Follow us on Facebook!'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJLQtpmk-QvkSXWHUUfWWRY3vjY1R22xd9GM_EYUn9FdQRhqfQDIJzJV-9_lz_9oAxo6hJGuqQ34KbsKkjePm7Vu6iB-6q_oFg4foc5bP7K83zH7akzBzv-rxF8gizhXefeDVqxv-5pfTQ/s1600/Facebook.png" class="UT-ps-img" alt="Facebook share"/>
</a>
</td>
<td class="UT-ps-align">
<a class='tooltip' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title="+ data:post.title' rel='nofollow' target='_blank' title='Follow us on Twitter!'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR3thtVKjhg6UIv-qAYuT2YEYt-loo7j2Jhu6vyZzkQPHL0XlGb_LAax9DjuyyCtYgrPftZ45APcO2UP8eBDzdsD-8LVb9HFjtXe-FNLueyKpo3gc8NQTYbXtPf-a3V4Mbp6Sm-aWjg8S2/s1600/Twitter.png" class="UT-ps-img" alt="twitter share"/>
</a>
</td>
<td class="UT-ps-align">
<a class='tooltip' expr:href='"http://plus.google.com/share?url=" + data:post.url' rel='external nofollow' target='_blank' title='Share on Google+!'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihwZn32k9WVAv87NMIagw0xdIpdN_tpQfpc0q2ArPPdOzabJ5olMY9xRBLk3RcKrd_gV2iV5lCSvMokht6LtScL7qektw6Wn9scrin22Oyo7FfvoACfQJuktEAiIVGduIsoPYQw1d2fdIa/s1600/Google+.png" class="UT-ps-img" alt="Google+ share"/>
</a>
</td>
<td class="UT-ps-align">
<a class='tooltip' expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe To Our Feed Updates!'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFhdcTQWjxTcRqv6hQ8vOqVSvfutKaoaX-HdtgGqOs8ne7D9HWmEN2-E77UffxRQ4JamB6k7er0Fq4YbwXUAg1kCHaFFwDg1Wr7ljtF8K_w8hqGxg_egFdsHDXZr0GRAkkBaD2cvlt7tZw/s1600/RSS.png" class="UT-ps-img" alt="RSS subscribe"/>
</a>
</td>
<td class="UT-ps-align">
<a class='tooltip' expr:href='"http://www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Stumble us!!'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYr-NptSaajfY9wQ1_XLE4hJ7GdhVY9sI9wonvDQuaHrLClbAIWgs1CQQ09DhJLNctFBXv_TKcydC0IMysfZiGB1xtMFuopnsHbuUNYuM3vKtzEvcjDx0ycb_-WOXdAIE2NJVBh80nqzxZ/s1600/StumbleUpon.png" class="UT-ps-img" alt="SU post"/>
</a>
</td>
<td class="UT-ps-align">
<a class='tooltip' href='http://feedburner.google.com/fb/a/mailverify?uri=unziptech' title='Receive Updates via Email!'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6X1MUkgkoNxCWIXcVnvKenc7xMFqYSpE7vmK5879tbWHJz3aMdbwEai2c5kJeRJlpOfe3j4T4zlmRcwz44iuSDUesSmaaD4foT32y8EO0iH7em6BByQR6JzpoR9U3i9Of8iZoqHfDWfJ8/s1600/Mail.png" class="UT-ps-img" alt="email"/>
</a>
</td>
</tr>
</table>
</div>
</b:if>
- If you want this code to appear just after the post title, place the above mentioned code above <data:post.body/>.
- Before saving you need to make a little more editing, just replace my feedburner username highlighted in red, with yours.
- Now save the template and check any post, the widget will be added to your blog at your desired position.
Note: Do not share this code without giving proper attribution and backlink to our blog.
You have added a social sharing and subscription widget to
your blog. If you face any problem placing this widget to your blog, comment
here. I will be glad to help you.
You should also check out our blogger tips and tricks section for more blogger widgets, blogging and seo related articles. I am sure it will improve your blogging experience.
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:
Nice Sharing bro but your this widget is not working on my template i think i have problem in my template
ReplyDeletewell best of luck bro
Regards
R.S
Don't worry..I will help you..send me your blog template..
Delete