?

Followers

×

Tentang Blog Ini×

Blog ini wadah merupakan media pembelajaran otodidak secara online bagi kalangan newbie seperti Andmin ini, akan tetapi belajar dan berusaha secara otodidak inilah yang membuat saya bisa berkreasi dengan ala kadarnya.

Salam pembuka dari Admin sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Jawa Timur.

Bagi para pembaca yang mungkin juga ingin menghubungi saya, bisa melihat alamat juga kontak saya yang disediakan dibawah ini.

Nama :  Admin
Email :  admin[at]gmail[dot]com

by Admin

Sidebar Blog×

Daftar Blog Bacaanku×

Bagikan kepada teman!
Close Info

LINK FRIEND

Sampaikan pesan anda jika ingin memajang link blog anda di Id Tutor Plus pada  (Link Friend)

NAMA BLOGURL BLOGDESCRIPSI BLOG
KOD Bloghttp://kang-onk.blogspot.com/Konsep Blogging Sederhana
KOD Sharehttp://onk-shared.blogspot.comShare something beautiful for you
Klik Templatehttp://klik-template.blogspot.com/Beauty Premium Teamplate for You

Memasang Random Post (Posting Acak) pada Blog

Random Posts merupakan tampilan posting secara acak atau bergantian dari semua artikel dalam blog yang dimaksuddkan dan bisa diatur pada pengaturan script yang akan diterapkan, tergantung dari bagaimana kita memahami dan diinginkan. Pada pemsangan ini script yang dimaksudkan akan memilah dan memilih acak dari sekian banyak artikel dalam blog yang telah dituliskan dan di publikasikan.

Dibawah ini merupakan referensi dari script untuk memangging feed dalam ukuran besar untuk ditampilkan dalam widget Random Post

<script src='/feeds/posts/default?alt=json-in-script&max-results=99999&callback=randomPosts'></script>

Bagi para pemakai mungkin tidak pernah sadar mengenai hal ini, sebenarnya hampir 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

Admin 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 posting yang dimuat bisa dimulai 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 Admin 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++) {
            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>';
}

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++) {
            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>';
}

Hasil Akhir

Tanpa Thumbnail Dan Css

<div id='random-post-container'>Memuat...</div>

<script type="text/javascript">
//<![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));
 if (window.console && window.console.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&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>

Dengan Thumbnail Dan Deskripsi

<div id='random-post-container'>Memuat...</div>

<script type="text/javascript">
//<![CDATA[
// Feed configuration
var homePage = 'http://nama_blog.blogspot.com',
 maxResults = 7,
 summaryLength = 170,
 noImageUrl = 'http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png',
 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));
 if (window.console && window.console.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&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}

// Widget's main function
function randomPosts(json) {
 var link, summary, img,
  ct = document.getElementById(containerId),
  entry = shuffleArray(json.feed.entry),
  skeleton = "<ul>";
 for (var i = 0, len = entry.length; i < len; i++) {
  summary = ("summary" in entry[i]) ? (entry[i].summary.$t.replace(/<.*?>/g, "")).substring(0, summaryLength) + '&hellip;' : "";
  img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s72-c") : noImageUrl;
  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>';
  skeleton += '<img src="' + img + '" alt="" width="72" height="72">';
  skeleton += '<a href="' + link + '">' + entry[i].title.$t + '</a><br>';
  skeleton += '<span>' + summary + '</span>';
  skeleton += '<span class="clear"></span></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>

Hasil Akhir Dengan Sedikit Sentuhan Css

Tanpa Thumbnail Dan Deskripsi

<style type='text/css'>
#random-post-container {
    width: auto;
    margin-left: 15px;
}

#random-post-container ul {
    margin: 7px 0 0;
    padding: 0;
}

#random-post-container li {
    list-style: none;
    margin: 0 0 2px;
    background-color: #e5e5e5;
    padding: 0 7px 0 7px;
    line-height: 24px;
    height: 24px;
    overflow: hidden;
    border-bottom: 1px dotted #ccc;
}

#random-post-container a {
    text-decoration: none;
}

#random-post-container a:hover {
    text-decoration: underline;
}

#random-post-container strong {
    font: normal bold 13px/1.4 Arial,Sans-Serif;
}
</style>

<div id='random-post-container'>Memuat...</div>

<script type='text/javascript'>
    //<![CDATA[
    /* Performa Widget Random Post
     * By Id Tutor Plus
     * http://idtutorplus.blogspot.com
     * https://plus.google.com/116099308895340121198/posts
     */

    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 = "<strong>Random Post</strong><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>&#10070; <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><div id="itempager" style="position:relative;"><a title="Kang Onk" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:14px;font:normal bold 8px Arial,Sans-Serif!important;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.1);text-decoration:none;" href="http://idtutorplus.blogspot.com" target="_blank">&#9658;ITP +]</a></div>');
    //]]>
</script>

Menggunakan Thumbnail Dan Deskripsi

<style type='text/css'>
#random-post-container {
    margin-bottom: 5px;
    background-color: #333;
    border: 4px solid #ddd;
    width: 400px;
    // Style by: http://idtutorplus.blogspot.com/;
}

#random-post-container a {
    text-decoration: none;
    color: #fff;
}

#random-post-container a:hover {
    text-decoration: underline;
}

#random-post-container ul {
    padding: 0 7px;
}

#random-post-container li {
    border-top: 1px solid #444;
    border-bottom: 1px solid #222;
    padding: 5px 7px;
    color: #aaa;
    list-style: none;
    overflow: hidden;
}

#random-post-container img {
    display: block;
    float: left;
    margin: 2px 7px 5px 0;
    padding: 4px 4px;
    background-color: #222;
    border: 1px solid #111;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 0 #444;
    -moz-box-shadow: 0 1px 0 #444;
    box-shadow: 0 1px 0 #444;
}

#random-post-container a {
    font-weight: bold;
    font-size: 110%;
}

#random-post-container .clear {
    display: block;
    clear: both;
}
</style>

<div id='random-post-container'>Memuat...</div>

<script type='text/javascript'>
    //<![CDATA[
    /* Performa Widget Random Post
     * By Kang Onk
     * http://idtutorplus.blogspot.com
     * https://plus.google.com/116099308895340121198/posts
     */

    // Feed configuration
    var homePage = 'http://nama_blog.blogspot.com',
        maxResults = 5,
        summaryLength = 150,
        noImageUrl = '1.bp.blogspot.com/-E71ffY-ngcA/Ulwqgnkeu5I/AAAAAAAAAIo/F6rHZYiFu7g/s1600/no-thumbnail.gif',
        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));
        if (window.console && window.console.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&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
    }

    // Widget's main function

    function randomPosts(json) {
        var link, summary, img,
            ct = document.getElementById(containerId),
            entry = shuffleArray(json.feed.entry),
            skeleton = "<ul>";
        for (var i = 0, len = entry.length; i < len; i++) {
            summary = ("summary" in entry[i]) ? (entry[i].summary.$t.replace(/<.*?>/g, "")).substring(0, summaryLength) + '&hellip;' : "";
            img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s72-c") : noImageUrl;
            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>';
            skeleton += '<img src="' + img + '" alt="" width="72" height="72">';
            skeleton += '<a href="' + link + '">' + entry[i].title.$t + '</a><br>';
            skeleton += '<span>' + summary + '</span>';
            skeleton += '<span class="clear"></span></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><div id="itempager" style="position:relative;"><a title="Kang Onk" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:18px;font:normal bold 8px Arial,Sans-Serif!important;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.1);text-decoration:none;" href="http://idtutorplus.blogspot.com" target="_blank">&#9658;ITP +]</a></div>');
    //]]>
</script>

Ketika Posting Acak Dikirim Secara Langsung oleh Server

Dalam sebuah forum Admin pernah menemukan seseorang yang mencoba menyarankan Blogger untuk menyertakakan parameter orderby baru berupa random dan popular. Admin 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. Tapi kasus ini masih dalam tahap “seandainya”.

Terakhir Diperbaharui

    3 comments

    15 Oktober 2013 08.34 Permalink
    Selamat Hari Raya Idul Adha mas :)
    16 Oktober 2013 01.24 Permalink
    share dong emoticonnya :)

    Catatan :
    Link hidup dalam komentar akan terhapus secara otomatis.
    Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
    Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
    Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
    Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
    Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
    Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

    Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.
    :):(^_^:D;):-bd:'(:\:pB):Q:Ozz7:(\o/**p<30:):-a7:O*fck*x@X@~x(:yaya:=p*Klik untuk melihat kode!

    Konversi Kode di Sini  Pasang Link Gratis  Daftar Member Aktif

    Batal

    Ke atas!Ke bawah!