Tutorial : Letak Widget Random Post

Assalamualaikum dan salam sejahtera.

Kita kembali lagi dalam rancangan Tutorial Bersama DJH. Baiklah. Kali ini angah nak berikan tutorial yang simple sahaja. Adakah anda semua perasan dengan widget terbaru di blog ini? Ya,wisget yang terletak di bahagian kiri paling atas.

Apa yang angah nak cakap ialah,widget ini sangat bagus sebab ianya menunjukkan entri-entri terdahulu. Senang untuk angah dan juga para pembaca untuk melihat entri-entri sebelum ini. Part yang paling best ialah,entri-entri di situ dipaparkan secara random. Jika kita refresh page,ia akan memaparkan entri lain pula.

Jadi,angah rasa bahawa widget ini memang bagus untuk lihat entri-entri terdahulu lantas dapat merendahkan bounce rate blog apabila pembaca membaca entri-entri lain pula. 

Jom ikuti tutorialnya :-

1. Log In Blogger > Tekan Layout > Add A New Gadget > Pilih HTML/javascript

2. Copy dan paste kan kod di bawah ke dalam HTML/javascript.

3. Isikan NAMA BLOG ANDA pada perkataan yang telah dimerahkan.

4. Tukar bilangan post entry yang anda mahukan mengikut berw citarasa anda pada nombor yang berwarna biru.

5. SAVE dan lihat blog anda. 

 KOD WIDGET

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

Mudah dan senang kan? Alhamdulillah widget ini telah berjaya dipaparkan dalam blog angah. Bagaimana dengan blog anda pula? Kalau menjadi,alhamdulillah. Kalau tidak menjadi,mungkin anda boleh bertanya kepada angah. :D