Cara Buat Random Post Dengan Gambar (Thumbnail) di Blog, [SEOSangatMudah] - Hallo sobat blogger yang berbahagia Tips & Trik SEO, Posting yang saya unggah pada kali ini dengan judul Cara Buat Random Post Dengan Gambar (Thumbnail) di Blog, [SEOSangatMudah] , Artikel ini bertujuan untuk memudahkan kalian mencari apa yang kalian inginkan, kami telah mempersiapkan artikel ini dengan baik untuk kalian baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel desain, Artikel tips trik blogging, Artikel Widget Blog, yang kami tulis ini dapat kalian pahami dengan baik, semoga artikel ini berguna untuk kalian, jika ada kesalahan penulisan yang dilakukan oleh penulis mohon dimaafkan karena penulis masih newbie. baiklah, selamat membaca.

Judul : Cara Buat Random Post Dengan Gambar (Thumbnail) di Blog, [SEOSangatMudah]
link : Cara Buat Random Post Dengan Gambar (Thumbnail) di Blog, [SEOSangatMudah]

Cara Buat Random Post Dengan Gambar (Thumbnail) di Blog, [SEOSangatMudah]

Cara Buat Random Post Dengan Gambar (Thumbnail) di Blogger � Widget Random Post ini sebenarnya sudah pernah saya bahas dalam posting sebelumnya (baca : Cara Memasang Widget Random Post di Blog). Namun, kali ini saya akan membahas widget random post yang memiliki thumbnail (gambar). Random post ini nantinya akan menampilkan gambar kecil (biasa dikenal dengan nama Thumbnail), dan sedikit kutipan teks dari posting yang ditampilkan. Berikut ini previewnya :

LIVE DEMO!

Tentu saja, widget random post ini lebih menarik (dan tentu saja keren) daripada widget random post yang pernah saya bahas sebelumnya. Dengan adanya gambar, pengunjung akan merasa lebih tertarik untuk mengunjungi posting lainnya di blog Anda. Walaupun, nantinya akan sedikit berimbas pada kecepatan loading blog Anda. Tapi, saya rasa tak masalah, mengingat kecepatan internet di indonesia sudah dapat dikatakan lumayan...

Berikut ini langkah � langkah memasang (membuat) random post dengan gambar (thumbnail) di Blogger

1. Seperti biasa, login ke Blogger.com, lalu masuk ke Tata Letak
2. Pilih Tambahkan Gadget ditempat Anda ingin memasang widget random post ini.
3. Pilih HTML / Javascript
4. Copy dan pastekan kode berikut pada window yang muncul (isikan pula isian Judul-nya)

<style>.rp-post-link { font-weight: bold !important; font-size: 12px !important; } .rp-summary { margin-bottom: 5px !important; border-bottom: 1px dotted #686868; font-size: 12px !important; line-height: 20px !important; word-wrap: break-word !important; } .rp-thumbnail { margin: 5px 5px 2px 0px !important; float: left !important; width:60px;height:60px; } .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 = 120; var numofpost=10; 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 += "/>" 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="http://xxpc123xx.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

UPDATE 12 JULI 2015
Karena banyak yang menginformasikan saya bahwa kode diatas rusak dan tidak berfungsi (mungkin Anda merasakannya juga), Anda dapat mencoba kode pada link berikut.
Kode HTML Random Post Dengan Gambar

Keterangan :

var numofpost=10; Angka 10 menunjukkan jumlah posting yang akan ditampilkan. Gantilah sesuai dengan keinginan Anda.

var lengthsummary = 120; Angka 120 menunjukkan panjang kutipan posting yang akan ditampilkan. Aturlah sesuai dengan keinginan Anda.

Ganti url blog saya (http://xxpc123xx.blogspot.com) dengan url blog Anda.
Mohon maaf, saya belum bisa menambahkan warna pada textarea diatas. Ada yang bisa mengajari?

5. Terakhir, klik Simpan.

Bagaimana, mudah bukan? Jika Anda merasa artikel ini bermanfaat, tolong share artikel ini ke social media. Selamat mencoba memasang (membuat) widget random post dengan gambar di blog, dan salam blogger!
 

Demikianlah Artikel Cara Buat Random Post Dengan Gambar (Thumbnail) di Blog, [SEOSangatMudah]

Sekianlah artikel Cara Buat Random Post Dengan Gambar (Thumbnail) di Blog, [SEOSangatMudah] kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Buat Random Post Dengan Gambar (Thumbnail) di Blog, [SEOSangatMudah] dengan alamat link https://seosangatmudah.blogspot.com/2014/12/cara-buat-random-post-dengan-gambar.html

Tweet