Bismillah, Alhamdulillah

Skip to Content

Awesome Automatic Content Slider for Blogger using jQuery Part 2

July 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 Part 1) I use the style from Slick Slideshow and a little adjustment that can be used on Blogger …
Just follow the steps below … I’m sure there will be no problem …

Slick Slideshow


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
--------------------------------------------------------------------
 Awesome Automatic Content Sliders for Blogger using jQuery
 By http://www.abu-farhan.com
--------------------------------------------------------------------
Slick Slideshow
*/
#slideshow {  margin:0 auto;  width:640px;  height:263px;  background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-bg_slideshow.jpg) no-repeat 0 0;  position:relative; }
#slideshow #slidesContainer {  margin:0 auto;  width:560px;  height:263px;  overflow:auto; /* allow scrollbar */  position:relative; }
#slideshow #slidesContainer .slide {  margin:0 auto;  width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */  height:263px; }
/**  * Slideshow controls style rules.  */
.control {  display:block;  width:39px;  height:263px;  text-indent:-10000px;  position:absolute;  cursor: pointer; }
#leftControl {  top:0;  left:0;  background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-control_left.jpg) no-repeat 0 0; }
#rightControl {  top:0;  right:0;  background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-control_right.jpg) no-repeat 0 0; }
.slide h2, .slide p {  margin:15px;  font:normal 11px Verdana, Geneva, sans-serif;  color:#ccc; }
.slide h2 {  font:italic 24px Georgia, "Times New Roman", Times, serif;  color:#ccc;  letter-spacing:-1px; }
.slide img {  float:right;  margin:0 15px; }
/* END
--------------------------------------------------------------------
 Awesome Automatic Content Sliders for Blogger using jQuery
 By http://www.abu-farhan.com
--------------------------------------------------------------------
 Slick Slideshow
*/

Step 2 : Apply Gadget

Design -> Click on “Add a Gadget” -> HTML/JavaScript type.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }
});
</script>
  <!-- Slideshow HTML -->
  <div id="slideshow">
    <div id="slidesContainer">
<script type="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-slick-slideshow.min.js"></script>
<script style="text/javascript">
	var numposts_gal = 6;
	var numchars_gal = 150;
	var caption_position = 'right'; // top,bottom,left,right -> choose one
        var random_posts = false; // random posts
</script>

<script src="http://abu-farhan-demo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
    </div>
  </div>
  <!-- Slideshow HTML -->

Demo

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

Alhamdulillah… by Catur

Another post about the Automatic Content Slider for Blogger :

  1. Awesome Automatic Content Slider for Blogger using jQuery Part 1

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

39 Responses to “Awesome Automatic Content Slider for Blogger using jQuery Part 2”

  1. Nice collection, thanks for sharing!

  2. Blepe says:

    it seems that the code is not functioning on my blog. Already did what you said above but nothing… any ideas?

  3. Ivan Gough says:

    face i enjoy everything to do with…

    this type of site. one of the best aspects is my ability to interact with the church sites community. i get to write articles like this one to help promote the use of the internet to tell the world about god’s…

  4. click here says:

    adsense units full of text ads …

    image ads (you can customize). and you’ll start earning each time the ads are clicked by your visitors.problem arises for getting adsense approvalnowadays, its a very hard job to get your adsense approved (specially for indians). various new terms of …

  5. is reading it then what’s the point?there…

    are several ways to capture an audience and draw people to your blog. it is your job once you have captured their attention to keep it. below is a list of 6 ways that you can increase readership and traffic that…

  6. for relevant contents to the site; •…

    articles on the web can prove that they are the authorities on the subject and people interested in the subject will come back again and again to the site; • it will help the customers if the contents are relevant and…

  7. samir says:

    yeees thank you 3arabi

  8. [...] for your blog : Tips on writing unique Meta DescriptionHow to write a better meta descriptionAwesome Automatic Content Slider for Blogger using jQuery Part 2jQuery(document).ready(function($){ if (navigator.platform == "iPad") return; [...]

  9. Hi … this’s best post i have ever seen but …

    i want the images in this slide resized automatic

    i tried to use

    img {
    width: 300px;
    height: 200px

    in many place in css but all resized except the images

    so can you till me how to resize images from css code .. ?

    i see it’s long and i tried but i faild ,, i need images of posts in slide auto resized in same height and width … i wait your reply =)

  10. Mat says:

    Hello, and thank you for this excellent slider. I hope you can help me on the 2 problems I got. Here is my test blog : http://test-mgz.blogspot.com

    > Picture appears in the slider, but no title or excerpt are showing.

    > How can I change the feed to grab a label specifically ?
    I understand it should be around here, but where ?

    Thanks in advance, hope you can help.
    Mat

  11. Bülent Efe says:

    thank u again. i use this my blog. i ask some questions. my post reply sometimes not each time, i have about 300 post. why? anda only see title and pictures. your example pic includes some part of post
    thank u so much this post its very useful

  12. abdullah says:

    in the slider post titles lines look to too close to each other

    How can/where can I change in the script to make the lines are apart from each other just a bit more space between the lines

    or change the font size of the post titles to look smaller

    thank you

  13. Rahul Singh says:

    The Script Given by You not Running on my blog y? i have paste this script after
    ]]> this am i right ?

  14. How to resize this slider?

    • catur says:

      on Step 2
      $(document).ready(function(){
      var currentPosition = 0;
      var slideWidth = 560;
      var slides = $(‘.slide’);

      change slideWidth as you want..

  15. Walid says:

    Hello sir this is a fantastic idea! Is there a way to make it so it also automatically flips through the slides, like some sort of timing? Otherwise, great idea to have it automatically read the feed and use any image size.

  16. Horier says:

    nice..i will use this for my blog soon, can i save the code plz???

  17. JUGARJ SINGH says:

    its awesome but frnd i want automativb slider

  18. nice post, I going to my blog now
    visit back

  19. open says:

    hellowww….

    i have create your clue and edit some but i did not make it
    this my test blogs

    http://open-test.blogspot.com/

    already running but i need just image only, not include the tittle,

    how to clear the tittle ?

    pls help…

  20. Dante Araujo says:

    It would be awesome if you guys make one using NIVO SLIDER. It’s the best free content slider, it has some awesome transition effects and very customizable, really superior.

    Please take a look on it http://nivo.dev7studios.com/

    • admin says:

      Hi dante how are you ?
      Now I’m busy so my student manage my blog.
      I know about nuvo and coin slider but it can’t show image in any size. The size is original size of image.

  21. Rian says:

    Assalamualaikum brother ^_^

    by the way i want to ask you (exactly a request), do you know how to have an image slider preloading jquery like this one:
    http://readerchains.blogspot.com/2011/07/ao-no-exorcist-07.html

    i think its very good because its make the page more lighter, i want posting my photo collection like that, thank you very much ^.^

    • admin says:

      wa’alaikumsalam

      It used javascript to call image location. this method very difficult because he make manual the image url link.

  22. Gofree says:

    Oh, the demo seems that the contents not sliding :(

  23. Gofree says:

    Does this one capture the contents from feed? How many can we set to display?

  24. Mat says:

    Thank you.
    “full post feed in dashboard custumization” You mean in the Blogger admin panel ? Cause it’s already set to “full”.
    Thanks

Leave a Reply


four − two =

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen