Danh mục bài viết liên quan dạng Widget

Danh mục bài viết liên quan dạng Widget cho bạn nào muốn đây.

Widget này sẽ tạo ra danh sách các bài viết liên quan ngay trên trang chủ (trong bài viết) hoặc ngay bên dưới bài viết tùy ý bạn. Bằng cách đặt tính năng này, nội dung các bài viết khác có cơ hội tiếp cận đến với người dùng nhiều hơn để họ có nhiều lựa chọn và đặt biệt là giảm tỉ lệ thoát của blog.

Cách làm:

Đầu tiên là phần hiển thị ngay trên Home page

Bước 1: Đăng nhập vào trang quản lý tổng thể -> Mẫu -> Chỉnh sửa HTML

bạn tìm khóa đóng </head>

Bước 2: và thêm đoạn code dưới vào ngay phía trước thẻ </head>

<!--Related Posts with thumbnails Scripts Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'> /* remove this */
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
vardefaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-FlcNjMRixMB5gYqUwzO6cjxdOpaCxmxkO1PAvIIus49e5IfPA5ZqpO9bb9NWzX2VltxFjxUjewyx2i0ZLJmaVwdCfpA76J0CLRKIuqjZpXeamZ1WStWdD_YPCfA7aeMq39qsqsJwruI/s400/noimage.png";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script><a href="http://netoopsblog.blogspot.com" style="font-size:0pt">Blogger Widgets</a>
<script src='http://netoopscodes.googlecode.com/svn/netoops-related-posts-with-thumbnails-blogger.js' type='text/javascript'/>
</b:if> /* remove this */
<!--Related Posts with thumbnails Script End-->

Thay đổi các thông số theo màu nhé :)

Nếu muốn widget hiển thị ở trang chủ thì bạn bỏ đi phần màu đỏ bên trên.

Đặt URL của hình ảnh để hiển thị nếu trong bài viết không có hình ảnh

Số bài viết hiển thị trong widget

Hiệu ứng màu sắc của bài viết khi rê chuột vào

Tiếp theo là phần hiển thị ỏ Footer bên dưới bài viết

Bước 1: bạn vào chỉnh sửa HTML và tìm đoạn code  <div class='post-footer'> 

Bước 2: Thêm đoạn code bên dưới vào phía trên đoạn <div class='post-footer'> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://netoopsblog.blogspot.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3ljggtMOh2qVRD46kOnH7AfKH0SB2VAOmh-y1HkLQ_Us_6htmGrXDusgsS9LoFbMNY-gFeP1ves7lMGV-DTV5uVjsXzP1_r2qQwk6PZbqIPMcqk0iLXnREmFtSvMGX2sIIT6fNralzA4/s1600/1x1juice.png'/></a>
</b:if></b:if>

Xóa phần màu cam để thêm bài viết liên quan đến trang chủ

Phần màu đỏ là số bài viết hiển thị

Xong

Chúc các bạn thành công.

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait