Cara Membuat Artikel Random di Blog

1. Login Ke Blogger.
2. Klik Template, Backup template untuk jaga2 bila diperlukan, atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.
3. Klik Edit HTML, klik kiri 1x pada kotak HTML, klik Ctrl+F untuk memudahkan pencarian kode.
4. Masukan kode CSS berikut sebelum / diatas ]]></b:skin> atau </style> di bagian head.

CSS Random Posts


123456789101112131415161718192021222324252627282930313233343536.random-posts-tag {
    background: #7793FF; 
    width: 100%; 
    height: auto; 
    padding: 5px 0 5px 5px; 
    font: 17px Arial; 
    font-weight: bold; 
    color: #fff; 
    text-transform: uppercase; 
    }
.random-posts {
    border: none; 
    margin-left: 0px; 
    margin-bottom: 10px; 
    width: auto; 
    }
.random-posts ul {
    list-style: square; 
    margin: 0 0 10px 0; 
    padding: 10px 0px 10px 15px; 
    }
.random-posts li { 
    margin: 0; 
    border-bottom: 1px dotted #DBDBDB; 
    padding: 7px 0 7px 0; 
    line-height: 1.4em; 
    }
.random-posts a { 
    text-decoration: none; 
    font: 14px "arial narrow",arial; 
    text-align: left; 
    color: #1111AF; 
    }
.random-posts a:hover { 
    color: #00A3FF; 
    }

Warna Biru adalah posisi link artikel dari kiri, bisa disetting supaya sesuai dengan keinginan supaya terlihat lebih rapih.
Merah adalah jenis huruf.
Hijau adalah warna link ketika dihover.
Gaya CSS lainnya bisa disesuaikan.

5. Masukan kode javascript berikut sebelum / diatas </head> dibagian head.

JavaScript Random Post


1234567891011<script type="text/javascript">//<![CDATA[
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>

Pink adalah jumlah dari artikel yang ingin ditampilkan.

6. Masukan kode berikut disuatu tempat di HTML di bagian sidebar, biasanya setelah <div class='sidebar-wrapper'> atau <div id='sidebar'> atau <div class='sidebar'> atau sejenis, karena setiap Blog, mempunyai nama yang berbeda-beda.

ATAU Jika bingung dan template masih original, masukan saja kode berikut di Add Gadget (Blogger: Dashboard - Layout - Add Gadget - Select HTML/JavaScript - masukan di content box (Catatan: Title Box dikosongkan saja) - Save).

HTML Random Post


1234<div class='random-posts-tag' >Random Posts</div>
<div class='random-posts' >
<script src="/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=9999&amp;callback=randomposts" type="text/javascript"></script>
</div>

Warna Biru bisa dirubah sesuai keinginan. Save Template dan lihat hasilnya, semoga bermanfaat.

 Sumur: http://www.aura-ilmu...com/2013/09/Cara-Membuat-Artikel-Random-di-Blog.html
Scroll to top