|
|
|
I'm sure many people would have seen the floating share icons on various sites. Most of the floating share buttons which I found from Google search was the one similar to Mashable. These tutorials used JavaScript - jQuery to achieve a smooth gliding but, doing so will add too much of weight on your blog. It increases the size of your template apart from the script involved in loading those buttons.
You may very well notice that the facebook like boxes or buttons occupy a huge space because the scripts that they use are by default heavy and nothing could be done as such especially as a blogspot user. Thus, it becomes our responsibility to reduce the load time as much as we can. So, this post illustrates on adding floating share icons just with a simple CSS. I suggest you to read the following article for speeding up your blog - Speed Up Your Blog : Tips And Tools.
Biggest Advantage: No script is involved for the floating feature. Only scripts involved are those associated with the share buttons - facebook, twitter, etc... Take a look at the screenshot below for better understanding.
So, let's get started with this tutorial.
1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, expand your template and search for the following piece of code.
<div class='post-footer-line post-footer-line-1'/>
2. Just paste the following piece of code just below the line mentioned in step 1.
<div style='position: fixed; top: 1%; right: 1%;'>
<script type='text/javascript'>
tweetmeme_url = '<data:post.url/>';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
<br/>
<fb:like action='like' colorscheme='light' expr:href='data:post.url' font='arial' layout='box_count' send='false' show_faces='false'/>
</div>
<script type='text/javascript'>
tweetmeme_url = '<data:post.url/>';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
<br/>
<fb:like action='like' colorscheme='light' expr:href='data:post.url' font='arial' layout='box_count' send='false' show_faces='false'/>
</div>
3. I have used only facebook and twitter share counters in my coding. You may add any number of share widgets as you want within the div tags. But, make sure you add a break tag (<br/>) after each and every script - makes the share buttons look neat. In order to make the facebook share button work, add the following piece of code above </head> in your template.
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
4. You may further customize the position of the widget. Note the code highlighted in green. It depicts the position of the widget. The default coding places the share buttons to the top right corner. You may replace this coding with the following codes for different positions.
TOP LEFT - top:1%; left:1%;
BOTTOM LEFT - bottom:1%; left:1%;
BOTTOM RIGHT - bottom:1%; right:1%;
5. That's it!!! Save your template.
If you find the above tutorial little difficult or if you don't find the coding mentioned in step 1, then just add the code mentioned in step two on your "Design>>Page Elements" page as a "Gadget>>HTML/JavaScript". That's it. Save the gadget and view the result!!! I hope you enjoyed this tutorial. You may share your opinions via comments.
Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!
Nice widget...and also nice look for your template too. You have been customising church theme so much....Good work
REPLY@Amit: Thanks for the comment Amit! Pretty much right! I love revolution theme and I love modifying it as well! Hope you enjoy the upcoming articles on my blog as well!
REPLYHello Every One to add Googl's +1 Button To The Float Add The Below Code.....
REPLY<!-- float right start -->
<div style='position: fixed; top: 1%; right: 1%;'>
<script type='text/javascript'>
tweetmeme_url = '<data:post.url/>';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
<br/>
<fb:like action='like' colorscheme='light' expr:href='data:post.url' font='arial' layout='box_count' send='false' show_faces='false'/>
<br/>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/>
</div>
<!-- float right end -->
@TheEmoLab: I wanted to update the post with the Google +1 button. Well, your comment has done that. Thanks for the comment buddy!
REPLYiam not able to use it in my blog i.e bollytreat.com stucking
REPLY@Vicky: It is pretty simple to get this working buddy! May be your making some mistake! Just hit me via gmail and I'll solve your issue:)
REPLYHi Mukand, Hope you are fine, can you give me a favour? i want the thesis footer code same as in shoutmeloud.com, i need the funtion code to generate the all those things... but i want to use it in wordpress blog, you have converted it into blogger, i want it for wordpress, please help me... tell me can you give it free? or will you give it for any price... reply me at innocent_mistaker@hotmail.com Thanks.
REPLY@News Crusher: Well, I'm actually a blogger geek. So, I don't handle WP stuffs! However, I am writer on Shoutmeloud. So, I can ask Harsh to help you out with the same problem! Email sent to your mail box as well.
REPLYhow do we add the same for WordPress platforms???
REPLY@Rajesh: Well, you need to add it to your CSS file and upload the same to your host server!
REPLYUse the tab below to comment. No spam please!!!
POST YOUR COMMENT