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.