Cara Membuat Random Posts Lebih Menarik

Cara Membuat Random Posts Lebih Menarik - Hai, sobat BM. Selamat pagi dan selamat beraktivitas dimanapun sobat BM berada. Kali ini, mimin mau share artikel mengenai Cara Membuat Random Posts Lebih Menarik. Ya, tentunya ini berkaitan dengan tampilan serta fungsi Blogger donk. Selain tampilan Random Post ini yang menarik, widget ini juga ringan serta valid HTML5, lho. Bagaimana cara membuatnya ? Yuk, simak ulasan berikut ini :

1. Masuk ke akun Blogger anda

2. Masuk ke menu Tata Letak -- Tambahkan Gadget -- HTML/JavaScript

3. Copas kode berikut. Lalu klik Simpan

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=7;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="http://blogger-muntok.blogspot.com/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=randomposts" type="text/javascript"></script>

Catatan : Ganti teks yang berwarna biru dengan url blog anda. Untuk yang berwarna merah adalah jumlah random posts yang akan di tampilkan.

4. Klik Simpan
5. Setelah tersimpan, sekarang masuk menu Template -- Sesuaikan -- Tingkat Lanjut
6. Copy dan Paste CSS berikut ke kolom yang tersedia

#HTML5 ul {list-style:none;}#HTML5 ul li { line-height: 1.4em;background: transparent url(http://3.bp.blogspot.com/-7BrnIVeLLro/UC56NKY8yDI/AAAAAAAAAjE/bCi7jeht2fM/s1600/MBT+Arrow1.png) no-repeat scroll 0px -2px;font:14px "Trebuchet MS",sans-serif;margin: 0.3em 0;padding: 0 0 0.8em 20px;}#HTML5 ul li:hover { background: transparent url(http://2.bp.blogspot.com/-xNigLxyFZqE/UC56NxfTesI/AAAAAAAAAjI/Yc4OA1zd6yE/s1600/MBT+Arrow2.png) no-repeat scroll 0px -2px;}#HTML5 ul li:active{background: transparent url(http://4.bp.blogspot.com/-IuGCApgy21E/UC56O4YNROI/AAAAAAAAAjQ/cQnc54hPF6o/s1600/MBT+Arrow3.png) no-repeat scroll 0px -2px;}#HTML5 .widget-content{height:350px;width:auto;overflow:auto;}

Catatan : Perhatikan kode yang saya Bold. Kode #HTML5 harus anda sesuaikan dengan kode widget Random Post anda tadi

7. Klik Terapkan ke Blog.

Kedengarannya rumit ya sobat BM ? Tapi kalau anda melakukannya dengan teliti dan pelan-pelan maka hasilnya oke

Oke, demikian dulu sobat BM artikel Cara Membuat Random Posts Lebih Menarik. Semoga artikel ini dapat membuat blog anda lebih cantik sekaligus multi fungsi. Saran dan pertanyaan silahkan ditempel pada kotak komentar. Terima kasih.