MatrixAdapt | Logiciel de gestion d'Entreprise, Création et référencement des sites web

The Social networking sites growing traffic is indirectly to webmasters themselves. the more they receive traffic the more visitors we receive when people share you content with friends and colleagues. The widget today consists of Facebook, Twitter, StumbleUpon box counters along with Addthis Counter which makes it a complete package of social media sharing buttons.

• Go To Blogger > Design > Edit HTML

• Backup your template

• Check the "Expand Widgets Templates" Box

• Find (CTRL+F) <data:post.body>

• Just above it paste the code below.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div align='right'><table border='0' cellpadding='2' cellspacing='0' width='150'><tbody>
    <tr>
      <td valign='top'>    <script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</td>

      <td valign='top'>   <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></td>
    </tr>

    <tr>
      <td valign='top'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </td>

      <td valign='top'>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de39fde7c998f6e' type='text/javascript'/>
<!-- AddThis Button END -->
</td>
    </tr>
  </tbody></table></div></b:if>

If you wish to align the widget to left then replace right with left

• Hit Save and you are done!

Leave a comment betow…………………..

Friends, This post contain a trick to zoom your blogger images with out clarity loss. If you want to insert this effect to your blogger, Follow this post.

• Log in your Blogger account.

• Click on Templates.

• Hit on Edit Html button and proceed.

• Find (Ctrl+F)   ]]></b:skin> tag.

• Copy and paste below code before  ]]></b:skin> tag.

 

/*------- Master Hacks ZOOM-OUT ZOOM-IN -------*/
.mbtzoom {
padding:5px;
position:fixed;
bottom: 35px;
right:10px;
cursor: pointer;
text-decoration: none;
border: 0px solid transparent;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mbtzoom:hover  {
  zoom: 2;
  text-enlarge: 2;
  -moz-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}

You wish to apply the zoom effect to any image you want simply use this code.

 

<a href="URL OF PAGE" class="mbtzoom"><img  width="60px" height="60px" src="IMAGE LINK" alt="back to top"  /></a>

• Change Red color with your Page link and Image link.

*Make sure to Keep width and height equal to half the size of original image. For example if the image size is 100px by 100px then set width="50px" and height="50px".

……………………………..END…………………………………….

This post will explain to you how to add JQuery Lazy Load Plugin to your blogger blog or any other website easily. This script is used to show a loader, when peoples open your web page.( For Example, you are thinking to play a PC game so before you could start playing you have to go through loading part.) This script is 100% working. If you want to insert Please  follow me.

Features of  Lazy Page Loader:

• It is search engine friendly so it will not affect your Site Speed or anything.
• It is compatible with almost each and every browser i.e. Chrome, Firefox, Internet Explorer and etc.
• It has multiple Loading effects so you can choose according to your desire needs.
• It has flexible coding so you can customize it without any hesitation whatsoever.

• It will also help those blogs which take less time to load because the loading features will keep your visitors interested in your blog.

How To Install Lazy Page Loading Effect To Blogger:

• Log in Your Blogger

• Click “ Template” button.

• Hit “Edit HTML”.

• Proceed.

• Find  ]]></b:skin> and just above it Paste the following CSS coding (CTRL + F ).

 Now from the above CSS coding Replace Loading-GIF-Here with any Animated Loading Effect ( Some effects are given below. Select one.)

• Now again within your template Search for </head> and just above it paste the following JavaScript Coding.

• Once again in your template Search for </body> and above it paste the following HTML code.

(Recommended)

• If you want loading effect on each and every page of your blog, Copy below code and paste it above </body> tag.

 <div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'> Powered By <a href="http://www.entertainer001.blogspot.com">Entertainment</a></div></div>

• If you want to show This Loading effect only on your home page,Copy below code and paste it above </body> tag.

Select Animated Loading Effect :

http://www.matrixar.com/-l8Ot6w2IFvQ/UE4K-JAdQpI/AAAAAAAAFM0/aGUEayOCejo/s1600/MBL-Loading-1.gif

http://www.matrixar.com/-3RFuLj1RgxA/UE4K_7DbkfI/AAAAAAAAFNE/RTHE-AygGlA/s1600/MBL-Loading-3.gif

http://www.matrixar.com/-FA2RWStvA88/UE4K-0jbwmI/AAAAAAAAFM8/IiNkaVjnUng/s1600/MBL-Loading-2.gif

http://www.matrixar.com/-QjD-a18CPCU/UE4LCHdGNmI/AAAAAAAAFNY/QVslh5SBCkg/s1600/MBL-loading-6.gif

http://www.matrixar.com/-y6MhdpiSXZw/UE4LBRH76LI/AAAAAAAAFNQ/DAsL4Hc8Opc/s1600/MBL-loading-5.gif

http://www.matrixar.com/-GFGEKhfmVrI/UE4LAQuhxrI/AAAAAAAAFNM/ibrUuDyPg1c/s1600/MBL-loading-4.gif

………………………………………END……………………………………………..