Memasang Widget Random Posts di Blogger - Hallo sahabat Rumah Musafir Ilmu, Pada Artikel yang anda baca kali ini dengan judul Memasang Widget Random Posts di Blogger, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogspot, Artikel Widget, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Memasang Widget Random Posts di Blogger
link : Memasang Widget Random Posts di Blogger

Memasang Widget Random Posts di Blogger

Widget Random Posts di Blogger

Tutorial Akhbar Islam - Senang bisa posting hari ini, tentunya dengan tutorial jitu ala Akhbar Islam. Artikel ini adalah artikel kedua setelah artikel pertama tentang cara mudah membuat mouse over button semenjak blog ini didirikan.

Apa itu Widget Random Posts? adalah widget untuk blogger yang menampilkan artikel secara random (acak). Widget ini sangat penting, karena selain sebagai navigasi yang memudahkan pengunjung dalam mencari informasi di blog kita, juga akan menjadikan pengunjung mau berlama-lama di blog kita sehingga tentu akan menambah pageview pengunjung blog kita.

Pemasangan widget ini juga tidaklah rumit, karena kita hanya memasukkan code css nya di atas code </b:skin> dan kemudian dilanjutkan dengan menambah gadget type html/javasrcipt. Untuk contoh bisa anda lihat pada screenshots di atas.

Baiklah, langsung saja kita masuk ke tutorial memasang widget random posts:

Menambahkan code CSS ke halaman html template

• Login ke blog dengan ID anda.
• Pada halaman dashboard blogger tekan link title blog anda.
• Pilih menu Template >> Edit Html
• Tekan Ctrl +F, dan dikotak pencarian, cari code ]]></b:skin>
• Tambahkan code berikut tepat di atas code ]]></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/AVvXsEgFJYTCRv8pXY8HwbzsH4Wt2f83am_KCQjlnLqCT6MtMs5QTDw4l9jxiqH-jAWpzEWPz9nGuk3_4yct_Hox4DTbSAVgGleqUFhFcVLQjkVQpa0dtKhyLSRlXXDIUoENGUsLJh6Fui7YxyLo/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 template anda dengan menekan tombol Save Template, sampai disini proses penambahan code css ke dokumen HTML template selesai, dan lanjut ke tahap berikutnya.

Menambah gadged type HTML ke layout blog

• Pastikan anda masih dalam keadaan login di blogger
• Pilih menu Layout >> Add a gadget >> pilih gadget type HTML/Javascript

• Masukkan code ini didalamnya:

<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&amp;callback=related_results_labels&amp;max-results=8"></script>
<script type="text/javascript">
var currentposturl="";
var maxresults=8;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>

• Tekan tombol Save
• Sekarang lihat ke tampilan blog, dan pastikan widget ini berjalan. Jika berjalan dengan baik ucapkan alhamdulillah.

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

Keyword: Memasang Widget Random Posts di Blogger - Tutorial Akhbar Islam

Demikianlah Artikel Memasang Widget Random Posts di Blogger

Sekianlah artikel Memasang Widget Random Posts di Blogger kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Memasang Widget Random Posts di Blogger dengan alamat link http://bismillah-go.blogspot.com/2013/05/memasang-widget-random-posts-di-blogger.html