Membuat Random Post Widget Untuk Blogger dengan ThumbNail yang cepat Loadingnya

Membuat Random Post Widget Untuk Blogger dengan ThumbNail yang cepat Loadingnya

Langsung aja:

Langkah 1:
Masuk ke blogger dan log in
Lalu pilih Layout

Langkah 2:
Pilih Add Gagdet lalu pilih HTML/JavaScript

Langkah 3:
Lalu masukkan script berikut ini ke contentbox


=============

<style>

#random-posts img {

    border-radius: 10px;

    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: 0px 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 = '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;

        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/AVvXsEhiOCG83mxPN9ZErN5dkOYboPp2rvH0xTadJ_D6uyuSJDEAHPf5ULrd5s22Av9xVX-3BouZFAvTCks9mpPgNQ7zTi1Mes2ilWUl-i4A5LBO7KK3bTlm29TQ49TnjKZPwobEYDhTnNlXAqU/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>

===========

Settingan:
- Ukuran Thumbnail: Ganti Height dan Weight nya dari 75px ke nilai yang lain.

- Panjang Text Summary: Ganti nilai dari var randomposts_chars=110 ke nilai yang lain.

- Post info: Jika anda ingin menghapus tanggal postingan dan comentarnya, ganti nilai 'yes' pada var randomposts_details='yes' menjadi 'no;.

- Font size: mengubah ukuran font untuk text judul 12px dan text summary 11px menjadi nilai yang lain.


Sumber: http://bit.ly/1R2mGGt