Related Post Empat Kolom Sederhana Responsive dan Menarik

Related post atau recent post yang kami sajikan ini tersusun dari thumbnail image atau gambar dengan menghilangkan title posting dan akan tampil saat disorot saja sehingga akan terlihat lebih dinamis dan yang penting sudah responsive untuk berbagai perangkat.

Cukup letakkan bebarapa kode html, css dan script dibawah ini.

Masuk ke akun blogger.
Masuk ke menu tab Template > Edit HTML.
Letakkan kode dibawah ini diatas </head>

<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>

Lalu letakkan kode dibawah ini diatas </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>

Lalu cari kode yang mirip seperti dibawah ini.

<data:post.body/>

</b:if>

<div class='clear'/>

<!-- clear for photos floats -->

</div>

Lalu copy paste kode dibawah ini tepat dibawah kode diatas.

<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>

Jika semua sudah sesuai dengan keterangan diatas silahkan SAVE template dan lihat hasilnya.

Demikian tutorial Related Post Sederhana Responsive dan Menarik pada blog, jika kurang dipahami silahkan tinggalkan pesan.