Widget Random post keren untuk Blogger dengan gambar Terbaru

Ketika blog Anda memiliki terlalu banyak posting, pengunjung tidak selalu memiliki waktu atau keinginan melihat semua posting yang ditulis di blog tersebut. Dengan demikian, sebuah widget Random post (post acak) dapat memungkinkan pengunjung untuk menemukan konten lebih mudah dan ini benar-benar berguna. Tutorial ini akan menunjukkan cara menambahkan random posts widget untuk menampilkan daftar posting secara acak dengan thumbnail dan kutipan.

Menambahkan Random Posts dengan Thumbnail dan Posting Ringkasan Blogger

Langkah 1

Login ke akun blogger Anda, pilih blog Anda dan pergi ke Layout.

Langkah 2

Tambahkan widget baru dengan mengklik tautan Tambahkan gadget dan pilih Html / JavaScript dari jendela popup.

Langkah 3

Setelah menambahkan HTML / JavaScript Anda perlu menyalin script berikut dan paste di kotak Konten.

<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 = "http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/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>

Pengaturan Random Posts

Ukuran Thumbnail: untuk mengubah ukuran thumbnail dalam piksel, mengganti nilai 75px.

panjang kutipan: Anda dapat mengontrol panjang ringkasan (dalam karakter) dengan mengubah 110 nilai dari var randomposts_chars = 110;

Pasang Info: jika Anda ingin menyembunyikan tanggal posting dan jumlah komentar ubah 'yes' dari var randomposts_details = 'yes'; menjadi 'no';

Ukuran Font untuk Posting Judul dan Ringkasan: untuk mengubah ukuran font potongan posting, gubah nilai 11px dan untuk judul posting, ganti nilai 12px;

Klik tombol Save dan Lihat blog Anda. sidebar akan menampilkan widget random post pada setiap halaman blog Anda.