Cara Membuat Fixed Related Post OnScroll di Blogger

Usuluddin, S.Kom    Kamis, Maret 12, 2020    TUTORIAL   

Cara Membuat Fixed Related Post OnScroll di Blogger

GoSEO.id - Pada kesempatan kali ini GoSEO.id 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 :

Table of Content

• Cara Membuat Fixed Related Post OnScroll di Blogger
• Penutup

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

Penutup

Sekian tutorial "Cara Membuat Fixed Related Post OnScroll di Blogger". Semoga artikel ini bermanfaat. Silahkan tinggalkan komentar jika ada yang tidak kamu mengerti.

Jangan lupa untuk share dan isikan email kamu pada Newsletter untuk mengikuti update-an terbaru kami. Terima kasih sudah mampir dan membaca artikel ini.