[Tips] Cara Membuat Widget Random Post yang Simpel di Blog

Widget random post yang simpel ini akan menampilkan artikel yang ada pada blog kalian secara acak dibagian sidebarnya. Widget ini akan menampilkan gambar thumbnail dan judul dari postingan kalian. Style dari widget ini adalah "clean" jadi tidak terlihat semak dan ramai.

Keuntungan dari widget ini adalah adanya kemungkinan bagi visitor blog kalian untuk membaca postingan-postingan kalian yang sudah sangat lama kalian publish. Widget ini juga berguna agar visitor bisa membaca artikel-artikel di blog kalian yang tidak berhasil masuk di page pertama Google search. Saat kamu memasang widget ini di blog kalian, saya sangat yakin jumlah page view dan juga visitor blog akan semakin banyak dan juga mereka akan menghabiskan waktu lebih lama membaca artikel-artikel menarik yang ada di blog kalian. Tentu dengan semakin lamanya seorang visitor berada di blog kalian, maka bounch rate blog kalian pun akan semakin menurun.

Keuntungan memasang Widget Random Post yang Simpel di Blog :

> Jumlah pageview meningkat
> Persentase artikel lama ikut terbaca meningkat
> Menurunkan Bounch rate blog

Bagaimana cara memasang Widget Random Post yang Simpel di Blog?

Step 1 : Login ke dashboard blog kalian lalu pilih Layout

Step 2 : Pilih Add a Gadget pada layout bagian sidebar

Step 3 : Pada pop-up yang muncul, pilih HTML/JavaScript

Step 4 : Copy script dibawah ini dan pastekan di box HTML/JavaScript tadi. Jangan lupa membuat judul, misalnya "Paling Sering Dibaca, Recent Posts, dll"

<style>#random-posts img {    float: left;    margin-right: 10px;    width: 65px;    height: 65px;    background-color: #F5F5F5;    padding: 3px;}ul#random-posts {    list-style-type: none;}
#random-posts li {    margin-bottom: 10px;}
.random-summary {    display: block;}</style>
<ul id='random-posts'><script type='text/javaScript'>var randomposts_number = 5;var randomposts_chars = 60;var randomposts_details = 'yes';randomposts_details2 = '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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ_6kz-QpfvEy9YyiTYNfmsRae6dIbW1HMDuLnBD9Pv8nJ8GrsEVtyOxNolIPIGwk2Cxvx8PdypxkjDqbzYMenA0T4V2GJq4YGHjevsX4tzVkmQg2J0m1M7LC0CBHeViAaTkVBNDloOEY/s1600/no_thumb.png"                }            }        };        document.write('<li>');        document.write('<img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/>');        document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');        if (randomposts_details == 'yes') {            document.write('<span>' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</span>'        }        if (randomposts_details2 == 'yes') {            document.write('<span class="random-summary">' + randomposts_snippet) + '</span>'        }        document.write('<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 style="font-size: 10px; float: right;"><a href="http://www.muammarkhalid.com/2015/12/tips-cara-membuat-widget-random-post.html" rel="nofollow">Random Posts Widget</a></div>

Step 5 : Jangan lupa tekan tombol Save

Kostumisasi Widget Random Post yang Simpel di Blog :

 > Thumbnail Dimensions

Untuk mengubah ukuran dari thumbnail [width: 65px; height: 65px;]. kalian bisa mengubahnya dengan mengganti nilai dari thumbnail tersebut.

> Number of Posts

Ganti nilai "5" di bagian [ var randomposts_number = 5; ] ke nilai yang kalian suka. Nilai ini menentukan berapa jumlah postingan yang akan ditampilkam pada widget

> Add Text Snippets

Ganti "yes" ke "no" dari [ randomposts_details2 = 'no'; ]. Bagian ini akan menentukan apakah kalian akan menampilkan judulnya saja atau judul + sedikit ulasan artikel

> Snippets Lenght

Untuk menambahkan jumlah karakter snippet yang ditampilkan, ganti nilai pada bagian [ var randomposts_chars = 60; ]

> Posts Information

Jika kamu tidak suka tanggal dan komentar tampil di widget tersebut, kalian bisa menghilangkannya dengan menggati 'yes' ke 'no' di bagian [var randomposts_details = 'yes';]

Kesimpulan

Saya berharap artikel Cara Memasang Widget Random Post yang Simpel di Blog ini bermamfaat dan work di blog kalian. Jika kalian mempunyai masalah saat memasang widget tersebut, silahkan berkomentar dibawah dan saya akan membalasnya secepat mungkin. Thank you all, happy blogging!