Cara Membuat Artikel Terbaru Animasi Blog

Posting lagi soal widget sebelum nya saya udah pernah posting yang hampir mirip dengan postingan ini yaitu "Cara Pasang Widget Recent Comment Blog" tapi kalau yang ini "Cara Membuat Artikel Terbaru Animasi Blog" , mirip nya dari segi tampilan hampir sama , kalau sobat ingin melihat demo nya klik Disini , perbedaan nya adalah kalau yang ini adalah animasi dan bisa membuat tampilan blog lebih menarik .
Cara pasang nya tidak begitu sulit , cukup dengan mengikuti langkah nya2 nya di bawah ini :
Login dulu dengan acount blog sobat yang telah ada , kalau belum ya dibikin dulu sob he...he...
Kalau sudah masuk ke halaman dasbor cari lah Tata letak.
Pilihlah lah Tambah Gadget  , sebaik nya sobat pasang di sidebar kiri atau kanan blog sobat biar lebih rapi .
Lalu pilih HTML/Javascript , copy code dibawah ini dan pastekan di halaman HTML/Javascript yang tadi

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type='text/javascript'></script>

<style type="text/css">
div.spy-outer {
  border:2px solid white;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  margin:0px auto;
}

div.spy-outer h2 {
  margin:0px 0px;
  padding:5px 10px;
  background-color:#646464;
  background-image:-webkit-linear-gradient(top, #8B8B8B, #3D3D3D);
  background-image:-moz-linear-gradient(top, #8B8B8B, #3D3D3D);
  background-image:-ms-linear-gradient(top, #8B8B8B, #3D3D3D);
  background-image:-o-linear-gradient(top, #8B8B8B, #3D3D3D);
  background-image:linear-gradient(top, #8B8B8B, #3D3D3D);
  color:white;
  font:bold 12px Arial,Sans-Serif;
  text-transform:none;
  text-shadow:0px 1px 2px black;
}

ul.spy {
  margin:0px 0px;
  padding:0px 0px;
  font:normal 10px/12px Arial,Sans-Serif;
  color:#353535;
  overflow:hidden;
}

ul.spy li {
  list-style:none;
  text-align:left;
  margin:0px 0px;
  padding:5px 7px;
  background-color:#9E9E9E;
  background-image:-webkit-linear-gradient(top, #B1B1B1, #F7F7F7);
  background-image:-moz-linear-gradient(top, #B1B1B1, #F7F7F7);
  background-image:-ms-linear-gradient(top, #B1B1B1, #F7F7F7);
  background-image:-o-linear-gradient(top, #B1B1B1, #F7F7F7);
  background-image:linear-gradient(top, #B1B1B1, #F7F7F7);
  border-top:1px solid #4E4E4E;
  border-bottom:1px solid #FFFFFF;
  word-wrap:break-word;
  overflow:hidden;
}

ul.spy a {text-decoration:none;}

ul.spy li em {
  font-weight:bold;
  color:#0B5D94;
}

ul.spy a.header {
  font:bold 12px/14px 'Trebuchet MS',Arial,Sans-Serif;
  display:block;
  color:#C00000;
  text-shadow:0px 1px 0px rgba(0,0,0,0.2);
}

ul.spy a.header:hover {
  color:#0556CF;
  text-decoration:underline;
}

ul.spy li .summ {
  margin-top:5px;
  overflow:hidden;
}

ul.spy li .imgwrap, ul.spy li img {
  float:right;
  margin:0px 0px 2px 7px;
  width:72px;
  height:72px;
  border:4px solid #E6E6E6;
  background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%;
  padding:0px;
}

ul.spy li .imgwrap {
  -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:0px 0px 2px rgba(0,0,0,0.7);
  box-shadow:0px 0px 2px rgba(0,0,0,0.7);
}

ul.spy li img {
  border:none !important;
  float:none;
  margin:0px 0px;
  padding:0px 0px;
  display:none;
}
</style>

<script type='text/javascript'>
var spyTitle           = "Artikel Terbaru",
    numposts           = 7,
    numchars           = 127,
    komentar           = "Komentar",
    pBlank             = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
    modeID             = true,
    showSummaries      = true,
    openNewTab         = false,
    showPostDate       = true,
    showComment        = true,
    showThumbnails     = true,
    animatedRecentPost = true,
    limitspy           = 4,
    intervalspy        = 4000,
    tickspeed          = 1000;
</script>
<script type="text/javascript" src="https://ivyth.googlecode.com/svn/js/rp-spy-whatever-v1-dte.js"></script>

<script src="http://blog-rangga.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>

 Keterangan :
kode yang distabilo biru silahkan ganti kode url blog yang sobat .

Terakhir pilih simpan untuk melihat hasil nya di blog sobat .
Kalau hasil nya tidak memuaskan silahkan tinggalkan pesan di kolom komentar dibawah ini , semoga berhasil dan terima kasih ......