Cara Membuat Random Post Keren + Super Wuss

Cara menampilkan Random Post Keren plus  Super Wuss , cara membuat widget random post keren plus seo and flash loading - Sahabat Blogger pasti tau donk apa sih perbedaan random post dengan popular post . Hemb bagi yang belum tau sekarang ane kasih tau ya . Random post adalah , arikel yang telah kita tulis terdahulu dapat muncul kembali , namun munculnya itu secara acak-acakan , sedangkan Popular post ialah artikel yang sering dibaca oleh pengunjung itu namanya popular post. Kali ini saya akan membagikan widget random post , namun random post ini berbeda dari yang lain lho ,, random post ini selain seo juga fash loading dan pastinya seo dan valid HTML 5 . widget ini saya ambil dari mas mahfid mayanto. tapi dengan sedikit perubahan yaitu disertai image ( gambar dan disertai dengan scroll ).

Cara Membuat Random Post Keren plus  Super Wuss
Oh ya sob maaf tidak saya kasih demonya , sebagai penggantinya anda dapat melihat random post saya yang terletak di sidebar saya . langsung saja nih cara buat random postnya :

1. Masuk ke akun Blogger ( dasbhor ) anda
2. kemudian Pilih Menu Template
3. Setelah memilih menu Template kemudian cari dan Klik Edit HTML
4. Cari kode  ]]></b:skin>  ( Klik CTRL+F untuk memudahkan pencarian )
5. Setelah kode ]]></b:skin> ketemu kemudian salin kode di bawah ini tepat di atas kode ]]></b:skin> tersebut .


/*Random-post*/

#random-post-container {width:265px}

#random-post-container ul,

#random-post-container li {
  margin:0;
  padding:0;
  list-style:none;
  overflow:hidden;
}
#random-post-container img {
  display:block;
  float:left;
  border:1px solid;
  margin:2px 7px 5px 0;
  box-shadow:4px 4px 2px #000;
}
#random-post-container a {
  font-weight:bold;
  font-size:110%;
      color:blue;
}
#rancom-post-container .clear {
  display:block;
  clear:both;
}

6. Setelah itu simpan Template ( eh tapi bukan bearti  ini sudah selesai , tapi masih ada satu langkah lagi )
7. Keluar / log out dari Edit Html tadi
8. Kemudian Pilih Menu Tata Letak => Tambah gadget => Html/JavaSript
9. Salin kode dibawah ini dan letakan kode dibawah ini tepat di dalam kolom Html/JavaSript tersebut .

<!-- ahmadsuyadi random post wuss -->
<div id='random-post-container'>loading widget by ahmadsuyadi.blogspot.com...</div>

<script>
// Feed configuration
var homePage = 'http://ahmadsuyadi.blogspot.com',
    maxResults = 5,
    summaryLength = 150,
    yesImageUrl = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNB00uwFmtSYSKeBIc_CcjMnAG-fDGH6sMGLyI9qY9X3Bn1BZfM8raqzFZykpPC1qa3QZxJ3lGvqdsK-z0sQE9zk8wq880uN-IEiEETKgnvR20cy5B8gZrGeNcBtsTofzy-hvbzkKChug/s1600/no-image.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="image" width="72" height="72" title="' + entry[i].title.$t + '">';
        skeleton += '<a href="' + link + '" title="' + entry[i].title.$t + '">' + 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>
<!-- ahmadsuyadi random post wuss -->
Keterangan kode di atas :
-Ganti 
http://ahmadsuyadi.blogspot.com dengan URL anda
-Anda juga dapat mengganti 
maxResults = 5, sesuai dengan jumlah random yang ingin anda tampilkan
-Jika anda ingin menonaktifkan gambar ( image ) ubah 
yesImageUrl  menjadi no
ImageUrl

10. Kemudian Simpan Template deh ( selesai )
Gimana kawan hasilnya keren and fash loading kan. oh ya ane lupa jika anda ingin random post ini valid html5 hapus kode <b:include name='quickedit'/> pada kolom edit html . demikian yang dapat saya sampaikan semoga Cara Membuat Random Post Keren +  Super Wuss bermanfaat bagi saya dan anda , mohon kritik dan saranya  untuk memajukan kita bersama . salam blogger nusantara