Thứ Hai, 22 tháng 6, 2015

Thêm mục bài đăng liên quan vào Blogspot

Hôm nay mình sẽ hướng dẫn các bạn thêm mục bài viết liên quan cho Blogspot của mình. Sau đây là hình minh họa:
Sladar Gai demo bài viết liên quan trong blogspot
Bài viết liên quan như của mình nhé
Đầu tiên các bạn dán code này vào sau thẻ ]]></b:skin>:
<!--bai lien quan-->
#relatedPosts{float:left;margin:30px 0;width:640px}

#relatedPosts h2{margin-bottom:20px;padding-bottom:5px;border-bottom:solid 3px #3b5998}
#relatedPosts h2 span{padding:8px 10px;background:#3b5998;color:#fff}

#relatedPosts ul{margin:0;padding:0;list-style-type:none}
#relatedPosts ul li{padding:10px 0;border-bottom:dashed 1px #ccc;}
#relatedPosts ul li:last-child{border-bottom:0}

#relatedPosts h3{margin-bottom:8px}
#relatedPosts h3 a{margin:0;font:18px Time new roman;color: #3b5998;font-weight:600}
#relatedPosts h3 a:hover{color:#3b5998}
#relatedPosts img{float:left;border:1px solid #BBB;margin-right:10px;width:86px;height:80px;background:#FFF;padding:3px}
<!--end bai lien quan-->
Sladar Gai demo bài viết liên quan trong blogspot
Dán như này nhé
Sau đó các bạn dán đoạn mã sau vào thẻ <data:post.body/> bên trong thẻ <b:includable id='post' var='post'>. Nhớ là đặt code sau đây vào phía sau nó nhé:
Lưu ý là có hai đoạn <data:post.body/>   đấy! Một ở bên ngoài thẻ <b:includable id='post' var='post'>  cái thứ hai là ở trong.
<!--bai lien quan--><b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='clear:both' />
    <div id='relatedPosts'>
        <script type='text/javascript'>
            var ry = '<h2><span>Bài viết liên quan</span></h2>';
            rn = '<h2>Không có Bài viết liên quan</h2>';
            rcomment = 'Nhận xét';
            rdisable = 'Tắt Nhận xét';
            commentYN = 'yes';
        </script>
        <script type='text/javascript'>
            //<![CDATA[
            var dw = '';
            titles = new Array();
            titlesNum = 0;
            urls = new Array();
            timeR = new Array();
            thumb = new Array();
            commentsNum = new Array();
            comments = new Array();

            function relatedPost(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 ('thr$total' in d) {
                            commentsNum[titlesNum] = d.thr$total.$t + ' ' + rcomment
                        } else {
                            commentsNum[titlesNum] = rdisable
                        };
                        if (d.link[a].rel == "alternate") {
                            urls[titlesNum] = d.link[a].href;
                            timeR[titlesNum] = d.published.$t;
                            if ('media$thumbnail' in d) {
                                thumb[titlesNum] = d.media$thumbnail.url
                            } else {
                                thumb[titlesNum] = 'http://1.bp.blogspot.com/-RQUMaFRM5Hs/VX455E9PiVI/AAAAAAAAA_I/AUEt7isN8hc/s1600/no-image.PNG'
                            };
                            titlesNum++;
                            break
                        }
                    }
                }
            }

            function delRelatedDuplicates() {
                var b = new Array(0);
                c = new Array(0);
                e = new Array(0);
                f = new Array(0);
                g = new Array(0);
                for (var a = 0; a < urls.length; a++) {
                    if (!containsBox(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] = timeR[a];
                        f.length += 1;
                        f[f.length - 1] = thumb[a];
                        g.length += 1;
                        g[g.length - 1] = commentsNum[a]
                    }
                }
                urls = b;
                titles = c;
                timeR = e;
                thumb = f;
                commentsNum = g
            }

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

            function displayRelatedLabels(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);
                        timeR.splice(b, 1);
                        thumb.splice(b, 1);
                        commentsNum.splice(b, 1)
                    }
                }
                var c = Math.floor((titles.length - 1) * Math.random());
                var b = 0;
                if (titles.length == 0) {
                    dw += rn
                } else {
                    dw += ry;
                    dw += '<ul>';
                    while (b < titles.length && b < 20 && b < maxresults) {
                        if (y != -1) {
                            urls[c] = urls[c] + '?m=0'
                        }
                        if (commentYN == 'yes') {
                            comments[c] = ' - ' + commentsNum[c]
                        } else {
                            comments[c] = ''
                        };
                        dw += '<li><img alt="' + titles[c] + '" src="' + thumb[c] + '"/><div><h3><a href="' + urls[c] + '" rel="nofollow">' + titles[c] + '</a></h3><span>' + timeR[c].substring(8, 10) + '/' + timeR[c].substring(5, 7) + '/' + timeR[c].substring(0, 4) + comments[c] + '</span></div><div style="clear:both"></div></li>';
                        if (c < titles.length - 1) {
                            c++
                        } else {
                            c = 0
                        }
                        b++
                    }
                    dw += '</ul>'
                };
                urls.splice(0, urls.length);
                titles.splice(0, titles.length);
                document.getElementById('relatedPosts').innerHTML = dw
            };
            //]]>
        </script>


        <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=relatedPost&quot;' type='text/javascript' />
        </b:loop>
        <script type='text/javascript'>
            var maxresults = 6;
            delRelatedDuplicates();
            displayRelatedLabels('<data:post.url/>');
        </script>
    </div>
    <div style='clear:both' />
</b:if>

<!-- end bai lien quan-->
Sau đó bạn lưu và xem lại thành quả nhé.
Nếu không thích mẫu, bạn có thể sửa lại màu sắc và kích thước trong phần đã thêm trước thẻ ]]></b:skin>
Chúc các bạn thành công!

Nguồn: Thư pháp Thanh Phong | Thư pháp Việt

Không có nhận xét nào:

Đăng nhận xét

DỊCH VỤ ÔNG ĐỒ

VIẾT THƯ PHÁP CHUYÊN NGHIỆP

LUYỆN TẬP HÀNG NGÀY