Membuat Random Post Dengan Thumbnails Yang Ringan di Blog

Pada postingan kali ini saya kembali berbagi sebuah Widget keren kepada Anda, Widget tersebut adalah Widget Random Post Dengan Thumbnails keren, ringan dan cepat Loadingnya. Mungkin sudah banyak yang memposting artikel tentang Widget Random Post Dengan Thumbnails, namun kali ini saya akan bagikan lagi kepada Anda, pengunjung setia "Berbagi Tips Blogger". Fungsi dari Widget Random Post Dengan Thumbnails itu sendiri adalah selain mempercantik tampilan Blog, juga berfungsi untuk mengangkat artikel-artikel lama secara acak, sehingga bisa tampil secara acak di Blog. Dan tentunya artikel lama akan kembali tampil di sidebar, walau secara acak.

Saya mulai saja Cara Membuat Random Post Dengan Thumbnails, ikuti langkah-langkah di bawah ini :

1). Setelah login di Blogger >> Masuk ke Tata Letak >> Pilih Add Gadget >> HTML/Java Script
Kemudian Salin dan Paste-kan Kode HTML di Bawah ini ke jendela Gadget yang terbuka tadi.

<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 = 20;
var randomposts_chars = 110;
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 = "https://lh3.googleusercontent.com/-AIK3oJkjutk/VrU4eSZUGFI/AAAAAAAAA0I/-9JwIbhq5j4/s426/th.jpg"
}
}
};
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 :
var randomposts_number = 20; (Jumlah Pos yang Ingin Ditampilkan)
var randomposts_chars = 110; (Jumlah Karakter Artikel yang ingin Ditampilkan)

2). Setelah semua langkah di atas beres, jangan lupa Klik Save. Sekarang Widget Random Post Dengan Thumbnails sudah ada di Blog Anda. Selamat mencoba.

Contoh Blog Dengan Random Post Dengan Thumbnails http://www.wayan-bali.com

Search Post

Label :