Mootools Featured Posts Auto Slider to Blogger/Websites

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.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

NOTE : You can DOWNLOAD and HOST mootools-1.2.1-core-yc.js yourself.Andalso 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 --> Page Elements.

6.Click on 'Add a Gadget'.

7.Select 'HTML/Javascript' and add the code given below and click save.

ENTER-YOUR-POST-1-LINK-HERE">THIS-IS-FEATURED-POST-1-TITLE
FEATURED-POST-1-DESCRIPTION

FEATURED-POST-1-IMAGE-ADDRESS" class="full" alt="" />



ENTER-YOUR-POST-LINK-2-HERE">THIS-IS-FEATURED-POST-2-TITLE
FEATURED-POST-2-DESCRIPTION

FEATURED-POST-2-IMAGE-ADDRESS" class="full" alt="" />



ENTER-YOUR-POST-3-LINK-HERE">THIS-IS-FEATURED-POST-3-TITLE
FEATURED-POST-3-DESCRIPTION

FEATURED-POST-3-IMAGE-ADDRESS" class="full" alt="" />



ENTER-YOUR-POST-4-LINK-HERE">THIS-IS-FEATURED-POST-4-TITLE
FEATURED-POST-4-DESCRIPTION

FEATURED-POST-4-IMAGE-ADDRESS" class="full" alt="" />



ENTER-YOUR-POST-5-LINK-HERE">THIS-IS-FEATURED-POST-5-TITLE
FEATURED-POST-5-DESCRIPTION

FEATURED-POST-5-IMAGE-ADDRESS" class="full" alt="" />

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.

This is featured post 1 title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...





This is featured post 2 title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...





This is featured post 3 title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...





This is featured post 4 title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...





This is featured post 5 title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...

You are done.

How To Add MooTools Featured Content Slider to blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see ]]> tag .

3.Copy below code and paste it just after the ]]> tag.

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.

slider-stage">

slider-list">

























slider-buttons">
Previous | Next

You are done.

Demo

How To Add Mootools Recent Post Slider to blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see ]]> tag .

3.Copy below code and paste it just after the ]]> tag .

4.Now again scroll down to where you see below code:

5.Copy below code and paste it just before

.

Replace "http://bloggertipandtrick.blogspot.com" with your blog address.
Replace images addresses with your images addresses.

Note: You can place above code as your choice.For explanation I place it just before

.

6.Now save your template and you are done.It will look like this:





Demo