Friday, December 30, 2011

Adding the MovingBoxes plugin to Blogger

These instructions will allow you to add a MovingBoxes widget to any Blogger post. These instruction really apply to any plugin out there, but instead of making a generic post, I think a specific example is best.

  • picture

    Olivia News Heading

    A very short exerpt goes here... more
  • picture

    Alice News Heading

    A very short exerpt goes here... more and a whole lot more text goes here, so we can see the height adjust.
  • picture

    Yin News Heading

    A very short exerpt goes here... more
  • picture

    Gerri News Heading

    A very short exerpt goes here... more
  • picture

    Tabitha News Heading

    A very short exerpt goes here... more
  • picture

    Mary News Heading

    A very short exerpt goes here... more
  • picture

    Kitty News Heading

    A very short exerpt goes here... more

Note: In the next version of MovingBoxes, I plan to change the width and panelWidth options. At that time, I will update this post.

Code, CSS and image setup

Required Files
I don't know how github would feel about directly linking to their servers. Most businesses frown upon hot-linking and will most likely block your URL, or the entire domain if the hot-linking gets too rampant. So I'd recommend copying each file below and saving it to your own server.
Note that inside of the css, you'll need to change the arrows.png url to point to the new location of the image file.

/*** Left & Right Navigation Arrows ***/
a.mb-scrollButtons {
  background: transparent url(../images/arrows.png) no-repeat;
}

If you don't have a server, you can use dropbox or your iCloud (I don't own a Mac, so I'm only guessing that it'll allow you to save javascript & css files). If you don't have a server to save the files, then first, save the image to an image hosting site, like photobucket, Flickr or something. Then you can save the javascript and css into your own blog design. The main problem with saving into your page design is that it will increase your page size and possibly make the page loading take longer. Either way you'll need to add a gadget, or add to an already existing one.

Add a Gadget
So once you have your files saved and the css file updated:
  • Go to your Dashboard > Design > Add a Gadget > Pick the "HTML/Javascript" gadget.
  • Once the popup window opens, add the following plugin css and javascript in the content window, the URL should point to your hosted files
  • Note: After testing this, it seems that adding a <link> tag inside of the HTML/Javascript gadget gets removed. I'm not sure why, but in this case we can just paste in the entire css.

    <style>
/*** Overall MovingBoxes Slider ***/
.mb-wrapper {
 width: 900px; /* default, this is overridden by script settings */
 min-height: 200px;
 border: 5px solid #ccc;
 margin: 0 auto;
 position: relative;
 left: 0;
 top: 0;
 border-radius: 1em;
 -moz-border-radius: 1em;
 -webkit-border-radius: 1em;
 box-shadow: inset 0 0 10px #888;
 -moz-box-shadow: inset 0 0 10px #888;
 -webkit-box-shadow: inset 0 0 10px #888;
}

/* Panel Wrapper */
.mb-slider, .mb-scroll {
 width: 100%;
 height: 100%;
 overflow: hidden;
 margin: 0 auto;
 padding: 0;
 position: relative;
 left: 0;
 top: 0;

 /***(>'-')> Control Panel Font size here <('-'<)***/
 font-size: 18px;
}

/* active slider border highlight */
.mb-active-slider {
 border-color: #999bff;
}

/*** Slider panel ***/
.mb-slider .mb-panel {
 width: 350px;  /* default, this is overridden by script settings */
 margin: 5px 0;
 padding: 5px;
 display: block;
 cursor: pointer;
 float: left;
 list-style: none;
}

/* Cursor to arrow over current panel, pointer for all others,
change .current class name using plugin option, currentPanel : 'current' */
.mb-slider .mb-panel.current {
 cursor: auto;
}

/*** Inside the panel ***/
.mb-inside {
 padding: 10px;
 border: 1px solid #999;
}

.mb-inside * {
 max-width: 100%;
}

/*** Left & Right Navigation Arrows ***/
a.mb-scrollButtons {
 display: block;
 width: 45px;
 height: 58px;
 background: transparent url(http://css-tricks.github.com/MovingBoxes/images/arrows.png) no-repeat;
 position: absolute;
 top: 50%;
 margin-top: -29px; /* if you change the arrow images, you may have to adjust this (1/2 height of arrow image) */
 cursor: pointer;
 text-decoration: none;
 outline: 0;
 border: 0;
}
a.mb-scrollButtons.mb-left {
 background-position: left top;
 left: -45px;
}
a.mb-scrollButtons.mb-right {
 background-position: right top;
 right: -45px;
}
a.mb-scrollButtons.mb-left:hover {
 background-position: left bottom;
}
a.mb-scrollButtons.mb-right:hover {
 background-position: right bottom;
}
a.mb-scrollButtons.disabled {
 display: none;
}

/*** Controls added below the panels ***/
.mb-controls {
 margin: 0 auto;
 text-align: center;
 background: #ccc;
 position: relative;
 z-index: 100;
}
.mb-controls a {
 color: #444;
 font: 12px Georgia, Serif;
 display: inline-block;
 text-decoration: none;
 padding: 2px;
 height: 18px;
 margin: 0 5px 0 0;
 text-align: center;
 outline: 0;
}
.mb-controls a.current, .mb-controls a:hover {
 color: #fff;
}
.mb-active-slider .mb-controls {
 background: #999bff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://css-tricks.github.com/MovingBoxes/js/jquery.movingboxes.min.js"></script>
<script>
jQuery(function(){

  jQuery('.movingboxes').movingBoxes({
    startPanel   : 1,      // start with this panel
    width        : 300,    // overall width of movingBoxes
    panelWidth   : 0.5,    // current panel width adjusted to 50% of overall width
    wrap         : false,  // if true, the panel will "wrap" (it really rewinds/fast forwards) at the ends
    buildNav     : true,   // if true, navigation links will be added
    navFormatter : function(){ return "&#9679;"; } // function which returns the navigation text for each panel
  });

});
</script>

  • Modify the "width" and "panelWidth" options (in red) as desired. Or add and/or remove options following these instructions.
  • If you don't have your own server, then you can open the movingboxes.css file in a text editor and save it into the content window; again make sure the arrow.png url is pointing to the new location in the css below.

    <style>
  /* add movingboxes.css contents here */
</style>
<script>
  /* add jquery.movingboxes.min.js contents here */
</script>
Adding a blog post

Now the first step here would be to open a new post.

Switch the editor to "Edit HTML" - tab in the upper right corner, then paste in the basic plugin HTML Note, keep the <img> and <li> on the same line or blogger will add a <br> in between.

<ul class="movingboxes">
  <li><img src="http://css-tricks.github.com/MovingBoxes/demo/1.jpg" alt="picture">
    <h2>Olivia News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
  </li>
  <li><img src="http://css-tricks.github.com/MovingBoxes/demo/2.jpg" alt="picture">
    <h2>Alice News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a> and a whole lot more text goes here, so we can see the height adjust.</p>
  </li>
  <li><img src="http://css-tricks.github.com/MovingBoxes/demo/3.jpg" alt="picture">
    <h2>Yin News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
  </li>
  <li><img src="http://css-tricks.github.com/MovingBoxes/demo/4.jpg" alt="picture">
    <h2>Gerri News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
  </li>
  <li><img src="http://css-tricks.github.com/MovingBoxes/demo/5.jpg" alt="picture">
    <h2>Tabitha News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://www.flickr.com/photos/fensterbme/499006584/">more</a></p>
  </li>
  <li><img src="http://css-tricks.github.com/MovingBoxes/demo/6.jpg" alt="picture">
    <h2>Mary News Heading</h2>
    <p>A very short exerpt goes here... <a href="#">more</a></p>
  </li>
  <li><img src="http://css-tricks.github.com/MovingBoxes/demo/7.jpg" alt="picture">
    <h2>Kitty News Heading</h2>
    <p>A very short exerpt goes here... <a href="#">more</a></p>
  </li>
</ul>

Note that the UL has a class named "movingboxes", it originally had an ID, but to make this plugin work on any future blog entries we need to make sure it's a class name we can remember.

Now, just publish your post and reload your page. The MovingBoxes plugin should initialize and look like it does at the top of this post :)
Posted by Rob Garrison at 5:12 PM
Labels: , ,

1 comment:

  1. PradeepJanuary 4, 2012 at 12:04 AM

    Thank You Very Much For Listening Me And Giving This Tutorial Lakhs of thanks to You.

    ReplyDelete

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)