Display Random Posts on Blogger

พอเขียน blog ไปนาน ๆ บทความเก่า ๆ ก็จมหายไปกับกาลเวลา ก็เลยต้องหาวิธีชุบชีวิตให้มาปรากฏหน้าเวบบ้างด้วยการใช้ random post ค่ะ โดยวิธีนี้จะเป็นการสุ่มเลือกบทความ เก่า ๆ ขึ้นมาแสดงในแต่ละครั้งที่ refresh บทความที่ถูกสุ่มเลือกขึ้นมาก็จะแตกต่างกันไปตามจำนวนที่กำหนด วิธีการก็แค่เพิ่ม html box ตรงตำแหน่งที่ต้องการแสดง random post แล้วใส่ code ด้านล่างนี้ลงไป และก็สามารถปรับแต่งได้หลายสไตล์ค่ะ

1. ถ้าต้องการให้ thumbnail เป็นรูปสี่เหลี่ยมก็ปรับ border-radius: เป็น 0px ค่ะ แต่ถ้าต้องการให้แสดง thumbnail เป็นรูปวงกลมอย่าง blog ของเรา ก็ตั้งค่าเป็น 100px แต่ถ้าต้องการให้เป็นรูปสี่เหลี่ยมแต่ขอบโค้ง ๆ หน่อยก็อาจจะปรับเป็น 10px ก็กำลังดีนะ
2. ปรับขนาดของ thumbnail  ที่ width: กับ height: ค่ะ ตั้งค่าได้ตามขนาดที่เราต้องการให้เหมาะกับหน้า blog ของเรา กรณีที่แสดง thumbnail เป็นรูปวงกลมหรือสี่เหลี่ยมจัตุรัสก็ตั้งค่าให้ width: กับ height: มีขนาดเท่ากัน
3. สี background กับ border อันนี้ในส่วนของ thumbnail อันนี้ก็เปลี่ยนสีให้เข้ากับ blog ของเราได้โดยใส่รหัสสีตามที่ต้องการลงไป
4. ส่วนการแสดงผลจำนวนบทความให้ใส่ตัวเลขตามจำนวนที่เราต้องการให้แสดงผลใน var randomposts_number = 10; 
5. ส่วนการแสดงผลชื่อและตัวอย่างเนื้อหาบทความถ้าตั้งค่า var randomposts_details = 'no';
   randomposts_details2 = 'no'; เป็น no Random Posts จะแสดงเฉพาะชื่อบทความค่ะ ถ้าต้องการให้แสดงตัวอย่างเนื้อหาด้วยก็ตั้งค่าเป็น yes ค่ะ
6. ส่วนสุดท้ายคือการแสดงผลของความยาวตัวอย่างเนื้อหาที่จะให้แสดงกรณีที่เลือกการแสดงผลrandomposts_details เป็น yes ให้เปลี่ยนตัวเลขด้านหลัง var randomposts_chars = 60; เป็นตัวเลขตามความยาวของเนื้อหาที่เราต้องการให้แสดงค่ะ
7. และสำหรับการสั่งให้ random post จากทุกป้ายกำกับก็ใส่เป็น /feeds/posts/default? แต่ถ้าหากต้องการให้ random post จากป้ายกำกับอันใดอันหนึ่งก็เปลี่ยนเป็น /feeds/posts/default/-/ชื่อป้ายกำกับ? ใส่ชื่อป้ายกำกับตามที่ต้องการได้เลยค่ะ
   

<style>
#random-posts img {
    border-radius: 100px;
    float: left;
    margin-right: 5px;
    width: 65px;
    height: 65px;
    background-color: #F5F5F5;
    border: 1px solid #69B7E2;
    padding: 3px;
    transition: all 0.2s linear 0s;
}

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

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

#random-posts li {
    margin-bottom: 10px;
}

.random-summary {
    display: block;
}
#random-posts a {
    font-family:'Source Sans Pro', sans serif;
    font-size: 14px;
    font-style: normal;
    text-transform: none;
    padding: 0px auto 5px;
}

</style>

<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 10;
var randomposts_chars = 60;
var randomposts_details = 'no';
randomposts_details2 = '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/AVvXsEgFYeKYjrF8c4FnLhNt35fEGHq1NsswNiauRfw4Odm4akzH3BkyJsIkW5xDEHUK8fo98MGZW40wBmJks-uOxoUj7rF3PuEfwKgQQfRJDdFsoe1bpiunvtwYwwa06BkuFBBx4RcHsB2Qcu0/s512-Ic42/BlogNopictures.PNG"
                }
            }
        };
        document.write('<li>');
        document.write('<img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/>');
        document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
        if (randomposts_details == 'yes') {
            document.write('<span>' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</span>'
        }
        if (randomposts_details2 == 'yes') {
            document.write('<span class="random-summary">' + randomposts_snippet) + '</span>'
        }
        document.write('<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>