Tạo Widget ''Có Thể Bạn Đang Tìm'' Cho Blogspot - Random Post Đẹp

Chào các bạn, theo yêu cầu của một bạn gửi đến yêu cầu mình chia sẻ widget "Có thể bạn đang tìm". Thực chất nó là một widget Random Post (bài đăng ngẫu nhiên) đấy.
Mình đã chỉnh sửa một tí CSS lại để nhìn đẹp và phù hợp hơn. Code mình lấy từ đâu cũng không nhớ nữa :v
Tạo Widget ''Có Thể Bạn Đang Tìm'' Cho Blogspot - Random Post Đẹp

Bạn chỉ cần tạo một widget HTML/Javascript rồi chèn toàn bộ code này vào là được.

<style>
#random-posts img{border-radius:5px;float:left;margin-right:10px;width:45px;height:45px;transition:all 0.2s linear 0s}
#random-posts img:hover{opacity:0.6}
ul#random-posts{list-style-type:none;padding:0}
#random-posts a{font-size:17px;padding:0}
#random-posts a:hover{text-decoration:none}
.random-summary{font-size:11px;background:none;padding:5px;margin-right:8px;display:none!important}
#random-posts li{margin:0;border:0;padding:0}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 6; // Số lượng bài viết hiển thị
var randomposts_chars = 110; // Số kí tự của phần mô tả
var randomposts_details = 'no'; // Hiển thị mô tả
var randomposts_comments = 'Comments'; // Bình luận
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/AVvXsEj4tmsI7A5XqRVOXhWu9rkcZIoqLOhAsezMUip7QZ7t7aB2t05JwVU3WMCW8bVLEJoQsorvrz04d2oLihnE6kJA-QUbsk7ADUFzs1gperFoeRpCfgyh6pwq8wSOBLWamyGIln40qMpWO2Wn/s150/logo+stc.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>
Dành cho những bạn nào muốn xem trước , thì có thể xem trước hình bên dưới :
Tạo Widget ''Có Thể Bạn Đang Tìm'' Cho Blogspot - Random Post Đẹp


Đơn giản thế thôi, hy vọng bạn sẽ thích nó. Chỉnh sửa những chỗ in đậm màu đỏ lại cho phù hợp nhé. Chúc bạn thành công!
Nguồn : Bác Sĩ Windows



1 nhận xét:

➥ Nhập địa chỉ Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
➥ Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
➥ Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.