Khi cuộn trang và chạm vào cuối trang, một hộp chứa các bài đăng liên quan sẽ xuất hiện từ phía bên phải của blog, nhưng khi cuộn lên một lần nữa, hộp sẽ ẩn lại.
Ở tiện ích bài liên quan này hiển thị bài đăng liên quan với iframe để không có quá nhiều javascript được lưu trữ trên blog và iframe cũng sử dụng Lazyload để nó không can thiệp vào việc tải blog.
Bạn có thể xem
DEMO
Cài đặt tiện ích Bài viết liên quan dạng popup-slider khi cuộn trang cho blogspot
Bước 1: Thêm CSS vào phần css của blog#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} @media screen and (max-width:768px){#fixed-related,#fixed-related iframe{width:100%}}Bước 2:
Tìm mã sau
<b:includable id='main' var='top'> .......... .......... .......... </b:includable>Và đặt doạn code dưới đây ngay sau nó(sau </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>Có thể bạn cũng thích:</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' class='fixed-related-close' onclick='this.parentElement.style.display="none"' title='Tắt'><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' tab-index='0'/></svg></span> </div> </b:if> </b:loop> </b:if> </b:if> </b:includable>Bước 3 Tìm mã
<b:includable id='post' var='post'> .......... .......... .......... </b:includable>Và đặt đoạn code dưới đây ngay trước </b:includable>
<b:if cond='data:blog.pageType == "item"'> <b:include data='post' name='fixedRelatedposts'/> </b:if>Nhìn nó như thế này:
<b:includable id='post' var='post'> .......... .......... .......... <b:if cond='data:blog.pageType == "item"'> <b:include data='post' name='fixedRelatedposts'/> </b:if> </b:includable>Bước 4 Đặt đoạn javascript vào trước thẻ đóng </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>Tổng hợp.