Thủ thuật bài viết liên quan có hình ảnh ngang cho Blogger

Lưu ý: Nếu bạn gặp khó khăn với cách làm của bài viết "Thủ thuật bài viết liên quan có hình ảnh ngang cho Blogger" dưới đây hoặc mọi vấn đề khác, hãy gửi câu hỏi cho chúng tôi - TẠI ĐÂY - Đội ngũ lập trình sẽ trả lời và hỗ trợ bạn nhiệt tình sau 3 phút, 24/24h. Ok, giờ chúng ta bắt đầu

Thủ thuật hiển thị bài viết liên quan kèm ảnh Thumbnails ở đây thể hiện một cách chuyên nghiệp hơn. Đây là thủ thuật blogger cực kỳ phổ biến trong cộng đồng Blogger và Wordpress. Chúc bạn thiết kế website của mình thật tuyệt vời và hoàn hảo.

Dưới đây là hình minh họa, bạn cũng có thể xem ngay trong Blog của mình ngay cuối mỗi bài viết 

1- Đăng nhập vào blogger

2- Chọn Thiết kế
3- Chỉnh sửa HTML
4- Chọn mở rộng tiện ích mẫu
5- Dán đoạn code bên dưới vào trước thẻ </head>.

<!--Bài viết liên quan - thủ thuật blogger-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <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: 1.6em;
    font-weight: bold;
    color: black;
    font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 0em;
    }
    #related-posts a{
    color:black;
    }
    #related-posts a:hover{
    color:black;
    }
    #related-posts  a:hover {
    background-color:#d4eaf2;
    }
    </style>
    <script src='http://thietkewebplus.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
    </b:if>
    <!--Bài viết liên quan - thủ thuật blogger-->

6- Tìm đến đoạn code tương tự sau:

<div class='post-footer-line post-footer-line-1'>

Và thêm vào sau nó đoạn code dưới :

<!-- Bài viết liên quan - thủ thuật blogger -->
    <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=6&quot;'
 type='text/javascript'/></b:if></b:loop><a 
href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'
 style='display:none;'>Related Posts with thumbnails for 
blogger</a><a href='http://www.bloggerplugins.org/' 
style='display:none;'>blogger tutorials</a>
    <script type='text/javascript'>
    var currentposturl=&quot;<data:post.url/>&quot;;
    var maxresults=5;
    var relatedpoststitle="Related Posts";
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs();
    </script>
    </div><div style='clear:both'/>
    </b:if>
    <!-- Bài viết liên quan - thủ thuật blogger -->

• var maxresults=5; số 5 là giá trị max số bài viết hiển thị
• var relatedpoststitle="Related Posts"; Bạn có thể thay thế chữ Related Posts thành chữ bạn muốn như: "Nội dung liên quan"
• Save (Lưu mẫu) lại và kiểm tra kết quả.

Ban quản trị:

Bạn đang đọc bài viết "Thủ thuật bài viết liên quan có hình ảnh ngang cho Blogger". Nếu bạn đang gặp khó khăn với cách làm trên hoặc mọi vấn đề khác, hãy gửi câu hỏi cho chúng tôi - TẠI ĐÂY - Đội ngũ lập trình sẽ trả lời bạn sau 3 phút, 24/24h (Nếu bị bật ra quảng cáo, vui lòng nhấn Bỏ Qua Quảng Cáo)