Script Fixed Related Post OnScroll Untuk Tema Non AMP

By | 24 September 2019

Apa Itu Fixed Related Post OnScroll Non AMP?

Script onscroll yang membuat fixed related post akan muncul setelah halaman di-scroll setelah ketinggian halaman yang ditentukan.

Cara Pasang

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 lalu save tema.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *