Top Ad unit 728 × 90

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
DEMO
Ở 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: #E74C3C;
    border-bottom: 1px dashed #E74C3C;
    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

Bài viết liên quan đẹp cho blogspot Reviewed by Trương Ngọc Tuấn on 6/17/2016 Rating: 5

8 nhận xét:

  1. chỉ nơi chèn giống blog star tuấn vs

    Trả lờiXóa
    Trả lời
    1. Cái này tùy template mỗi người bn
      Chèn dưới tiêu đề bài viết chèn code HTML trước thẻ <div class='post-header-line-1'/>
      p/s: có thể có nhiều thẻ này nên thử chèn lần lượt xem nếu thành công thì lưu nhé

      Xóa
    2. - Cái này Test dần chứ 1 lần chưa ngon ăn :D

      Xóa
  2. sao dùng template bmag 2.0.3 luôn sao làm ko đc nhỉ

    Trả lờiXóa
  3. Cho tui xin font chữ startuan ở banner biểu tượng facebook đầu web đi thím

    Trả lờiXóa
  4. sao mình làm cái này chỉ hiển thị 2 chử đầu ah bạn, bạn xem giùm mình nhé.
    hình ảnh: https://3.bp.blogspot.com/-asJh4En4R-8/V9uVSIcs5GI/AAAAAAAAEcM/sbmGli5JG5EKSZzcoi3iqms8STAecXODQCLcB/s640/anh%2Bloid.png
    địa chỉ trang https://lenhutphuong.blogspot.com/2014/12/cach-anh-may-nhanh-bang-10-ngon-tay.html

    Trả lờiXóa
  5. sao mình làm cái này chỉ hiển thị 2 chử đầu ah bạn, bạn xem giùm mình nhé.
    hình ảnh: https://3.bp.blogspot.com/-asJh4En4R-8/V9uVSIcs5GI/AAAAAAAAEcM/sbmGli5JG5EKSZzcoi3iqms8STAecXODQCLcB/s640/anh%2Bloid.png
    địa chỉ trang https://lenhutphuong.blogspot.com/2014/12/cach-anh-may-nhanh-bang-10-ngon-tay.html

    Trả lờiXóa
    Trả lời
    1. Bên mình thấy bình thường mà bạn
      http://3.bp.blogspot.com/-utUhsMOzvYM/V9udFUbkErI/AAAAAAAAD4M/GEPHV-t0aRISMYGuixvid8Ks-E7shJ4NgCK4B/s1600/1.jpg

      Xóa

✩ Viết tiếng Việt có dấu
✩ Không spam
✩ Không chửi tục, nói bậy
✩ Không quảng cáo thông qua khung Comment.

All Rights Reserved by Star Tuấn Blog © 2015 - 2016
Powered By Blogger, Designed by Star Tuấn | Facebook | Youtube

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Được tạo bởi Blogger.