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/6 -->
<div id="related-post" class="related-post"></div>
<script>
var labelArray = [],
    relatedPostConfig = {
        numPosts: 4,
        widgetStyle: 5,
        titleLength: 50,
        thumbnailSize: 130,
        callBack: function () {
            $('#' + this.containerId + ' li').hover(function () {
                $('.related-post-item-tooltip', this).filter(':not(:animated)').animate({
                    marginTop: "50%"
                }, 400);
            }, function () {
                $('.related-post-item-tooltip', this).animate({
                    marginTop: "100%"
                }, 200);
            }).find('.related-post-item-tooltip').css('margin-top', '100%');
        }
    };
</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 5 */
.related-post-style-5,
.related-post-style-5 li {
  margin:0;
  padding:0;
  list-style:none;
  word-wrap:break-word;
  overflow:hidden;
}
.related-post-style-5 .related-post-item {
  display:block;
  float:left;
  width:130px;
  height:auto;
  padding:10px;
  border-left:1px solid #eee;
}
.related-post-style-5 .related-post-item:first-child {border-left:none}
.related-post-style-5 .related-post-item-wrapper {
  display:block;
  position:relative;
  overflow:hidden;
}
.related-post-style-5 .related-post-item-thumbnail {
  display:block;
  margin:0;
  width:130px;
  height:130px;
  max-width:none;
  max-height:none;
  background-color:transparent;
  border:none;
  padding:0;
}
.related-post-style-5 .related-post-item-tooltip {
  display:block;
  background-color:black;
  background-color:rgba(0,0,0,.9);
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  padding:10px;
  line-height:normal;
  font-style:italic;
  color:white;
  overflow:hidden;
  /* display:none; <= Don't hide the overlay */
}
/* .related-post-style-5 .related-post-item:focus .related-post-item-tooltip,
.related-post-style-5 .related-post-item:hover .related-post-item-tooltip {display:block} <= Remove this declaration, let JQuery do the hover stuff! */
​
/* ==== 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