Tutorial

  • Android
  • Blogger
  • Pendidikan
  • Printer
  • Komputer
  • MedSos
  • Widget Fixed Post OnScrool is a related Post widget that has been modified in such a way that the widget effect appears automatically on the bottom right area of the blog page when a visitor or visitor accesses one of the post content later Do a page scroll at a certain height then the widget will appear related post with a random post content title as many as 2 titles. Unlike the usually related post widget placed in the middle of the article or at the end of the article adjacent to the comment field.

    Widget Fixed Post OnScrool made in Bang Adhy Suryadi Website owner KompiAjaib This, in my opinion, is very cool, so that gives the impression of the blog page look more professional and not impressed monotonous. Here's a screenshot of the Fixed Related Post widget view on Non-Amp Blog:

    For those of you who are curious and want to see a demo directly can visit one of the blog Admins of Wikichibi.blogspot.com and open one or several content posts that are there.

    How do you feel interested to apply this cool Fixed Related Post InScrool widget?

    For the way the installation here will be the admin explain in detail with the supported image to be more obvious, but if you want to directly learn from the source please you visit the blog Adhy Suryadi Band KompiAjaib.com.

    First copy the following CSS code, and place it below the code <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}
    

    Then locate and locate the following code in the HTML EDIT code area of the template composer, enable and use the search feature by pressing the keyboard key CTRL + F then in the keyword field enter the keyword <b:includable id='main' var='top'>

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

    Once found copy the following code

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

    Paste the code below the closing code exactly below the code </b:includable>

    Then locate and locate the following code:

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

    Once found copy the following code, and paste it above the closing code

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

    The last step is to copy the following code:

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

    Put code above code </body> As shown in the following screen shot:

    Klick the Save Theme button to apply, and try to open the page or one of your published post content, then try the scroll downwards, automatically at a predefined scroll height of the Fixed Related Post widget OnScrool will appear automatically on the right side of the screen on the blog page.

    Artikel Terkait:
    Bagi Anda yang ingin mendapatkan notifikasi update setiap harinya silahkan bergabung WhatsApp Group Gabung Sekarang
    Comment Sekarang