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”.
Labels: Blogger, JavaScript, Lanjutan, Masalah, Widget
52 Comments:
Wah Mantab :-bd Tutornya, Hanya saja saya masih awam masalah ginian (alias mumet) 7:( :p ..ijin belajar di sini mas... ^_^
Mantep, Mas! sekarang saya pake di blog! makasihhh... \o/ <3 :D
ku juga dah pake... makasih ya :D
Cepet bgt load random postnya bang.
Taufik Nurohman ruarrr biasa.... \o/
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
wah mas sih rada bingung nih :p
Yang pakai thumbnail nambah kode apa Mas Taufik?
Thanks in advance.
⇒ view-source:http://blogger-json-experiment.googlecode.com/svn/resources/random-post/index-2.html
matur sembahnuwun :D
Nambah lagi Mas Tovic, saya request kode serupa yang ringan untuk yang related articles. TIA.
Ide Bagus
bener tuh aq waktu masa labil2 dulu pernah masang nih script apalagi suka disisipi virus dan malware
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..
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.
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.
Berarti nilai acaknya ada pada daftar array
Sedikit berat mas kalau sekali panggil langsung tujuh feed untuk menampilkan tujuh posting, walaupun lebih ringan dibandingkan yang &max-results=99999.
iya mas. karena harus memanggil 7 link feed.
juga agak sulit untuk mengaplikasikan plugin2 slideshow.
aku masih blum ngerti2 jg gmn sih sbnernya konsep slideshow + feed huff
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..
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).
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
enteng tp kadang gk berfungsi mas, napa ya??
sy nunggu solusix dr mas tofiq... *mengharap
Tidak ada contoh masalah, tidak ada solusi.
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)
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>
Keren dan sangat bermanfaat.... izin coba boss
Mas taufik, Apakah Sekarang Blogger sudah mengunakan parameter orderby baru berupa random dan popular apa belum..??
Invalid value for orderby parameter: random
Error 400
Invalid value for orderby parameter: popular
Error 400
terima kasih tutorialnya, pernah saya pasang random posting loading berhenti di random post 5-10 menit, untuk sementara sy tidk dulu pakai random post
makasih mas tutorialnya.... :)
saya pernah pasang related post sampeyan cuma gak muncul.. tapi sewaktu saya lihat di preview post.. relatednya muncul... apa karena saya pake custom domain ?
Wah, sudah hampir setahun tanpa saya sadari telah dibalas oleh master template Mas Makmur. Terima kasih banyak, Mas. Nampaknya kita tidak banyak berjodoh. :D
how to add label to widget? :(
Post labels are stored in entry[i].category. Take a look here:
{
"id": {
"$t": "tag:blogger.com,1999:blog-298900102869691923.post-1878670636578231647"
},
"published": {
"$t": "2014-08-31T20:04:00.000+07:00"
},
"updated": {
"$t": "2014-08-31T20:12:36.410+07:00"
},
"category": [{
"scheme": "http://www.blogger.com/atom/ns#",
"term": "Code Snippet"
}, {
"scheme": "http://www.blogger.com/atom/ns#",
"term": "HTML"
}, {
"scheme": "http://www.blogger.com/atom/ns#",
"term": "Kamus Blogspot"
}],
"title": {
"type": "text",
"$t": "Tag Facebook Open Graph untuk Blogspot"
},
"summary": {
"type": "text",
"$t": "\u003Cmeta property='og:title' expr:content='data:blog.pageTitle'\/\u003E\n\u003Cb:if cond='data:blog.pageType == \u0026quot;item\u0026quot;'\u003E\n \u003Cmeta property='og:type' content='article'\/\u003E\n\u003Cb:else\/\u003E\n \u003Cmeta property='og:type' content='website'\/\u003E\n\u003C\/b:if\u003E\n\u003Cmeta property='og:url' expr:content='data:blog.canonicalUrl'\/\u003E\n\u003C!-- Large image, original size --\u003E\n\u003Cb:if cond='data:blog.postImageUrl'\u003E\n \u003Cmeta property='og:image' "
},
"link": [{
"rel": "replies",
"type": "application/atom+xml",
"href": "http:\/\/www.dte.web.id\/feeds\/1878670636578231647\/comments\/default",
"title": "Poskan Komentar"
}, {
"rel": "replies",
"type": "text/html",
"href": "http:\/\/www.dte.web.id\/2014\/08\/blogspot-facebook-open-graph.html#comment-form",
"title": "4 Komentar"
}, {
"rel": "edit",
"type": "application/atom+xml",
"href": "http:\/\/www.blogger.com\/feeds\/298900102869691923\/posts\/default\/1878670636578231647"
}, {
"rel": "self",
"type": "application/atom+xml",
"href": "http:\/\/www.blogger.com\/feeds\/298900102869691923\/posts\/default\/1878670636578231647"
}, {
"rel": "alternate",
"type": "text/html",
"href": "http:\/\/www.dte.web.id\/2014\/08\/blogspot-facebook-open-graph.html",
"title": "Tag Facebook Open Graph untuk Blogspot"
}],
"author": [{
"name": {
"$t": "Taufik Nurrohman"
},
"uri": {
"$t": "https:\/\/plus.google.com\/108949996304093815163"
},
"email": {
"$t": "noreply@blogger.com"
},
"gd$image": {
"rel": "http://schemas.google.com/g/2005#thumbnail",
"width": "32",
"height": "32",
"src": "\/\/lh4.googleusercontent.com\/-nxgZmVx9WAM\/AAAAAAAAAAI\/AAAAAAAAIVo\/cVODN2T3GQA\/s512-c\/photo.jpg"
}
}],
"thr$total": {
"$t": "4"
}
}
entry[i].category =>results: [object Object],[object Object],[object Object]
entry[i].category.term =>results: undefined
x@
[img]http://3.bp.blogspot.com/-ySMBUmMPtbo/VB1WQFiEcUI/AAAAAAAAAC4/RUTvgB9Ju2Y/s1600/1.png[/img]
help me :'(
Nice try!
…
…
skeleton += ' <small>';
var tags = entry[i].category, labels = [];
for(var z = 0, zen = tags.length; z < zen; ++z) {
labels.push('<a href="' + homePage + '/search/label/' + encodeURIComponent(tags[z].term) + '?max-results=20" rel="tag">' + tags[z].term + '</a>');
}
skeleton += labels.join(', ');
skeleton += '</small>';
…
…
→ http://jsfiddle.net/tovic/wncwqerj
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
ada label yang saya ingin tidak munculkan apakah bisa?
terima kasih
Mas kok title nya ga muncul yah,,, ga bisa otak atiknya :p x@
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.
[url=http://codepen.io/rizky_k_r/full/xGWQOW/]Lihat disini (Codepen)[/url]
Mungkin mohon Pencerahannya Kang taufik? :), atau dibantu? :)
Saya ubah RandompostActive: true tapi tidak ada perubahan.
How do I enable thumbnail?
Sorry, the demo link was broken. Please check again the last demo button. It has thumbnails.
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'>';
Sudah bisa kang, ternyata harus d kasih kutip 2 " jangan kutip 1 :)
Terima kasih...
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?
var divs = $("li");
for(var x = 1; x < divs.length; x+=4) {
z = x + 1;
divs.slice(x, x+4).wrapAll("<div id='newDivforWraping"+z+"' class='new'></div>");
}
Mohon solusinya kang.
Terima kasih
$('li') itu selektor jQuery, hasil keluarannya akan berbeda dengan selektor document.querySelectorAll('li'). Coba pakai ini:
$(divs.get().slice(x, x + 4)).wrapAll(' … ');
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/>",
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
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
Post a Comment
<< Home