Membuat Related Post Responsive Ala Kompi Ajaib

Membuat Related Post Responsive Ala Kompi Ajaib

Bola Hero Gawai

Membuat Related Post Responsive Ala Kompi Ajaib

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×