[Tutorial] Cara memasang Widget Random Post dengan keterangan bergambar pada blogger

-[Tutorial] Cara memasang Widget Random Post dengan keterangan bergambar pada blogger



Salam sukses untuk sobat blogger... :D
Tetap semangat membuat blog lebih baik, belajar dan TERUS belajar.
Salah satu yang dapat dipelajari adalah Cara memasang Widget Random Post dengan keterangan bergambar pada blogger.

Berbeda dengan Widget Related Post ataupun Widget Recent Post,  pada Widget Random Post dapat memaparkan postingan ataupun artikel secara acak (random) tanpa sesuai dengan label ataupun kategori. Keuntungannya adalah pembaca dapat mengetahui artikel yang tidak sesuai dengan label tetapi menarik untuk dibaca, sehingga pembaca juga mengetahui bahwa masih ada artikel-artikel lainnya yang lebih menarik pada blog tersebut dan dengan begitu page view juga akan meningkat. (Lihat contoh pada Homepage Blog ini)

Tertarik untuk mencobanya?? Ingin memasangnya?? Caranya sangat mudah untuk diterapkan pada blog sobat. Silahkan ikuti langkah-langkah Cara memasang Widget Random Post dengan keterangan bergambar pada blogger :

 1. Setiap langkah awal, sobat harus Log in Blog => Dashbor => Tata Letak => Add Widget
Selanjutnya pilih HTML/Java Script.

2. Copy kode dibawah ini dan pastekan pada Ruangan HTML/Java Script yang telah dipilih tadi.

Jangan lupa terlebih dahulu untuk mengantikan
-  nama-blog-sobat  dengan URL blog yang sobat miliki. 
-  Untuk mengubah banyaknya Post yang tampil, sobat dapat mengubahnya 5 menjadi bilangan banyaknya post yang akan tampil sesuai dengan keinginan sobat.


<style type="text/css"><!--
.random_post_content{width:100%;}
.random_post_content img {width:32px;height:32px;background-position: center;margin:7px;padding: 2px;border:#888 solid thin;}
.random_post_content_item {border-top:#888 thin dashed;}
.random_post_content_item table, .random_post_content_item tr, .random_post_content_item td {vertical-align: middle;}
.random_post_content_item table {margin-bottom:2px;margin-top:3px;}
.random_post_content_item:hover {background-color:#4A3829;}
.random_post_title a{text-transform:uppercase;font-size:12px;text-decoration:none;font-weight:bold}
.random_post_info a{font-size:11px;text-decoration:none;}
.random_post_content_item:hover .random_post_title a{color:#FFFFCC;}
.random_post_content_item:hover .random_post_info a{color:#888;}
.random_post_content_item:hover .random_post_title a:hover{color:#FFCC00;}
.random_post_content_item:hover .random_post_info a:hover{text-decoration:underline;}
--></style>

<div class="random_post_content" id="random_posts_id"></div>

<script type="text/JavaScript"><!--


var Random_Max = 5;
var Total_Posts_Number = 0;
var Rand_Posts_Title = [];
var Rand_Posts_Url = [];
var Rand_Posts_Author = [];
var Rand_Posts_Comment_Number = [];
var Rand_Posts_Thumbnail = [];
var Rand_Posts_Snippet = [];

function Vbs_Random_Post(json){var entry;var re = /<\S[^>]*>/g;var str;var banner_begin_index;var banner_end_index;for (var i = 0; i < Random_Max; i++){entry = json.feed.entry[i];Rand_Posts_Title[i] = entry.title.$t;for (var k = 0; k < entry.link.length; k++){if (entry.link[k].rel == 'alternate'){Rand_Posts_Url[i] = entry.link[k].href;break;}}Rand_Posts_Author[i] = entry.author[0].name.$t;Rand_Posts_Comment_Number[i] = parseInt(entry.thr$total.$t);if ("content" in entry){Rand_Posts_Snippet[i] = entry.content.$t;}else if ("summary" in entry){Rand_Posts_Snippet[i] = entry.summary.$t;}else Rand_Posts_Snippet[i] = "";if (Rand_Posts_Snippet[i].search("bp.blogspot.com") != -1) Rand_Posts_Thumbnail[i] = entry.media$thumbnail.url; else {str = "src\u003d\"";banner_begin_index = Rand_Posts_Snippet[i].search(str);if (banner_begin_index == -1){Rand_Posts_Thumbnail[i] = "http://lh3.ggpht.com/_kck7-TEWM-M/TSZtEyqlErI/AAAAAAAAAO0/cXY9tgbBnko/popular_blank_icon.jpg";}else{Rand_Posts_Thumbnail[i] = Rand_Posts_Snippet[i].substring(banner_begin_index + str.length);str = "\""; banner_end_index = Rand_Posts_Thumbnail[i].search(str);Rand_Posts_Thumbnail[i] = Rand_Posts_Thumbnail[i].substring(0, banner_end_index);}} Rand_Posts_Snippet[i] = Rand_Posts_Snippet[i].replace(re, "");if (Rand_Posts_Snippet[i].length > 140){Rand_Posts_Snippet[i] = Rand_Posts_Snippet[i].substring(0, 140) + '...';}}Install_Random_Posts();}

function Install_Random_Posts(){var str_out = "";for (var i = 0; i < Random_Max; i++){str_out += '<div class="recent_post_content_item">';str_out += '<table width="0%" border="0">';str_out += '<tr>';str_out += '<td>';str_out += '<a href="' + Rand_Posts_Url[i] + '" title="' + Rand_Posts_Snippet[i] + '">';str_out += '<img src="' + Rand_Posts_Thumbnail[i] + '" width="32px" height="32px"/>';str_out += '</a>';str_out += '</td>';str_out += '<td>';str_out += '<div class="recent_post_title">';str_out += '<a href="' + Rand_Posts_Url[i] + '" title="' + Rand_Posts_Snippet[i] + '">';str_out += Rand_Posts_Title[i];str_out += '</a>';str_out += '</div>';str_out += '<div class="recent_post_info">';str_out += '<a href="' + Rand_Posts_Url[i] + '" title="' + Rand_Posts_Snippet[i] + '">';str_out += 'By ' + Rand_Posts_Author[i] + ' - ' + Rand_Posts_Comment_Number[i] + ' comments';str_out += '</a>';str_out += '</div>';str_out += '</td>';str_out += '</tr>';str_out += '</table>';str_out += '</div>';}document.getElementById('random_posts_id').innerHTML = str_out;}

function Vbs_Get_Post_Num(json){Total_Posts_Number = json.feed.openSearch$totalResults.$t;if (Total_Posts_Number <= Random_Max){var start_index = 1;Random_Max = Total_Posts_Number;}else{var start_index = 1 + Math.floor(Math.random() * (Total_Posts_Number - Random_Max));
}document.write('<script type="text/JavaScript" src="http://nama-blog-sobat.blogspot.com/feeds/posts/default?start-index=' + start_index + '&max-results=' + Random_Max + '&orderby=published&alt=json-in-script&callback=Vbs_Random_Post"><\/script>');}

--></script>
<script type="text/JavaScript" src="http://nama-blog-sobat.blogspot.com/feeds/posts/default?max-results=0&alt=json-in-script&callback=Vbs_Get_Post_Num"><!--  --></script>


3. Langkah terakhir, klik Save dan lihat hasilnya.

Sangat mudahkan...
Selamat mencoba dan semoga berhasil.
Jika terjadi kesalahan dalam kode mohon diberitahu dengan komentar pada postingan ini.

Demikian Cara memasang Widget Random Post dengan keterangan bergambar pada blogger.
Semoga bermanfaat,
Salam Sukses... :D

Share this

Related Posts

Previous
Next Post »

10 comments

Write comments
23 Maret 2013 05.00 delete

mksh sob,, berhasil.....
smg tambah sukses nie blog :)

Reply
avatar
29 Maret 2013 00.26 delete

wow mksh ,, ini info yang aku cari :)

Reply
avatar
23 Mei 2013 01.08 delete

Bagaimana cara menghilangkan tulisan "author by" dan "comment" serta membuat tulisannya menjadi tebal / bold?

Terima kasih

Reply
avatar
6 Juni 2013 20.46 delete

sangat mantap widget random postnya bro

Reply
avatar
9 Januari 2014 07.25 delete

kok gak sesuai kayak contoh diatas

Reply
avatar
5 Februari 2014 00.56 delete

Makasi sob atas do'a nya..
Ammiinn.. butuh dukungan nya ya... :))

Reply
avatar
5 Februari 2014 00.58 delete

Okee sob.. silahkan sedot.. :)

Reply
avatar
5 Februari 2014 01.00 delete

silahkan gunakan ctrl+f untuk mencari kata yang hendak dihapus.. (o)

Reply
avatar
5 Februari 2014 01.01 delete

silahkan digunakan.. senang bisa membantu.. :>)

Reply
avatar
5 Februari 2014 01.03 delete

Contoh diatas masih menggunakan background warna hitam.. mungkin karena itu jadi berbeda..
tergantung template nya juga sih.. :d

Reply
avatar

Berkomentar lah dengan yang sopan yang tidak mengandung unsur SARA, PORNOGRAFI, Dan TIDAK diperkenankan untuk PROMOSI selain Persetujuan dari ADMIN. Jika di lakukan, Maaf komentar akan DI HAPUS.

Untuk menggunakan Emoticon Komentar, Klik Emoticon yang akan di pasang. Akan muncul kode emoticonnya. Masukkan itu pada saat berkomentar. Terima Kasih
EmoticonEmoticon