M sharing two beautiful widget containing twitter, Facebook, Stumbleupon and google plus. as shown in the figure, 1st one will look like this.
Table of Contents
Social Sharing Widget in Blogger
Social Sharing Widget Number 1 :
Social Sharing Widget Number 2 :
Login to your Blogger Dashboard.
Click on template .(I will recommend you to backup your template first )
Now click on Edit HTML.
Search for </head> (By pressing control + f )and place the JavaScript code mentioned below just before this tag.
<script src=’http://apis.google.com/js/plusone.js’ type=’text/javascript’/>
If you are already using Google+ recommend button in your blog, then this code will already exist there. You can skip the above step.
Now search for <data:post.body/>, it might be occurring more than once in your blog.
Most of the users get confused with this. It depends upon the template, which code is going to work for you. In my case it was the second last one. You can try the last one and the second last one.
Now place the any of the following code just before <data:post.body/>
Code for Widget Number 1:
<div style=’box-shadow:0px 0px 1px 2px #000;’ id=”UT-social-share”>
<table align=’center’ border=’0′>
<tr>
<td>
<a class=’twitter-share-button’ data-count=’horizontal’ data-lang=’en’ data-via=’ersnjy‘ expr:data-text=’data:post.title’ expr:data-url=’data:post.url’ href=’http://twitter.com/share’ rel=’nofollow’/>
<b:if cond=’data:post.isFirstPost’>
<script src=’http://platform.twitter.com/widgets.js’ type=’text/javascript’></script></b:if>
</td>
<td>
<iframe allowTransparency=’true’ expr:src=’"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"’ frameborder=’0′ scrolling=’no’ style=’border:none; overflow:hidden; margin-left:20px; width:100px; height:20px;’/>
</td>
<td>
<div style=’margin-right:25px;’>
<script expr:src=’"http://www.stumbleupon.com/hostedbadge.php?s=1&r=" + data:post.url’/>
</div>
</td>
<td>
<div style=’margin-right:5px;’><g:plusone expr:href=’data:post.url’ size=’medium’/>
</div>
</td>
</tr>
</table>
</div>
</b:if>
<br/>
You can twitter username with yours (highlighted with red).
Click on save template and view any post from your blog you will see the change. This widget will appear only when you click on Post title. not on Home page.
If you will prefer to show this post on Home page also then just Remove the yellow colored text from above.
If you want to remove the shadow completely then remove the style attribute from the second line. It will look like this:
<div id=’UT-social-share’>
Code for Widget Number 2 :
/*——–Flipper Sharing Widget ——*/
.flipper a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(https://4.bp.blogspot.com/-dlD3BDKTZjA/T9IuXkfhSeI/AAAAAAAAGno/s8BGOkjdwX0/s1600/flipper.png)
no-repeat;
-webkit-transition: ease-in 0.15s all;
-moz-transition: ease-in 0.15s all;
-o-transition: ease-in 0.15s all;
-ms-transition: ease-in 0.15s all;
transition: ease-in 0.15s all;
cursor:pointer;
}
.flipper a.googleplus {
background-position: 0px -348px;
}
.flipper a.googleplus:hover {
background-position: 0px -406px;
}
.flipper a.pinterest {
background-position: 0px -464px;
}
.flipper a.pinterest:hover {
background-position: 0px -522px;
}
.flipper a.delicious {
background-position: 0px 0px;
}
.flipper a.delicious:hover {
background-position: 0px -58px;
}
.flipper a.digg {
background-position: 0px -116px;
}
.flipper a.digg:hover {
background-position: 0px -174px;
}
.flipper a.stumbleupon {
background-position: 0px -812px;
}
.flipper a.stumbleupon:hover {
background-position: 0px -870px;
}
.flipper a.technorati {
background-position: 0px -928px;
}
.flipper a.technorati:hover {
background-position: 0px -406px;
}
.flipper a.twitter {
background-position: 0px -928px;
}
.flipper a.twitter:hover {
background-position: 0px -986px;
}
.flipper a.facebook {
background-position: 0px -232px;
}
.flipper a.facebook:hover {
background-position: 0px -290px;
}
.flipper a.reddit {
background-position: 0px -580px;
}
.flipper a.reddit:hover {
background-position: 0px -638px;
}
.flipper a.rss {
background-position: 0px -696px;
}
.flipper a.rss:hover {
background-position: 0px -754px;
}
.Pleaseshare{
margin:10px 0px;
color:#333333;
font-weight:bold;
font-size:20px;
font-family:sans-serif;
}
</style>
<div class=’flipper’>
<b:if cond=’data:blog.pageType == "item"’>
<div class=”Pleaseshare”>
Please Share it! 🙂 </div>
<!–Google Plus–>
<a class=’googleplus’ expr:href=’"http://plus.google.com/share?url=" + data:post.url’ rel=’external nofollow’
target=’_blank’ title=’+1 it :>’/>
<!–Facebook–>
<a class=’facebook’ expr:href=’"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" +
data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Share this on Facebook :>’/>
<!– Twitter –>
<a class=’twitter’ expr:href=’"http://twitter.com/share?url=" + data:post.url + "&title=" +
data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Tweet this :>’/>
<!– Pinterest –>
<a class=’pinterest’ href=”http://pinterest.com/” rel=’external nofollow’ target=’_blank’ title=’Pin it :>’/>
<!– Delicious –>
<a class=’delicious’ expr:href=’"http://del.icio.us/post?url=" + data:post.url + "&title=" +
data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Add this to Delicious :>’/>
<!–DIGG–>
<a class=’digg’ expr:href=’"http://digg.com/submit?phase=2&url=" + data:post.url’ rel=’external nofollow’
target=’_blank’ title=’Digg this :>’/>
<!–Stumble–>
<a class=’stumbleupon’ expr:href=’"http://www.stumbleupon.com/submit?url=" + data:post.url +
"&title=" + data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Stumble this :>’/>
<!– Reddit –>
<a class=’reddit’ expr:href=’"http://reddit.com/submit?url=" + data:post.url + "&title=" +
data:post.title’ rel=’external nofollow’ target=’_blank’ title=’Add this to Reddit :>’/>
<!–RSS –>
<a class=’rss’ expr:href=’data:blog.homepageUrl + "feeds/posts/default"’ title=’Bookmark plz :>’/>
</b:if></div>
<div style=”clear:both”/>
After the customization save your template and review the changes you made.
Congrats you have done !!!!! Just save the template and enjoy
- You should check out some more useful blogger widgets by Sanjay choubey.
If you like my work, you can show your regards by sharing it on fb, twitter or google plus.
If you have any issue with this widget, kindly let me know in the comment section.
Thanks to be here..God bless..!!!!!
Leave a Reply