Membuat Related Post Responsive Ala Kompi Ajaib

Ditulis oleh: Adhy Suryadi

Ditulis pada: 9/06/2015

Sebenarnya ini adalah modifikasi related post dari DTE yang saya buat responsive dengan menambahkan efek show hide title post dengan hover. Tampilan responsive-nya cukup bagus baik di desktop maupun mobile.

Dan tampilannya lebih bersih karena yang ditampilkan hanya thumbnail-nya saja, sedangkan title post akan tampil ketika thumbnail di-hover mouse atau cursor. Susunan thumbnailnya pun bisa dibuat 2 kolom atau 4 kolom dengan mudah di tampilan desktop.

Bagi yang ingin mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.

1. Silahkan copy code CSS di bawah ini.
Silahkan simpan kodenya di atas kode </head>

A. Tampilan 2 kolom

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

Perhatikan kode margin pada kode berikut:

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

Silahkan sesuaikan margin kiri dan kanan jika tidak rata dengan daerah postingan Anda, silahkan atur nilai -10px.

B. Tampilan 4 kolom
Jika ingin menggunakan tampilan 4 kolom, silahkan ganti kode width:50% yang saya marking dengan kode width:25% dan tambahkan kode di bawah ini.

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

}

Sehingga kodenya secara keseluruhan menjadi seperti di bawah ini

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

2. Copy kode HTML di bawah ini.

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

Dan silahkan simpan kode di atas di bawah kode di bawah ini atau yang mirip seperti itu (di bawah kode </div>).

  <data:post.body/>

</b:if>

      <div class='clear'/> <!-- clear for photos floats -->

    </div>

Silahkan cari kode tersebut di bagian <b:includable id='post' var='post'> kemudian scroll halaman ke bawah, nanti akan menemukan kode seperti di atas.

3. Copy kode javascript di bawah ini.
Silahkan simpan di atas kode </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>

Silahkan SAVE edit HTML blog Anda. Selesai...selamat mencoba....