All About Internet

Monday, August 11, 2014

Add Floating Share Buttons Like Mashable to Blogger

Instructions To Follow:

STEP #1

Log in to Blogger, go to Layout -> Edit HTML

and mark the tick box "Expand Widget Templates"

STEP #2

Now find (CTRL+F) this code in the template:

]]></b:skin>

And immediately before it, paste this 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;
}

Step#3 Now find the bellow code

<div class=post-header-line-1/>just before it, paste this code:

<b:if cond=data:blog.pageType == &quot;item&quot;>
<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>

Now click Save Template

Thats it and remember, the floating widget is visible only for blog post, so this widget won’t be visible on your blog homepage.

Show Comment Bubble at Top Right of each Blogger Posts

Add bubble comments count near your each of you post title can make make your blog more attractive to your visitors. If you are a new blogger in blogging era and want to design your own customize template or modify the existing one, this tutorial is for you. so lets go ahead and add a small bubble comment count in front of your blogger post area. find working demo on this blog.

STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:

]]></b:skin>

And immediately before it, paste this code:

.comment-bubble {
 float : right;
 width : 48px;
 height : 48px;
 background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_NnTm2c6OUWH31BVL2dPQP0HQSmmB-nsdxlSxW6Dp8_qWbzHfkMrRNjFj63bwI0M9mzEr6kdjRrrY-fG75huxCECm4mU5S3-B19A62bgp9kyZZ78PenbbcX3tiY4d1fynayjUKBwKhg-u/s1600/Comment+Bubble+%281%29.png) no-repeat;
 font-size : 18px;
 margin-top : -15px;
 margin-right : 2px;
 text-align : center;
 position:float;
 }

Now find this code:

<b:if cond=data:post.link>

and replace it with the bellow code

<b:if cond=data:post.allowComments>
<a class=comment-bubble expr:href=data:post.addCommentUrl expr:onclick=data:post.addCommentOnclick><data:post.numComments/></a>
</b:if>
<b:if cond=data:post.link>

Click Preview. If its ok than save your template.

Frequently asked questions and solutions ..

Q. Can i change the bubble image to suit my blog ??
A. Yes you can just change the code https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_NnTm2c6OUWH31BVL2dPQP0HQSmmB-nsdxlSxW6Dp8_qWbzHfkMrRNjFj63bwI0M9mzEr6kdjRrrY-fG75huxCECm4mU5S3-B19A62bgp9kyZZ78PenbbcX3tiY4d1fynayjUKBwKhg-u/s1600/Comment+Bubble+%281%29.png with the bellow code of your choice