Performa Widget Random Post
Saya harus mengatakan bahwa widget random post itu 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>
Bagi Anda para pemakai mungkin tidak pernah tahu mengenai ini, tetapi sebenarnya setiap pemakai widget random post —termasuk juga widget artikel terkait— tanpa sadar telah menerima beban begitu besar. 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).
Mengacak Indeks Permulaan
Saya menyadari terdapat sebuah peluang untuk menciptakan widget random post yang lebih ringan dan cepat dimuat. Dibandingkan memuat semua posting dan memilah beberapa posting secara acak untuk ditampilkan, akan lebih baik jika kita mengacak nilai start-index
pada feed sehingga kita bisa memuat posting dari urutan sembarang:
function randomPosts(json) {
// Ubah JSON menjadi HTML...
}
var startIndex = Math.round(Math.random() * 9999); // Membuat angka acak
document.write('<scr' + 'ipt src="/feeds/posts/summary?alt=json-in-script&start-index=' + startIndex + '&max-results=7&callback=randomPosts"></scr' + 'ipt>');
Ada satu masalah kecil yang mungkin akan mengganggu. Jika angka acak yang tercipta nilainya lebih besar dari total posting blog Anda saat ini, maka widget random post ini tidak akan bekerja. Oleh karena itu kita harus membatasi angka acak yang tercipta, yaitu tidak boleh kurang dari 1
dan tidak boleh lebih dari “total posting dikurangi jumlah posting yang ingin ditampilkan”.
Untuk mendapatkan jumlah posting secara keseluruhan kita bisa mengambilnya melalui objek json.feed.openSearch$totalResults.$t
:
// Konfigurasi
var homePage = 'http://nama_blog.blogspot.com',
maxResults = 7;
// Fungsi untuk menggenerasikan angka acak dengan batasan minimal dan maksimal
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Mendapatkan indeks pemulai yang aman untuk memanggil feed utama
function createRandomPostsStartIndex(json) {
// Buat angka acak dengan nilai tidak boleh kurang dari `1` dan tidak boleh lebih dari `total posting - posting yang ingin ditampilkan`
var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults)); // Tampilkan pesan log
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&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
Muat ulang widget Anda berkali-kali. Seharusnya Anda akan melihat pesan log indeks pemanggilan posting yang berubah-ubah seperti ini:

Kita akan menggunakan angka acak itu sebagai angka pemulai pada parameter start-index
seperti ini:
function createRandomPostsStartIndex(json) {
var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - 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>');
}
Pada bagian akhir URL feed terdapat parameter callback=randomPosts
. randomPosts di sini merupakan fungsi utama yang akan kita buat untuk mengubah JSON Blogger menjadi widget:
function randomPosts(json) {
var link, ct = document.getElementById('random-post-container'),
entry = 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++) {
if (entry[i].link[j].rel == "alternate") {
link = entry[i].link[j].href;
}
}
skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
}
ct.innerHTML = skeleton + '</ul>';
}
Sentuhan akhir, acak urutan posting yang ditampilkan menggunakan fungsi ini sehingga daftar posting yang ditampilkan nantinya akan semakin acak urutannya:
// Fungsi untuk mengacak array
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;
}
// Widget
function randomPosts(json) {
var link, ct = document.getElementById('random-post-container'),
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++) {
if (entry[i].link[j].rel == "alternate") {
link = entry[i].link[j].href;
}
}
skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
}
ct.innerHTML = skeleton + '</ul>';
}
Hasil Akhir
<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++) {
if (entry[i].link[j].rel == "alternate") {
link = 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>
Ketika Posting Acak Dikirim Secara Langsung oleh Server
Dalam sebuah forum Saya pernah menemukan seseorang yang mencoba menyarankan Blogger untuk menyertakakan parameter orderby
baru berupa random
dan popular
. Saya pikir ini adalah ide yang bagus. Karena berdasarkan dokumentasi, kalau tidak salah hanya ada dua macam nilai untuk parameter orderby
, yaitu published
dan updated
:
http://nama_blog.blogspot.com/feeds/posts/summary?orderby=published http://nama_blog.blogspot.com/feeds/posts/summary?orderby=updated
Jika suatu saat Blogger merealisasikan masukan dari pengguna ini, maka kita tidak perlu lagi menerapkan hack semacam ini. Cukup dengan membuat widget recent post biasa, kita bisa mengubah parameter URL feed dari orderby=published
menjadi orderby=random
untuk menciptakan widget random post atau orderby=popular
untuk menciptakan widget posting populer. Tapi kasus ini masih dalam tahap “seandainya”.
52 Komentar
Unknown
Wah Mantab :-bd Tutornya, Hanya saja saya masih awam masalah ginian (alias mumet) 7:( :p ..ijin belajar di sini mas... ^_^
Anonim
Mantep, Mas! sekarang saya pake di blog! makasihhh... \o/ <3 :D
zahrotul wahyudi
ku juga dah pake... makasih ya :D
Unknown
Cepet bgt load random postnya bang.
Taufik Nurohman ruarrr biasa.... \o/
Mrbej0
maksud kode ini apa mas?
http://nama_blog.blogspot.com/feeds/posts/summary?orderby=published
http://nama_blog.blogspot.com/feeds/posts/summary?orderby=updated
Unknown
mungkin:
link 1: menampilkan entri JSON berdasarkan yang paling baru yang telah di publish. jadi jika post anda masih dalam draft entrinya tdk ikut di tampilkan.
link 2: menampilkan entri JSON berdasarkan yang paling baru dilakukan perubahan (di update). karena pada blogspot kita bisa merubah artikel yang telah dibuat lalu mengupdatenya.
Anonim
wah mas sih rada bingung nih :p
Tricahyo Abadi
Yang pakai thumbnail nambah kode apa Mas Taufik?
Thanks in advance.
Taufik Nurrohman
⇒ view-source:http://blogger-json-experiment.googlecode.com/svn/resources/random-post/index-2.html
Tricahyo Abadi
matur sembahnuwun :D
Tricahyo Abadi
Nambah lagi Mas Tovic, saya request kode serupa yang ringan untuk yang related articles. TIA.
Unknown
klo yang saya tahu mengenai Related post (menggunakan ajax) ada tuh di http://www.moretechtips.net/.
Menurut saya related yang dibuatnya merupakan yang paling baik..
Tricahyo Abadi
Wah, sudah hampir setahun tanpa saya sadari telah dibalas oleh master template Mas Makmur. Terima kasih banyak, Mas. Nampaknya kita tidak banyak berjodoh. :D
Unknown
Ide Bagus
Randy
bener tuh aq waktu masa labil2 dulu pernah masang nih script apalagi suka disisipi virus dan malware
Unknown
Intinya mencari 1 nilai acak dan nantinya di masukkan pada link json yang telah di tentukan batas maksimalnya.
Klo sya membuat yang lebih rumit lagi.
membuat deretan nilai acak lalu setiap nilainya di masukkan pada setiap link json yang telah saya batasi maksimal entrinya cuma 1.
Unknown
Berarti nilai acaknya ada pada daftar array
Taufik Nurrohman
Sedikit berat mas kalau sekali panggil langsung tujuh feed untuk menampilkan tujuh posting, walaupun lebih ringan dibandingkan yang
&max-results=99999
.Unknown
iya mas. karena harus memanggil 7 link feed.
juga agak sulit untuk mengaplikasikan plugin2 slideshow.
Unknown
aku masih blum ngerti2 jg gmn sih sbnernya konsep slideshow + feed huff
Anonim
Mas, saya minta tolong di desaikan template dong, intinya templatenya SEO 2 kolom, Latar warna hitam, dan desain lainnya terserah mas taufik..
Harganya berapa ?? bisa chat saya "https://www.facebook.com/ahmad.manarul.16", terimakasih mas..
Taufik Nurrohman
Apa tidak bisa melalui email saja, supaya komunikasinya lebih santai? Waktu chat Saya mungkin agak berbeda dan sangat jarang. Tapi kalau tidak bisa ya nanti Saya usahakan memakai fitur obrolan.
Untuk komunikasi yang lebih khusus bisa melalui kotak pesan yang Saya letakkan di dalam panel profil (klik menu Profil dan Kontak).
Unknown
kenapa ya random gak ada di blogger? pdhl bener juga...klo ada kita gak perlu muter-muter njelimet kyk gini (kbtulan lg mo pasang script random) :D
Unknown
enteng tp kadang gk berfungsi mas, napa ya??
Unknown
sy nunggu solusix dr mas tofiq... *mengharap
Taufik Nurrohman
Tidak ada contoh masalah, tidak ada solusi.
Unknown
contoh masalahx ada pd blog sy mas.., terkadang gk bs jalan, selama ini sy pake pnyx bloggeritem tp cz emank berat, apa cz sy hilangkan deskripsix ya? (summaryLength = 0)
Unknown
Kang, saya dah coba kode diatas, memang cepat... tapi kenapa kedeteksi error sama Webmaster Tools - Google...
Untuk bagian ini, Katanya ".Googlebot couldn't access this page because the server didn't understand the syntax of Googlebot's request"
<i rel='code'>/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=</i>
sama
<i rel='code'>/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex</i>
Blogging
Keren dan sangat bermanfaat.... izin coba boss
Suwardi
Mas taufik, Apakah Sekarang Blogger sudah mengunakan parameter orderby baru berupa random dan popular apa belum..??
Taufik Nurrohman
Saling indonesia
terima kasih tutorialnya, pernah saya pasang random posting loading berhenti di random post 5-10 menit, untuk sementara sy tidk dulu pakai random post
Unknown
makasih mas tutorialnya.... :)
Unknown
saya pernah pasang related post sampeyan cuma gak muncul.. tapi sewaktu saya lihat di preview post.. relatednya muncul... apa karena saya pake custom domain ?
Unknown
how to add label to widget? :(
Taufik Nurrohman
Post labels are stored in
entry[i].category
. Take a look here:Unknown
entry[i].category =>results: [object Object],[object Object],[object Object]

entry[i].category.term =>results: undefined
x@
help me :'(
Taufik Nurrohman
Nice try!
→ http://jsfiddle.net/tovic/wncwqerj
Mas Tamvan
saya pake yang ini http://jsfiddle.net/tovic/wncwqerj
Cara nambahin class di dalam
skeleton += '<li>';
gimana?
saya coba di rubah jadi gini malah ga tampil.
skeleton += '<li class='content'>';
Mas Tamvan
Sudah bisa kang, ternyata harus d kasih kutip 2 " jangan kutip 1 :)
Terima kasih...
george-aetos
hello my blog dont work why??? :( and ather testin blog it work !!! jquery.min.js is problem???
i have random-post bad is low time,, http://mhnpetaslefta.blogspot.gr/ look this if will
an tell me thank u
Unknown
ada label yang saya ingin tidak munculkan apakah bisa?
terima kasih
Tukang Ngakak
Mas kok title nya ga muncul yah,,, ga bisa otak atiknya :p x@
RizkyKR
Tutorial yang menarik :), sudah sempat saya coba untuk widget blogger saya.
tapi entah kenapa feed untuk hasil output postigan yang berbeda-beda.
yang non-random berjalan dengan baik, namun yang random sedikit mawur. :(
mungkin bisa dilihat disini.
Lihat disini (Codepen)
Mungkin mohon Pencerahannya Kang taufik? :), atau dibantu? :)
Taufik Nurrohman
Saya ubah
RandompostActive: true
tapi tidak ada perubahan.hehe
How do I enable thumbnail?
Taufik Nurrohman
Sorry, the demo link was broken. Please check again the last demo button. It has thumbnails.
Mas Tamvan
kang saya pengen ngegabungin li ke 2 sampe 4 jadi satu, contohnya seperti ini..
<ul>
<li>xxx</li>
<div id="newDivforWraping2" class="new">
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</div>
<div id="newDivforWraping6" class="new">
<li>xxx</li>
</div>
</ul>
Tapi kenapa pas saya gunakan di relatednya, script dibawah ini tidak bekerja?
Mohon solusinya kang.
Terima kasih
Taufik Nurrohman
Semt Merah
kang cara agar Url homepagenya
homePage = 'http://nama_blog.blogspot.com',
Otomatis tanpa harus merubahnya gimana?
saya coba ngikutin dari template kompi ajaib tapi tidak bisa.
homePage: "<data:blog.homepageUrl/>",
Unknown
ada 2 cara
yg pertama ganti http://nama_blog.blogspot.com menjadi garis miring tuh /
jadinya
homePage = '/',
trus save
yang kedua cari js dibawah ini
var homePage = 'http://nama_blog.blogspot.com',
maxResults = 7,
containerId = 'random-post-container';
^ hapus variable homepagenya sisanya kek dibawah ini
var maxResults = 7,
containerId = 'random-post-container';
terus cari kode ini persis ya ama tulisan dibawah ini
' + homePage + '
^ nanti dpat 2 line hapus dua duanya trus simpan
Saffroel
Mas... Sy rencananya mau meng-upload script ini ke github.. Nanti link eksternal baru saya pasang ke blogger.. Apa ada kode nya yang perlu d ubah Mas? Biar bisa di jadikan file Javascript (.js)
#MasihNewbie