Sidebar Slider Tutorial

Do you see that sidebar slider over there to your right?  It's pretty amazing, right?  Go ahead.  Stare at it a little while.  I'll wait for you.

I got the code for this here, but I'm going to try to make it a little more teacher blogger friendly.  Once it's on, your good to go.  You can just go back in every once in awhile to change out images and links.

There are three parts to this tutorial:

1.  Getting address for your images.

2.  The code.

3.  Visiting the dark side {this is a maybe step}
Okay, part 1 is easy peasy.  You need to host your images somewhere.  Luckily, it's very easy to do that in Blogger.  Just open a new post, upload your image, and DO NOT PUBLISH.  You just need to upload them.  Once you do that, they have an Internet address.  {Click on HTML next to Compose in the top left corner to see your picture's Internet address.} Even once you delete the post, they are still stored in your Picasa Web Album, so they still exist.

Part 2, life gets a little trickier.  But not too bad.  Here's the code you need.  The parts you need to worry about changing are the pink and blue parts.  Copy and paste all of this HTML business into Word (or whatever you use.)  Make the pink parts your image address and the blue parts the link to your product.

Once you get your code ready, go to your Blogger dashboard-->Layout and add in a new HTML gadget to your sidebar.  Paste in the code from your Word document, and you are {maybe} good to go.


<!-- SLIDER CSS -->
<style type="text/css">
/*
 * jQuery FlexSlider v2.2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */


/* Browser Resets
*********************************/
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}


/* FlexSlider Necessary Styles
*********************************/
.flexslider li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;
margin-bottom: 0 !important;
}
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flexslider .slides, .flexslider .slides img, .flex-direction-nav { margin: 0 !important; padding: 0 !important; }
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme
*********************************/
.flexslider { margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }

/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a  { text-decoration:none; display: block; width: 40px; height: 45px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav .flex-prev { background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -92px transparent; left: -50px; }
.flex-direction-nav .flex-next { background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -15px transparent; right: -50px; text-align: right; }
.flexslider:hover .flex-prev { opacity: 0.5; left: 10px; }
.flexslider:hover .flex-next { opacity: 0.5; right: 10px; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 0.9; }


/* Pause/Play */
.flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; }
.flex-pauseplay a:before  { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; }
.flex-pauseplay a:hover  { opacity: 1; }
.flex-pauseplay a.flex-play:before { content: '\f003'; }

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); }
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev { opacity: 1; left: 10px;}
  .flex-direction-nav .flex-next { opacity: 1; right: 10px;}
}
</style>
    
<!-- SLIDER HTML -->
      <div id="flex-isfb">
        <!-- Preloader -->
        <div id="preloader"></div>
        <style>
        /* Preloader */
        #preloader {
            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background-color:#fff; /* change if the mask should have another color then white */
            z-index:999999999999; /* makes sure it stays on top */
        }
        
        </style>
        <div class="flexslider">
          <ul class="slides">

<li>
<a href="PASTE YOUR PRODUCT LINK HERE">
<img src="PASTE YOUR IMAGE ADDRESS HERE" />
</a>
</li>

<li>
<a href="PASTE YOUR PRODUCT LINK HERE">
<img src="PASTE YOUR IMAGE ADDRESS HERE" />
</a>
</li>

<li>
<a href="PASTE YOUR PRODUCT LINK HERE">
<img src="PASTE YOUR IMAGE ADDRESS HERE" />
</a>
</li>

<li>
<a href="PASTE YOUR PRODUCT LINK HERE">
<img src="PASTE YOUR IMAGE ADDRESS HERE" />
</a>
</li>
</ul> </div> </div> <!-- SLIDER JS --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://project.dimpost.com/flexslider-basic/js/jquery.flexslider-min.js"></script> <script type="text/javascript"> $(window).load(function(){ $('.flexslider').flexslider({ animation: "slide", controlNav: true, directionNav: true, easing: "swing", slideshowSpeed: 3000, animationSpeed: 600, }); }); //<![CDATA[ $(window).load(function() { $('#preloader').delay(350).fadeOut('slow'); }) //]]> </script>


**This is set up to have four images in the slider.  You can easily add more.  Just copy and paste in this code below the last set of <li> to </li> (where your were working with the pink and blue text.)

<li>
<a href="PASTE YOUR PRODUCT LINK HERE">
<img src="PASTE YOUR IMAGE ADDRESS HERE" />
</a>
</li>
You may need step 3, which is entering the dark side (your blog's HTML code.)   After you saved your sidebar gadget, one of two things happened:

1.  It worked.  Yay you!

2.  You just have a little white bar.  No slider.  Wonk wonk wonk.
The most likely culprit is your pin it hover button.  You need to find that code.  It should be above your </body> line in your blog's HTML code.  (Use CTRL F to search for it.)

Once you find it, you need to remove this line:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

Save and you should be good to go.  ALWAYS BACK UP YOUR TEMPLATE BEFORE DOING ANYTHING TO YOUR BLOG'S HTML CODE.  You will be sad sad sad when you don't because if you accidentally delete one stupid symbol from that nonsense nothing will work anymore.

Good luck!


your photo name

7 comments

  1. Ooh...ahh... Looks like I know what I'll be playing with once I get home!

    ReplyDelete
  2. Can't wait to try it! So kind of you to share the "How To" in such a simple format.

    Fingers crossed that I don't have to go to the "Dark Side"!!

    Debbi
    3rd Grade Pad

    ReplyDelete
  3. I did enjoy watching your slide. =) I'll have to save this post. My fear, always, is messing up anything in your beautiful design.

    ReplyDelete
  4. Isn't that the cutest thing ever! I working up the nerve... You made it sound easy!!

    ReplyDelete
  5. Ummm you are amazing, my friend! Can't wait to try this out! Thank you!

    Kate
    EduKate and Inspire

    ReplyDelete
  6. Definitely hope I don't have to go to the "dark side". That is where you come in handy! :) Thanks for making it all so easy. I am on my way to try it out right now. Does it matter the size of image you choose to use?

    Cassie
    Funky in Fourth

    ReplyDelete

Thanks for stopping by! Leave a comment-I'd love to hear what you think!