BLOG INFO

Informasi Seputar Blog dan Tutorial

Home / All Tutorial / Blogger / Kode HTML CSS / Tutorial Blog / Cara Membuat Widget Random Post Dengan Thumbnail Gambar

Cara Membuat Widget Random Post Dengan Thumbnail Gambar

, , ,
Cara Membuat Widget Random Post Dengan Thumbnail - Hai sobat blogger AS! Kali ini saya akan membagikan tutorial Cara Membuat Widget Random Post Dengan Thumbnail . Tutorial yang satu ini sangat mudah dan tidak ribet. Hanya beberapa langkah tutorial akan selesai,namun sebelum berlanjut ke turorial langkah-langkahnya sebaiknya anda tahu terlebih dahulu apa itu random post.

Random Post ,random berarti acak dan post berarti postingan/artikel. Jadi random post adalah post yang diacak. Artikel yang muncul pada widget random post akan muncul secara acak dan otomatis tanpa kita harus memiliki. Mulai dari postingan yang lama sampai tulisan yanng baru. Random post memiliki fungsi untuk menghias,menampikan post lama agar terlihat pengunjung,dan menampilkan postingan yang tidak populer sehingga jika ditampilkan diwidget random post,postingan tersebut menjadi populer dan banyak pengunjungnya.

Random post pun juga ada beragam bentuk,mulai dari random post yang hanya berisi judul postingan,judul postingan dan thumbnail,bahkan ada pula yang berisi thumbnail saja. Ragam bentuk yang dipakaipun tergantung dari jenis/niche blog dan juga pengelola situs/blog.

Cara Membuat Widget Random Post

1. Langkah Pertama
Silakan salin kode html dibawah ini.
Kode HTML
<style type='text/css'>
#random-posts img{display:block;margin:0;margin-right:10px;padding:0;width:72px;height:72px;border:1px solid #f5f5f5;overflow:hidden;float:left}
#random-posts img:hover{opacity:0.6;}
ul#random-posts{background:#fff;list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none;}
#random-posts a{color:#64707a;transition:all .3s;display:block}
#random-posts li:hover a,#random-posts a:hover{color:#4285f4;}
.random-summary{font-size:13px;color:999}
#random-posts li{background-color:#fff;margin:0;padding:10px;min-height:65px;position:relative;border-bottom:1px solid #f5f5f5;transition:all .3s;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 0;
var randomposts_details = 'no';
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 = "";
            }
        };
        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://2.bp.blogspot.com/-F1lTdmXTr0Y/VmpR_HBcVyI/AAAAAAAAGa8/a2_2T-p3AKM/s1600/bungfrangki_no_image_100.png"
                }
            }
        };
        document.write('<li>');
        document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '" width="' + 72 + '" height="' + 72 + '"/></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>
<div class='clear'/>
</div>

#Perhatian!!
Pada kode var randomposts_number = 5; ganti kode 5 dengan jumlah postingan yang sobat inginkan muncul pada widget random post,maksimal 10 post/artikel.
2. Langkah Kedua
Silakan masuk ke dasbor blog sobat → Tata Letak → Tambahkan Gadget → HTML/JavaScript ( Lihat gambar dibawah untuk kejelasannya ) ,lalu masukkan/pastekan kode html yang sudah kita salin.

 Beri judul gadget sesuai dengan keinginan,seperti "Random Post",dll.


Jika sudah lalu klik simpan.

Selesai widget random post sudah ditambahkan diblog. Sekarang sobat sudah memilliki widget random post...silakan cek hasilnya dengan melihat blog sobat.

Itulah tutorial cara membuat widget random post dengan thumbnail,semoga artikel ini bermanfaat bagi soat blogger Indonesia.

 
Read more
at
Labels: , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)