 |
| Tampilan Widget Random Post Fast Loading |
Widget Random Post merupakan salah satu fitur penting dalam meningkatkan pageview pada sebuah blog. Widget tersebut, berguna untuk menampilkan artikel secara acak. Sehingga, artikel lama yang belum terpublish secara maksimal berpotensi dibuka kembali oleh visitor.
Namun, kebanyakan blogger sering berpikir dua kali untuk memasang widget random post tersebut. Karena dinilai akan menambah beban loading blog.
Memang benar, secara standar widget random post cukup berat untuk dibuka pada peramban. Karena, sistem kerjanya, memanggil atau membaca feed posting secara keseluruhan setiap konten yang ada dalam blog.
Artinya, widget random post dapat dikatakan sangat buruk dalam hal performa. Kerja mereka sangat lambat dan membuang-buang tenaga, karena mereka bekerja dengan cara memanggil feed posting berukuran sangat besar! Kemudian mereka hanya akan menampilkannya sebagian saja secara acak.
<script src=’/feeds/posts/default?alt=json-in-script&max-results=99999&callback=randomPosts’></script>
Pada teks yang diblok merah merupakan feed yang dipanggil 99999 artikel, walaupun artikel yang akan ditampilkan cuma beberapa saja. Secara logika, ketika Anda membuka halaman tunggal dimana terdapat widget random post di dalamnya, pada saat yang bersamaan Anda juga sebenarnya sedang membuka semua posting yang telah Anda terbitkan dalam satu waktu. Mengapa? Karena parameter max-results pada feed menunjukkan angka 99999 yang artinya bahwa semua feed posting akan “diusahakan” untuk dipanggil (diusahakan, karena jumlah posting yang kita terbitkan tidak mungkin mencapai angka sebesar itu).
Jelas hal ini menjadi beban yang teramat berat bagi sebuah blog. Ya.. atau Iya.. kawan?
Akan tetapi, jangan terlalu ‘galau’ kawan.. dari hasil blogwalking saya ke blog Taufik Nurrohman salah satu blogger jagoan Indonesia, ada tips sederhana untuk membuat Widget Random Post Cepat, Ringan/Fast Loading Dan Valid HTML5.
Tambahkan widget HTML pada tata letak :
<div id=’random-post-container’>Memuat…</div>
<script>
//<![CDATA[
// Feed configuration
var homePage = ‘http://nama_blog.blogspot.com‘,
maxResults = 7,
containerId = ‘random-post-container’;
// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max – min + 1)) + min;
}
// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
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;
}
// Get a random start index
function createRandomPostsStartIndex(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>’);
}
// Widget’s main function
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=createRandomPostsStartIndex”></scr’ + ‘ipt>’);
//]]>
</script>
Selanjutnya :
- Ganti dengan url blog sobat http://nama_blog.blogspot.com
- Artikel yang akan ditampilkan 7
Untuk demonya click demo random post