Widget Recent Post blog

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 :

Demo

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

Lalu, 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.

About the Author

Written by Admin

Previl_TM is a modern, template is very suitable for a template of your blog,and features a very cool and nice so from me, Predator Evil TM