Awesome Automatic Easy Slider for Blogger using jQuery Part 1
June 26th, 2011
Bismillah…
You must already know about the content slider.
Almost all bloggers use the content slider.. whether it be used for the slideshow images or content .
But most existing content slider must enter data manually …
This is very difficult and just wasting your time .. especially if you are a busy person ..
to solve it … I have a solution ..”Awesome Automatic Content Slider for Blogger using jQuery Part 1”
How it works is the script will read the feed of blogger and make the content slider also with the picture automatically …
Step 1 : Apply Style
- Login to Blogger Dashboard and navigate to Layout > Edit Html
- Don’t click the checkbox which says ‘Expand Widget Templates’
- Find this
]]></b:skin>
Then insert the script in front of it
/* START
--------------------------------------------------------------------
Easy Slider
--------------------------------------------------------------------
EasySlider
*/
#slide-container {
height:360px;
position:relative;
width:480px;
}
#slider {
height:360px;
left:25px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
width:480px;
}
.slide-desc {
background:transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
color:#FFFFFF;
padding:10px;
position:absolute;
right:0px;
text-align:left;
top:0;
width:200px;
z-index:99999;
}
.slide-desc h2{display:block;}
.crosscol .widget-content {position:relative;}
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:480px;
height:360px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:500px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
left:0;
position:absolute;
top:132px;
width:30px;
z-index:1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}
/* numeric controls */
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* END
--------------------------------------------------------------------
Easy Slider
--------------------------------------------------------------------
EasySlider
*/
Step 2 : Apply Javascript
Find This :
</body>
Then insert the script in front of it
<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
//]]>
</script>
Step 3 : Apply Gadget
Design -> Click on “Add a Gadget” -> HTML/JavaScript type.
<div id="slider"> <script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-easySlider.min.js"></script> <script style="text/javascript"> var numposts_gal = 6; var numchars_gal = 150; var random_posts = false; // random posts </script> <!-- replace with your web address (marked with red color) --> <script src="http://abu-farhan-demo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script> </div>
if you have any questions please leave a comment….thx u
Alhamdulillah… by Catur
60 Responses to “Awesome Automatic Easy Slider for Blogger using jQuery Part 1”
Leave a Reply
PLEASE DONATE MY BLOG
Social Network
Thanks tutorialnya
use the word before and after no infront….its too confusing
Thanks for sharing like this beautiful templates …….keep on continue…..
[...] su blog de Blogger y resulta que justamente sabia de uno que vi en una web de habla inglesa de abu-farhan y la verdad que me parecía muy [...]
i show enough time to read message
Hi – This is really great, but one tiny problem is that in the caption, the title of the post is black like the transparent background, so it is almost impossible to see… How do I make it white like the post description…
Great job thanks. The title of the post is black like the transparent background How do I make it white like the post description?
Thanks anyway.
Do you know the best way to keep your mulberry bags? There are several methods regarding mulberry handbags and you must have the studying about the subject. Fashionable these days, the bags are extremely essential to all of us mulberry outlet.
Second, we have a charged coupled device (CCD) bar code reader which makes use of light emitted from the numerous light sensors…
Second, we have a charged coupled device (CCD) bar code reader which makes use of light emitted from the numerous light sensors in the barcodes which the bar code reader would gather and decode for identification and verification….
Hey,
I’d like to change the width and height from the Java script, but I don’t know exactly how. Should I download the .js file and then re-upload it after changing the size? If so, where can I host it?
Thanks a lot for your great effort, it’s very much appreciated!
[...] last time I used Easy Slider is when I make a content slider based on recent or random posts..Awesome Automatic Easy Slider for Blogger using jQuery Part 1 This time I used the Easy Slider for Popular Posts [...]
Thank you for any other informative site. Where else may just I get that kind of info written in such a perfect approach? I have a project that I’m simply now operating on, and I’ve been on the glance out for such info.
Hi, suddenly the slider has stopped working. It worked fine until today. Any ideas please?
Brother!!!
While designing my site I tried lot of slidesahows.. But This is very good slideshow for ever…
Can I use rss feed from other sites instead of blogger feed?
Ex: http://teluguwebmedia.in/aggregator/
Hi. I’ve been searching for something like this for ever. Great stuff. But how do you change the location of the text on the slider. I want to put it on the bottom of the slider and be the exact length of the slider.
Any assistance would be appreciated.
[...] last time I used Easy Slider is when I make a content slider based on recent or random posts..Awesome Automatic Easy Slider for Blogger using jQuery Part 1 This time I used the Easy Slider for Popular Posts [...]
Asalaam Alaikum,
This is great! I have one question. How can I get this to show up on the home page alone versus every page on my site?
Thanks again
Salam Brothers,
Ramadan Kareem, I really appreciate your contributions. How can I define the source of the pictures? Actually, My task is to have a slide show with a different link for each image.
It is just something like the main banner here:
http://www.famproperties.com.
Jazak Allah Kheer,
Fateh,
1. How can I define the source of the pictures?
A: the pictures generated automatically from the feed. so you can not define your own image.
2. different link for each image
A: links are also generated automatically.
[...] Awesome Automatic Content Slider for Blogger using jQuery Part 1 [...]
[...] 8th, 2011 Bismillah… Installation method is almost the same as the previous tutorial … Awesome Automatic Content Slider for jQuery using Blogger Part 1 … On the content slider this time (Awesome Automatic Content Slider for jQuery using Blogger [...]
[...] Awesome Automatic Content Slider for Blogger using jQuery Part 1 [...]
Hi Abu Farhan,
First Thanks for the best (and the only) the automatic content feeder in the web.
You can see the slider on my website http://www.artikuyan.com and see how I customized it.
I would appreciate your help on one thing if you can help me to solve my problem:
-The slider dimension on my webside is 465px to 260 px
-In my last post I have updated an image which is EXACTLY 465px to 260 px too.
- I was expecting that the slider will get the image AS ITS ORIGINAL SIZE AND will show in the slider with THAT SAME SIZE.
-But the slider somehow resizes it and changed the proportions of the image. As you know the image quality is lost.
How I can change that? How I can manage to place the original image with same size of the picture in the slider?
I do not know how to use jQuery(if it is related with that??), but with simple instructions I think I can manage.
Thanks in advance for your help and thanks again for the great slider.
Regards,
Kaan Tuna
Architect
original size of this slider is 480X360px.
if u want to resize,not only CSS styles but u must change javascript too..
http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-easySlider.min.js
edit that javascript:
width=”480px”
height=”360px”
change it as you want
Thank you very much for your fast reply.
I will try :))
what is the difference of the trick part 1 and part 2, the specific of both?
both are the same. the difference is only in the CSS style.
I’d like to combine this with a random post feed widget
is there any way I could get a random post feed like at (bdlab.blogspot.com/2010/11/random-posts-widget-for-blogger-blogs.html) shown with slider script or a new slider script showing random posts
UPDATE : NEW SCRIPT FOR RANDOM POSTS
yes you can…
I’ve uploaded a new javascript file that can be used for random posts.
just follow step 3. the others same as before…
var numposts_gal = 6;
var numchars_gal = 150;
var random_posts = false; // random posts
change “random_posts” to “true” for random posts.
NOTE : “Recommended for large amounts of content”
Appreciate your very quick response very much
Would you please tell me the location of the new JavaScript file?
all the best
slider width and height changed with the new update, it now shows in the half of the screen
please help
I have fix it…you can try again…
thank you again. I appreciate very much indeed.
Just a little problem with the randomness:
Random posts are not so randomised.
It goes forexample 2523, 2522, 2526, 2535 etc
It doesn’t go as far as 1700′s or 1100′s or 300′s or 2 digits or 1 digit post numbers
I wonder if it can go back as far as 9999 posts back such as:
—————-
function getRandomPosts(json) {
var maxEntries = 10;
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
for (var i = 0; i numPosts) {
maxEntries = numPosts;
}
var container = document.getElementById(‘random-posts’);
var ul = document.createElement(‘ul’);
for (i = 0; i < maxEntries; ++i) {
var entry = json.feed.entry[indexPosts[i]];
var li = document.createElement('li');
var a = document.createElement('a');
a.title = entry.title.$t;
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == 'alternate') {
a.href = entry.link[j].href;
break;
}
}
a.appendChild(document.createTextNode(entry.title.$t));
li.appendChild(a);
ul.appendChild(li);
}
container.appendChild(ul);
}
————–
kind regards
kim
sorry the whole script did not appear at my previous post.
Here’s the link goes :
json-in-script&callback=getRandomPosts&max-results=999999:
http://www.deluxeblogtips.com/2010/04/random-posts-widget-for-blogger.html
This one use random slider script without the images.
http://laila-wati.blogspot.com/2010/09/how-to-make-random-post-dynamic-slide.html
But I like your script with the images.
Would you please have a look at the randomness and help me adjust your script?
kind regards
UPDATE : NEW SCRIPT FOR RANDOM POSTS
thanks for the correction, now you can try again.
I’ve done some improvements and refers to the script that you gave to me.
hopefully as you wish,for the random posts are not randomized….add max-results = 999999
change:
<script src="http://www.your-web-address.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
to:
<script src="http://www.your-web-address.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
Thank you indeed Catur.
I appreciate your hard work very much.
I’ll test it again and report back here later on.
No one else has come up with such excellent & very much needed automation
You have saved a lot of time for many of us.
all the best
kimberley
msh gk bisa mas…, :(, atw gmn klo anak panahx di hilangkan sj mas.., Syukran Mas Catur
g usah dihilangkan…coba dulu yg ini…
cari ini:
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}
ganti dengan:
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
margin-left:42px;
margin-top:100px;
}
klo udah dicoba kasih kabar y…
Mas Abu Farhan.., anak panah slide ko’gk bagus penempatanx.., maux seprti demox…, cb mas buka blog sy http://alif-bata.blogspot.com/, mohon solusix.., trus gambarx juga jgn terlalu besar, gmn cr memperkecil tampilan gambarnya, jazakallahu khoiran….
itu karena CSS style dari Template sama Widget ini saling tumpang tindih…
coba cari:
li { margin-left: 20px;}
ganti dengan:
li { margin: 0;}
script stopped working just now
I started hosting the script
no change after that either
I wonder if the blogger changed some codes and caused this
please help
can u show me your website address…
maybe i can fix it.
Questions:
which ones are the Navigation buttons and navigation text positions please
1)My left navigation button is far to the left and i want that to be placed closer to the slider
(I managed to correctly positioned the right navigation button)
2) Previous and next text links are not properly positioned either. I cannot see them. They are outside the page
all the best
mahmud
can u show me your website address…
so i can tell u what needs to be changed.
Version 2 not working in the demo, but dis one is. I may tried this with http://movieloo.info
Which one is not working
how to show only the image thumbnail without the text..plz help
Change this
.slide-desc {
background:transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
color:#FFFFFF;
padding:10px;
position:absolute;
right:0px;
text-align:left;
top:0;
width:200px;
z-index:99999;
}
to
.slide-desc {
background:transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
color:#FFFFFF;
padding:10px;
position:absolute;
right:0px;
text-align:left;
top:0;
width:200px;
z-index:99999;
display:none;
}
Really nice tutorial!
how to align this slider to center..
i have placed the slider gadget in just above blog Posts gadget…
sir,
how to align this slider to center in my blog?
plz reply sir…
hey its workingggggggggg awasum bro
but i only want to display it on home page not on the particular post body hope u can understand what i mean to say
Use iside of this
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
Slider
</b:if>
Thanku sur for ur reply but where to put this condition
i put this condition in all 3 steps one by one but still its appearig in post body to :(
help waitting for ur reply :)
help, it looks chaotic in my blog
How to change width and height
have to change from javascript
It’s very goog. How can I slow this slide? because the readers have not enough time to read.
Change from the file easySlider1.7.js change the speed and upload to your own server
line 51 from the script file
speed:800,