Advertisements

Mootools Featured Posts Auto Slider to Blogger

Posted by Lasantha Bandara on May 11th, 2014 File Under : css, java script, mootools44 Comments
Advertisements

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 .

Mootools Featured-Post Auto Slider

<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="http://4.bp.blogspot.com/_T46SliM0-PI/S_XT8NQo3kI/AAAAAAAAANk/UHh87wo4o_c/cars-4.jpg" 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="http://1.bp.blogspot.com/_T46SliM0-PI/S_XUg0euuZI/AAAAAAAAAO0/5jpgPXB-Up4/cars-14.jpg" 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="http://4.bp.blogspot.com/_T46SliM0-PI/S_XT8fXX1qI/AAAAAAAAANs/Q2SQ4iZF220/cars-5.jpg" 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="http://4.bp.blogspot.com/_T46SliM0-PI/S_XT7-MJoaI/AAAAAAAAANc/0thPtJmkwgo/cars-3.jpg" 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="http://3.bp.blogspot.com/_T46SliM0-PI/S_XUgFljlRI/AAAAAAAAAOk/dETdB5IXqyI/cars-12.jpg" class="full" alt="" /></div>

</div>

You are done.

File Under : css, java script, mootools

44 Responses to “Mootools Featured Posts Auto Slider to Blogger”

  1. Jay says:

    nothing happened

  2. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    No this work correctly.Look at the demo from here:

    http://mootools-slider.blogspot.com/

    I think you have missed some steps.And also DO NOT COPY above codes using Internet Explorer.

  3. Wunan says:

    thks it works for me.. nice templates.. stay cool

  4. Kaddu says:

    Not working. I copied the code in Mozilla Firefox.

  5. Kaddu says:

    No idea what went wrong... I did this again from scratch, and it works now.
    Thanks for sharing.

  6. Bulma says:

    I installed the Mootools and I would like to make some changes to the width of the image, not the slider could you tell me how to resize the image ? is too large :(

    Example= http://blogger-roms.blogspot.com/

    Thank you for all these tips your blog is great I wish you all success

  7. Em says:

    It works fantastically, but now my google analytics now no longer works, despite adding the code in again. Do you know if the auto slider could have this effect?

  8. Elle says:

    I have the same problem, it worked perfectly but suddenly today it changed all of it and it doesn't work and I haven't changed anything of the code.

    Does anyone know a solution??

  9. Supardi says:

    i can't download the mootools-1.2.1-core-yc.js file

  10. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @Elle

    It is problem of "mootools-1.2.1-core-yc.js".Now I updated this post.Remember to download and host "mootools-1.2.1-core-yc.js" yourself.

    You can download "mootools-1.2.1-core-yc.js" from here:

    http://www.box.net/shared/sbimqvfg7o

  11. KAY says:

    everything worked esp the colored feature post title, any idea what went wrong?

  12. rajakingz says:

    how can add it to a website ? i am using the following template

  13. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @rajakingz

    no difference to add this slider to a website than blogger.add first code just before </head> tag and second code between your body tags.

  14. Mr.shanker says:

    Yes This is working but it effects my slider on my blog

    www.storytelling.net.tc

  15. Botona says:

    I did it exactly as you post it, but the title and link to my post don't appear. It only shows the image description.

    Any ideas?

  16. THANK UZ LATER says:

    everything works everything but the post title will not show nor the link with it only the description will show ???? help??

    take a look tell me whats wrong - http://www.thankuzlater.net/

  17. THANK UZ LATER says:

    @Blogger Tips And Tricks|Latest Tips For Bloggers everything works fine but the title and link will not show?? help?? take a look for yourself -http://www.thankuzlater.net/

    give me some feedback on what to do?

  18. Johnpatra says:

    Hello,

    this slider doen't work.

    my blog is http://johnpatrared.blogspot.com/

    Could you help me?

    Thanks.

    i am from greece,athens

  19. Dieu Vinh Tuan says:

    Theme cool. Active very great........! Thank you!

  20. pinoygroundzero.com says:

    Hi! This slider is awesome, except that while it loads, it appears to be broken. Please help!

    Here's the website where I applied the slider:

    http://www.pinoygroundzero.com.

    Thanks!

  21. Dieu Vinh Tuan says:

    Please help me with width when mini zoom browser..........!
    [img]http://farm6.static.flickr.com/5290/5375584936_5c439bf0bc_b.jpg[/img]

  22. Zuhaib Shaikh says:

    thanks for the great tutorial... i made it work, here you can see it http://istyle360.blogspot.com... i need a favour from you.. is there any way to make a fixed homepage and put this slider on that page.. i mean this slider should remain on homepage when ever someone visits my blog.

    • zee says:

      @zohaib will you plz share how did it work i am unable to implement it not scrolling pcitures instead broken images sometimes it loads only one frame and some time pictures appears drop down list.

      thanks

  23. Rajesh says:

    how to show featured posts only on homepage?

  24. Troy Janda says:

    Great tutorial, I have enjoyed your blog for some time and your trick have proven to be easy and quick to emplement.

  25. Mandi says:

    Is there a way to make it so this only appears on the HOME page of my blog? I don't want it to be on the ABOUT ME and other pages. Thanks for posting this.

  26. Hamba Allah (Abdullah) says:

    thank..nice

  27. robert says:

    hello. does not play my slider. and configure everything. wrong? This is my blog http://un-ojo-curioso.blogspot.com/

  28. tullamore says:

    i made it but the links on the slider are INACTIVE...

  29. John P. says:

    Fantastic, thanks!

    Is there a way to decrease how high the post title and description appear? For example, I simply want to add a title with no description but as it presently appears, the new area consumes about the bottom 30-35% of the screen. I can decrease the opacity to zero if I want nothing to appear but I would rather be able to limit how high it appears..

    Also, is there a way that I can make the images themselves link to the same location as the post title?

  30. Aruzam says:

    Thanks.. its working but when ever I publish new articles, Do I have to change the links in the code? how would it come automatically? Thanks again

  31. LamGiauTuForex says:

    As Aruzam said, is there anyway to do it automatically? Thank you!

  32. Scrum Five Reporter says:

    Is there a simple way to change the width without installing anything?

  33. ETUSC says:

    @Mandi
    i would like to know how to do this as well. i don't want the slider on every single page, just the home page.
    http://www.bowmanadventures.com/

  34. ETUSC says:

    @Mandi
    after searching Lasantha's amazing blog i found the info here:
    http://www.bloggertipandtrick.net/2009/05/how-to-show-blogger-widgets-in-homepage.html

    i have to say that after sitting on the computer for hours looking at dozens of websites that have "tutorials" on how to do this slider, this site is the absolute best and most helpful. thanks so much!!

  35. Traveling Bites says:

    Hi,

    I've installed the slider on my blog but when it loads its broken and takes a while to load up properly. How do I fix this? Also is there a way to remove the caption box that slides up on my first banner photo?

    www.travelingbites.com

    Thanks!

  36. zee says:

    is there any free hosting site where mootools file can be uploaded by individual and I need to place this widget at center bottom of my page not under header anyway out? . thanks

  37. Mazharul Islam Kiron says:

    I really appreciate your post and you explain each and every point very well.Thanks for sharing this information.And Ill love to read your next post too.

  38. Jbialick says:

    I am having trouble getting it to work correctly. It appears with all of the images at the same time. Can someone help?

    Thanks in advance.

  39. Michael says:

    Thank you so much for this slider, it is a life saver! You guys are great!!

  40. bstafford says:

    Hello, finally found the location for adjusting the height, so changed height to 60px instead of 120px:

    .jdGallery .slideInfoZone{position:absolute;z-index:10;width:100%;margin:0;left:0;bottom:0;height:60px;background:#202020;color:#fff;text-indent:0;overflow:hidden}
    * html .jdGallery .slideInfoZone{bottom:-1px}

  41. Xavi says:

    There is something really strange. The widget seems to be working. The Problem is that it doen't work if it place on top of the page. It only works on the bottom...

    I mean, the links and The titles are not active if the widget is on top. Everything look fine if it's @ the bottom

  42. tbenezeth says:

    Hi, great work ! Thx

    I still have a question: my pic are totaly stretched... any idea how can i do, i mean not to have them stretched ?

  43. awais says:

    Good work i like it thanks for code thanks again.

Leave a Reply