You are Here → Home » Blogger Jquery » How to Add Simple Image Slider With Jquery to Blogger Blogs

How to Add Simple Image Slider With Jquery to Blogger Blogs

by in Blogger Jquery, Blogger Widgets

Jquery Simple Image Slider with semi transparent Title and Caption. Jquerywrite less. do more.Jquery is great plugin witch allows to create flash like slick effects in ease and very less weight. this slider is very easy to Install/Integrate on blogger blog. so let’s see…

This slider is outdated. Please use Nivo Slider
Before Going to Tutorial Take a Demo of this Slider

How to Integrate Simple Image Slider with Jquery ?

There are 4 Steps
a. Adding CSS code and customization !
b. Adding Jquery Plugin
c. Adding Javascript
d. Finally Adding Slider Widget

Adding CSS code and customization !

  1. Go to Blogger Dashboard > Design tab > Edit HTML
  2. Find this ]]></b:skin> tag and put below code of section, Just before it! 
    #gallery {
position:relative;
height:320px; /* Set Height   */
width:540px;  /* Set Width    */
overflow:hidden;
}
#gallery a {
float:left;
position:absolute;
}
#gallery a img {
border:none;
}
#gallery a.show {
z-index:500;
}
#gallery .caption {
z-index:600;
background-color:#000;
color:#ffffff;
height:100px;
width:100%;
position:absolute;
bottom:0;
}
#gallery .caption .content {
margin:5px;
}
#gallery .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}
  3. Save your Template

Adding Jquery Plugin

If you have already have Jquery plugin in your blog, then Ignore this step

Add this code before </head> tag

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

Adding Javascript

Add this code before </head> tag

<script type="text/javascript">
//<!--
$(document).ready(function() {  
slideShow();
});
function slideShow() {
var dur= 5000;
$('#gallery a').css({opacity: 0.0});
$('#gallery a:first').css({opacity: 1.0});
$('#gallery .caption').css({opacity: 0.7});
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);
setInterval('gallery()', dur);
}
function gallery() {
var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first')); 
var caption = next.find('img').attr('rel'); 
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 }); 
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
$('#gallery .content').html(caption);
}
//-->
</script>

Adding Slider Widget

  1. Go to Blogger Dashboard > Design tab > Page Elements tab
  2. Add HTML/JavaScript Gadget any where
  3. Put Title Field as Blank
  4. Add bellow Html Widget Code in Body of the widget and Customize it 
    <div id="gallery">

<!-- Image Slide 1 and must have a class='show' -->
<a href="Link url" class="show">
<img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
</a>

<!-- Image Slide 2 -->
<a href="Link Url" >
<img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
</a>

<!-- You can add more n more images as link above  -->

<div class="caption"><div class="content"></div></div>
<div style='clear:both;'/>
</div>
  5. Customization:-Replace Link Url with link that you want

    Replace Image url here with Your Image and set it’s width and Height

    Replace This is Title with your Title

    Replace This is Description with with a small Description

  6. You can Add more Image slides by Adding following code  just after this <!– You can add more n more images as link above –> tag and Customize it as Like above 
    <!-- Image Slide -->
    <a href="Link Url" >
    <img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
    </a>
  7. Finally Save your Widget!

Take a look of your blog and leave a comment if you like :)

Slider Credits to Queness

 

This slider is outdated. Please use Nivo Slider

Comments

  1. Noushad Vadakkel says

    trending tutorial ..
    thanks @Hareesh for this simple nice Jquery tutorial ..:)

  2. Jerico Jien says

    Hello sir, good day. Can I use this tutorial on installing a vertical sliding panel on my blogger blog? And i have a question with regards to adding the plug.in. When i hit save template. I keep receiving this error message.

    "We were unable to save your template

    Please correct the error below, and submit your template again.
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "head" must be terminated by the matching end-tag "

    How can i possible add the script sir to make jQuery work on my site? And also. Can you please create a tutorial on how to create a vertical Sliding panel using jQuery for blogger site? Here's an example sir. http://www.mycdojobs.com/

    Thank you and more power :)

  4. Jerico Jien says

    Thank you so much Sir Harish. I'll stay tuned for that tutorial. I promise to promote your site in my social media and in my website. It would be great if you have a site banner i can use to promote your site :) Thanks a lot sir. You are great.

  8. Alphine says

    Hi, Iam completely lost of how to do it, can you help me out please!!
    Make a youtube tutorial or something because I really need it urgently!!
    Thanx a lot.

  9. poncho says

    hey there, struggling to apply template; managed correctly with all the steps but end product getting first picture that is static and header at bottom black and static?
    any advise ?

  10. Jason Santoro says

    Is there anyway that this could be turn into a thumbnails slideshow?? Thax for any help.

  15. Valentine10 says

    how do i set different slider image for different pages? i mean…if i go to other pages..the same slider images will appear…what if i wanna have different slider images for each different page?

  17. Pradeep says

    Hello, I Am Trying To Add Jquery Coda Slider To My Blog. Can You Post A Tutorial Please.
    Thanking You
    Pradeep

  18. Allan says

    Hi!
    awesome work!!
    i’m trying to insert this content slider onto my blogspot blog and have followed your instructions but the slider doesn’t work.
    initially i had the same problem as poncho n afrodita, but i didn’t really want a description or title so i removed them, but the slideshow is still not working-it only shows the static 1st image.
    Please Help?

    • says

      Ok, Most of people having trouble while install. i have received many complaints on it’s working.

      To all Readers, I will give a Awesome Slider, That should Easy to Install and Manage the Slides.

      Please wait for it..
      Thank You.

  21. Harindra Devadiga says

    Hello… Its very nice, but can any tell me, if i want my recent post get display automatically on blog same way like demo.. I dont want to change the URL & Image URL of the post… It should be automated

  22. says

    can you please tell me one think
    http://angsumanonline.blogspot.in/
    this is my blog url
    and i want to run a jquery slider in my red area, now question is this how it will be possible ? becsuse the code you have p rovide could not ran in my blog,,hope you understand the situation, acn you please help me?? to the setep by step jquery adding.

    • Niko Demain says

      Could you pls., inform me which slider you installed to your blog http://angsumanonline.blogspot.in/ and how did you customize its width?
      I do like it very much.

  23. says

    How can we replace image url.Are we upload image in any page and give image url in our code.like this?
    i do like this
    <img src="http://1.bp.blogspot.com/-6XQ-FQVLEDk/T2wd9r8_k7I/AAAAAAAAAAg/-97FRroduPM/s320/stocks543.jpg" alt="" width="540" height="320" title="" />
    but it did not show.please tell me where from we upload image and how we give image in our bloger.

  25. Mac says

    if i want to use this image slider in my website wat i have to do…….
    kindly suggest me i am new guy in web technology…

  26. Sky says

    Hai Bro this is Sky………..
    My template masutoliso magazine………..
    I need to replace sider plz help me

  27. says

    It doesn’t display on my blog.The area where I put this Image Slider is blank , it only shows a black rectangle , no images , no text……………
    Please help me,

  28. says

    It dont work for my blog,only shows a small black rectangle,no images and no text only a small black rectangle
    Please help me,

  30. says

    Hi i’m working on the website using your codes. However i have some questions!

    Can i know what they mean when i insert new photo they will say “Your HTML cannot be accepted: Tag is broken: IMG Ignore warning”

    And when i preview the slider, it didn’t work! Do help me solve! Thanks!