Widget Recent Post dengan Lebih Banyak Pilihan

Widget yang tampak berwarna hijau di atas adalah widget recent post/posting terbaru dengan begitu banyak pilihan. Anda bisa menyembunyikan gambar, komentar, bulan terbit dan ringkasan atau sebaliknya, menampilkannya. Menentukan apakah widget ini akan dianimasikan atau tidak juga bisa dilakukan. Cukup ikuti langkah-langkah di bawah ini dan pelajari tabel konfigurasinya:

Lihat Demo

Pertama-tama masuklah ke halaman tata letak dengan mengeklik menu Tata Letak:

Masuk ke halaman Tata Letak

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin semua kode ini dan letakkan di dalam formulirnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<style type="text/css" scoped="scoped">
.spy-outer {
  border:2px solid white;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  margin:0 auto;
}

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

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

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

ul.spy a {text-decoration:none}

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

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

ul.spy a.header:hover {
  color:white;
  text-decoration:underline;
}

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

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

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

ul.spy li img {
  border:none !important;
  float:none;
  margin:0 0;
  padding:0 0;
  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/s72-c/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="http://reader-download.googlecode.com/svn/trunk/rp-spy-whatever-v1.js"></script>
<script src="http://nama_blog.blogspot.com/feeds/posts/summary?orderby=published&alt=json-in-script&callback=rp"></script>

Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda lalu simpan.

Pilihan

Opsi	Keterangan
spyTitle	Digunakan untuk menentukan judul widget.
numposts	Digunakan untuk menentukan jumlah posting yang akan ditampilkan.
numchars	Digunakan untuk menentukan jumlah karakter ringkasan posting.
komentar	Digunakan untuk menentukan teks jumlah komentar (contoh: 7 Komentar).
pBlank	URL gambar yang ada di dalamnya adalah gambar cadangan yang hanya akan tampil pada posting tidak gambar.
modeID	Jika bernilai true, sistem bulan terbit akan menjadi berbahasa Indonesia. Jika bernilai false sistem bulan terbit akan berubah menjadi berbahasa Inggris.
showSummaries	Jika bernilai true, ringkasan posting akan ditampilkan. Jika bernilai false ringkasan posting akan ditampilkan termasuk bulan terbit dan jumlah komentar.
openNewTab	Jika bernilai true, setiap tautan akan terbuka pada tab/jendela baru. Jika bernilai false, setiap tautan akan terbuka pada tab/jendela yang sama.
showPostDate	Jika bernilai true, bulan terbit akan ditampilkan. Jika bernilai false bulan terbit akan disembunyikan.
showComment	Jika bernilai true, jumlah komentar akan ditampilkan. Jika bernilai false jumlah komentar akan disembunyikan.
showThumbnails	Jika bernilai true, gambar mini akan ditampilkan. Jika bernilai false gambar mini akan disembunyikan.
animatedRecentPost	Jika bernilai true, efek animasi news ticker akan diterapkan. Jika bernilai false, efek animasi news ticker akan hilang.
limitspy	Tentukan jumlah minimal posting yang tampil saat efek animasi diaktifkan.
intervalspy	Tentukan seberapa lama interval animasi perpindahan daftar dari daftar satu ke daftar berikutnya saat efek animasi diaktifkan.
tickspeed	Tentukan kecepatan animasi saat efek animasi diaktifkan.

Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut!