Bismillah, Alhamdulillah

Skip to Content

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 …

EasySlider


Step 1 : Apply Style

  1. Login to Blogger Dashboard and navigate to Layout > Edit Html
  2. Don’t click the checkbox which says ‘Expand Widget Templates’
  3. 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>

Demo

if you have any questions please leave a comment….thx u

Alhamdulillah… by Catur


Categories: Content Slider, Widget

Tags: , ,

Abu Farhan

I'm an Owner of this blog and it's always been a passion of mine to write about Blogger. I like to make original script for blogger. I also run the awesome Website at The Best Lists.

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or Comments RSS Feed

Donate towards my web hosting bill!

Trackback
Leave a response

64 Responses to “Awesome Automatic Easy Slider for Blogger using jQuery Part 1”

  1. […] … 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 […]

  2. Andrea says:

    Hi, how could changing slider transitions? Thanks

  3. Vishnu says:

    Awesome work …

  4. Kaan Tuna says:

    and its funny the slider works on

    kuveythipnoz.blogspot.com

    what might be the reason?

  5. kutukuliah says:

    Thanks tutorialnya

  6. Jamie says:

    use the word before and after no infront….its too confusing

  7. Thanks for sharing like this beautiful templates …….keep on continue…..

  8. […] 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 […]

  9. alexandri says:

    i show enough time to read message

  10. xdisciple says:

    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…

  11. 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.

  12. 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….

  13. Moe says:

    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!

  14. […] 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 […]

  15. blog says:

    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.

  16. Vic says:

    Hi, suddenly the slider has stopped working. It worked fine until today. Any ideas please?

  17. 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/

  18. Vic says:

    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.

  19. […] 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 […]

  20. Sharif Ali says:

    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

  21. 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,

    • catur says:

      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.

  22. […] 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 […]

  23. Kaan Tuna says:

    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

  24. Horier says:

    what is the difference of the trick part 1 and part 2, the specific of both?

  25. kim says:

    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

  26. baru belajar says:

    msh gk bisa mas…, :(, atw gmn klo anak panahx di hilangkan sj mas.., Syukran Mas Catur

  27. baru belajar says:

    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….

    • catur says:

      itu karena CSS style dari Template sama Widget ini saling tumpang tindih…

      coba cari:
      li { margin-left: 20px;}

      ganti dengan:
      li { margin: 0;}

  28. antoine says:

    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

  29. mahmud says:

    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

  30. Gofree says:

    Version 2 not working in the demo, but dis one is. I may tried this with http://movieloo.info

  31. azeem says:

    how to show only the image thumbnail without the text..plz help

  32. Faisy says:

    Really nice tutorial!

  33. Nithi2023 says:

    how to align this slider to center..

    i have placed the slider gadget in just above blog Posts gadget…

  34. Nithi2023 says:

    sir,
    how to align this slider to center in my blog?

    plz reply sir…

  35. sanju says:

    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

    • Abu Farhan says:

      Use iside of this

      <b:if cond=’data:blog.url == data:blog.homepageUrl’>

      Slider

      </b:if>

      • sanju says:

        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 :)

  36. f4dLy says:

    help, it looks chaotic in my blog

  37. bebe says:

    How to change width and height

  38. Petronius says:

    It’s very goog. How can I slow this slide? because the readers have not enough time to read.

Leave a Reply


seven − three =

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen