Selasa, 20 November 2018

Cara Membuat Widget Random Post Keren di Blogspot

Cara Membuat Widget Random Post Keren di Blogspot  - Widget random post biasanya dijadikan sebagai pengganti dari widget popular post karena semakin tingginya trafik blog, widget popular post akan dilirik oleh kompetitor sebagai cara untuk membuat konten yang sama karena dianggap sebagai artikel yang paling banyak dikunjungi pada blog kita.

Widget random post ini adalah sebuah widget yang menampilkan artikel secara acak dan ini bermanfaat sekali untuk merambah semua artikel agar terbaca dan dikunjungi oleh para pengunjung blog sehingga semua artikel akan memiliki kesempatan untuk selalu dibaca.

memasang widget random post keren di blogspot

Cara Membuat Widget Random Post Tanpa Thumbnail


1. Kunjungi dasboard blogspot anda
2. Pergi ke tata letak, kemudian pilih tambahkan gadget dan pilih HTML/Javascript.
3. Masukan judul widget dan pastekan kode script dibawah ini.
<script type="text/javascript">
var randarray = new Array();
var l=0;
var flag;
var numofpost=5;
function randomposts(json){var total = parseInt(json.feed.openSearch$totalResults.$t,10);for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";document.write(item);}}}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
*Pada var numofpost=5; silahkan ganti angka 5 sesuai dengan jumlah postingan yang akan kamu tampilkan.
4. Tekan simpan jika sudah selesai. Widget random post sudah bisa kamu lihat

Cara Membuat Widget Random Post Menggunakan Thumbnail


1. Kunjungi dasboard blogspot anda
2. Pergi ke tata letak, kemudian pilih tambahkan gadget dan pilih HTML/Javascript.
3. Masukan judul widget dan pastekan kode script dibawah ini.
<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 = 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 = "";
            }
        };
        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>
Keterangan:
*Pada var randompost_number = 5; silahkan ubah angka 5 sesuai dengan jumlah postingan artikel yang ingin kamu tampilkan
*Pada var randompost_chars = 0; silahkan ubah angka 0 sesuai dengan jumlah karakter kutipan dari artikel yang ditampilkan, jika ingin tanpa kutipan artikel bisa diubah menjadi angka 0 saja.
*Pada var randompost_details = 'no' silahkan ubah menjadi yes jika kamu ingin menampilkan tanggal dan jumlah komentar dalam artikel dan ubah menjadi no jika kamu ingin menyembunyikan tanggal dan jumlah komentarnya.

Itulah cara membuat random post dengan thumbnail dan tanpa thumbnail, silahkan share keteman kamu agar mereka juga menggunakan widget random post. Berkomentar juga jika kamu mengalami kesulitan atau sekedar ingin bertanya seputar widget random post.


EmoticonEmoticon