Cara Dasar Membuat Random Postingan Blog di Blogspot

Random post sangat mempengaruhi bagi kelangsungan blog kita,serta membawa dampak positif bagi blog dalam optimasi setiap postingan/artikel yang sudah sobat tulis. Dan ini cara ini memungkinkan postingan/artikel lama kita yang jarang tersentuh menjadi naik halaman. Maka dengan random post ini postingan lama akan kembali muncul,dan sangat mempermudah bagi pengunjung blog sobat untuk menjelajah setiap artikel.

Dan dikesapatan kali ini saya akan memberikan cara "random post" yang nanti akan terletak pada sidebar blog sobat.

1.   Login ke akun blogger milik sobat.

2.   Pilih menu Template,lalu pilih Edit HTML.

3.   Tekan ctrl+f dan ketik/cari kode ]]></b:skin>

4.   Copy kode dibawah ini diatas kode tadi.

      .gfg-root { width: auto; height: auto; position: relative; overflow: hidden; text-align: center; font-family: verdana, sans-serif;font-size: 12px;padding:2px; background:none;border: 0px solid #363636;}

.gfg-title {font-size: 16px;font-weight : bold;color : #fff;background-color: none;line-height : 1.4em;overflow: hidden;white-space : nowrap;} 

.gfg-subtitle {font-size: 14px;font-weight: bold;color: #333;background-color: none;line-height : 1.4em; overflow : hidden;white-space : nowrap;margin-bottom : 0px;}

.gfg-subtitle a {color : #DF7F3B;display:none !important;} .gfg-entry {background-color: none;width : 100%;height : 9.9em;position : relative;overflow : hidden;text-align : left;margin-top : 0px;} 

/* To allow correct behavior for overlay */.gfg-root .gfg-entry .gf-result {position : relative;background-color:none;width : auto;height : 100%;padding-left : 5px;padding-right : 5px;} .gfg-list {position : relative;overflow : hidden;text-align : left; margin-bottom : 15px;display:none !important;} 

.gfg-root .gfg-entry .gf-result .gf-title {font-size: 13px;display:block;color:#DF7F3B;font-weight:bold;line-height: 1.2em;overflow : hidden;white-space : nowrap;text-overflow : ellipsis;-o-text-overflow : ellipsis;margin-top : 4px;} 

.gfg-root .gfg-entry .gf-result .gf-snippet {line-height : 1.3em;color: #333;margin-top : 3px;font-size: 12px;} 

.clearFloat {clear : both;} 

#feedGadget { margin-top: 3px;margin-left: auto;margin-right: auto;width: auto;font-family:verdana, arial;font-size: 10px;color: #333;} 

5.   Simpan Template.

Langkah selanjutnya untuk menampilkan random post dihalaman  depan blog sobat.

1.   Buka Layout/Design atau Tata Letak. Lalu pilih page laman.

2.   Klik Add Gadget/Tambah Gadget.

3.   Pilih HTML/Java Script.

4.   Copy kode dibwah ini untuk dimasukan kedalam gadget HTML/Java Script.

      

     <div id='random-post-container'>Memuat...</div>

<script>
//<![CDATA[
// Feed configuration
var homePage = 'http://im-internetart.blogspot.com',
maxResults = 5,
containerId = 'random-post-container';
// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
function shuffleArray(arr) {
var i = arr.length, j, temp;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}
// Get a random start index
function createRandomPostsStartIndex(json) {
var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
// console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}
// Widget's main function
function randomPosts(json) {
var link, ct = document.getElementById(containerId),
entry = shuffleArray(json.feed.entry),
skeleton = "<ul>";
for (var i = 0, len = entry.length; i < len; i++) {
for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
}
skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
}
ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
//]]>
</script>

5.   Ubah contoh alamat blog warna merah dengan blog punya sobat.
6.   Save!

Selesai,widget random post sobat pun sudah muncul di sidebar atau di footer widget blog sobat.

      

Tweet