Bikin Random Post Acak untuk Blogger dengan thumbnail gambar dan cuplikan

OC _ Ketika blog Anda memiliki terlalu banyak posting, pengunjung tidak selalu memiliki waktu atau keinginan untuk pergi melalui semua posting yang ditulis di sana untuk membuat ide dari konten blog. Dengan demikian, sebuah posting widget acak yang akan memungkinkan pengunjung untuk menemukan konten yang lebih mudah bisa benar-benar berguna. Tutorial ini akan menunjukkan cara untuk menambahkan random posts widget untuk menampilkan daftar posting secara acak dengan thumbnail dan kutipan.

Bikin Random Post Acak untuk Blogger dengan thumbnail gambar dan cuplikan

Lihat Demo

Menambahkan Random Posts dengan Thumbnail dan Ringkasan Posting di 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 popup window.

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

Klik show untuk melihat

atau

Klik show untuk melihat

<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) + "";

        };

        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/AVvXsEhUPcJiBW1FPCNp14Df7_u5N239G7PoUuqX78RA4Jbk8h80ZgZOUAH0QtdBXtmJl-1OGxRhL8mb6abuKnFRB7DX1zs8OkyZjM3rtksfsWPB9AQrPstEWafv8_uFd9cJE2Cw4gfO3mBO79s/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>

Random Posts Pilihan
- Dimensi Thumbnail: untuk mengubah ukuran thumbnail dalam piksel, ganti nilai 75px.
- Ringkasan panjang: Anda dapat mengontrol panjang ringkasan (dalam karakter) dengan mengubah nilai 110 dari randomposts_chars var = 110;
- Pasang Info: jika Anda ingin menyembunyikan tanggal posting dan komentar menghitung perubahan 'ya' dari randomposts_details var = 'yes'; to 'no';
- Ukuran Font untuk Posting Judul dan Ringkasan: untuk memodifikasi ukuran font untuk jabatan potongan mengubah nilai 11px dan untuk judul tulisan, nilai 12px;

Klik tombol Save dan Lihat blog Anda. Sidebar akan menampilkan posting acak widget pada setiap halaman blog Anda.

Anda baru saja membaca artikel tentang - Bikin Random Post Acak untuk Blogger dengan thumbnail gambar dan cuplikan. Silahkan baca artikel berikutnya Tentang - - Jangan lupa g+1 / fb / twit :)