Membuat Fixed Related Post OnScroll Untuk Non AMP

Ditulis oleh: Adhy Suryadi

Ditulis pada: 9/19/2019

Membuat Fixed Related Post OnScroll Untuk Non AMP - Dengan onscroll ini, maka fixed related post akan muncul setelah halaman di-scroll setelah ketinggian halaman yang ditentukan.

Jadi ini berbeda dengan peek a boo related post yang sebelumnya saya share yang muncul ketika scroll halaman menyentuh bagian bawah blog.

Fixed related post onscroll ini hanya mengganti javascript peekaboo dengan javascript menambah class pada onscroll dan sedikit menambah kode CSS.

Sebagai demonya silahkan coba widget JSFidle berikut ini, silahkan coba scroll ka bawah dan ke atas.

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:-350px;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);transition:all .4s ease-in-out}

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

#fixed-related.flow{right:0}

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 scrollFunction(){if(document.body.scrollTop>500||document.documentElement.scrollTop>500){var e,n,l;e=document.getElementById("fixed-related"),n="flow",l=e.className.split(" "),-1==l.indexOf(n)&&(e.className+=" "+n)}else{var e=document.getElementById("fixed-related");e.className=e.className.replace(" flow","")}}window.onscroll=function(){scrollFunction()},setTimeout(function(){!function(){var e=document.getElementById("fixed-related");e.innerHTML=e.innerHTML.replace("<!--","").replace("-->","")}()},3e3);

//]]>

</script>

</b:if>

Selesai, sekarang silahkan cek halaman postingan blog Anda.

Untuk cara pemasangan fixed related post onscroll ini sama dengan cara pasang peek a boo related post untuk non AMP, bisa tonton videonya di bawah ini.