Bài viết liên quan dạng popup-slider khi cuộn trang cho blogspot

Tiện ích giới thiệu bài liên quan dạng cửa sổ thụt thò khi cuộn trang sắp chia sẻ với mọi người sau đây nó hơi giống của Add This nhưng không phải cửa sổ bật lên mà nó dạng slider ra vào khi ta cuộn tới cuối trang bài viết, cũng có nút tắt.

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.
Bài viết liên quan dạng popup khi cuộn trang cho blogspot

Ở 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 == &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>Có thể bạn cũng thích:</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' class='fixed-related-close' onclick='this.parentElement.style.display=&quot;none&quot;' 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 == &quot;item&quot;'>
<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 == &quot;item&quot;'>
<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 {&quot;item&quot;}'>
<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.
Publis: 

5 comments

  1. mình thức hiện theo các bước nhưng báo cập nhật không thành công
    1. Chắc bạn ko chính xác ở bước đó thôi.Demo vẫn đang chạy mà.
    2. Chỉ hiện thị ở trang bài viết nhé.
  2. DVD chào HL!
    HL có thủ thuật "xếp hạng bài đăng có nhiều nhận xét nhất" cho blogspot không?
    DVD chúc HL vui khỏe, thành công, an lành!
    :D
    1. Cảm ơn bác đã ghé thăm! Còn về thủ thuật bác hỏi em ko có bác ạ, bác tìm thử trên gg xem chắc có đấy.:)
🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji