Cara Membuat Fixed Related Post OnScroll di Blogger

Pada kesempatan kali ini kita akan membagikan "Cara Membuat Fixed Related Post OnScroll di Blogger". Seperti judulnya, Fixed Related Post akan muncul setelah halaman di scroll pada ketinggian yang sudah ditentukan.

Untuk contohnya, silahkan scroll saja halaman pada postingan ini dan lihat fixed related post pada kanan bawah.

Artikel Menarik Lainnya:

Oke langsung to the point saja. Jika kamu ingin membuat Fixed Related Post seperti ini. yuk simak caranya :

Cara Membuat Fixed Related Post OnScroll di Blogger

1. Silahkan login pada akun blogger.com milikmu.

2. Kemudian masuk ke menu Tema ⇨ lalu klik tombol Edit HTML.

3. Setelah itu cari kode ]]></b:skin> dan pastekan kode dibawah ini tepat diatasnya.

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

4. Selanjutnya pastekan juga kode dibawah ini dan letakkan diatas </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>

5. Kemudian cari kode yang seperti berikut :

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

Jika sudah ketemu, copy kode dibawah ini :

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

masukkan script iklan disini

&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 pastekan kode tersebut dibawah 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>

6. Dan yang terakhir cari kode seperti dibawah ini :

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

Lalu copy kode berikut ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='fixedRelatedposts'/>
</b:if>

Dan pastekan kode tersebut sehingga menjadi 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>

7. Tekan tombol Simpan Tema dan Selesai.