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://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="https://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="https://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="https://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="https://3.bp.blogspot.com/_T46SliM0-PI/S_XUgFljlRI/AAAAAAAAAOk/dETdB5IXqyI/cars-12.jpg" class="full" alt="" /></div>
</div>
You are done.
nothing happened
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.
thks it works for me.. nice templates.. stay cool
Not working. I copied the code in Mozilla Firefox.
No idea what went wrong... I did this again from scratch, and it works now.
Thanks for sharing.
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
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?
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??
i can't download the mootools-1.2.1-core-yc.js file
@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
everything worked esp the colored feature post title, any idea what went wrong?
how can add it to a website ? i am using the following template
@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.
Yes This is working but it effects my slider on my blog
www.storytelling.net.tc
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?
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/
@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?
Hello,
this slider doen't work.
my blog is http://johnpatrared.blogspot.com/
Could you help me?
Thanks.
i am from greece,athens
Theme cool. Active very great........! Thank you!
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!
Please help me with width when mini zoom browser..........!
[img]http://farm6.static.flickr.com/5290/5375584936_5c439bf0bc_b.jpg[/img]
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.
@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
how to show featured posts only on homepage?
Great tutorial, I have enjoyed your blog for some time and your trick have proven to be easy and quick to emplement.
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.
thank..nice
hello. does not play my slider. and configure everything. wrong? This is my blog http://un-ojo-curioso.blogspot.com/
i made it but the links on the slider are INACTIVE...
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?
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
As Aruzam said, is there anyway to do it automatically? Thank you!
Is there a simple way to change the width without installing anything?
@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/
@Mandi
after searching Lasantha's amazing blog i found the info here:
https://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!!
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!
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
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.
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.
Thank you so much for this slider, it is a life saver! You guys are great!!
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}
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
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 ?
Good work i like it thanks for code thanks again.