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 Related Post Widget Playground</title>
<meta name="viewport" content="width=device-width">
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
​
<!-- Previous version: http://jsbin.com/amuget/7 -->
<div id="related-post" class="related-post"></div>
<script>
var labelArray = [],
    relatedPostConfig = {
        numPosts: 10,
        widgetStyle: 2,
        callBack: function() {
            var $container = $('#' + this.containerId + ' > ul'),
                $list = $container.find('li'),
                innerHeight = $list.first().height(),
                outerHeight = $list.first().outerHeight(true);
            // Container & list height setup
            $container.css({
                "height": outerHeight * $list.length / 2,
                "overflow": "hidden"
            });
            $list.css({
                "height": innerHeight,
                "overflow": "hidden"
            });
            // Animation
            function newsTicker() {
                window.setTimeout(function() {
                    $container.find('li:last').stop().animate({
                        opacity: 0
                    }, 1000, function() {
                        $(this).hide().prependTo($container).slideDown(1000, function() {
                            $(this).stop().animate({
                                opacity: 1
                            }, 1000, newsTicker);
                        });
                    });
                }, 3000);
            } newsTicker();
        }
    };
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/related-post/related-post.min.js"></script>
​
</body>
</html>
 
body {
  background-color:white;
  margin:0;
  padding:50px;
}
a {
  color:blue;
  text-decoration:none;
}
a:hover {color:red}
​
/* ==== Related Post Widget Start ==== */
​
.related-post {
  margin:2em auto 0;
  font:normal normal 11px/1.4 Arial,Sans-Serif;
}
.related-post h4 {
  font-size:150%;
  margin:0 0 .5em;
}
​
/* Style 2 */
.related-post-style-2,
.related-post-style-2 li {
  margin:0;
  padding:0;
  list-style:none;
}
.related-post-style-2 li {
  padding:10px;
  border-top:1px solid #eee;
  overflow:hidden;
}
.related-post-style-2 li:first-child {border-top:none}
.related-post-style-2 .related-post-item-thumbnail {
  width:80px;
  height:80px;
  max-width:none;
  max-height:none;
  background-color:transparent;
  border:none;
  padding:0;
  float:left;
  margin:2px 10px 0 0;
}
.related-post-style-2 .related-post-item-title {
  font-weight:bold;
  font-size:110%;
}
.related-post-style-2 .related-post-item-summary {
  display:block;
  overflow:hidden;
}
.related-post-style-2 .related-post-item-more {}
​
/* ==== Related Post Widget End ==== */
 
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers