Cara Membuat Artikel Random di Blog

By |Updated: November 9, 2016 1 Comment

Artikel Random, Dibawah ini menjelaskan bagaimana cara membuat artikel random di Blog atau Blogger. Ada beberapa cara untuk membuat Artikel Random ini, atau biasa juga dengan sebutan artikel acak. Fitur posting artikel random ini secara otomatis dipilih oleh Blog itu sendiri, bisa ditempatkan di samping postingan artikel, baik itu sebelah kanan atau kiri.

Fungsi dari Random Artikel Otomatis itu sendiri merupakan salah satu cara untuk menampilkan topic-topik lain dari artikel yang terdahulu. Fungsi ini bisa menjadi nilai tambah SEO bagi mesin pencari, supaya link artikel ter-index atau terdeteksi lagi. Begitu pula bagi pengunjung, ada transformasi topic yang mungkin membuat tertarik untuk dibaca.

cubes random

Image: cubes random

Cara mudah membuat artikel random di blog

Namun Artikel random berikut ini hanya menampilkan judunya saja, sedangkan mengenai tampilannya seperti jenis huruf, besar huruf, warna judul dan lainnya bisa sedikit dimodifikasi bagi yang sudah terbiasa mengedit template. Random artikel ini cukup cepat dalam hal loadingnya, sehingga tidak terlalu menggangu dari kecepatan membuka halaman.

Untuk Membuat Random Artikel di Blog ini memerlukan waktu hanya beberapa menit saja. Berikut diuraikan cara-caranya yang singkat di bawah ini. Random Artikel dapat di modifikasi sesuai kebutuhan, diuraikan sedikit di dalam keterangan.

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

.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 atau diatas </head> dibagian head.

JavaScript Random Post

<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

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

Tags:
ratingsratingsratingsratingsratings (No Ratings Yet)
loadingLoading...

Komentar pada: Cara Membuat Artikel Random di Blog

Leave a Reply

Your email address will not be published. Required fields are marked *