How To Add MooTools Featured Content Slider to blogger - TRICK BAZAR

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPaZbFWVaS0ox1SUay002bJdOdj6Nymc3BxnJefbWAfyaW6JXinZMomRmvDjNPGNHmNwYC2VBUx-aZsq-b7nkuN68v1wMM0cJ7iohcYvT6z_vG7tq9hDin-ueb_brPgyknAsfBJBtlDGJb/" height="200"/></a></li>

<li id="l2"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqtboULFUjbaIor6le8n08NQb2UiHvhdmKxs7TWX-mxvwNh1rpLfEMVVOQBlp5cPTLC1ou_A4TLvUeV4CRTjGBPajbj9O8dCTKJsFM7dn4RBShmOa8YrR3VqMNJ0spd3vYi9RT4UNvk8ZM/" height="200"/></a></li>

<li id="l3"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEGXZ2212QbBvNNpiTwMMDlf0238qYBTEetTAZheXtwiEx1Wb6dHL0hHK6ZRFyRhYRKpiCbOAdLbIjGQvYIRcKzvQsV4gi7lfVI_VRIbR0BWCFLtnMR7fzGlv0ojFIeF6FVPXnN6uDdVTb/" height="200"/></a></li>

<li id="l4"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizPZNYvulmGeivs8_OQWrAEbf8FuJWP9xml6k9gDiB_KPwPw1tIKB2D8EYvI9jcrJZFxGo7FD5ERGzT06B0pOsus0yW-vUdRufS9KHtIL8_guKpPk77wBAMQy6AXWbwAOU8kueU6PsNRF7/" height="200"/></a></li>

<li id="l5"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG0rCAL7Wu3Zdr6lPfIqX7pHgtmNwVzxTIhjVx-l-pXo6tZEKQsF_GzZkm1bHVhYdL1vvC879Whzb0eTAsPJMlIaZDVsvkJ2nHy0_yZj4DYnyZMSiytF7H2QPv_vKtfo6zKFWfk61DnHTw/" height="200"/></a></li>

<li id="l6"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi94hvK1yazZGmTkLhiuYEEyIxl12Kx3IcMxABJkPMFZkkyyp7CCi6XmYiA0xlK8YTpmowazzi_bUNQr1OA6sfa8Px87-1CivmeDk381MBkc-TXODxDl1vPZyBOx0e8ckh06OULS3jTJyzv/" height="200"/></a></li>

<li id="l7"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoKKcUv8HkWlQJjuo5LAhGFY6IHtdE5AMQsAMunidM6zcwCM5qLC6rdoqlxEGNLzixpowJpNEzGlaT5yruBFNac6wH3L0Xn5L7L9IZZFvd0HmHU-qfQ5uwE6Bfx3iOFRUxq_hxE7QVct8V/" height="200"/></a></li>

<li id="l8"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGQtaLP-FKHJabtJE_RZVravFAAPtUNPVNsywD1h-TnmPWsZ6B68YtwDd7OtfrKSNJiXds9dzLfJIGNOvhmxuaPdrHy1HOkOY5yc8lDncNRKUiRIqmK9D6092JYZ0RCZmoRKHtZ-3r4La3/" height="200"/></a></li>

<li id="l9"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQsilBGhyp1ES4TCijIPzfUklt6uRAhpeBDZbJXqnjopn3ipKlRWoWERh622aWOnyWM0pO_iOJ2VxU-7RgWSPLoeoLlW9Z20kHz-v-u0K6Nc7Lq60h9PkoKQ_7lTakTXSR5bWEfM5zlXOw/" height="200"/></a></li>

<li id="l10"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBb2-i6gTFuMkMMKAqZo0Af833aGsXHDVxnaMPbJjaXJjBt7CeydE6v-xbOAgbFjOeVYULSeH-kC4X_4J51N3uHb6IlNjEF6na8Cdz1VzpnfroDymhIS8IFIx5a0e7CzDEjkJ3FovNMe72/" 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