Cara pasang Random Posts widget

Widget Random Post adalah widget yang memaparkan post secara rawak. Widget ini juga dapat meningkatkan bilangan page view bagi sesebuah blog. Anda boleh melihat Demo di bahagian bawah blog ini. (Random Posts).

Untuk memasang widget Random Post di blog anda, sila ikut beberapa langkah di bawah.

Langkah 1

Salin kod di bawah dan edit pada line yang di bold dengan warna merah. Gantikan  nama-blog-anda dengan URL blog anda. Untuk mengubah bilangan paparan post pada widget tersebut, anda boleh mengubah nilai 5 kepada nilai yang anda inginkan.


<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-anda.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-anda.blogspot.com/feeds/posts/default?max-results=0&alt=json-in-script&callback=Vbs_Get_Post_Num"><!--  --></script>



Langkah 2

Salin kod yang telah siap di edit (rujuk langkah 1) dan kemudian paste kod tersebut pada HTML/Javascript dan save.



{ 17 comments.. read them below or add one }

DaHLia DaHLia 1:48 PM
nice!! Tq :D
Dah lama menunggu2 tutorial baruu..hehe
Nescafe ais Nescafe ais 1:52 PM
@DaHLiaMood menulis tengah ok ni..haha
shiqin ghazali shiqin ghazali 7:08 PM
thankx.... ntuk popular post yg leh bgerak2 tu cmne lak yer?
Nescafe ais Nescafe ais 10:30 PM
@shiqin ghazaliNak kena tulis semula pasal slider post tu. Tapi tak tahu bila.he he
Подтверждаю Подтверждаю 9:17 AM
boleh cek balik tak script ni.? tak keluar langsung lah hari ni. dari malam tadi. sebelum ni ok je. tq

=)
Nescafe ais Nescafe ais 8:09 PM
@ПодтверждаюScript takder masalah. Ini berkaitan dengan feed. Feed blog kamu redirect ke feedburner. Script tu tak boleh nak quote feedburner.
Kazen Kazen 12:46 AM
bro...gune thread comment xdetect lah jumlah komen pd post tu....kalu gune template comment detect je...so camne nk bg die detect nga intense debate nie
docche docche 3:33 AM
This comment has been removed by the author.
docche docche 3:36 AM
salam...saya ingin bertanya sesuatu...kenapa random post diblog saya tidak mengeluarkan gambar?
Muhammad Adam Hussein Muhammad Adam Hussein 4:06 PM
makasih tutorialnya, sangat membantu!
依之汉 依之汉 9:29 PM
Nak tanya, macam mana nak padam by Author dan comment yea?
amirulyaacob amirulyaacob 5:39 PM
salam tuan mcm mana lak nak buat recent post by label dgn tumbnail mcm yang tuan buat tu FREE SOFTWARE, POLITIK, BLOG dan sebagainya tu...
依之汉 依之汉 6:04 PM
tuan blog sudah kekeringan idea untuk jawab segala persoalan yang dilontarkan (saya tolong jawabkan yea).
insan misteri insan misteri 4:41 AM
boleh tak code ini di edit sikit lagi...kalau boleh nama post seperti by insin misteri tak keluar.maksud saya nama yang post entry tak keluar..boleh edit tak