Loading...
Beranda » » Widget Recent Post Animasi Konten Lain di Sini

Widget Recent Post Animasi


Widget yang tampak 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:

Pertama-tama masuklah ke halaman tata letak dengan mengeklik menu 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">
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:#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: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:#666;
  overflow:hidden;
}

ul.spy li {
  list-style:none;
  text-align:left;
  margin:0px 0px;
  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:bold 12px/14px 'Trebuchet MS',Arial,Sans-Serif;
  display:block;
  color:yellow;
  text-shadow:0px 1px 0px rgba(0,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:0px 0px 2px 7px;
  width:72px;
  height:72px;
  border:4px solid #899D00;
  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="http://reader-download.googlecode.com/svn/trunk/rp-spy-whatever-v1.js"></script>
<script src="http://eksperimentutor.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>

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


Pilihan

OpsiKeterangan
spyTitleDigunakan untuk menentukan judul widget.
numpostsDigunakan untuk menentukan jumlah posting yang akan ditampilkan.
numcharsDigunakan untuk menentukan jumlah karakter ringkasan posting.
komentarDigunakan untuk menentukan teks jumlah komentar (contoh: 7 Komentar).
pBlankURL gambar yang ada di dalamnya adalah gambar cadangan yang hanya akan tampil pada posting tidak gambar.
modeIDJika bernilai true, sistem bulan terbit akan menjadi berbahasa Indonesia. Jika bernilai false sistem bulan terbit akan berubah menjadi berbahasa Inggris.
showSummariesJika bernilai true, ringkasan posting akan ditampilkan. Jika bernilai false ringkasan posting akan ditampilkan termasuk bulan terbit dan jumlah komentar.
openNewTabJika bernilai true, setiap link akan terbuka pada tab/jendela baru. Jika bernilai false, setiap link akan terbuka pada tab/jendela yang sama.
showPostDateJika bernilai true, bulan terbit akan ditampilkan. Jika bernilai false bulan terbit akan disembunyikan.
showCommentJika bernilai true, jumlah komentar akan ditampilkan. Jika bernilai false jumlah komentar akan disembunyikan.
showThumbnailsJika bernilai true, gambar mini akan ditampilkan. Jika bernilai false gambar mini akan disembunyikan.
animatedRecentPostJika bernilai true, efek animasi news ticker akan diterapkan. Jika bernilai false, efek animasi news ticker akan hilang.
limitspyTentukan jumlah minimal posting yang tampil saat efek animasi diaktifkan.
intervalspyTentukan seberapa lama interval animasi perpindahan daftar dari daftar satu ke daftar berikutnya saat efek animasi diaktifkan.
tickspeedTentukan kecepatan animasi saat efek animasi diaktifkan.

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

Penulis: Unknown Lokasi: Condongcatur, Yogyakarta

Artikel Widget Recent Post Animasi , diterbitkan oleh Unknown pada hari . Semoga artikel ini dapat menambah wawasan Anda. Unknown adalah seorang yang sedang belajar Blogging, melalui eksperimen dan uji coba dari berbagai sumber. Adanya kritik dan saran sangat diharapkan..oya, jangan lupa klik like FB dan Berkomentarlah!

Tidak ada komentar:

Posting Komentar