sambilngopi: Menambah Widget Random Posts di Blogger

a. Prelude

“Random Posts” adalah terminasi untuk menyebutkan tampilan daftar postingan secara acak. Acak dalam artian, script digenerate untuk menampilkan daftar postingan tanpa terikat suatu syarat kondisional seumpama “popularitas” atau “label” ataupun “kategori”. Keuntungan dari menyediakan script random posts di situs akan sangat terasa ketika kita telah memiliki banyak tulisan dalam arsip.

Dengan semakin banyaknya entry tulisan dalam arsip situs kita, maka banyak dari tulisan lama bisa dipastikan akan “terbenam” seiring bertambahnya entry. Kita tidak bisa mengharapkan pengunjung situs untuk membongkar arsip tulisan kita. Tidak sama sekali.

Script Random Posts bisa memberi solusi bagi pengelola sesebuah situs web, ketika script ini dimaksudkan akan menampilkan entry-entry lama secara acak sebagai saran bacaan kepada pengunjung, dan akan terus berubah bahkan pada setiap kali pengunjung merefresh halaman blog tersebut. Bukan tidak mungkin tulisan-tulisan lama itu akan menarik minat.

Salah satu cara mudah “membangkitkan” lagi entry-entry lama adalah dengan melekatkannya pada bagian sidebar, meskipun bukan tidak mungkin untuk dilekatkan secara embedded di dalam konten postingan atau pada bagian ‘footer’. Tulisan ini membicarakan tentang melekatkan script random posts pada bilah samping (sidebar) blogger. Hal ini dapat dilakukan dengan mudah sekali, karena kita akan menambahkannya sebagai widget kategori HTML.

b.Scriptnya

Berikut ini adalah script yang akan kita pergunakan, sebagaimana terlihat di blog helplogger.

<style>
#random-posts img {
float: left;
margin-right: 10px;
width: 85px;
height: 85px;
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) + "";
};
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('<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://saatnya-ngopi.blogspot.com/" target="_blank" rel="nofollow">Dapatkan Widget Postingan Acak Ini</a></div>

c. Masangnya

Langkah 1. Setelah login ke akun blogger, pilih [Layout] pada dashboard. Pilih “Add Gadget”.

Langkah 2. Pada jendela pop-up yang muncul, pilih HTML/Javascript.

Langkah 3. Beri Judul Widget dan Isi script tadi.

Langkah 4. Klik [Save]. Selesai.

b.1. Mengkostumasi

Tulisan berwarna merah pada script di atas dapat dikostumasi untuk mewujudkan tampilan yang lebih kita suka sebagaimana contoh berikut (dua parameter pertama tidak saya rubah):

1. Ke dua angka 85 menunjukkan ukuran gambar thumbnail yang akan muncul (tinggi dan lebarnya dalam pixel).

2. Angka 5 adalah jumlah postingan yang akan muncul dalam bilah random posts. Ganti sesuai keinginan.

3. Untuk menambahkan teks pembuka (snippet) pada setiap entry di bilah random posts ini, ganti pada bagian: