How add floating Facebook share, Tweet and Share buttons into blogger blogs
4:37 AM
Posted by
Mark
This tutorial will teach you how to add floating Facebook share, tweet, stumble upon and Google buzz buttons to your blogger. This look really cool and gives your blogger blog beautiful look and also people will more likely to share your content as it floats all over your pages. Just follow the instructions to below to add floating Facebook share, Tweet and more buttons to blogger.
go to you blogger Dashboard>>Design>>Edit HTML
Tick "Expand Widget Templates"
Look for the following code in your template. You can search for this code by pressing CTRL + F
]]><skin>
Now just above/before ]]></b:skin> copy and paste the following code
#sharebox {
background-color:#FFFFFF;
border-color:#C1CDCD;
border-style:solid;
border-width:1px;
left:103px;
bottom:40px;
margin-top:10px;
position:fixed;
width:64px;
}
#sharebox .float {margin:7px}
.FBConnectButton_Text
{
font-size: 8px;
padding:2px 4px 3px !important;
}
#sharebox {
background-color:#FFFFFF;
border-color:#C1CDCD;
border-style:solid;
border-width:1px;
left:103px;
bottom:40px;
margin-top:10px;
position:fixed;
width:64px;
}
#sharebox .float {margin:7px}
.FBConnectButton_Text
{
font-size: 8px;
padding:2px 4px 3px !important;
}
after that find
<div class='post-heder-line-1'>
<div class='post-heder-line-1'>
Now look for the following piece of code
And just above/before that, paste the following code
<b:if cond='data:blog.pageType == "item"'>
<div id='sharebox'>
<div class='float'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>
<div class='float'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><div class='clear'/></div>
<div class='float'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
<div class='float'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div>
</div>
</b:if>
<div id='sharebox'>
<div class='float'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>
<div class='float'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><div class='clear'/></div>
<div class='float'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
<div class='float'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div>
</div>
</b:if>
Finally hit SAVE TEMPLATE and viola! Those social media buttons will float on all of your posts. Remember that these buttons will only show inside your posts and not on your homepage or static pages.
Kindly Share The Love »»
Tags: Blogging Tips, TIPS TRICKS
Subscribe to:
Post Comments (Atom)
Share your views...
1 Respones to "How add floating Facebook share, Tweet and Share buttons into blogger blogs"
Social media site is very popular is now time and that is the important of there users.
December 3, 2012 at 2:20 AM
Post a Comment