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
61 Responses to “Awesome Automatic Easy Slider for Blogger using jQuery Part 1”
Leave a Reply
good slider.
Appreciating the time and energy you put into your blog and in depth information you provide. It’s great to come across a blog every once in a while that isn’t the same old rehashed material. Great read! I’ve bookmarked your site and I’m including your RSS feeds to my Google account.
[...] 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 [...]
Magnificent web site. Plenty of helpful information here. I am sending it to a few pals ans additionally sharing in delicious. And obviously, thank you in your effort!
I know this if off topic but I’m looking into starting my own blog and was wondering what all is required to get setup? I’m assuming having a blog like yours would cost a pretty penny? I’m not very web savvy so I’m not 100% certain. Any tips or advice would be greatly appreciated. Cheers
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.
I cling on to listening in the direction of rumor speak about obtaining boundless internet dependent grant programs so i’ve been looking for near to for the best internet site to obtain one. Could you reveal to me please, especially where could i arrive around some?
HELLO MY FRIEND,
i did evrything you said but the slider isnt moving or working, can you plz check it out? .. :(
Hi, suddenly the slider has stopped working. It worked fine until today. Any ideas please?
looks beautiful on my site: http://www.thetf.in
i have uploaded the js ans slowdown the speed..great work
thank you very much
How do I change the font and size in this? The headlines are too big.
thank you very mush its working really u are just to awsome!!
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.
you can change from the CSS script
thank u so much all night i cant find this widget .i am from turkey http://www.alternatifkultur.com
i post random true some post reply why? i have about 300 posts .but so good work…thank u again
[...] 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,