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

          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

        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": "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"
        }
        }
    • Unknown

      entry[i].category =>results: [object Object],[object Object],[object Object]
      entry[i].category.term =>results: undefined
      x@

      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

    • 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?

      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.