Free Responsive Slider jQuery Plugin For Blogger

Some bloggers surf the best blogger template with a responsive slider jQuery Plugin. But, there is no matter if you found a good blogger template without a slider. A responsive slider plugin can install to your template.

In this article, I will share a beautiful blogger slider plugin with you. This slider is a flat slideshow. It has slide titles on the right side position and flows from the left side of the slider. Each images should 1300px width and 450px high.

There are some tutorials show how to install it. This responsive slider jQuery Plugin is not only suitable for Blogger templates. But it is good for all kind of HTML website template and WordPress Templates. To install this responsive slider, you have to understand some basic HTML Code. You can download the slider here or install it into your blogger with the below instruction.

Live Demo Download

How to Install Responsive Slider jQuery Plugin to Plugin?

Here is the slider HTML code below that you need to copy and paste into your blogger HTML code area. To add the slider code in a right position. Then let's start together!

Step 1: Copy the below HTML code and then add this HTML codes in below the close </header> code.

<div class="slideshow_wrapper">
  <div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:100%;margin:0 auto;">
    <div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">
      <ul class="amazingslider-slides" style="display:none;">
        <li><img src="ADD Image URL Here" alt="Slider Title Show on Slideshow" /></li>
        <li><img src="ADD Image URL Here" alt="Slider Title Show on Slideshow"/></li>
        <li><img src="ADD Image URL Here" alt="Slider Title Show on Slideshow" /></li>
        <li><img src="ADD Image URL Here" alt="Slider Title Show on Slideshow" /></li>
      </ul>
    </div>
  </div>
</div>

How to Change Slider Images and Titles?

These below sample codes are things that you have to concentrate on them to change all images and slider titles. To change the images, you have to replace your image URL in "ADD Image URL Here". And to customise your slider titles you have to rewrite on "Slider Title Show on Slideshow".

Step 2: Link responsive slider jQuery files into Blogger Blog. To link these belows files, you can to add them before the </head> tag. Tha's it!

<script src="http://codes.blogsupporter.com/slider/js/jquery.min.js" type="text/javascript"></script>
<script src="http://codes.blogsupporter.com/slider/amazingslider.js"></script>
<script src="http://codes.blogsupporter.com/slider/initslider-1.js"></script>

How to Remove or Add Image Slideshow?

It depends on your demand, how many images slideshow you need to display on your blog slider. If you need to remove an image slider on this responsive slider, you just delete a line of code from <li> to </li> tag.

And to add an image slider, copy a line of the existing <li> to </li> tag then add the image and title.

Change Slider Title Size and Background

This below CSS Code will help you to change title size and background. Then to implement this code to your blogger blog, you need to copy this below CSS codes then add them to the CSS code area.

• Change the number of 26px to change the Title Font size.
• Change title background by replacing the #545442 code

.amazingslider-title-1 {
    display: table;
    position: relative;
    font: Normal 26px 'BebasNeuewebfont';
    letter-spacing: 1px;
    color: #ffffff;
    white-space: nowrap;
    background-color: #545442;
    padding: 20px;
}

If you have any question about this responsive slider, please leave a comment below and I will respond to you as soon as possible.