New Updates

HOW TO ADD AN IMAGE SLIDER TO POSTS ON BLOGGER

 

Slideshows have been the hot new fad on blogs lately.  Many blogs have them on the sidebar, in the header, and within the post content itself.  They are a great way to add a lot of images to a single post without making readers scroll and scroll to the bottom of the page.  They also can help loading time since they only pull one image at a time.  If the images are clickable you can also use sliders as a way of rounding up your old content.. almost like a fancy ‘navigation’ tool.



About this slide show: 

This slideshow (You can see this quick demo I put together in this post) uses jQuery.What is nice is that it's all contained under ONE URL which means it's just like a regular post for SEO purposes since all the content is on one page. 


For this slider, there is no code to ‘refresh’ the page every time a new image loads.  This means it will load faster, it won’t have a long lag or cause your readers to have to sit through your entire template reloading for every.single.image.  It also means you won’t be sucking up data usage for readers on mobile.  A caveat of this user-friendly function is: this tutorial is NOT going to be a sneaky way to increase your page views. Why don't I want to get those 'free' pageviews?


How to install the slider:

Because this is jQuery, you once again need to check that you have the library installed in your code.
The first thing you need to do is make sure you have jQuery installed in your template. The easiest way to check for that is to go to your template HTML and search for "jquery.min.js”

(If you haven’t played with your html before it is no big deal.  From your Dashboard go to TEMPLATE  (and of course BACK UP YOUR TEMPLATE first), and then click on “Edit HTML”  Use your mouse to click INSIDE that box of code (try highlighting some text) and then hit “Control-F” to bring up the search box.  Now you can look for anything in your template code that you need.  Either “jquery.min.js” or “</head>" etc)

 if you don't find a jquery library, you need to paste:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
right before </head> in your template.  You don’t want multiple libraries.. so make sure you check before adding it again!
(Again, just search for “</head” as I explained above and then click the line above it and paste in the code)


Styling the slider: 

Next we want to add the styling (for the box and the buttons etc) to your code. This has been pre-assigned by the script author **(Steven Wanderski). We do this by pasting:
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" type="text/css" />
right before </head> in your template.
Next you want to add the CSS styling that YOU control.  To do this paste the following
.bxslider img{
width:100%;
height:300px;
}
.bx-wrapper img {
display: inline !important;
right before ]]></b:skin>
you can change the width and height of the slider in that code if you need to.


Activating the slider:

In order for the slider to actually slide upon clicking, you need to add the jQuery script to your template.  To do this you need to paste:
 <script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<script>
    $(document).ready(function() {
        $('.bxslider').bxSlider({
            auto: true,
            autoControls: true,
            captions: true
        });
    });
</script>
Right before </head>(you are probably getting good at this by now!)
You do have a little control over how the slider works with this code:
“auto: true” means the slider slides automatically. If you make that false, the arrow needs to be clicked to rotate.
“autoControls: true” means that the forward and back arrows show, you can removing them by setting that to false
“captions: true” turn on and off the text box at the bottom (if your image speaks for itself, you can set that to false)

Adding content to the slider:

Now you have your slider ready to go but you have to load it with images and captions.  (Once you have that other code installed, you can add as many sliders as you want to your site!)

To do this you need to paste the following HTML into your post (or even in a widget if you want to use it on your home page or sidebar)
<ul class="bxslider">
<li><img src="ImageURL1" title='CaptionGoesHere' /></li>
<li><img src="ImageURL2" title='CaptionGoesHere' /></li>
<li><img src="ImageURL3" title='CaptionGoesHere' /></li>
<li><img src="ImageURL4" title='CaptionGoesHere' /></li>
</ul>
You will need to paste your image url (don’t forget the http://) and your image caption where it is indicated above.

If you want to have embed the slider within the content of a post, you can compose the post as normal ABOVE the starting "<ul class" and continue it below the closing "</ul>”  When someone clicks through the images, any text outside of the slider will not change.

No comments