Gợi ý Bài viết liên quan không chỉ giúp giảm tỉ lệ thoát trang bởi khách truy cập có khả năng xem những bài viết được gợi ý theo cùng chủ đề họ tìm kiếm là rất cao. Mà còn giúp tăng trải nghiệm người dùng với Blog (Website) của các bạn. Mặt khác nó còn giúp Blog (Website) của các bạn trở nên chuyên nghiệp hơn.
Khác với 2 bài chia sẻ trước:
- Tự động chèn Bài viết liên quan (Related posts) vào giữa bài viết Blogspot
- Thêm gợi ý Bài viết liên quan (Related posts) tự động vào giữa bài đăng Blogspot
Là chèn trực tiếp Bài viết liên quan vào giữa bài đăng. Thủ thuật lần này mình chia sẻ là gợi ý Bài viết liên quan hiển thị khi cuộn trang. Tức là khi người dùng kéo xuống một khoản nhất định thì gợi ý Bài viết liên quan sẽ được trượt ra từ bên phải màng hình. Demo ngay trên Blog của mình luôn nhé.
Đối với một số bạn không hiểu nhiều về code vui lòng lưu lại Template trước khi chỉnh sửa bất cứ gì trong HTML nhé.
Gợi ý Bài viết liên quan hiển thị khi cuộn trang
Bước 1: Thêm CSS
Các bạn truy cập vào trang quản trị Blogger -> Chủ đề -> Chỉnh sửa HTML. sau đó dán đoạn CSS dưới đây vào trước thẻ ]]></b:skin>
#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:#0084ff;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}
@media screen and (max-width:468px){#fixed-related,#fixed-related iframe{display: none;}} là gợi ý Bài viết liên quan sẽ không hiển thị trên màn hình từ 468px trở xuống (màn hình mobile). Các bạn có thể xóa bỏ nếu muốn cho hiển thị trên tất cả kích thước màn hình.
Bước 2:
<b:includable id='main' var='top'> sau đó dán đoạn code dưới đây vào sau thẻ </b:includable> của nó.<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 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 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 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>Có thể bạn 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 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ước 3:
<b:includable id='post' var='post'> sau đó dán đoạn code dưới đây vào trước thẻ </b:includable> của nó.<b:if cond='data:blog.pageType ==
"item"'>
<b:include data='post' name='fixedRelatedposts'/>
<b:includable id='post' var='post'>
..........
..........
..........
<b:if cond='data:blog.pageType ==
"item"'>
<b:include data='post' name='fixedRelatedposts'/>
</b:if>
Bước 4:
</body> và dán đoạn javascript dưới đây vào trước nó.<b:if cond='data:blog.pageType in
{"item"}'>
<script>
//<![CDATA[
function
scrollFunction(){if(document.body.scrollTop>2500||document.documentElement.scrollTop>2500){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 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:includable> trong 1 đoạn code dài thì xem qua video mình làm thị phạm nhé!
Facebook