16 June 2017

Cara Membuat Widget Random Post dengan Thumbnail di Blogger

Di dalam sebuah blog kita membutuhkan sebuah widget yang menunjang agar pengunjung dapat melihat semua artikel yang kita miliki. Untuk itulah kali ini saya membuat tutorial tentang cara membuat widget random posts dengan thumbnails di blogger.

Baca juga: Cara Membuat Widget Random Post Berdasarkan Label di Blogger

Di widget ini juga di sediakan keterangan waktu artikel di buat, banyaknya komentar, serta menampilkan sedikit isi artikel tersebut, dan yang paling penting widget random posts ini memiliki thumbnail gambar agar widget terlihat menarik.
Cara Membuat Widget Random Post dengan Thumbnail di Blogger

Fungsi widget random post ini adalah menampilkan artikel blog secara acak, tentunya di widget blog kalian. Untuk kalian yang ingin tahu cara memasang widget random posts ini, ikuti langkah-langkah dari saya berikut ini.

Cara Memasang Widget Random Posts dengan Thumbnails di Blogger

  1. Langkah pertama buka akun Blogger kalian.
  2. Pilih menu Tata Letak, kemudian pilih Tambahkan Gadget, lalu pilih HTML/Javascript.
  3. Masukan Judul widget, lalu masukan skrip di bawah ini.
  4. <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 = 10;
    var randomposts_chars = 0;
    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>
    • Catatan:
      • Ganti angka 10 dengan jumlah artikel yang kalian ingin tampilkan.
      • Ganti angka 0 dengan jumlah karakter isi artikel yang ingin di tampilkan.
      • Ganti yes dengan no apabila kalian tidak ingin menampilkan keterangan waktu dan jumlah komentar.
  5. Setelah selesai klik Simpan, jika berhasil di pasang maka tampilannya akan seperti ini.
    Cara Memasang Widget Random Post di Blog

Baca juga: Cara Membuat Widget Komentator Terbaik di Blogger

Demikian tutorial dari saya, mengenai cara membuat widget random posts dengan thumbnails di blogger. Jika ada pertanyaan tentang cara memasangnya, silahkan masukan ke dalam komentar. Jangan lupa share artikel ini agar bermanfaat bagi para blogger lainnya.

Terima kasih sudah berkunjung di blog Tutorial Umum, semoga artikel diatas bermanfaat untuk kalian semua. untuk tutorial yang lainnya mengenai blog serta widget blog, silahkan tetap kunjungi blog Tutorial Umum.

6 comments

benar sekali dengan adanya random post pengunjung bisa royal untuk berjelajah didalam blog

Artikelnya bermanfaat ni thanks :)

baru tau caranya, nanti dicoba di blog saya deh. Saya taunya tinggal apdet artikel aja.

ijin sedot gan.. lumayan nih, artikel lama jadi bisa muncul

sayang sekali ngga support https :'(

Tinggalkan Komentar anda...
Karena itu sangat membantu saya dalam membangun sebuah blog.

Perhatian, dilarang membuat Link aktif di dalam komentar.
EmoticonEmoticon