Mecha versi 2.6.3 sudah dirilis!

Performa Widget Random Post

Tabel Konten
  1. Mengacak Indeks Permulaan 
  • Hasil Akhir 
  • Ketika Posting Acak Dikirim Secara Langsung oleh Server 
  • Saya harus mengatakan bahwa 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 — 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:

    Showing log message to indicate random number for feed start index purpose.
    Angka acak yang Saya tandai akan kita manfaatkan untuk memanggil indeks feed secara acak.

    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>

    Lihat Demo Demo dengan Thumbnail dan Deskripsi

    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

    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

    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

    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

    Invalid value for orderby parameter: random
    Error 400
    Invalid value for orderby parameter: popular
    Error 400

    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:

    {
    "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": "[email protected]"
    },
    "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"
    }
    }

    Unknown

    entry[i].category =>results: [object Object],[object Object],[object Object]
    entry[i].category.term =>results: undefined
    [email protected]

    help me :'(

    Taufik Nurrohman

    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

    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

    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?

    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

    Taufik Nurrohman

    $('li') itu selektor jQuery, hasil keluarannya akan berbeda dengan selektor document.querySelectorAll('li'). Coba pakai ini:
    $(divs.get().slice(x, x + 4)).wrapAll(' … ');

    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: &quot;<data:blog.homepageUrl/>&quot;,

    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

    Komentar telah ditutup.