Lần truy cập trước của bạn:
CÓ GÌ HOT?


Thích bài này? Bài trướcBài sau

phongthekop

Sun Oct 02, 2016 3:44 pm

#1
  • phongthekop

phongthekop



https://topvina.forumvi.com
Tổng số bài gửi : 42
xu : 2954
Cảm ơn : 4
Join date : 01/08/2016
[tip]Bài viết liên quan đẹp cho blogspot Empty [tip]Bài viết liên quan đẹp cho blogspot

topvina share code Bài viết liên quan đẹp cho blogspot/blogger.
chuẩn HTML5 tích hợp Quảng cáo, Bài viết liên quan đẹp cho blogspot

[tip]Bài viết liên quan đẹp cho blogspot Bai2bv10
demo bài viết liên quan cho blogger/blogspot trên đẹp chứ ^^

▼ Ở bài viết này Topvina chia sẻ bài viết liên quan 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.

▐ Nào,bây giờ cùng TOPVINA.XYZ 

Tiến hành chèn code bài viết liên quan 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ó.
Code:
@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>
Code:
<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>
xem tiếp #2 nhé các bạn
phongthekop

Sun Oct 02, 2016 3:55 pm

#2
  • phongthekop

phongthekop



https://topvina.forumvi.com
Tổng số bài gửi : 42
xu : 2954
Cảm ơn : 4
Join date : 01/08/2016
[tip]Bài viết liên quan đẹp cho blogspot Empty Re: [tip]Bài viết liên quan đẹp cho blogspot

Nào Bây Giờ cùng topvina.xyz làm bài viết liên quan cho blogger/blogspot tiếp nhé
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
Code:
<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.topvina.xyz/" style="position: absolute;visibility: hidden;"></a>
</div>
</b:if>
</div>
</div>
</b:if>

Tip hay của topvina là bạn có thể 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 ý: 

  • Đô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é.

  • numPosts: 5: Số lượng bài viết liên quan
  • "Đặt quảng cáo của bạn ở đây" Thay banner hoặc code hiển thị quảng cáo

Topvina.xyz

xin chúc các bạn thành công với bài viết

[tip]Bài viết liên quan đẹp cho blogspot

  • Free forum | ©phpBB | Free forum support | Báo cáo lạm dụng | Thảo luận mới nhất
skin Blog Công nghệ
Rip By : Người vô hình