Recent Posts

Selasa, 31 Mei 2011

Cara Membuat Recent Pos Tampil Beda


Sedikit variasi pada blog kita, mungkin ada baiknya kita mencoba beberapa script untuk mempercantik blog kita itu, misalnya dengan cara membuat slide recent post di blog kita. Slide recent post ini merupakan kumpulan posting terbaru yang kita terbitkan namun pada saat tampil akan membentuk suatu slide, untuk contohnya silahkan lihat pada pojok kiri bawah blog www.rasio28.blogspot.com.

Bagaimana cara membuatnya, mungkin bagi sebagian blogger, terutama blogger senior hal ini sangatlah mudah, tapi mungkin bagi sebagian lagi ini adalah hal baru yang cukup baik untuk dijadikan pengalaman kita dalam membuat blog.


Untuk membuatnya silahkan ikuti langkah berikut ini:

1. Masuk dulu ke menu DASBOR blog anda, kemudian klik pada pilihan rancangan
2. Setelah itu pilih Elemen Halaman
3. Kemudian klik Tambah Gadget
4. Klik pada pilihan html/java script
5. Silahkan copy paste script di bawah ini :

<script language='javascript'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
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:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='javascript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 600;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 80;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://www.rasio28.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Pada bagian yang saya beri cetak tebal, silahkan ubah alamat blognya dengan alamat blog sobat, kemudian pada bagian angka yang saya beri cetak tebal silahkan ubah nilai 10 menjadi sesuka anda, misalnya lima dan sebagainya.

Keterangan:

-home_page = "http://rasio28.blogspot.com/"; merupakan tempat dimana tempat alamat postingan blog sobat. Jadi jangan lupa untuk mengganti alamatnya dengan blog sobat.

-numposts = 10; merupakan jumlah postingan atau artikel yang akan di tampilkan pada slide yang sobat buat.


Setelah anda selesai melakukan langkah-langkah di atas, silahkan klik simpan dan so cekidot lihat hasilnya.....Selamat mencoba......

1 komentar:

dzaki tajudin mengatakan...

tuker link yuk..
link banner agan sudah ane tambahkan di blog ane..
ditunggu yah :)

Posting Komentar

Submit Your Link