Widget Related Post Peek a Boo style or suddenly came out below homepage on dcroll, and if in Javascript is show hide div when the page is scrolled
and touches the bottom of the blog.
And this time we will use
JavaScript a boo peek to display related posts. Yes ... when the page is
scrolled and touched under the page, a box containing related posts will appear
from the right side of the blog. But when the page scrolled again, the box will
hide again.
Actually there are many who
have shared a boo peek, but all of them use peek a boo for recent posts , so
this time we will do something different, namely peek a boo with related posts.
And here I also display the
related post with an iframe so that there isn't too much javascript stored on
the blog, and iframe also uses lazyload so that it doesn't interfere with
loading the blog.
If you want to try it on your blog, please follow the steps below.
Please copy the following
CSS and paste it in your blog style.
#fixed-related{position:fixed;bottom:50px;right:-352px;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);}
#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}Then please look for a code like the following:
<b:includable id='main' var='top'>
..........
.........
..........
</b:includable>After fond, please copy the following code:
<b:includable id='fixedRelatedposts' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<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>
<!-- <iframe expr:src='"https://cdn.statically.io/gh/KompiAjaib/kompi-html/e92b1ff1/fixed-related.html?fontSize=14px&color=01579B&url=" + data:blog.canonicalHomepageUrl + "&label=" + data:label.name' scrolling='no' title='Related Posts'>
</iframe> -->
<span aria-label='Close Peekaboo' class='fixed-related-close' onclick='this.parentElement.style.display="none"'><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>And paste it below the code, so it becomes like this
<b:includable id='main' var='top'>
..........
.........
..........
</b:includable>
<b:includable id='fixedRelatedposts' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<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>
<!-- <iframe expr:src='"https://cdn.statically.io/gh/KompiAjaib/kompi-html/e92b1ff1/fixed-related.html?fontSize=14px&color=01579B&url=" + data:blog.canonicalHomepageUrl + "&label=" + data:label.name' scrolling='no' title='Related Posts'>
</iframe> -->
<span aria-label='Close Peekaboo' class='fixed-related-close' onclick='this.parentElement.style.display="none"'><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>Then look for code like this
<b:includable id='post' var='post'>
..........
..........
..........
</b:includable>Then copy the following code
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='fixedRelatedposts'/>
</b:if><b:includable id='post' var='post'>
..........
..........
..........
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='fixedRelatedposts'/>
</b:if>
</b:includable>
And finally, please save the
following code above the code </body>
<b:if cond='data:blog.pageType in {"item"}'>
<script>
//<![CDATA[
function fixedRelateds(){var e=document.getElementById("fixed-related");window.pageYOffset+window.innerHeight>=document.body.offsetHeight?(e.style.transition="right 0.7s ease-in-out 0s",e.style.right="0px"):(e.style.transition="right 0.7s ease-in-out 0s",e.style.right="-452px")}window.onscroll=fixedRelateds,setTimeout(function(){!function(){var e=document.getElementById("fixed-related");e.innerHTML=e.innerHTML.replace("<!--","").replace("-->","")}()},5e3);
//]]>
</script>
</b:if>