Featured Sliders or Slide shows have become very popular with Blogger users over the last few months.They have becomes so popular that over 50% of the New Templates have featured post sliders already added.The featured posts sliders originally appeared on News websites and Blogs.As the news sites were constantly adding new content the Big story’s would get pushed down the order on the home page.The featured post or Featured article slider was seen as a way to keep the big story’s at the top of the home page.
I guess the same can be said for using a featured post slider on Blogger, you can display your best posts or the posts you want people to see in prime position at all times.There are many types of Featured sliders with lots of different designs and features.In this post i will show you five different types of sliders and how you can add them to your blog with your content.
5 Featured Posts Sliders For Blogger
Screenshot :
Demo : See This Slider In Action
Tutorial : Simple jQuery Slider Tutorial
Screenshot :
Demo : See This Slider In Action
Tutorial : jQuery Anything Slider Tutorial
Screenshot :
Demo : See This Slider In Action
Tutorial : Any Size jQuery Slider Tutorial
Screenshot :
Demo : See This Slider In Action
Tutorial : Go To The Installation Steps
Screenshot :
Demo : See This Slider In Action
Tutorial : Go To The Installation Steps
That’s 5 Awesome featured posts sliders you can add to your blog and direct traffic to the posts you want them to see.Check out our post with a Featured Posts list you can add to your sidebar and we also have lots more Great Blogger Gadgets.Thanks to the designers for their hard work,
Have you a favorite from the list ?
Ref: Mootools Featured Post Slider
Fantastic (as always!) I ahve a couple of questions:
1. The slider works great but I am wondering if I can modify how high the post title / text appears in the picture? It presently comes up about 40% it seems but I would like to reduce how high the banner rise up in to the picture. Any ideas?
2. I am sure this is jquery related once again but now the slider works, none of my other jquery (easyzoom, spicebox) now work. Any ideas?
ReplyDelete
Figured out my #1 question (altered .jdGallery .slideInfoZone height var) but still wondering about #2, none of my other jquery stuff working.
ReplyDelete
@ John – Make sure you only have the main jQuery script in yur template once.That will be above </head> and will be end something like “1.4/jquery.min.js”.
ReplyDelete
Paul – I have only instance of instance of the jquery script – that is why I am confused to be honest. There is obviously a conflict with the slidebar but I cannot find it . . .
ReplyDelete
The issue Paul is that Mootools and JQuery do not work well together. Tried using jQuery.noConflict() but not sure if I am using it correctly. Stumped. May have to lose the slidebar I am thinking as I need the JQuery stuff to work. . .
ReplyDelete
Paul, I have resolved the problem of compatibility issues between the two libraries, MooTools (slider widgets) and JQuery (lots of widgets!). Quite a lot of information if you Google the issue and I don’t know if you are interested but I have summarized the resolution in to a few basic steps below.
1. JQuery and Mootools are incompatible because the $ variable references JQuery but MooTools uses $ also!
2. Solution is to replace JQuery’s $ variable with another variable.
3. In Blogger / Design / Edit HTML, perform the the following:
a. Search for jquery.js (should just be one instance)
b. Immediately after you have referenced jquery.js paste the following code:
var J = jQuery.noConflict();
c. For example:
script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js’ type=’text/javascript’
var J = jQuery.noConflict();
4. Next, replace all instances of $ with J inside your jQuery function
For example, if you were using the spicebook jquery the function would now look like this:
J(function() {
J(‘a.spicebox’) .lightBox({
5. That’s it! Make sure you call the other library (in this case, MooTools) AFTER your jquery scripts are closed
ReplyDelete
@ John – Well done i love when people find a solution to a problem rather than just give up and move on.Thanks for explaining your technique..
ReplyDelete
i will bookmarks…. i think i will need for my blog…. thanks
ReplyDelete
another tips, use this:
replace
$(document).ready(function(){
with this
jQuery.noConflict();
jQuery(document).ready(function($){
works in my blog
ReplyDelete
Replies
Thank you soo much Robby!!
@ 1st i attempted to use John’s long story above which i believed should have worked since the logic is intact, but i just thought to try yours instead, n now, something i’ve tried sorting for over 72 hours accumulated, has been solved in seconds!!
thanx dude!!
Delete
You are the man!
Delete
superb dude your rule blog world
ReplyDelete
I tried to add them in a new template that I have installed today.
I tried the first.I am not sure what I should do with the green code but images didnt display or I got error message telling that the page wasn’t exist.
The fourth wasn’t display at all (only the letters were there)
At the fifth I saw only a black empty box
I have also tried to install your awesome Up to top arrow that I am using in my other blog but it I was not any luckier with this , too.
Anyway, your site is awesome =)
ReplyDelete
beatiful thanks from Brazil good blog
ReplyDelete
Hey how would I make it so this slider ONLY appears on the homepage of blog and not on each subsequent post?
ReplyDelete
Is it possible to have one of this amazing widget auto-update from feed rss?
ReplyDelete
is it possible have one of this widget based on feed rss and auto-update?
ReplyDelete
It’s working but there is a little problem, How can I add my own Content in it??
ReplyDelete
These all are nice. Ill add one of them
ReplyDelete
Trying to add the Mootools slider to my blog. Input the first code as well as the second. However, the blog just shows each picture (individually) over the content of my page. Nothing scrolls. Would love some advice on this. Thanks!
ReplyDelete
Very Nice, thanks for the share!
ReplyDelete
Hi Everybody! Very usefull SLIDER! It’s @ www.nurocks.com
The Problem is that the Slider is always on top. I’d like it to be only at main page and it seems it’s on top (perpetual) with every post I got. It’s a bit unconfortable.
I know I must fix it via html editing but..anyone knows?
Help!
Thanks indeed. This Blog is rellay awesome! Thanks for the job!
ReplyDelete
I have only instance of instance of the jquery script – that is why I am confused to be honest. There is obviously a conflict with the slidebar but I cannot find it . . .
ReplyDelete
The slider works great but I want to setting slide with 4 posts like blog: http://www.exphim.com. Please help me!
ReplyDelete
Thanks for these amazing sliders for blogger .
ReplyDelete
Very Amazing Slider
I want to try
ReplyDelete
Your site is stunning. can you teach me how you attain this 🙂
ReplyDelete
Is there a way to have it automatically update? I hate manually adding links and texts all the time
ReplyDelete
i want a story slider where it shows related posts as well.these are good for the homepage but what if i want to insert them in every page will it slow down the website loading speed.please answer sir.
ReplyDelete
Fantastic. its really works. thanks for the Great post.
ReplyDelete
Great article.. thanks a lot for sharing this useful info.. working good..
ReplyDelete
Can I add marque to my blogger so news goes on and on? If yes, then how?
ReplyDelete