Skip to main content
KOMPI AJAIB

follow us

Berbuat khilaf adalah sifat. Meminta maaf adalah kewajiban. Dan kembalinya Fitrah adalah tujuan. Saya, Adhy Suryadi admin blog Kompi Ajaib MEMOHON MAAF LAHIR DAN BATHIN. Minal Aidin Wal Faidzin Taqabalallahu minnaa wa minkum. Selamat hari raya Idul Fitri, 1 Syawal 1439 H.

×

Membuat Related Post Responsive Ala Kompi Ajaib

Baca juga:

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

You Might Also Like:


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar