Add MooTools Featured Content Slider to blogger

Add MooTools Featured Content Slider to blogger

How to Install This Widget on Blogger?

Steps...

A. Adding Script Code

B. Adding HTML Code


Adding Script Code


In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.


Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/mootools-slider.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>

And now click Save Template 

Important !!! : Download mootools.svn.js as a zip file and hostmootools.svn.js yourself.

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


Adding HTML Code

So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard

old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..

<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/AVvXsEiXYvkBNHadzCKWj-VwiV6LTP7VmKO9SvgycYUWRf1WJeoUYlqeGBRS917aeIST0d9oP9GiDFu0_xUOAyytYwBP1ewixB6qwdhOw_Y0OyKd0ftUh26-km2C2idH5mAydYGUS5iB6Vi3Ogyp/" height="200"/></a></li>

<li id="l2"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVlYK_c4bj5U06UtktyrKXj8Gx31NVNjSA-meHhauU8UibnmAk99xhzDegX7xQvvxR_uBpSYcQHGzCCqaKDnpJ_MoIOe7tXZK8oytrKcNEJc-32JY-Bt7tx1xJQnEv86zG4L76AagfcI2Q/" height="200"/></a></li>

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

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

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

<li id="l6"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2oJisryBOen-8hnnUkf5d51DkfGbpovq-OA9bkzuDEFwCPJDIMeuVslfFirq1a97rYnDsYn4i-oIX8Q3Af21i6zwp7i3UIlKGa6jJFZIhEAMJoJAUublk_vJ-ihHGrARwH32XVFBMAEqK/" height="200"/></a></li>

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

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

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

<li id="l10"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRGnYGDbEr8lDkERHLTibjvTr7IHwNtOwUTkgxVoSRbayKD3-DLIRl6fWGziMcNqpGb-adLd12_y_Lj-ddBKOMCZv2kbY5_vFvMBV7f40V-kov7oJVycDhsi1BQi3nj3e0-W9yocVKWLBk/" height="200"/></a></li>

</ul>

</div>

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

And now click Save 


We have great collection of Best tricks and tutorials, Bloggingtrainings.blogpsot.com is a Blog Providing with Blogger widgets, help, blogger tips, blogger tricks, hacks, Blogger Gadgets,Plugins and Blogger resources with great skills and templates.practical SEO Tips and all things Blogging,is about Blog tricks & tips, Traffic generation, Backlinks, Search engine optimization, Web designing, E money, Social media, Facebook tricks,Blogging Discussion, Tips & Tricks,logging tips, tricks, how-tos, news, tools and resources, bloggingtrainings.blogspot presented in easy to understand tutorials.Keep visiting us if any links is not working or you want sme more help, then keep looging at bloggingtrainings.blogspot.com.or contact us 0323-7591466.