Bài viết liên quan có hình ảnh cho blogger

Nhiều bạn có thắc mắc về vấn đề tạo thủ thuật bài viết liên quan cho blogspot.
Đây là 1 thủ thuật không thể thiếu khi bạn xây dựng 1 Blog, Website.
Bài viết liên quan giúp giữ chân người xem, giới thiệu người xem tới nhiều bài viết cùng chuyên mục, cùng chủ đề.
- Với hướng dẫn dưới đây, bạn có thể tạo dễ dàng cho mình bài viết liên quan nhẹ nhàng vẫn đem lại cảm giác mượt mà cho người xem.
Bài viết liên quan có hình ảnh cho blogger
Xem Demo tại Blog: Dịch vụ SEO

Hướng dẫn thủ thuật: Bài viết liên quan có hình ảnh cho blogger

BƯỚC 1: Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
BƯỚC 2: Sử dụng phím Ctrl + F để tìm tới </head>
BƯỚC 3: Dán code dưới đây ngay trên </head>
<!-- Bai viet lien quan hướng dẫn bởi itviet360.com -->
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:3px;border:2px solid #f2f2f2;width:98px;height:98px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:98px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script src='http://fileitviet360.googlecode.com/svn/relatedposts.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
BƯỚC 4: Dán code dưới đây đưới <div class='post-footer'>
 <!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>BÀI VIẾT LIÊN QUAN</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
- Giá trị maxresults=5 bạn hãy thay đổi theo ý của bạn nhé, số bài viết hiển thị là giá trị đó trừ đi 1.
BƯỚC 5: Lưu lại và xem kết quả :)
Bài viết liên quan có hình ảnh cho blogger

Bài viết liên quan có hình ảnh cho blogger

Nếu bạn thấy hay thì hãy để khích lệ tinh thần chia sẻ của tác giả BV "Bài viết liên quan có hình ảnh cho blogger"

No comments:

Copyright © 2014 Thanh niên Bình Định - Supported by: IT Việt