Widget Random Posts adalah widget bloger yang akan menampilkan artikel secara random. Widget ini penting untuk dipasang di blog kita karena selain sebagai navigasi untuk memudahkan pengunjung dalam mencari informasi di blog kita juga memungkinkan pembaca blog untuk tetap berada di blog kita dalam waktu yang lebih lama yang pada gilirannya akan meningkatkan Page Views blog.
Memasang widget ini cukup mudah dan dilakukan dalam 2 tahap, yaitu menanamkan kode CSS ke dalam dokumen HTML template serta menambahkan gadget type HTML/Javascript ke dalam layout blog.
Berikut ini adalah langkah untuk menambahkan widget Random Post di blogger
Menanamkan kode CSS ke dalam dokumen HTML Template
Menambahkan gadget type HTML ke dalam Layout Blog
NOTE :
Untuk mengatur jumlah artikel yang ditampilkan secara acak pada widget silahkan ganti angka 8 pada kode maxresults=8 sesuai dengan keinginan anda. Pada script di atas terdapat 2 kode maxresults=8, jika anda merubahnya samakan angka pada kedua kode tersebut.
Memasang widget ini cukup mudah dan dilakukan dalam 2 tahap, yaitu menanamkan kode CSS ke dalam dokumen HTML template serta menambahkan gadget type HTML/Javascript ke dalam layout blog.
Berikut ini adalah langkah untuk menambahkan widget Random Post di blogger
Menanamkan kode CSS ke dalam dokumen HTML Template
- Login ke blogger dengan ID anda
- Pada halaman dashboard blogger klik link title blog anda
- Pilih menu Template ->> Edit HTML ->> Proceed
- Cari code ]]></b:skin>
- Tambahkan kode brikut ini tepat di atas kode ]]></b:skin>
#categorylist{float:left; margin-top:0px; margin-bottom:10px}
#categorylist ul{float:left; margin:0px; margin-left:20px; padding:0px; font-size:11px}
#categorylist li{list-style:disc outside url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSa3if40q0wv2cn6eoF4NcSGC7TNr-YWC9f2u9lY82RcVlVaTn9JqVmtMn9umf8246ITHMOrODdLViPWYd26K0CQ5xkajNsNc9pbSyhf5zg4lyi0vlF2cgm06tZG7icaTkjBsHBQIYcLBk/s1600/bullet-point-image-8.png"); width:auto; margin-bottom:0;margin-top:0;padding:0;vertical-align:middle;}
#categorylist a{font-family: "Droid Sans",arial,sans-serif;text-decoration:none; color:#696969; font-size:12px}
#categorylist a:visited {color:#3483b0; text-decoration: none}
#categorylist a:hover{color:#f79e1f}
#categorylist ul{float:left; margin:0px; margin-left:20px; padding:0px; font-size:11px}
#categorylist li{list-style:disc outside url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSa3if40q0wv2cn6eoF4NcSGC7TNr-YWC9f2u9lY82RcVlVaTn9JqVmtMn9umf8246ITHMOrODdLViPWYd26K0CQ5xkajNsNc9pbSyhf5zg4lyi0vlF2cgm06tZG7icaTkjBsHBQIYcLBk/s1600/bullet-point-image-8.png"); width:auto; margin-bottom:0;margin-top:0;padding:0;vertical-align:middle;}
#categorylist a{font-family: "Droid Sans",arial,sans-serif;text-decoration:none; color:#696969; font-size:12px}
#categorylist a:visited {color:#3483b0; text-decoration: none}
#categorylist a:hover{color:#f79e1f}
- Simpan perubahan template anda dengan menkan tombol Save Templates. Sampai di sini proses menanamkan kode CSS ke dalam dokumen HTML template selesai, dan lanjutkan dengan langkah berikutnya.
Menambahkan gadget type HTML ke dalam Layout Blog
- Pastikan anda masih dalam posisi login di blogger
- Pilih menu Layout ->> Add a gadget ->> Pilih gadget Type HTML/Javascript
- Masukkan kode di bawah ini ke dalamnya dan tekan tombol Save untuk menyimpan gadget.
<script type='text/javascript'>
var relatedpoststitle="";
</script>
<script type='text/javascript'>
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
for(var i = 0; i < relatedUrls.length; i++)
{
if(relatedUrls[i]==currentposturl)
{
relatedUrls.splice(i,1)
relatedTitles.splice(i,1)
}
}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>1)
document.write('<ul>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
</script>
<div id="categorylist">
<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&callback=related_results_labels&max-results=8"></script>
<script type="text/javascript">
var currentposturl="";
var maxresults=8;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
var relatedpoststitle="";
</script>
<script type='text/javascript'>
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
for(var i = 0; i < relatedUrls.length; i++)
{
if(relatedUrls[i]==currentposturl)
{
relatedUrls.splice(i,1)
relatedTitles.splice(i,1)
}
}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>1)
document.write('<ul>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
</script>
<div id="categorylist">
<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&callback=related_results_labels&max-results=8"></script>
<script type="text/javascript">
var currentposturl="";
var maxresults=8;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
- Sekarang periksa blog anda pastikan widget Random Posts telah tampak pada blog anda. Jika berhasil jangan lupa berkomentar ya ...
NOTE :
Untuk mengatur jumlah artikel yang ditampilkan secara acak pada widget silahkan ganti angka 8 pada kode maxresults=8 sesuai dengan keinginan anda. Pada script di atas terdapat 2 kode maxresults=8, jika anda merubahnya samakan angka pada kedua kode tersebut.
