English French German Spain Italian Dutch Russian Brazil Japanese Korean Arabic Chinese Simplified
Translate Widget by Google

How to make a spinning label cloud

How to Make a Label Tag Cloud Spins - You must be very familiar with the label right? Labels are grouping blog posts in one category, and then usually in pairs or perhaps in the sidebar at the bottom of the template.

How to prevent others from copy-paste the site content

Nowadays blogger/programmers, not all of them are very kind/polite on doing their script/programme. Some of them just copy and paste and then edit theresome, and then, they say that the programme are theirs.

How to make Handy Translator

Is this what you guys wanted to?? This is such an handy translator compatible for blogger, that might want to appreciate their reader/customer/client that come from other country .

How to make a Sitemaps Categorized by Date

As time passed, many script writers / programmers make a good script. Today, I'm going to share my knowledge about sitemap.

Energy Saver

The script will automaticly deem out your screen when you "Do Nothing" at the webpage. Just like mine, I did it to this blog (http://scripterzone.blogspot.com).

Sunday, 8 April 2012

How to Add Floating Facebook Share & +1 Button Next To Posts in Blogger

As time goes by, a lot of scripter/programmer made up a good script. This script will enable you to show-up the floating facebook share, etc just beside of your blog content.



See above picture for an example that I've taken from http://facebookholic.blogspot.com (As the founder contact me and ask for a floating script)


How to Add Floating Facebook Share & +1 Button Next to Posts in Blogger??


1. Go to Dashboard > Design
2. Choose a "HTML/JavaScript Widget"
3. Simply paste the following code inside it,

<style>  
 #floatdiv {  
  position:fixed;  
  bottom:15%;  
  margin-left:-180px;  
  z-index:10;  
  float:left;  
  padding-bottom:2px; 
 }  
 #mbtsidebar {  
  background:#fff;  
  border-top:1px solid #ddd;  
  border-left:1px solid #ddd;  
  border-bottom:1px solid #ddd;  
  border-radius:5px;  
  -moz-border-radius:5px;  
  -webkit-border-radius:5px;  
  padding-left:5px;  
  width:60px;  
  margin:0 0 0 5px; 
 } 
 .fb_share_count_top {width:52px !important;}  
 .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}  
 .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
 .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} 
</style>

<div id="floatdiv">
 <div id="mbtsidebar">
  <table cellpadding="1px" cellspacing="0">
   <tr>
    <td style="padding:5px 0px 0px 0;">
     <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="ScripterZone">Tweet</a>
     <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>
   </tr>
   <tr>
    <td style="padding:5px 0 2px 0;">
     <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a>
     <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
    </td>
   </tr>
   <tr>
    <td style=" padding:5px 0px 0px 0px;">
     <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
     <g:plusone size="Tall" expr:href="data:post.url"></g:plusone>
    </td>
   </tr>
   <tr>
    <td>
     <p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://scripterzone.blogspot.com">Widgets</a></p>
    </td>
   </tr>
  </table>
 </div>
</div>

3.1 Easy Customisation
1. margin-left:-180px;
To align the widget more towards the left or right then edit this value. Decreasing this numeric value will shift the widget to the right and increasing the value will shift it to left.

2. background:#fff;
To Change the background colour of the floating widget then change the background value (E.g: #fff is for white, means that, your background widget will be white in colour.)


4. Save your widget and drag it just below the post body as shown below,



5. Now finally Click the save button at the top right corner and you are all done!



View your blog to see it hanging just to the left of your blog post body.