Cara Membuat Widget Random Post dengan Gambar (Tumbnail)

Cara Membuat Widget Random Post dengan Gambar (Tumbnail) - Pada postingan sebelumya saya pernah membahas bagaimana cara membuat random post tanpa gambar, nah kali ini akan kita bahas bagaiman cara memasang widget random post dengan gambar (tumbnail). Caranya juga sama seperti tutorialnya sebelumnya, hanya pada tutorial kali ini kita akan sedikit memodifikasi kode CSSnya.
Daripada sobat penasaran lebih baik kita langsung saja ke langkah-langkah kerjanya, cekidot,, hehehe;
  1. Login ke blogger
  2. Pilih Tata Letak kemudian Tambah Gadget
  3. Pilih HTML/JavaScript
  4. Masukan kode HTML berikut ini:
    <style>
    .rp-post-link {
    font-weight: bold !important;
    font-size: 120% !important;
    }
    .rp-summary {
    margin-top: 3px !important;
    font-size: 100% !important;
    line-height: 1.3em !important;
    word-wrap: break-word !important;
    }
    .rp-thumbnail {
    margin: 5px 5px 2px 0px !important;
    float: left !important;
    width:65px;height:65px;
    }
    .rp-pubdate {
    font-style: italic !important;
    margin-bottom: 3px !important;
    }
    </style>
    <script type="text/javascript">
    var randarray = new Array();
    var l=0;
    var flag;
    var lengthsummary = 180;
    var numofpost=5;
    function randomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0; i < numofpost;){
    flag=0;
    randarray.length=numofpost;
    l=Math.floor(Math.random()*total);
    for(j in randarray){
    if(l==randarray[j]){
    flag=1;
    }
    }
    if(flag==0&&l!=0){
    randarray[i++]=l;
    }
    }
    document.write('<div>');
    for(n in randarray){
    var p=randarray[n];
    var entry=json.feed.entry[p-1];
    var item ="";
    var posttitle = entry.title.$t || "[Untitled]";
    "[Untitled]"
    for(k=entry.link.length -1; k >= 0 ; k--){
    if(entry.link[k].rel=='alternate'){
    item +="<a class='rp-post-link' href='" + entry.link[k].href + "'>" + posttitle + "</a>";
    break;
    }
    }
    item += "<br"
    item += "/>"
    var pubdate = new Date(entry.published.$t).toDateString();
    item +="<span class='rp-pubdate'>Posted On " + pubdate +"</span>";
    if('media$thumbnail' in entry)item += "<img class='rp-thumbnail' src='" + entry.media$thumbnail.url + "'>"
    var summary = "";
    if ("content" in entry) {
    summary = entry.content.$t;
    }
    else if ("summary" in entry) {
    summary = entry.summary.$t;
    }
    var re = /<S[^>]*>/g;
    summary = summary.replace(re, "");
    item += "<p class='rp-summary'>" + summary.substring(0,lengthsummary) + " ...</p>";
    document.write(item);
    }
    document.write('</div>');
    }
    </script>
    <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript">
    </script>
  5. Sebelum kita Simpan, ada beberapa yang bisa kita ubah agar sesuai dengan tampilan blog kita, diantaranya:
    width:65px; height:65px; -->  65 adalah ukuran thumbnail
    lengthsummary = 180; --> 180 adalah jumlah karakter isi post
    numofpost=5; --> 5 adalah jumlah post yang ditampilkan
  6. Simpan jika sudah selesai. 
Bagaimana, mudah bukan? Jika ingin tampilan lebih menarik, silahkan edit kode cssnya sesuai keinginan anda. Semoga berhasil, berkomentarlah yang relevan.

0 Response to "Cara Membuat Widget Random Post dengan Gambar (Tumbnail)"

Post a Comment

PENTING!!!
1. Berkomentarlah dengan topik yang relevan dan tidak melakukan SPAM
2. Mohon untuk tidak memasukkan link aktif
3. Untuk memasukan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DISINI</i>
4. Komentar anda akan dimoderasi terlebih dahulu sebelum dipublikasi.

NB: Sebelum memasukkan kode silahkan parse terlebih dahulu dengan menggunakan tool konversi kode.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel