Ini adalah updated Postingan dari sebelumnya Cara Membuat Related Post Mirip Matched Content Adsense untuk postingan kali ini lebih memfokuskan Responsive dengan menambahkan efek show hide title post menggunakan hover, ya lumayanlah tampilannya jadi lebih sedikit responsive dan menyesuaikan dengan tampilan desktop ataupun mobile.
Begitupun juga tampilannya jadi lebih menarik dan bersih karena ditampilkan hanya thumbnail-nya saja, untuk menampilkan title post nya otomatis akan tampil saat thumbnail hover mouse atau di cursornya, cara ini pun bisa membuat 2 atau 4 kolom yang akan ditampilkan di tampilan versi Desktop. Buat sobat yang penasaran dan ingin mencobanya mari kita simak bersama.
Langkah Pertama
Salin dan simpan kode CSS dibawah ini kemudian letakkan diatas kode </head>
1. Untuk Tampilan 2 Kolom
<b:if cond='data:blog.pageType == "item"'>
<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>Kemudian sobat amati kode margin berikut ini
.related-post{width:auto;margin:10px -10px 0;padding:0;}Jika sudah ketemu silahkan sobat tentukan margin kiri dan kanannya kalau ditemukan tidak rapih atau tidak rata silahkan diatur nilainya menjadi -10
2. Setting tampilan 4 Kolom
Untuk tampilan 4 kolom sedikit berbeda silahkan gunakan kode dibawah ini kemudian perhatikan kode yang ditandai silahkan ganti width:50% dengan kode width:25% lalu silahkan tambahkan kode seperti dibawah ini
@media screen and (max-width:800px){.related-post-style-3 .related-post-item{width:50%;}
}jadi akan nampak secara keseluurannya seperti dibawah ini
<b:if cond='data:blog.pageType == "item"'>
<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>Langkah Ke Dua
Silahkan sobat salin kode HTML dibawah ini
<b:if cond='data:blog.pageType == "item"'>
<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'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4>You Might Also Like:</h4>",
numPosts: 4,
summaryLength: 370,
titleLength: "auto",
thumbnailSize:340,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId: "related-post",
newTabLink: false,
moreText: "Read More",
widgetStyle: 3,
callBack: function() {}
};
</script>
<div class='clear'/>
</b:if>Lalu letakkan kode diatas tepat dibawah kode ini atau cari kode </div> dapat dilihat di bagian <b: includable id='post' var='post'> caranya scrol saja kebawah nanti akan terlihat kode diatas.
<data:post.body/>
</b:if>
<div class='clear'/> <!-- clear for photos floats -->
</div>Langkah Ke Tiga
Silahkan sobat salin kembali kode javascript dibawah ini lalu letakkan tepat diatas kode </body>
<b:if cond='data:blog.pageType == "item"'>
<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>Selesai...
Perhatikan dengan seksama penempatan kode-kodenya, jika ada yang ingin menambahkan dan berbagi pengetahuannya silahkan komentar dikolom ini selamat mencobanya ya sobat semoga bermanfaat
EmoticonEmoticon