Cara Buat Recent Post With Thumbnail And Simple Spy

Pada Postingan saya sebelumnya pernah juga membahasa 'Cara Buat Recent Post dan Total Comment Berjalan (Marquee)' dan sekarang kita membahas tutorial serupa, Widget  recent post ini selain memiliki effect animasi spy karena penggunaan script jquery juga dilengkapi dengan thumbnail dan captions.Cara pemakaiannya juga sangat mudah.

Recent posts with thumbnail and simple spy adalah recent post hasil dari pengembangan Mas Abu Farhan seorang blogger indonesia juga. saya hanya mengubah dengan memberikan sedikit tampilan yang menarik.

Baiklah Disini saya akan memberikan contoh tampilan  Recent Post With Thumbnail And Simple Spy. berikut contohnya :

• Inilah Manfaat Menjalin Hubungan Tanpa Status "Fling"
  (07 Oct 2012)
  (0 comments)
• Inilah Tipe Pria Yang Tidak Dapat Membuat Anda Bahagia
  (09 Oct 2012)
  (2 comments)
• Benarkah?? Stres Bisa Membuat Wanita Sulit Hamil?
  (09 Oct 2012)
  (0 comments)
• Inilah 4 Penyebab Wanita Sulit Hamil
  (09 Oct 2012)
  (0 comments)

Berikut Scriptnya :

<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;padding:5px 5px;
margin:0px 0px 5px 0px;
margin-top:5px;
height:350px;width:220px;
background:#48b5f2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDcFYGPORrvhkFcw3xl2GhqVAGgQo-s7xeCHppNZaYVhASMBdu-PolwQhH9cdTxJZupE5SvNlR7DQ57_Ud8OoIZhYDeFht_oSmEK2N_sSesSflukM-hzcCIWvmu5VIpoWtObSceM_ACxk/s1600/button_bg.png);
border-bottom:5px double #111;border-left:5px double #48b5f2;border-top:5px double #111;border-right:5px double #48b5f2;
}
#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:#1D1D1D;opacity:0.8;
border:1px dotted #84acc3;border-radius:5px;
}
#spylist li a {
text-decoration:none;
color:#ccc;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;box-shadow:1px 1px 10px #48b5f2;-moz-box-shadow:1px 1px 10px #48b5f2;-webkit-box-shadow:1px 1px 10px #48b5f2;
margin-right:5px;
border:1px solid #fff;border-radius:5px;
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/AVvXsEgiBm0mtZKqBXzS4hnCEIAL-f-HOdKOC-NyCSBtWa40nIc3GdGYBNByGTVxeviKhRYzIyHSIr2eUvxMpwZFGGQftJUy_RkBZqJ9wc9bMUhrgjAkzf_xwDv4p3aC1IadKjL6Vq84qMXrMu8/s1600/coretv+no_image.jpg";
    imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiBm0mtZKqBXzS4hnCEIAL-f-HOdKOC-NyCSBtWa40nIc3GdGYBNByGTVxeviKhRYzIyHSIr2eUvxMpwZFGGQftJUy_RkBZqJ9wc9bMUhrgjAkzf_xwDv4p3aC1IadKjL6Vq84qMXrMu8/s1600/coretv+no_image.jpg";
    imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiBm0mtZKqBXzS4hnCEIAL-f-HOdKOC-NyCSBtWa40nIc3GdGYBNByGTVxeviKhRYzIyHSIr2eUvxMpwZFGGQftJUy_RkBZqJ9wc9bMUhrgjAkzf_xwDv4p3aC1IadKjL6Vq84qMXrMu8/s1600/coretv+no_image.jpg";
    imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiBm0mtZKqBXzS4hnCEIAL-f-HOdKOC-NyCSBtWa40nIc3GdGYBNByGTVxeviKhRYzIyHSIr2eUvxMpwZFGGQftJUy_RkBZqJ9wc9bMUhrgjAkzf_xwDv4p3aC1IadKjL6Vq84qMXrMu8/s1600/coretv+no_image.jpg";
    imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiBm0mtZKqBXzS4hnCEIAL-f-HOdKOC-NyCSBtWa40nIc3GdGYBNByGTVxeviKhRYzIyHSIr2eUvxMpwZFGGQftJUy_RkBZqJ9wc9bMUhrgjAkzf_xwDv4p3aC1IadKjL6Vq84qMXrMu8/s1600/coretv+no_image.jpg";
    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 = "www.palmahutabarat69.blogspot.hk";
    limitspy=4
    intervalspy=4000
</script>
<div id="spylist">
<script src='http://kangdadang.googlecode.com/files/recentpostthumbspy-by-abufarhan.js' type='text/javascript'></script>
</div>

KET :
- Ganti teks yang berwarna Merah dengan URL Blog sobat.
- Perhatikan script diatas yang berwarna biru muda, jika sobat sudah memasang, maka tidak perlu lagi memakai script diatas (biar gak double).

Tertarik ingin memasangnya? berikut langkah singkat dan padatnya, tidak perlu backup template karena kita akan meletakkannya langsung di elemen halaman.

Seperti biasa sobat langsung masuk aja ::>>
1. To the point aja .. klik Rancangan
2. Kemudian klik Tamhah Gadget

3. Cari yang Tambah Halaman HTML / Javascript
4. Masukkan salah satu kode diatas kedalamnya :
5. Simpan. dan Lihat hasilnya.

Semoga bermanfaat.

Original Posted by : akaUTta...

Komentar anda sangat membantu perkembangan blog ini!!

   

4.5

Original Posted by : AkaUTta