Blogger Tips and Tricks

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see ]]></b:skin> tag .

3.Copy below code and paste it just after the ]]></b:skin> tag.

<script src='mootools.svn.js' type='text/javascript'/>

&lt;script type=&quot;text/javascript&quot;&gt;window.addEvent(&#39;domready&#39;, function(){ var totIncrement  = 0; var increment   = 212; var maxRightIncrement = increment*(-6); var fx = new Fx.Style(&#39;slider-list&#39;, &#39;margin-left&#39;, {  duration: 1000,  transition: Fx.Transitions.Back.easeInOut,  wait: true  });

  //------------------------------------- // EVENTS for the button &quot;previous&quot; $(&#39;previous&#39;).addEvents({&#39;click&#39; : function(event){  if(totIncrement&lt;0){   totIncrement = totIncrement+increment;   fx.stop()   fx.start(totIncrement);  } }    });

//------------------------------------- // EVENTS for the button &quot;next&quot; $(&#39;next&#39;).addEvents({&#39;click&#39; : function(event){  if(totIncrement&gt;maxRightIncrement){   totIncrement = totIncrement-increment;     fx.stop()  fx.start(totIncrement); }}    })

});&lt;/script&gt;

<style type='text/css'>#slider-stage{width:100%; overflow:auto; overflow-x:hidden; overflow-y:hidden; height:200px; margin:0 auto; border:2px solid #000000; background-color:#000000;  }#slider-buttons{float:left; width:100%; margin:0 auto; border:2px solid #000000; color:#ffffff; font-weight:bold; background-color:#000000;filter:alpha(opacity=60);opacity:0.6;}#slider-list{width:4500px; border:0; margin:0; padding:0; left:400px;}#slider-list li{list-style:none;margin:0;padding:0;border:0;margin-right:4px;padding:4px;background:#DEDEDE;float:left;width:200px;height:200px;}</style>

Important !!! : Download mootools.svn.js as a zip file from here and host mootools.svn.js yourself.

You can change height,width,color,... if you like.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div id="slider-stage">

<ul id="slider-list">

<li id="l1"><a href="#" title="#"><img alt="#" width="200" src="https://4.bp.blogspot.com/_4HKUHirY_2U/SxEB37QtNcI/AAAAAAAAAX0/pCTR9-G_eB8/1.jpg" height="200"/></a></li>

<li id="l2"><a href="#" title="#"><img alt="#" width="200" src="https://3.bp.blogspot.com/_4HKUHirY_2U/SxEB7oOhYOI/AAAAAAAAAX8/fUr3ZlPpS38/2.jpg" height="200"/></a></li>

<li id="l3"><a href="#" title="#"><img alt="#" width="200" src="https://2.bp.blogspot.com/_4HKUHirY_2U/SxEB_sqE6wI/AAAAAAAAAYE/w4jo11g5hBc/3.jpg" height="200"/></a></li>

<li id="l4"><a href="#" title="#"><img alt="#" width="200" src="https://1.bp.blogspot.com/_4HKUHirY_2U/SxECDRFc_NI/AAAAAAAAAYM/Wx0LKwVEKW8/4.jpeg" height="200"/></a></li>

<li id="l5"><a href="#" title="#"><img alt="#" width="200" src="https://4.bp.blogspot.com/_4HKUHirY_2U/SxECJ16VZmI/AAAAAAAAAYU/42yvYTr73fY/5.jpg" height="200"/></a></li>

<li id="l6"><a href="#" title="#"><img alt="#" width="200" src="https://1.bp.blogspot.com/_4HKUHirY_2U/SxECNkV__aI/AAAAAAAAAYc/gLKK6geuCJw/6.jpg" height="200"/></a></li>

<li id="l7"><a href="#" title="#"><img alt="#" width="200" src="https://1.bp.blogspot.com/_4HKUHirY_2U/SxECRhJHnwI/AAAAAAAAAYk/JuLnodmNxsA/7.jpg" height="200"/></a></li>

<li id="l8"><a href="#" title="#"><img alt="#" width="200" src="https://3.bp.blogspot.com/_4HKUHirY_2U/SxECVOyja0I/AAAAAAAAAYs/nqfSWp_GRoE/8.png" height="200"/></a></li>

<li id="l9"><a href="#" title="#"><img alt="#" width="200" src="https://4.bp.blogspot.com/_4HKUHirY_2U/SxECdbX_-MI/AAAAAAAAAY8/qwr28O1jL6k/9.jpg" height="200"/></a></li>

<li id="l10"><a href="#" title="#"><img alt="#" width="200" src="https://4.bp.blogspot.com/_4HKUHirY_2U/SxECj5CtPmI/AAAAAAAAAZE/n97iYa8Ee_Q/10.jpg" height="200"/></a></li>

</ul>

</div>

<div id="slider-buttons"><a id="previous" href="#">Previous</a> | <a id="next" href="#">Next</a></div>

You are done.

Demo

File Under : mootools