Ini ialah 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 alasannya ialah ditampilkan hanya thumbnail-nya saja, untuk menampilkan title post nya otomatis akan tampil ketika thumbnail hover mouse atau di cursornya, cara ini pun mampu membuat 2 atau 4 kolom yang akan ditampilkan di tampilan versi Desktop. Buat sahabat yang penasaran dan ingin mencobanya mari kita simak bersama.
Langkah Pertama
Salin dan simpan aba-aba CSS dibawah ini kemudian letakkan diatas aba-aba </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 sahabat amati aba-aba margin berikut ini
.related-post{width:auto;margin:10px -10px 0;padding:0;} Jika sudah ketemu silahkan sahabat 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 aba-aba dibawah ini kemudian perhatikan aba-aba yang ditandai silahkan ganti width:50% dengan aba-aba width:25% lalu silahkan tambahkan aba-aba menyerupai dibawah ini
@media screen and (max-width:800px){.related-post-style-3 .related-post-item{width:50%;} }jadi akan nampak secara keseluurannya menyerupai 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 sahabat salin aba-aba 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 aba-aba diatas sempurna dibawah aba-aba ini atau cari aba-aba </div> dapat dilihat di bab <b: includable id='post' var='post'> caranya scrol saja kebawah nanti akan terlihat aba-aba diatas.
<data:post.body/> </b:if> <div class='clear'/> <!-- clear for photos floats --> </div>Langkah Ke Tiga
Silahkan sahabat salin kembali aba-aba javascript dibawah ini lalu letakkan sempurna diatas aba-aba </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, bila ada yang ingin menambahkan dan mengembangkan pengetahuannya silahkan komentar dikolom ini selamat mencobanya ya sahabat biar bermanfaat
Comments