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!
7


your photo name

The Warm Up Conundrum

Sounds like an epidsode of The Big Bang Theory, doesn't it?  Unfortunately, I'm not nearly as funny as Sheldon and the gang.
Anyway, warmups.  The fact is, there are lots of great warmups out there.  In fact, you could spend all day on warmups.  Doing the warm up, peer checking the warmup, reviewing the warmup, grading the warmup.  You could warmup All. Day. Long.  But then, nobody would ever learn anything.

So many warmups, so little time! Take a step back to make sure you're making the most of your minutes.
But.

There are grammar warm ups, reading warm ups, vocabulary warmups, fluency warmups, phonics warmups, social studies warmups, math warmups, math fact warmups, science warmups.  I think Evan Moore has a daily review for every single thing you could think of:
Sweet mercy, please don't do all of these to your students.

This really hit me, when I moved to 4th grade and was compartmentalized.  I had 2 hours to teach reading, writing, grammar, and spelling and work in some independent reading time and learning stations.  Every minute counted.

I couldn't wrap my head around it until I ignored minutes and started thinking about percentages.  What percentage of my time should be dedicated to reading? Writing? Independent reading? Word study? It was a break through moment for me.  It also made me realize I had very little time to dedicate to warming up.

Now that I'm working with small groups, I'm limited to a 30 minute time slot (it's really about 25 minutes because getting all of my friends collected is like herding cats sometimes.  And sometimes little people really, really, really need to tell you about the tooth they just lost.)  I can't spend half of it warming up.  Their teachers let them away from precious instructional minutes, so I need every minute to count.

I found out about this FREE resource by Whole Brain Teaching from Amanda at Teaching Maddeness.  There are two levels, Super Speed 100 and Super Speed 1000.  I love them.  It takes us about 2 1/2 minutes for fluency practice that focuses on the most common words.
Then, we work on a very fast Phonics review.  We practice a phonics skill for about 1 minute.  Next, I have them apply it by spelling nonsense words.  Let's be honest, if you show 2nd graders and up a picture of a cat and have them circle the correct spelling "cat" or "cut", they can get it right.  They have seen that word a million times, but they still probably don't know the short a sound.  Nonsense words force them to think about sounds.

After that, it's on to our guided reading group.  We reread something from the previous day to practice reading fluently.  This is quickly and with whisper phones.

Every elementary teacher on the planet needs whisper phones.
I was lucky enough to get mine from Lakeshore during a sale for $1.99 each.  Since every group uses them, I wipe them down with Clorox wipes between uses.  Because ewwww.

Then, it's off to the races and we're learning, learning, learning.

Don't want to let go of your warmups?  Don't.  Just consider rotating through them monthly or quarterly.  It's not that warmups aren't valuable (they certainly are!), the reality is there's just never enough time in the day.   As my groups have finished Super Speed 1000, we're moving on to Jennifer Jones picture of the day inferencing lessons (GREAT post here from her on that).  We'll do that for awhile and move on to something else.

Got any great warm up tips to share?
1


your photo name

Five on the Fifth {and a few}

Hey hey!  I've had this post planned for several days, but it's turned into 5 on the 5th + 5 days.
Here's a little truth.  The juggle is hard.  The momma, wife, teacher, blogger, TPTer, blog designer juggle is no joke.  But let's be honest, the first two jobs are the most important. So, sometimes the blog gets schlepped to the side.  But, I'm back on track with five fabulous posts from five fabulous bloggers. Want more Five on the Fifth?  Check out the Pinterest board to see previous posts.
Another truth for you: I'm a bit of a Jivey stalker.  I can feel a new hashtag coming on, #jivestalking.  This post popped up at a great time.  I'd uttered the words, "Let's underline what's most important," to one of my small groups, and a friend underlined EVERY. SINGLE. WORD.  Jivey can help you with that.

I loooooooooooove math games.  All the math games.  Best teacher thing about math games?  Friends can't lean over to peek at a neighbor because it just won't help.  They have to resort to thinking.  Molly from Lucky to be in First has a great post on some math games for the younger crowd.

Got just one iPad in your room?  After that SQUEAL! iPad moment, did you wonder what in the heck you were going to do with one iPad and 20+ kids?  Jamie from Second Grade Stuff has a great post on using one iPad in the classroom.

I got a chance to meet Amber from Peppy Zesty Teacherista at the Dallas blogger meet up, and she is all kinds of fun.  I love this human number line she wrote about.

I am LOVING Jessica's newspaper station.  Hop on over to her blog, The Teacher Talk, to find out how she set it up and all the details of this great idea.

Hope your October was rockin' and your November is even better!
2


your photo name

October Favorites

Hey hey! November is here, so it's time for me to share some of last month's favorites with you.
This sweatshirt from Loft is a dream.  Mainly because it looks waaaaay too nice to be a sweatshirt, and people will say things like, "Wow! I love your beautiful sweater."  And you will be all, "Oh thank you!" But inside you'll be laughing because it's a sweatshirt, and you are winning.
p.s.  That is a true story.

Good grief.  This show is awesome.  My brother-in-law told me about it.  Season 1 was on Netflix, and I like to have something playing while I watch Netflix, so why not?  I gave it a try not expecting much, and ended up flying through season 1 and the few episodes of this season, so no I have to watch weekly like a regular person.  Boo.
I don't think it will surprise anyone that I'm obsessed with another pair of Tieks.  But oh my soft leather goodness, the color of my new merlot Tieks is perfection.  I love them.  I may have pet them for a little while when they first came in.
Oh lunch.  We can be friends again.  This is a local company that delivers lunches to businesses.  Each lunch is under 500 calories, but she also has a "comfort food" menu for when you're looking to fall off the wagon.  You just have to order by 5:00 the day before, and your lunch shows up the next day with everything you need to enjoy it.

I am in love with this song right now.  My dad, older daughter, and I got to go to a Francesca Battistelli concert recently, and she sang this song.  Girl mom's-your daughters' need this song.  It's fun to blast in the car and sing along with, and it has an amazing message.


In case you were here looking for teacher stuff, I did post something educational yesterday at Owl-Ways Be Inspired.
Happy November!
7


your photo name

Thanksgiving Freebie

It is a November miracle here in Houston.  It's 50 degrees outside, and that puts me in the Fall decorating mood.  Hard to muster that feeling when you're pushing 90 degrees, but this morning has {shockingly} crisp fall feeling.  Here's a little Thanksgiving set of printables for you:
The second graphic is an editable PowerPoint file, so you can change the last line of text.  You will need to download this free font.

I printed mine on heavy textured cream card stock from Hobby Lobby.  Pop them in frames, and you're good to go.  You have now decorated for Thanksgiving.

It's also a new month which means it's time for another Currently!  This fun linky is from Farley at Oh Boy Fourth Grade.  Hop on over to her blog to read what everyone else is up to.

Listening: How am I just now watching The Blacklist?  I zoomed through the first season on Netflix while working on blog designs.  Such a good show! But now I'm almost caught up and will have to watch like a normal person.

Loving: It was 50 degrees when I woke up this morning.  I live in Houston.  This is the equivalent of a white Christmas for everyone else.  It won't last, but I loved it!

Thinking: I'm headed to New Orleans later this month to meet up with friends from home and go to a Saints game.  CAN. NOT. WAIT.

Wanting: I need more date nights with my husband.  We went to dinner recently on a Thursday night.  Wild and crazy, right?  It was really nice.  The fancy pants business man and I need to squeeze more time in together when and where we can.  {p.s. He really hates when I call him that.  This, of course,  only encourages me to do it more.}

Needing: I try to get all of my Christmas shopping done before Thanksgiving.  I'm not usually that on the ball with things {ever}, but December is crazy.  Trust me, if you do this, it will change your life.  December will just be insane instead of please kill me now, how will I get all of this done in time misery.  Also, I tell my kids they have to get their letter to Santa by November 1st or all the good stuff will be gone.

Reading: My fourth grader is reading the Harry Potter series, so I'm rereading it too.  We're watching the movie together after she finishes the book.  Loving this time with her!

Happy November!
16


your photo name