Thêm widget bài viết ngẫu nhiên (Random post) cho Blogspot

Với widget bài viết ngẫu nhiên (Random post), sẽ giúp tăng tỉ lệ giúp người xem đến 1 liên kết khác trong blogspot của bạn, đồng nghĩa là tăng lượt view, thời gian view và giảm tỉ lệ thoát cho web của bạn. Chỉ cần bạn đặt widget bài viết ngẫu nhiên này ở thanh siderbar của mình, nếu một độc giả thấy được đúng nội dung họ quan tâm, thì click thôi! :) Nó thật hữu ích! ^_^

widget bài viết ngẫu nhiên (Random post)

Vậy làm thế nào để tạo widget bài viết ngẫu nhiên?

- Đầu tiên hãy vào trang quản trị tại blogger.com
- Tiếp tục chọn vào Bố cục (Layout), chọn thêm tiện ích trên thanh sidebar của bạn, và chọn HTML/JavaScript nhé.
- Thêm đoạn code này vào phần nội dung và lưu lại:
<style>
#random-posts img {
    border-radius: 1000px;
    borde:5px solid;
    color:#dddddd;
    float: left;
    margin-right: 5px;
    width: 75px;
    height: 75px;
    background-color: #F5F5F5;
    padding: 3px;
    transition: all 0.2s linear 0s;
}

#random-posts img:hover {
    opacity: 0.6;
}

ul#random-posts {
    list-style-type: none;
    padding: 0px;
}

#random-posts a {
    font-size: 12px;
    text-transform: uppercase;
    padding: 3px auto 5px;
}

#random-posts a:hover {
    text-decoration: none;
}

.random-summary {
    font-size: 11px;
    background: none;
    padding: 5px;
    margin-right: 8px;
}

#random-posts li {
    margin-bottom: 10px;
    border-bottom: 1px solid #EEEEEE;
    padding: 4px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 110;
var randomposts_details = 'no';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);

function randomposts(json) {
    total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');

function getvalue() {
    for (var i = 0; i < randomposts_number; i++) {
        var found = false;
        var rndValue = get_random();
        for (var j = 0; j < randomposts_current.length; j++) {
            if (randomposts_current[j] == rndValue) {
                found = true;
                break
            }
        };
        if (found) {
            i--
        } else {
            randomposts_current[i] = rndValue
        }
    }
};

function get_random() {
    var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
    return ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
    for (var i = 0; i < randomposts_number; i++) {
        var entry = json.feed.entry[i];
        var randompoststitle = entry.title.$t;
        if ('content' in entry) {
            var randompostsnippet = entry.content.$t
        } else {
            if ('summary' in entry) {
                var randompostsnippet = entry.summary.$t
            } else {
                var randompostsnippet = "";
            }
        };
        randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
        if (randompostsnippet.length < randomposts_chars) {
            var randomposts_snippet = randompostsnippet
        } else {
            randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
            var whitespace = randompostsnippet.lastIndexOf(" ");
            randomposts_snippet = randompostsnippet.substring(0, whitespace) + "&#133;";
        };
        for (var j = 0; j < entry.link.length; j++) {
            if ('thr$total' in entry) {
                var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
            } else {
                randomposts_commentsnum = randomposts_commentsd
            }; if (entry.link[j].rel == 'alternate') {
                var randompostsurl = entry.link[j].href;
                var randomposts_date = entry.published.$t;
                if ('media$thumbnail' in entry) {
                    var randompoststhumb = entry.media$thumbnail.url
                } else {
                    randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS0jOG4KByaxdCGBr_yuSj66o_yKQq_v_uKZmklIgT-pPKFLa3FrsxdXOHQR5q9ZwyuqWo1n2AnrveQqgzjueqMUmLyEb1E8eyvaaE0ASCqCVLloLj0_8eUDOOcwacL_e30wpLgNxTW4Y/s1600/no_thumb.png"
                }
            }
        };
        document.write('<li>');
        document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');
        document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
        if (randomposts_details == 'yes') {
            document.write('<span><div  class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
        };
        document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')
    }
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
    document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul>
- Sau khi lưu lại thì coi như bạn đã hoàn thành, đã có widget bài viết ngẫu nhiên cho blogspot của bạn!

Tuy nhiên, mặc định đoạn code này chỉ hiện title và hình ảnh của bài viết, chứ không có phần trích nội dung của bài viết, nếu bạn muốn có thêm phần trích nội dung thì tìm đến đoạn code này và thay no thành yes nhé:
var randomposts_details = 'no'; . 

Ngoài ra, bạn còn có thể tùy chỉnh số lượng bài viết hiển thị và số ký tự phần trích đoạn nội dung tại đoạn code này:
var randomposts_number = 5;
var randomposts_chars = 110;

Nếu bạn thấy bài viết ổn thì share cho mọi người nhé ^^

Post a Comment

  1. muốn xóa hiển thị tên người đăng trong code này thì xóa cái nào cậu

    ReplyDelete
  2. Chào anh Đạt.
    Cảm ơn anh về bài viết. Mình có thế chia sẻ cách tạo các bài viết liên quan được không, để mình chèn vào các vị trí cần thiết trên blog.
    Nhân tiện, mình thấy anh thiết kế hình đại diện mỗi bài viết hiệu ứng đổ bóng rất đẹp, anh có thể chia sẻ cách làm và dùng phần mềm nào được không?
    Cảm ơn anh và rất vui được làm quen.

    ReplyDelete
    Replies
    1. Hiệu ứng đổ bóng mình dùng Photoshop nha, nếu bạn muốn nhanh hơn nữa thì Google tìm: Action Long Shadow cho Photoshop là được :D

      Còn bài viết liên quan là nó mặc định thế rồi, không chèn, thêm bớt nó chổ khác được =))

      Delete
    2. HỒ THANH PHONG

      cái này là học thêm về rip template hoặc rip widget là sẽ rõ mình biết nhưng bận 0 nói được bạn tự mày mò nhé

      Delete

[blogger]

Author Name

Contact Form

Name

Email *

Message *

Powered by Blogger.