Membuat Related Post Responsive Ala Kompi Ajaib

Sebenarnya ini yaitu modifikasi related post dari DTE yang aku buat responsive dengan menambahkan dampak show hide title post dengan hover. Tampilan responsive-nya cukup anggun baik di desktop maupun mobile.

Dan tampilannya lebih higienis sebab yang ditampilkan hanya thumbnail-nya saja, sedangkan title post akan tampil dikala thumbnail di-hover mouse atau cursor. Susunan thumbnailnya pun dapat dibentuk 2 kolom atau 4 kolom dengan gampang 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 isyarat </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 isyarat margin pada isyarat berikut:

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

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

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

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

Sehingga kodenya secara keseluruhan menjadi menyerupai 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 isyarat 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 isyarat di atas di bawah isyarat di bawah ini atau yang menyerupai mirip itu (di bawah isyarat </div>).

   <data:post.body/>
 </b:if>
       <div class='clear'/> <!-- clear for photos floats -->
     </div>

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

3. Copy isyarat javascript di bawah ini.
Silahkan simpan di atas isyarat </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....
Sumber https://www.kompiajaib.com/

Share this post