Membuat Peek a Boo Related Post Untuk Non AMP

Ditulis oleh: Adhy Suryadi

Ditulis pada: 9/08/2019

Membuat Peek a Boo Related Post Untuk Non AMP - Peek a boo atau dalam Bahasa Indonesia adalah ciluk baa, dan kalau dalam bahasa Javascript adalah show hide div ketika halaman di-scroll dan menyentuh bagian bawah blog.

Dan kali ini kita akan memanfaatkan javascript peek a boo ini untuk menampilkan related post. Ya... ketika halaman di-scroll dan menyentuh bawah halaman, maka sebuah kotak yang berisi related post akan muncul dari sisi kanan blog. Namun ketika halaman kembali di-scroll ke atas, maka kotaknya akan sembunyi lagi.

Sebenarnya sudah banyak yang share peek a boo ini, namun semuanya menggunakan peek a boo untuk recent post, maka kali ini kita akan melakukan hal yang berbeda yaitu peek a boo dengan related post.

Dan di sini saya juga menampilkan related post-nya dengan iframe agar tidak terlalu banyak javascript yang disimpan di blog, serta iframe juga menggunakan lazyload sehingga tidak mengganggu loading blog.

Silahkan coba demo peek a boo related post ini, silahkan scroll halaman demonya sampai mentok ke bawah.

Bagaimana, keren bukan?

Jika Anda ingin mencobanya di blog Anda, silahkan ikuti langkah-langkahnya berikut ini.

Silahkan copy CSS berikut dan paste di style blog Anda.

#fixed-related{position:fixed;bottom:50px;right:-352px;padding:0 10px 10px;width:300px;height:auto;font-family:Arial;background:#fff;z-index:9999;-webkit-box-shadow:-3px 3px 10px 0px rgba(0,0,0,0.17);-moz-box-shadow:-3px 3px 10px 0px rgba(0,0,0,0.17);box-shadow:-3px 3px 10px 0px rgba(0,0,0,0.17);}

#fixed-related h4{font-size:16px;font-weight:bold;background:#333;color:#fff;padding:8px 10px;line-height:1;margin:0 -10px}

#fixed-related .fixed-related-close{position:absolute;top:6px;right:6px;cursor:pointer;}

#fixed-related .fixed-related-close svg{width:20px;height:20px;vertical-align:middle}

#fixed-related .fixed-related-close svg path{fill:#fff;}

#fixed-related iframe{border:0;display:block;width:100%;height:176px}

Kemudian silahkan cari kode yang seperti berikut:

<b:includable id='main' var='top'>

..........

..........

..........

</b:includable>

Setelah ketemu, silahkan copy kode berikut:

<b:includable id='fixedRelatedposts' var='post'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:if cond='data:post.labels'>

 <b:loop index='x' values='data:post.labels' var='label'>

   <b:if cond='data:x==0'>

<div id='fixed-related'>

<h4>Artikel Menarik Lainnya:</h4>

&lt;!-- <iframe expr:src='&quot;https://cdn.statically.io/gh/KompiAjaib/kompi-html/e92b1ff1/fixed-related.html?fontSize=14px&amp;color=01579B&amp;url=&quot; + data:blog.canonicalHomepageUrl + &quot;&amp;label=&quot; + data:label.name' scrolling='no' title='Related Posts'>

</iframe> --&gt;

<span aria-label='Close Peekaboo' class='fixed-related-close' onclick='this.parentElement.style.display=&quot;none&quot;'><svg viewBox='0 0 24 24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' role='button' tabindex='0'/></svg></span>

</div>

   </b:if>

 </b:loop>

</b:if>

</b:if>

</b:includable>

Dan paste di bawah kode tadi, sehingga menjadi seperti ini

<b:includable id='main' var='top'>

..........

..........

..........

</b:includable>

<b:includable id='fixedRelatedposts' var='post'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:if cond='data:post.labels'>

 <b:loop index='x' values='data:post.labels' var='label'>

   <b:if cond='data:x==0'>

<div id='fixed-related'>

<h4>Artikel Menarik Lainnya:</h4>

&lt;!-- <iframe expr:src='&quot;https://cdn.statically.io/gh/KompiAjaib/kompi-html/e92b1ff1/fixed-related.html?fontSize=14px&amp;color=01579B&amp;url=&quot; + data:blog.canonicalHomepageUrl + &quot;&amp;label=&quot; + data:label.name' scrolling='no' title='Related Posts'>

</iframe> --&gt;

<span aria-label='Close Peekaboo' class='fixed-related-close' onclick='this.parentElement.style.display=&quot;none&quot;'><svg viewBox='0 0 24 24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' role='button' tabindex='0'/></svg></span>

</div>

   </b:if>

 </b:loop>

</b:if>

</b:if>

</b:includable>

Kemudian cari kode seperti ini

<b:includable id='post' var='post'>

..........

..........

..........

</b:includable>

Lalu copy kode berikut

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:include data='post' name='fixedRelatedposts'/>

</b:if>

Lalu paste di atas penutup kode tadi, sehingga seperti ini

<b:includable id='post' var='post'>

..........

..........

..........

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:include data='post' name='fixedRelatedposts'/>

</b:if>

</b:includable>

Dan terakhir silahkan simpan kode berikut di atas kode </body>

<b:if cond='data:blog.pageType in {&quot;item&quot;}'>

<script>

//<![CDATA[

function fixedRelateds(){var e=document.getElementById("fixed-related");window.pageYOffset+window.innerHeight>=document.body.offsetHeight?(e.style.transition="right 0.7s ease-in-out 0s",e.style.right="0px"):(e.style.transition="right 0.7s ease-in-out 0s",e.style.right="-452px")}window.onscroll=fixedRelateds,setTimeout(function(){!function(){var e=document.getElementById("fixed-related");e.innerHTML=e.innerHTML.replace("<!--","").replace("-->","")}()},5e3);

//]]>

</script>

</b:if>

Selesai, sekarang silahkan cek halaman postingan blog Anda.

Jika kurang mengerti cara menyimpannya di blog, nanti saya buatkan videonya. Dan untuk pengguna AMP, nanti akan saya buatkan juga peek a boo related post untuk AMP.

Dan berikut saya sudah buatkan video cara pasang peek a boo related post untuk non AMP ini, silahkan tonton videonya di bawah ini.