1 How To Add MooTools Featured Content Slider to blogger

UPDATE: I updated some of my posts, this post I update 17+ Featured Content Slider for Blogger Using jQuery ..........

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='http://keerthiset2.110mb.com/mootools%20slider/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/AVvXsEjKPgfYpRSXP4aAvsmIRFj8cc9_1Aah_12cVUQVzYYyf2iJ3Cu29qc35la5yLclLCOb_pABA84Mz_8okmxFfJl5ZzGkuVorCzdYiRS62CxPm1qNx20H91yP_qW-KSk5cl9W_lCR2amTAeLd/" height="200"/></a></li>

<li id="l2"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheBbsutvwW3CJAaLmCL1Qn1gYfQ15HWgHLBLXKVTp9NC-tTns6-Lm-pJWp7B5sp-xdMKp2yIJ7cRhxnBVqf8fXUBKN2vKDLP_Gh2mjiALXm0cj3WdkVJtzHxOoDugSvKEkT5DGgi3ccKxk/" height="200"/></a></li>

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

<li id="l4"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio6XUeJG27Xh46-24jn1Kdntn9HOMLtfYMcJ_Fqgo2Ri93QjYiAzZyhUpK2nnKEPoStt5VBCfIm2mgHR6MaYMnBkQhFXtigS0t-5po1GtCoP3a8dVA1xIwemIJ-sgRHFAT0DOJAeYYM8Ft/" height="200"/></a></li>

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

<li id="l6"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjepco9jIOZud4CD_hOXCS0P2Ezdttj5tTODtIBIx6D-inRVNFimaMdXE3oKVcn4RSVbnu8_45SofFAFR-ABmYNU84Ui6UH8UXzQGDEQmyJBsyqpaMPUxIIRMtV0P9fO6LArLxgQmGPKX6/" height="200"/></a></li>

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

<li id="l8"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrt_DOwNE6Cg64Jjg3i07z5OubKT5byN79crutsMwt1jfM45kXqc1wdkq2ljW-YksO1tKJL-tIJ2lgTQYcWeRd4e6MPPUzA12nw2pHvlkpdxnrusuq3eZnihD25-PkAcJFbUfL_X3UTRyJ/" height="200"/></a></li>

<li id="l9"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9y2NCCqc02xXYp7yMm3l0g3uc6tw0zF3CxFUFqF4l2V5-75umo1WCjT_HD11OgR6THu9N4kWxYpQzclZjzJnvBiDwty9SrEl37sLeJwTwz6l6NJ4Nq84hnCDf6_ftEAAuLQAG8EFL7Qdq/" height="200"/></a></li>

<li id="l10"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimOCSAJWthAXwKQcdyTYq3ncFqIQSssG1xjhbWYzDU2D-Wx8Ga4d_RHCsrbtAjJXzs5Ku5h3Up90YNa_0AlQC8x8z77DhuAautwsen3h1x9Zp0LtXIifMSmBHwLCWRxbnEAzrG-aTEzYIW/" height="200"/></a></li>

</ul>

</div>

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

NOW CLICK SAVE TEMPLATE