Cara Membuat Widget Fixed Related Post OnScroll Non AMP

Widget Fixed Post OnScrool adalah widget related post yang sudah dimodifikasi sedemikian rupa dengan efek widget muncul secara otomatis pada area sebelah kanan bawah halaman blog ketika pengunjung atau visitor mengakses salah satu konten postingan kemudian melakukan scroll halaman pada ketinggian tertentu maka akan muncul widget related post dengan judul konten postingan secara acak sebanyak 2 buah judul. Tidak seperti biasanya widget related post diletakkan di tengah artikel atau diakhir artikel berdekatan dengan kolom komentar.

Widget Fixed Post OnScrool buatan Bang Adhy Suryadi Pemilik Website Kompiajaib ini menurut saya sangatlah keren, sehingga memberi kesan tampilan halaman blog menjadi lebih profesional dan tidak terkesan monoton. Berikut ini screenshot tampilan widget Fixed Related Post pada Blog Non Amp:

Bagi anda yang penasaran dan ingin melihat demonya secara langsung dapat berkunjung ke salah satu blog admin yaitu Wikichibi.blogspot.com dan buka salah satu atau beberapa konten postingan yang ada disana.

Bagaimana apakah anda merasa tertarik ingin menerapkan widget Keren Fixed Related Post InScrool ini?

Untuk cara pemasangannya disini akan admin jelaskan secara rinci dengan gambar pendukung agar lebih jelas, namun jika ingin langsung belajar dari sumbernya silahkan saja anda berkunjung ke blog Band Adhy Suryadi KompiAjaib.com.

Pertama-tama copy kode CSS berikut ini, dan letakkan dibawah kode <style> atau di atas </style>

 
  #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 cari dan temukan kode berikut ini pada area kode EDIT HTML Penyusun template, aktifkan dan gunakan fitur pencarian dengan menekan tombol keyboard ctrl + f kemudian pada kolom keyword masukkan kata kunci <b:includable id='main' var='top'>

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

Setelah ditemukan salin kode berikut 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>
&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>

Tempelkan kode di bawah kode penutup tepatnya di bawah kode </b:includable>

Kemudian cari dan temukan kode berikut ini:

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

Setelah ditemukan salin kode berikut ini, dan tempelkan di atas kode penutup

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

Langkah terakhir salin kode berikut ini:

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

Letakkan kode di atas kode </body> seperti tampak pada screenshot berikut ini:

Klick Tombol Simpan Tema untuk menerapkan, dan coba buka halaman atau salah satu konten postingan anda yang telah dipublikasikan, kemudian coba scrool ke bawah, maka secara otomatis pada ketinggian schrool yang telah ditentukan widget Fixed Related Post OnScrool akan muncul secara otomatis pada sisi layar sebelah kanan halaman blog.