Cara Mudah Membuat Recent Post Bergambar Dengan Efek Naik Tangga - Indriawan dot Com | Informasi Dan Berita Online

Breaking

Post Top Ad

Space Iklan

Kamis, 20 Januari 2011

Cara Mudah Membuat Recent Post Bergambar Dengan Efek Naik Tangga

Bener gak ya judul di atas? Habis bingung mau kasih judul apa hehe....
Oke langsung aja ke topik. Recent post atau postingan terbaru memang sangat penting. Karena dengan adanya recent post, pengunjung dapat mengetahui postingan terbaru di blog kita.

Dalam membuat recent post kali ini sangt mudah, sobat tinggal copy paste aja di Gadget sobat. Buat sobat yang tertarik memasang widget recen post ini, silahkan copy aja kode di bawah ini.

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKrewicpV-AY8fkl981GFSzaGudNhONSoFuWMgW5l3Sz40gO45inTH3WLNo0NM_CHQTCnFkOZed0vLwfKW5R-4OAgwpsPey7FBXZP16QbvaSp4M36J0fGl3qqI7CueWevjRsa7oSOAKn1Q/s1600/bdlab-blogspot-com.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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEmaKK16Ex2brU3X0pBYfRs5oQjIWeCazxKQsVB_yWG5nXhVStx9r4M-XVKsCRvkHqtFXepkGxw_0qeYB5qWp9QW4eUgwXjWryHD7Ex4BVUMqI7tJPSpmubaLZrV8M0rp8eyGwL6aZ7j8/s400/noimage.png";


imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEmaKK16Ex2brU3X0pBYfRs5oQjIWeCazxKQsVB_yWG5nXhVStx9r4M-XVKsCRvkHqtFXepkGxw_0qeYB5qWp9QW4eUgwXjWryHD7Ex4BVUMqI7tJPSpmubaLZrV8M0rp8eyGwL6aZ7j8/s400/noimage.png";


imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEmaKK16Ex2brU3X0pBYfRs5oQjIWeCazxKQsVB_yWG5nXhVStx9r4M-XVKsCRvkHqtFXepkGxw_0qeYB5qWp9QW4eUgwXjWryHD7Ex4BVUMqI7tJPSpmubaLZrV8M0rp8eyGwL6aZ7j8/s400/noimage.png";


imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEmaKK16Ex2brU3X0pBYfRs5oQjIWeCazxKQsVB_yWG5nXhVStx9r4M-XVKsCRvkHqtFXepkGxw_0qeYB5qWp9QW4eUgwXjWryHD7Ex4BVUMqI7tJPSpmubaLZrV8M0rp8eyGwL6aZ7j8/s400/noimage.png";


imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEmaKK16Ex2brU3X0pBYfRs5oQjIWeCazxKQsVB_yWG5nXhVStx9r4M-XVKsCRvkHqtFXepkGxw_0qeYB5qWp9QW4eUgwXjWryHD7Ex4BVUMqI7tJPSpmubaLZrV8M0rp8eyGwL6aZ7j8/s400/noimage.png";

showRandomImg = true;


boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

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://Alamat Blog.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>

Untuk yang warna hijau ganti URL blog sobat. Untuk ukurannya silahkan sobat atur sesuai template.

Semoga bermanfaat.
Alhamdulillah..

15 komentar:

  1. trims sob... atas infonya :t

    BalasHapus
  2. makasi sob....
    nie yg q cari dari kemaren.... :D

    BalasHapus
  3. aku pas golek iki mas tapi sing otomatis enek gag yow coz lak'e adewe posting nyar ganti HTML'e now?? enek solusi gag mas??

    BalasHapus
  4. kalo buat widget wordpress bisa ga gan???

    BalasHapus
  5. @zul : oke sob..sama"

    @rizal : ketemu dunk nih jadinya, hehehe

    @bagyojose : kayaknya bisa sob kan sama" pake javascript

    BalasHapus
  6. thanks bro atas info nya... kren post nya... ane suka... thanks ya bro.. :)

    BalasHapus
  7. @andhie : thanks juga sob :)

    BalasHapus
  8. kok ga ada contohnya, lebih maknyos pake contoh gan biar mantabs, thanks infonya

    BalasHapus
  9. thank ya sob ,entar aku follow,ya.....ijin post ke blog aku boleh engak ,buat tugas sekolah///aku tunggu jawabanya>>>

    BalasHapus
  10. blog ini tepat yang saya ingin kan :D

    BalasHapus
  11. terimakasih banyak atas info nya sangat bermanfaat sekali
    semoga semakin sukses nya

    BalasHapus
  12. artikel yang anda tulis di blog ini, sungguh sangat memotivasi diri saya untuk trus berkarya, terima kasih semoga kebaikan anda mendapatkan balasa yang lebih baik.

    BalasHapus
  13. trimakasi atas infonya semoga dapat bermanfaat gan

    BalasHapus
  14. nice infonya.... sukses terus ea ditunggu artikel selanjutnya!!!

    BalasHapus

Post Top Ad

Space Iklan