Có gì mới trên Star Cường IT
Đặt Liên Kết
Liên Hệ Quảng Cáo - Báo Lỗi
Event Tri Ân Top Bình Luận

Bài viết liên quan đẹp cho blogspot
Bài viết liên quan có hình cho blogspot chuẩn HTML5 tích hợp Quảng cáo, Bài viết liên quan đẹp cho blogspot

Ở bài viết này mình phân bố bên trái là bài viết liên quan cho blogspot chuẩn HTML5, bên phải dành cho quảng cáo với kích thước chuẩn 300x250 hoặc 300x300 rất tiện lợi mà không làm mất thẩm mỹ của template của các bạn.

Tiến hành chèn code vào template:

Bước 1: Đăng nhập vào tài khoản blogger của bạn
Bước 2: Chọn mẫu
Bước 3: Chỉnh sửa HTML nhấn Ctrl+F tìm đến thẻ ]]></b:skin> hoặc </style> Copy đoạn CSS bên dưới và Paste trên nó.
@media (max-width: 600px) {
    .post-ads {
        width: 100%;
    }
    .post-right {
        margin-left: 0 !important;
        width: 100%;
        float: left;
    }
}.post-right {
    margin: 0 0 0 310px;
    padding: 0 0 10px
}
.post-ads {
    float: left;
    margin: 0 10px 10px 0;
    position: relative
}
p.post-excerpt {
    margin: 0;
    padding: 10px;
    background-color: #ECF0F1;
    font-size: 17px;
    line-height: 1.5em;
    color: #09f
}#related-posts {
    margin: 10px 0
}
#related-posts ul li {
    list-style-type: none;
    color: #2980C1;
    font-size: 16px;
    line-height: 22px;
    max-height: 22px;
    overflow: hidden
}
#related-posts ul li a {
    color: #09f
}
#related-posts ul li a:hover {
    color: #F90053
}
#related-posts h4 {
    color: #f90053;
    border-bottom: 1px dashed #f90053;
    padding: 5px 0;
    font-size: 18px;
    margin-bottom: 5px
}
#related-posts ul {
    margin-left: 0;
padding: 0
}
#related-posts .fa {
    margin-right: 5px
}
#related-posts ul li a:before {
    content: "\f046";
    font-family: 'FontAwesome';
    color: #f90053;
    padding-right: 5px
}
#related-posts1 ul li:before {
    display: none;
}
Sau khi chèn đoạn CSS xong các bạn copy đoạn code javascript dưới đây vào trước thẻ </head>
<script type='text/javascript'>
//<![CDATA[
var titles = new Array();
var titlesNum = 0;
var urls = new Array();
var time = new Array();

function related_results_labels(c) {
    for (var b = 0; b < c.feed.entry.length; b++) {
        var d = c.feed.entry[b];
        titles[titlesNum] = d.title.$t;
        for (var a = 0; a < d.link.length; a++) {
            if (d.link[a].rel == "alternate") {
                urls[titlesNum] = d.link[a].href;
                time[titlesNum] = d.published.$t;
                titlesNum++;
                break
            }
        }
    }
}

function removeRelatedDuplicates() {
    var b = new Array(0);
    var c = new Array(0);
    e = new Array(0);
    for (var a = 0; a < urls.length; a++) {
        if (!contains(b, urls[a])) {
            b.length += 1;
            b[b.length - 1] = urls[a];
            c.length += 1;
            c[c.length - 1] = titles[a];
            e.length += 1;
            e[e.length - 1] = time[a]
        }
    }
    titles = c;
    urls = b;
    time = e
}

function contains(b, d) {
    for (var c = 0; c < b.length; c++) {
        if (b[c] == d) {
            return true
        }
    }
    return false
}

function printRelatedLabels(a) {
    var y = a.indexOf('?m=0');
    if (y != -1) {
        a = a.replace(/\?m=0/g, '')
    }
    for (var b = 0; b < urls.length; b++) {
        if (urls[b] == a) {
            urls.splice(b, 1);
            titles.splice(b, 1);
            time.splice(b, 1)
        }
    }
    var c = Math.floor((titles.length - 1) * Math.random());
    var b = 0;
    document.write("<ul>");
    if (titles.length == 0) {
        document.write("<li>Không có bài viết liên quan → </li>")
    } else {
        while (b < titles.length && b < 20 && b < maxresults) {
            if (y != -1) {
                urls[c] = urls[c] + '?m=0'
            }
            document.write('<li><a href="' + urls[c] + '" title="' + time[c].substring(8, 10) + "/" + time[c].substring(5, 7) + "/" + time[c].substring(0, 4) + '">' + titles[c] + "</a></li>");
            if (c < titles.length - 1) {
                c++
            } else {
                c = 0
            }
            b++
        }
    }
    document.write("</ul>");
    urls.splice(0, urls.length);
    titles.splice(0, titles.length)
};
//]]>
</script>

Chèn Bài viết liên quan vào nơi bạn muốn hiển thị trong blog

Copy đoạn code bên dưới

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='qc-header-post'>
<div class='post-ads'>
Đặt quảng cáo của bạn ở đây
</div>
<div class='post-right'>
<p class='post-excerpt'>
<data:post.snippet/>
</p>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<h4>
<i class='fa fa-bullhorn'/>
Bài viết liên quan:
</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var maxresults=5;removeRelatedDuplicates();printRelatedLabels(&quot;<data:post.url/>&quot;);</script><a class="home-icon" href="http://www.startuanit.net/" style="position: absolute;visibility: hidden;"></a>
</div>
</b:if>
</div>
</div>
</b:if>

Tìm đoạn code tương tự dưới đây
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/>
</div>
Và chèn trước thẻ <data:post.body/> nếu bạn muốn tiện ích bài viết liên quan xuất hiện ở trên đầu bài viết hoặt chèn sau thẻ <data:post.body/> nếu bạn muốn nó xuất hiện ở cuối cùng bài viết.
Lưu ý:
  • Tìm kiếm với đoạn code <data:post.body/> sẽ cho kết quả chính xác nhất.
  • Đôi khi trong template blogspot của bạn có nhiều hơn 1 đoạn code này nên bạn chèn code trên lần lượt vào những đoạn code bạn tìm được, tới khi nào nó xuất hiện trong bài viết thì ngừng nhé.


Bước 4: Lưu lại và xem kết quả

Lưu ý:
  1. numPosts: 5: Số lượng bài viết liên quan
  2. "Đặt quảng cáo của bạn ở đây" Thay banner hoặc code hiển thị quảng cáo
Chúc các bạn thành công
nguồn : Star Tuấn IT

BÌNH LUẬN VỀ BÀI VIẾT (13 comments)

  1. Template mình gửi thì bạn:
    Tìm dòng này:
    <script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js' type='text/javascript'/>
    Và sửa lại thành nhé:
    <script src='//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js' type='text/javascript'/>

    ReplyDelete
    Replies
    1. Do bạn chỉnh lại màu nền nên phải chỉnh lại các thuộc tính sang màu khác để không bị trùng màu nhé. Trùng là k nhìn thấy gì đâu. Ví dụ như viền avatar trong comment. Bạn tìm .comment_avatar img và sửa màu của border trong đó đang là #fff thành màu khác như đỏ, đen, xanh...nhé.

      Delete
    2. Footer credit bị lệch. Bạn tìm .alignright ul và sửa margin-left lên 270px nhé.

      Delete
    3. Tìm .widget ul và xóa thuộc tính padding của nó đi để popular posts k bị lệch.

      Delete
    4. Cái này k phải lỗi. Do bạn chỉnh lại màu nền các thứ nên phải đổi lại, còn footer thì do tên blog bạn dài quá nên nó bị lệch thôi.

      Delete
  2. A mới cập nhật thêm phần sửa lỗi và cách sử dụng. E vào đọc và sửa theo nhé.
    https://goo.gl/f2S1J3

    ReplyDelete
  3. Bỏ luôn cái bình bong bóng ở cuối đi e. Nhìn footer nó xẩu hẳn đi rồi.

    ReplyDelete

● Hướng Dẫn Chèn Liên Kết: Tên
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Bình luận của bạn sẽ được gửi đến Admin để kiểm duyệt.