Beranda / All / New / WIDGET

Widget Blogger Dengan Thumbnail Untuk Random Posts

Dengan banyaknya posting terkadang kita tidak sanggup menampilkan semuanya sehingga kita membutuhkan tampilan posting secara acak atau random. Untuk menampilkan Random Posts dengan Gambar atau Thumbnail, silakan lakukan langkah-langkah sbb.:

1. Masuk ke akun Blogger Anda. Pilih Blog Anda dan klik pada Layout/Tata Letak > Add Gadget/Tambah Gadget.

2. Lalu klik pada HTML/JavaScript.

3. Setelah itu copy paste instruksi HTML/JavaScript berikut:

<style>
#random-posts{color:#AEADAD;font-size:10px}
#random-posts img {
    border-radius: 5px;
    float: left;
    margin-right: 5px;
    width: 65px;
    height: 65px;
    background-color: #F5F5F5;
    padding: 1px;
    transition: all 0.2s linear 0s;
}

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

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

#random-posts a {
    font-size: 13px;
    color: #686868;
    font-weight: bold;
    text-transform: none;
    padding: 0px auto 5px;
}

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

}

.random-summary {
    font-size: 9px;
    color:#AEADAD;
    background: none;
    padding: 5px;
    margin-right: 8px;
}

#random-posts li {
    margin-bottom: 10px;
    border-bottom: 1px solid #fff;
    padding: 4px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
    var randomposts_number = 10;
    var randomposts_chars = 36;
    var randomposts_details = 'yes';
    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;

Baca Juga

        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/AVvXsEj5t3xqsgdJWypxSaYIuWgHcydmasDcQgYrUSmUwUhLLAGmgzpe6ENlf6NFSdyri-_K3wRSLSU8GQwync8kXgbGP8UKjswgYaMZGkaIEXEOJ2_wUCtPZGku2P6ydDvFW5cQr1bWGKN2L_0/s1600/no_thumb.png"
                }
            }
        };
        document.write('<li>');
        document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt=" terkadang kita tidak sanggup menampilkan semuanya sehingga kita membutuhkan tampilan Widget Blogger dengan Thumbnail untuk Random Posts" 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>

Keterangan
Variabel warna orange sanggup diganti sesuai keinginan Anda.

Sumber http://patutandaketahui.blogspot.com/