1058 followers
Follow us on Twitter!
260 followers
Join us on Facebook!
Add to Blogger:
Here are the simple steps to install it to blogger;Login to Blogger
Goto Design
Edit HTML
Expand Template Widgets
Now Find ]]</b:skin> and the paste the following code above/before it;
#socialbutton ul {
list-style: none;
clear: none;
padding: 0px 0px ; margin: 5px 0;
}
#socialbutton ul li {
display: inline;
background:none;
margin:0;
padding:0;
}
#socialbutton ul li a {
display: block;
float: left;
width: 32px;
height:32px;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8XSeoy77Kxlg9N1BiwCTz4-AXL33BjY1Pk0Ca49F691sTJyUhf9WFv_ZECQYr0d4-0GJyUwRllJWEluTx2QGiiPk-2SGIAbvvhyb6MROYVDMor3cd6swCJEH2xDKYXawoDYE4mzs93e3R/s1600/sharebutton.png') ;
margin-left:3px;
background-repeat: no-repeat;
margin-right: 2px;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#socialbutton ul li a.twitter {
background-position: -0px -0px;
}
#socialbutton ul li a.twitter:hover {
background-position: -0px -33px;
}
#socialbutton ul li a.facebook {
background-position: -32px -0px;
}
#socialbutton ul li a.facebook:hover {
background-position: -32px -33px;
}
#socialbutton ul li a.stumbleupon {
background-position: -64px -0px;
}
#socialbutton ul li a.stumbleupon:hover{
background-position: -64px -33px;
}
#socialbutton ul li a.digg {
background-position: -192px -0px;
}
#socialbutton ul li a.digg:hover {
background-position: -192px -33px;
}
#socialbutton ul li a.reddit {
background-position: -160px -0px;
}
#socialbutton ul li a.reddit:hover {
background-position: -160px -33px;
}
#socialbutton ul li a.google {
background-position: -128px -0px;
}
#socialbutton ul li a.google:hover {
background-position: -128px -33px;
}
#socialbutton ul li a.del-icio-us {
background-position: -480px -0px;
}
#socialbutton ul li a.del-icio-us:hover {
background-position: -480px -33px;
}
#socialbutton ul li a.mixx {
background-position: -96px -0px;
}
#socialbutton ul li a.mixx:hover {
background-position: -96px -33px;
}
#socialbutton ul li a.technorati {
background-position: -416px -0px;
}
#socialbutton ul li a.technorati:hover {
background-position: -416px -33px;
}
#socialbutton ul li a.linkin {
background-position: -256px -0px;
}
#socialbutton ul li a.linkin:hover {
background-position: -256px -33px;
}
#socialbutton ul li a.yahoobuzz {
background-position: -448px -0px;
}
#socialbutton ul li a.yahoobuzz:hover {
background-position: -448px -33px;
}
#socialbutton ul li a.myspace {
background-position: -512px -0px;
}
#socialbutton ul li a.myspace:hover {
background-position: -512px -33px;
}
#socialbutton ul li a.more {
background-position: -576px -0px;
}
#socialbutton ul li a.more:hover {
background-position: -576px -33px;
}
- Now Find <data:post.body/> tag and Paste the Following Code right after/below this tag;
<b:if cond='data:blog.pageType == "item"'>
<div id='socialbutton'>
<ul>
<li><a class='twitter' expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
<li><a class='stumbleupon' expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
<li><a class='digg' expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>
<li><a class='reddit' expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></li>
<li><a class='google' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>
<li><a class='del-icio-us' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li>
<li><a class='mixx' expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li>
<li><a class='technorati' expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li>
<li><a class='yahoobuzz' expr:href='"http://buzz.yahoo.com/submit/?url="+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li>
<li><a class='myspace' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u="+ data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Sahre this post on Myspace'/></li>
<li><a class='a2a_dd more' expr:href='"http://www.addtoany.com/share_save?url=" + data:post.url + "&title=" + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
</ul>
</div>
</b:if>
Change the RED Text in the code to Position the Icons according to your template.
Is there <data:post.body/> tag more then once in your template? Its because you are using auto read more Hack in your template. You do not need to worry.
Here is the Solution….
Solution:
Find one of these tags in HTML and Paste the code below/after these tags;<div class='post-footer'> Or
<div class='post-footer-line post-footer-line-1'> Or
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
0 comments: