Skip to main content

Membuat Related Post Responsive Ala Kompi Ajaib

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

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB