Cara Membuat Fixed Related Post OnScroll Untuk Blog Non AMP
Panduan Membuat Fixed Related Post OnScroll Untuk Non AMP - Dengan onscroll ini, maka fixed related post akan nampak setelah halaman di-scroll sesudah ketinggian halaman yang ditentukan.
Jadi ini berbeda dengan peek a boo related post yang sebelumnya admin share yang muncul ketika scroll halaman menyentuh bagian bawah blog.
Fixed related post onscroll ini hanya mengubah 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.
Apabila Shobat ingin mencobanya di blog Shobat, silahkan ikuti langkah-langkahnya berikut ini.
Silahkan copy CSS berikut dan paste di style blog Shobat.
#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 == "item"'>
<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>
<!-- <iframe expr:src='"https://cdn.statically.io/gh/KompiAjaib/kompi-html/e92b1ff1/fixed-related.html?fontSize=14px&color=01579B&url=" + data:blog.canonicalHomepageUrl + "&label=" + data:label.name' scrolling='no' title='Related Posts'>
</iframe> -->
<span aria-label='Close Peekaboo' class='fixed-related-close' onclick='this.parentElement.style.display="none"'><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/tempel 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 == "item"'>
<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>
<!-- <iframe expr:src='"https://cdn.statically.io/gh/KompiAjaib/kompi-html/e92b1ff1/fixed-related.html?fontSize=14px&color=01579B&url=" + data:blog.canonicalHomepageUrl + "&label=" + data:label.name' scrolling='no' title='Related Posts'>
</iframe> -->
<span aria-label='Close Peekaboo' class='fixed-related-close' onclick='this.parentElement.style.display="none"'><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 == "item"'>
<b:include data='post' name='fixedRelatedposts'/>
</b:if>Lalu paste/tempel di atas penutup kode tadi, sehingga nampak seperti ini
<b:includable id='post' var='post'>
..........
..........
..........
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='fixedRelatedposts'/>
</b:if>
</b:includable>Dan yang terakhir silahkan simpan kode berikut di atas kode </body>
<b:if cond='data:blog.pageType in {"item"}'>
<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 Shobat.
Untuk cara pemasangan fixed related post onscroll ini sama dengan cara pasang peek a boo related post untuk non AMP.
Sumber Referensi: https://www.kompiajaib.com/2019/09/membuat-fixed-related-post-onscroll.html
