Skip to main content

Membuat Peek a Boo Related Post Untuk Non AMP

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.

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.


Berbagi itu peduli:

You Might Also Like:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar


PrivacySitemap
©2020 KOMPI AJAIB