[Blogspot] Thêm Random Posts Widget (bài viết ngẫu nhiên) cho blog | TSM Blogger

Home » Blogspot » Thủ thuật » [Blogspot] Thêm Random Posts Widget (bài viết ngẫu nhiên) cho blog

[Blogspot] Thêm Random Posts Widget (bài viết ngẫu nhiên) cho blog

Random Posts (bài viết ngẫu nhiên) là 1 widget có chức năng show ra những bài viết ngẫu nhiên của tất cả các nhãn hoặc bất kì 1 nhãn nào đó. Và hôm nay thì mình sẽ hướng dẫn các bạn cách làm để có 1 widget như vậy nhé, vừa để tăng view cho bài viết, vừa để trang trí, trông blog đẹp hơn.

Demo Click here

Cách làm: Bố cục - Thêm tiện ích - HTML/Javascript - Copy và paste code dưới vào khung nội dụng - Lưu lại.

Code:

<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) + "…";
        };
        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/AVvXsEgeWz8nWaxJ-gDvJOiDbPcoM7oPQQu4DPlInLXJQEzh6q1ymWbpL-4HrYDyUhxT_t7zeFyjHXWgXS3Dqb9rTaM5DS0emH3-Z2vBAwsTOgWZ86ohQs2RQSpnGBJ3UIxbNfZlkOTfTF-MRNE/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>

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;

Nguồn: tranbadat.info

Chúc các bạn thành công và luôn ủng hộ blog mình nhé!

#Blogspot #Thủ thuật

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!

0 bình luận Tổng hợp bình luận

Please Enable Javascript!Enable JavaScript