Tips/ Cara Mudah Membuat Widget Random Post dengan Gambar atau Thumbnail di Blog

Pada hari-hari menunggu panggilan kerja ini, penulis akan memaparkan tips atau cara mudah membuat widget random post di blog.

Bagi sobat yang ingin menampilkan post secara acak di blog sobat silahkan mengikuti tutorial dibawah ini:

Pertama-tama silahkan sobat login terlebih dahulu di blogger
Klik menu tata letak yang berada disamping kanan
Lalu klik tulisan berwana biru "Tambahkan Gadget" seperti gambar dibawah ini:

Baca Juga:

Maka akan muncul tampilan seperti dibawah ini:

Selanjutnya silahkan sobat klik HTML/Java Script seperti gambar di atas
Lalu masukan kode dibawah ini:

<style>

#random-posts img{border-radius: 50px;float:left;margin-right:5px;

width:75px;height:75px;background-color: #FFFFF;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;}

.rp-snippet {font-size: 11px;background: none; padding: 5px; margin-right: 8px;}

#random-posts span {}

#random-posts li {margin-bottom: 10px;border-bottom: 1px solid #EEEEEE; padding: 4px;}

</style>

var rdp_numposts=5;

var rdp_snippet_length=120;

var rdp_info='no';

var rdp_comment='comment';

var rdp_disable='Comments Disabled';

</script>

</script>

</ul>

Note:

border-radius: 50px = jika sobat ingin gambarnya kotak silahkan rubah 50px menjadi 0px

var rdp_numposts=5; = untuk mengatur jumlah post yang akan ditampilkan

var rdp_snippet_length=120; = untuk mengatur jumlah kata yang akan di tampilkan

var rdp_info='no'; = ganti dengan yes jika ingin menampilkan info post

var rdp_comment='comment'; = kata comment akan muncul bila di bagian info sobat memilih yes, sobat bisa menggantinya dengan kata lain, komentar misalnya.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir-v1mmfeWQHfdfKoSvzK42wPaHmdM22I093Sk-_SfzBkAkC_1gb1oBaI971T91GVelKBvwVRIzZr1tIJOpoab-WBslAccZhiFmiTDU6kfAM3saIM1DmAUlOiRAqR5141jBbmPp8HmgPM/s1600/no-image-available.jpg = adalah link gambar untuk menampilkan gambar pada post yang tidak memiliki gambar. Sobat bisa menggantinya dengan gambar sobat.

sumber: tutorial89

Nah terakhir silahkan klik simpan

Setelah itu silahkan test membuka blog sobat, apakah skrip yang ditanamkan dapat memunculkan random post atau tidak.

Jika skripnya berjalan maka akan memunculkan gambar seperti dibawah ini:

Jika dengan menggunakan kode skrip di atas tidak berhasil, cobalah dengan menggunakan kode

versi arlina design dibawah ini:

<style scoped='' type="text/css">
#caretet-random ul{list-style:none;margin:0;padding:0}#caretet-random li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
#caretet-random li:last-child{border-bottom:0;}
#caretet-random li a{color:#444;}#arlina-random li a:hover{color:#444;text-decoration:underline}
</style>
<div id='caretet-random'>Memuat...</div>
<script>
//<![CDATA[
// Random Post Widget
var homePage = 'http://www.caretet.com',
    maxResults = 10,
    containerId = 'arlina-random';
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
function shuffleArray(arr) {
    var i = arr.length, j, temp;
    if (i === 0) return false;
    while (--i) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
}
function caretetRandomPosts(json) {
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
    // console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
    document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}
function randomPosts(json) {
    var link, ct = document.getElementById(containerId),
        entry = shuffleArray(json.feed.entry),
        skeleton = "<ul>";
    for (var i = 0, len = entry.length; i < len; i++) {
        for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
            link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
        }
        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
    }
    ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=caretetRandomPosts"></scr' + 'ipt>');
//]]>
</script>

Note:

Silahkan sobat ubah homepage dan maxresults yang sudah penulis tandai sesuai dengan kebutuhan sobat.

Namun, jika masih saja tidak berhasil, maka sebenarnya yang bermasalah bukanlah script diatas. Melaikan theme/ template yang sobat gunakan tidak sesuai dengan skirp. Sebaiknya sobat hubungi penyedia template blog sobat, atau silahkan sobat lihat lagi dokumen yang diberikan oleh penyedia template yang sobat gunakan.

Nah itu lah tutorial membuat widget random post, semoga bermanfaat. Thanks and regard

Tips/ Cara Mudah Membuat Widget Random Post dengan Gambar atau Thumbnail di Blog

1 Response to "Tips/ Cara Mudah Membuat Widget Random Post dengan Gambar atau Thumbnail di Blog"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel