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/AVvXsEh0KrJ3F4A0PYqyKjyP3PSHSKBNf_sub_yS7mKj3vFBk8zMYljKvLrhVI8XqCfErk4qZda0Oihm4tv84cwvq0tnj2yLnH-l1lOkeA7i6qmE2vQrDktDM8YZZM_55m59jRPZ97otMpen3M44/" height="200"/></a></li>

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

<li id="l3"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS_TZFMh3k1AVN7WqGLB_l6V7M21NROTzYJhOlFvkuSrP4rk-r-FQ9E_nSfHdyx5SuEm292Da0XfzSqhKclDoBBxcs8-gK1PS2hj-lBI5b8uuoZ0GFvg02X3zZyNwLX1D0x8V9rJlwn3vv/" height="200"/></a></li>

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

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

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

<li id="l7"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi02If_ta5Cox5QNzkSxY0Avm5iAeGCrUHQXFeAC3-oT3Rl_pi5gtSod6uW6Wg8WSJkrAKTV7LIaVeCHnMO8N_rl7e2xSk-artQHmfkrKmehGBdTefaC-KyyEpEgMLj3dkUY__N-UbqXREC/" height="200"/></a></li>

<li id="l8"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh60W2xxT-ByLYMWbDXpwjmjfELbxkexrUhQ_CMuPXihHCn_btqVEL3ID4lJoqvItV3K-ySnPpQaCcY39XIDGXXOFGW7FTsX6y1zROEPzhmU4MmzxwpvPaBMIolCrWt5Os0P0phgPwLEb1x/" height="200"/></a></li>

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

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

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

Relax and enjoy, don't be rush.

Related Post