Cara Membuat Widget Random Post Pada Blog

Unknown

Trik Blog

12 Nov 2013

Belum ada komentar

Kali ini saya akan share dan berbagi bagaimana Cara Membuat Widget Random Post Pada Blog, Random Post Pada Blog maksudnya kita akan mencoba membuat sebuah widget yang akan menampilkan Postingan atau artikel secara acak pada Blog. Dengan membuat Random Post maka akan memudahkan pengunjung untuk melihat postingan yang terdahulu. sebelum melanjutkan cara membuat Random Post, sahabat bisa baca artikel saya sebelumnya yaitu : Cara membuat related post dengan gambar berjalan, Cara membuat widget artikel terpopuler

Untuk Membuat Random Post kali ini saya akan memakai kode script jquery, dimana tampilan Widget akan terlihat semakin menarik. Postingan akan muncul secara acak dengan gambar thumb yang bergerak dari atas kebawah secara bergantian.

Widget Random Post ini tentu tidak akan memberatkan loading pada blog, kalau sahabat penasaran dengan Widget Random Post ini silahkan sahabat bisa melihat demonya dibawah ini :

DEMO

Nah sekarang bagi sahabat yang ingin Membuat Widget Random Post Pada Blog, silahkan sahabat lakukan langkah berikut ini :
1. Login ke Blogger

2. Pilih Tata Letak

3. Selanjutnya tambahkan Widget baru dengan meng-klick "Add Gadget"

4. Pilih HTML/Javascript

5. Copy kode script dibawah ini dan pastekan kedalam Widget tersebut

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><center><strong>RANDOM POST</strong></center>
<center>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:1px;
padding:0px 0px;
height:300px;
}
#spylist ul{
width:100%;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:100%;
padding: 0px 0px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url() repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
width:100%;
font-size:10px;
height:12px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:8px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:12px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:8px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPWKItVnPN7z6FKcwwjRPsSSjAPPjED06yhay1WorWjevOT3Ma7jUC9qUF3mrWl2KCPaODdNf8JcONn5XJKokjY2RZgf-LIwpmtKK-bn-eKVyDxcplG32unctMZwcCr0e8ZXIyTuNAoiV9/s128/logo.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPWKItVnPN7z6FKcwwjRPsSSjAPPjED06yhay1WorWjevOT3Ma7jUC9qUF3mrWl2KCPaODdNf8JcONn5XJKokjY2RZgf-LIwpmtKK-bn-eKVyDxcplG32unctMZwcCr0e8ZXIyTuNAoiV9/s128/logo.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPWKItVnPN7z6FKcwwjRPsSSjAPPjED06yhay1WorWjevOT3Ma7jUC9qUF3mrWl2KCPaODdNf8JcONn5XJKokjY2RZgf-LIwpmtKK-bn-eKVyDxcplG32unctMZwcCr0e8ZXIyTuNAoiV9/s128/logo.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPWKItVnPN7z6FKcwwjRPsSSjAPPjED06yhay1WorWjevOT3Ma7jUC9qUF3mrWl2KCPaODdNf8JcONn5XJKokjY2RZgf-LIwpmtKK-bn-eKVyDxcplG32unctMZwcCr0e8ZXIyTuNAoiV9/s128/logo.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPWKItVnPN7z6FKcwwjRPsSSjAPPjED06yhay1WorWjevOT3Ma7jUC9qUF3mrWl2KCPaODdNf8JcONn5XJKokjY2RZgf-LIwpmtKK-bn-eKVyDxcplG32unctMZwcCr0e8ZXIyTuNAoiV9/s128/logo.png";
showRandomImg = true;
boxwidth = 200;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 9;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 100;
home_page = "http://www.susandiartawayan.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://sundaboy.googlecode.com/files/Artikel%20Terkait%20berkedip.txt' type='text/javascript'></script>
</div></center>

6. Keterangan
- RANDOM POST = Judul Widget Random Post
- height:300px; = Tinggi Widget
- width:100%; = Lebar Widget ( 100% akan menyesuaikan secara otomatis dengan ukuran Widget)
- numposts = 100; = Jumlah Postingan yang akan di munculkan

7. Ganti url http://www.susandiartawayan.com/ dengan url milik sahabat.

8. Simpan dan lihatlah hasilnya


Nah itulah Cara Membuat Widget Random Post Pada Blog yang dapat saya share, semoga bermanfaat, kalau ada kesulitan silahkan untuk berkomentar pada kotak komentar dibawah ini. sekian dan terimakasih