Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Blogger Feed Rotator</title>
    <link href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css" rel="stylesheet">
    <style>
      /* Custom CSS here... */
      .slider-rotator {
        width:500px;
        height:240px;
        padding:0 0;
        background-color:white;
        font:italic normal 12px/1.4 Georgia,Serif;
        color:white;
        border:1px solid black;
      }
​
      .slider-rotator .slider-item {
        background-color:white;
        height:240px; /* Same with `.slider-rotator` height */
        padding:0 0;
      }
​
      .slider-rotator h4 {margin-top:0}
      .slider-rotator p {margin:2px 0 0}
​
      /* Slider details as caption */
      .slider-rotator .detail-wrapper {
        position:absolute;
        top:auto;
        right:0;
        bottom:0;
        left:0;
        background-color:black;
        background-color:rgba(0,0,0,.9);
        padding:.5em 1em;
        z-index:4;
      }
    </style>
  </head>
  <body>
​
​
    <div id="slider-rotator" class="slider-rotator loading"></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
    <script>
      makeSlider({
        thumbWidth: 500,
        onInit: function() {
          $('#' + this.containerId + ' .slider-item').each(function() {
            var $link = $('a', this);
            $('img', this).wrap('<a href="' + $link.attr('href') + '"></a>');
          });
        }
      });
    </script>
​
​
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers