Mootools Featured Posts Auto Slider to Blogger

This tutorial will show you how to add Mootools Featured Posts Slider into blogger or any other web site.You can look at the DEMO page of this Mootools Featured Posts Slider.Now if you like to add this slider to your site then follow the steps given below.
Note: This tutorial has been updated. If it didn't work for you before, try again. It will work fine.
1.Login to your Blogger account and go to "Edit HTML" of your blog.
2.Scroll down to where you see </head> tag .
3.Copy below code and paste it just before the </head> tag .

<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/9414412155/mootool-slider-custom.js"></script>

<style type='text/css'>
#myGallery, #myGallerySet {width: 515px;height: 250px;z-index:0;font-family: Georgia,Tahoma,Arial,Helvetica,Sans-serif;}
.jdGallery a{outline:0;}
.jdGallery{overflow: hidden;position: relative;}
.jdGallery img{border: 0;margin: 0;}
.jdGallery .slideElement
{width: 100%;height: 100%;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image:url('');}
.jdGallery .slideInfoZone
{position: absolute;z-index: 10;width: 100%;margin: 0px;left: 0;bottom: 0;height: 90px;background: #363636;color: #fff;text-indent: 0;overflow: hidden;}
* html .jdGallery .slideInfoZone{bottom: -1px;}
.jdGallery .slideInfoZone h2
{padding: 0;font-size: 16px;text-decoration:none;margin: 0;margin: 2px 5px 6px 5px;font-weight: normal;color: #ff9000 !important;}
.jdGallery .slideInfoZone h2 a
{padding: 0;font-size: 16px;text-decoration:none;margin: 0;font-weight: normal;color: #ff9000 !important;}
.jdGallery .slideInfoZone p
{padding: 0;font-size: 14px;margin: 2px 5px;color: #eee;}
</style>

NOTE : You can DOWNLOAD and HOST mootool-slider-custom.js yourself. It is currently hosted in yourjavascript.com. Also you can change width and height of this slider easily (Default width:515px and height:250px;).
4.Now save your template.
5.Go to "Layout" of your blogger blog.
6.Click on "Add a Gadget".
7.Select 'HTML/Javascript' and add the code given below and click save.

<script type="text/javascript">
function startGallery() {
 var myGallery = new gallery($('myGallery'), {
         timed: true,
         delay: 5000,
         slideInfoZoneOpacity: 0.8,
         showCarousel: false
 });
}
window.addEvent('domready', startGallery);
</script>

<div id="myGallery">

<div class="imageElement"><h3><a href="ENTER-YOUR-POST-1-LINK-HERE">THIS-IS-FEATURED-POST-1-TITLE</a></h3><p>FEATURED-POST-1-DESCRIPTION</p><a href="#" class="open"></a><img src="FEATURED-POST-1-IMAGE-ADDRESS" class="full" alt="" /></div>

<div class="imageElement"><h3><a href="ENTER-YOUR-POST-LINK-2-HERE">THIS-IS-FEATURED-POST-2-TITLE</a></h3><p>FEATURED-POST-2-DESCRIPTION</p><a href="#" class="open"></a><img src="FEATURED-POST-2-IMAGE-ADDRESS" class="full" alt="" /></div>

<div class="imageElement"><h3><a href="ENTER-YOUR-POST-3-LINK-HERE">THIS-IS-FEATURED-POST-3-TITLE</a></h3><p>FEATURED-POST-3-DESCRIPTION</p><a href="#" class="open"></a><img src="FEATURED-POST-3-IMAGE-ADDRESS" class="full" alt="" /></div>

<div class="imageElement"><h3><a href="ENTER-YOUR-POST-4-LINK-HERE">THIS-IS-FEATURED-POST-4-TITLE</a></h3><p>FEATURED-POST-4-DESCRIPTION</p><a href="#" class="open"></a><img src="FEATURED-POST-4-IMAGE-ADDRESS" class="full" alt="" /></div>

<div class="imageElement"><h3><a href="ENTER-YOUR-POST-5-LINK-HERE">THIS-IS-FEATURED-POST-5-TITLE</a></h3><p>FEATURED-POST-5-DESCRIPTION</p><a href="#" class="open"></a><img src="FEATURED-POST-5-IMAGE-ADDRESS" class="full" alt="" /></div>

</div>

Change 5000 to change your slider speed.
NOTE : Remember to replace ,
ENTER-YOUR-POST-X-LINK-HEREs with your real post links.
THIS-IS-FEATURED-POST-X-TITLEs with your real post titles.
FEATURED-POST-X-DESCRIPTIONs with your post descriptions.
FEATURED-POST-X-IMAGE-ADDRESSs with your real image addresses.
Look at the example below.

<script type="text/javascript">
function startGallery() {
 var myGallery = new gallery($('myGallery'), {
         timed: true,
         delay: 5000,
         slideInfoZoneOpacity: 0.8,
         showCarousel: false
 });
}
window.addEvent('domready', startGallery);
</script>

<div id="myGallery">

<div class="imageElement"><h3><a href="ENTER-YOUR-POST-LINK-HERE">This is featured post 1 title</a></h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...</p><a href="#" title="This is featured post 1" class="open"></a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjJ2-AnfXaiZN7Aj92cNDSKPiOw8fU0buXxHgnVeSPuLKzR4lp_UN9YpzBFY7OHmyIDMGQ9w5EmMmEK8XgMJKcLd63yx-L2wgOlIt561PFAXqg-pwPoy04rRk_CdpeJV8VM1s7EFF5bik/" class="full" alt="" /></div>

<div class="imageElement"><h3><a href="ENTER-YOUR-POST-LINK-HERE">This is featured post 2 title</a></h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...</p><a href="#" title="This is featured post 2" class="open"></a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfVHJoKTz_9WORuCJXwq_QoK9F_tLw5EIYBSIux__BZ85CigxA7pkewjw5w1GVqOgUy7EuSRT_RX0az4VisnwEFZcKLzjrTWVr5H2JnJdAlwtUgX-2Pzp786c7tLvE76Pl1Q1utEVP5HU/" class="full" alt="" /></div>

<div class="imageElement"><h3><a href="ENTER-YOUR-POST-LINK-HERE">This is featured post 3 title</a></h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...</p><a href="#" title="This is featured post 3" class="open"></a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjPMj6gDpAeWy-vMiNeNfz7qXXeZuAlMZQS7E47Me7PazsbuqpLYYJXyl5nlAO3Qg_0peCQZaQb66HEnancNCgRn9Nk9G8q1ytMsYan64_lekg5vvf-VDtjpGPE1lRhbDENkHUuDfc_MI/" class="full" alt="" /></div>

<div class="imageElement"><h3><a href="ENTER-YOUR-POST-LINK-HERE">This is featured post 4 title</a></h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...</p><a href="#" title="This is featured post 4" class="open"></a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1PpAvnWUVtL0UeYE8iTXaD18FG6ITtTudtUkWR_G4tpLbA18dmn5cxOyPtPL2mtNaGpDvrh7olk9mn0uiTBK0rkCSCF1iZF5FlpIiqYBu6WfF3rZwzBO7rDqxytJHr0qg4wbnKSCbgfE/" class="full" alt="" /></div>

<div class="imageElement"><h3><a href="ENTER-YOUR-POST-LINK-HERE">This is featured post 5 title</a></h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...</p><a href="#" title="This is featured post 5" class="open"></a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCu3LFeT7QSltnXdyZtmM5w1uEDfIFrr4HzL42Xa2pFWCyZZv0b6MKvgWNuNZNdRZSmmXdtZ9WhW6EAwrwU6QTLDcwVFEVTZDec0RCyIpB7xJII9YvlX0TmJJxB8UDUi722rrtd-FQXs4/" class="full" alt="" /></div>

</div>

You are done.