[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 Teta...

-[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

COMMENTS

BLOGGER: 10
Loading...

Nama

Artikel,66,Cerita singkat,82,Java,12,SEO,15,Tahukah sobat??,21,Tips dan Trik,15,Tips.....n' Trick.....,14,Tutorial,20,Tutorial Blogger,50,
ltr
item
Blog Salman Syuhada: [Tutorial] Cara memasang Widget Random Post dengan keterangan bergambar pada blogger
[Tutorial] Cara memasang Widget Random Post dengan keterangan bergambar pada blogger
http://4.bp.blogspot.com/-f7taolsUTk4/UCyD5ux61tI/AAAAAAAAB5s/U9tShQ5xwpM/s400/random.jpg
http://4.bp.blogspot.com/-f7taolsUTk4/UCyD5ux61tI/AAAAAAAAB5s/U9tShQ5xwpM/s72-c/random.jpg
Blog Salman Syuhada
http://blog.salmansyuhada.com/2012/08/cara-memasang-widget-random-post-dengan.html
http://blog.salmansyuhada.com/
http://blog.salmansyuhada.com/
http://blog.salmansyuhada.com/2012/08/cara-memasang-widget-random-post-dengan.html
true
5369818979434965955
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy