Cara Membuat Show and Hide Related Post Responsive

Related post yang saya bagikan kali ini terdiri dari 4 kolom yang mengandung element Show and Hide widget, jadi yang tampil pada kondisi normal adalah thumbnail gambar atau image dan akan mengalami perubahan setelah kursor disorot pada thumbnail image tersebut dan akan menghasilkan thumbnail baru pada sisi lain dari thumbnail asal. Selain thumbnail akan juga ditampilkan title dan sebagian isi entri. Related post ini sudah responsive dengan berbagai perangkat baik desktop maupun mobile.

Pastikan langkah demi langkah dalam tutorial ini sesuai dengan yang saya paparkan sehingga hasil dari tutorial ini sesuai dengan harapan. Langkah yang harus dilakukan adalah:

Masuk ke akun blogger.
Masuk ke menu tab Template > Edit HTML.
Letakkan kode dibawah ini tepat diatas kode </head>.

/* Skin Design Related Post */

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

Letakkan kode dibawah ini tepat diatas kode </div> dapat dilihat pada bagian <b: includable id='post' var='post'> dengan cara scroll kebawah sehinggga akan tampil kode tersebut.

/* Skin Design Related Post */

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

Letakkan kode dibawah ini tepat diatas kode </body>.

/* Skin Design Related Post */

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

Kemudian SAVE dan dan silahkan lihat hasilnya.
Demikian tutorial yang bisa kami sampaikan, jika kurang dipahami silahkan tinggalkan pesan.