How To Make Related Post Responsive With Hover Effect

How To Make Related Post Responsive With Hover Effect - Actually this is a modification of related post that I found on Internet. I made responsive by adding effects show hide post title to hover. Responsive display is quite good both on desktop and mobile. It looks cleaner because it displayed only thumbnails of its course, while the post title will appear as a thumbnail on hover the mouse or cursor. For thumbnail can be made 2 columns or 4 columns easily on a desktop display.

Demo

For those who want to try it, please follow the steps below. Please copy the CSS code below.
Please save the code above the </head>.

A. Exhibit 2 column

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.related-post{width:auto;margin:10px -10px 0;padding:0;}
.related-post h4{margin:0 10px!important;background:none;font-size:30px;font-weight:bold;padding:0;color:#666;}
.related-post-style-3,.related-post-style-3 li{margin:0!important;padding:0;list-style:none;word-wrap:break-word;overflow:hidden;width:100%;line-height:1.1em}
.related-post-style-3 .related-post-item{display:block;float:left;width:50%;height:180px;padding:10px 10px;margin-bottom:10px!important;border-left:1px solid transparent;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;position:relative}
.related-post-style-3 .related-post-item:first-child{border-left:none}
.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0;width:100%;height:170px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;transition:all 400ms ease-in-out;}
.related-post-style-3 .related-post-item:hover .related-post-item-thumbnail{opacity:.6}
.related-post-style-3 .related-post-item-tooltip{position:absolute;padding:10px;background:rgba(244,131,106,.6);bottom:-150px;left:10px;right:10px;text-align:center;transition:all 400ms ease-in-out;}
.related-post-style-3 .related-post-item:hover .related-post-item-tooltip{bottom:0}
.related-post-style-3 .related-post-item-title{color:#000;text-align:center;padding: 0px 0 10px;font-size:100%;font-weight:bold;width:auto!important; height:auto;transition:all 400ms ease-in-out;}
.related-post-style-3 .related-post-item-title:hover{color:#fff}
.clear{clear:both}
@media screen and (max-width:375px){.related-post-style-3 .related-post-item{width:100%;}
}
</style>
</b:if>

Examine the margin in the following code :

.related-post{width:auto;margin:10px -10px 0;padding:0;}

Please adjust left and right margins if not flat with the area of your posts , please set the value -10px.

B. Exhibit 4 column

If you want to apply the 4 columns, please change the code width:50% I am marking code width:25% and add the code below.

@media screen and (max-width:800px){.related-post-style-3 .related-post-item{width:50%;}
}

So the code as a whole becomes like below.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.related-post{width:auto;margin:10px -10px 0;padding:0;}
.related-post h4{margin:0 10px!important;background:none;font-size:30px;font-weight:bold;padding:0;color:#666;}
.related-post-style-3,.related-post-style-3 li{margin:0!important;padding:0;list-style:none;word-wrap:break-word;overflow:hidden;width:100%;line-height:1.1em}
.related-post-style-3 .related-post-item{display:block;float:left;width:25%;height:180px;padding:10px 10px;margin-bottom:10px!important;border-left:1px solid transparent;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;position:relative}
.related-post-style-3 .related-post-item:first-child{border-left:none}
.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0;width:100%;height:170px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;transition:all 400ms ease-in-out;}
.related-post-style-3 .related-post-item:hover .related-post-item-thumbnail{opacity:.6}
.related-post-style-3 .related-post-item-tooltip{position:absolute;padding:10px;background:rgba(244,131,106,.6);bottom:-150px;left:10px;right:10px;text-align:center;transition:all 400ms ease-in-out;}
.related-post-style-3 .related-post-item:hover .related-post-item-tooltip{bottom:0}
.related-post-style-3 .related-post-item-title{color:#000;text-align:center;padding: 0px 0 10px;font-size:100%;font-weight:bold;width:auto!important; height:auto;transition:all 400ms ease-in-out;}
.related-post-style-3 .related-post-item-title:hover{color:#fff}
.clear{clear:both}
@media screen and (max-width:800px){.related-post-style-3 .related-post-item{width:50%;}
}
@media screen and (max-width:375px){.related-post-style-3 .related-post-item{width:100%;}
}
</style>
</b:if>

The next step, copy the HTML code below. Paste below <data:post.body/> or you can put the code on appropriate template that you use.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='related-post' id='related-post'/>
  <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;You Might Also Like:&lt;/h4&gt;&quot;,
      numPosts: 4,
      summaryLength: 370,
      titleLength: &quot;auto&quot;,
      thumbnailSize:340,
      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;Read More&quot;,
      widgetStyle: 3,
      callBack: function() {}
  };
  </script>
<div class='clear'/>
</b:if>

Or you can keep the code above under the code below or something similar like that, under the code </div>.

  <data:post.body/>
</b:if>
      <div class='clear'/> <!-- clear for photos floats -->
    </div>

Please find the code in the <b:includable id='post' var='post'> then scroll down the page , you'll later find a code like the one above .

The last step, you musyt copy the javascript code below. Please save the above code </body>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
!function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="http://yourjavascript.com/0410025934/related-posts-dte.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
//]]>
</script>
</b:if>

Please SAVE and Related Post Responsive With Hover Effect appear on your blog.

Advertisement advertise here