×

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

Bài viết liên quan dạng popup 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.

Ở 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 các bạn cần thực hiện theo các bước sau:


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/dautoblogger/bootstrap/master/tdb-pu-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.

Không có nhận xét nào:

Đăng nhận xét

Bạn có thể sử dụng biểu cảm yahoo

Ads in post custom

Ads in post custom1

Ads in post custom2

Ads in post custom3