Widget Posting Terbaru dengan Animasi Scroll ini memiliki banyak pilihan seperti menampilkan jumlah komentar, tanggal posting, pengaturan jumlah posting, pemberian efek animasi dan banyak lagi

Widget Posting Terbaru dengan Animasi Scroll - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Widget Posting Terbaru dengan Animasi Scroll ini memiliki banyak pilihan seperti menampilkan jumlah komentar, tanggal posting, pengaturan jumlah posting, pemberian efek animasi dan banyak lagi

Widget Posting Terbaru dengan Animasi Scroll

Widget Posting Terbaru dengan Animasi Scroll

Postingan sebelumnya saya menuliskan widget posting terbaru dengan tooltips. Kali ini juga widget Artikel Terbaru tetapi berbeda dari yang sebelumnya bisa karena bisa menggunakan animasi dengan banyak pilihan opsi. Seperti manampilkan komentar, jumlah ringkasan dan banyak lagi lainnya. Nah langsung saja..

PEMASANGAN PADA BLOGSPOT

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

Tata letak Blogger
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.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://mkr-site.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>

Silahkan Ganti URL http://mkr-site.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 link akan terbuka pada tab/jendela baru. Jika bernilai false, setiap link 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.

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

Sekian semoga bermanfaat
Sumber : Widget Recent Post dengan Lebih Banyak Pilihan
Satank Mkr Beri Komentar
Bagikan kepada teman!
Garis

15 comments:

  1. Blognya keren, sob dan isinya pun cakep semua :-d
    Salam kenal.. :)

    BalasHapus
    Balasan
    1. Terima kasih..
      salam kenal juga.. :)

      Hapus
  2. gan kok jadinya menu multi tab ane cuma REcentnya yang kebukaa ? popular,comment sama category nya gak kebuka :'(

    BalasHapus
    Balasan
    1. sya liat yang di http://omjunior.blogspot.com/
      baik2 saja..
      BTW klo pake template tolong jangan hapus bagian kreditnya..
      hargai kerja orang donk.. :'(

      Hapus
  3. how to do it for custom domain? because when i put my custom domain its not working :(

    BalasHapus
  4. Kalau saya menggunakan widget dengan animasi seperti widget ini.. pengaruh ga sih terhadap kecepatan loading saya ?? mohon infonya dong broo..

    soalnya pengen pake widget yang ini.. keren !!
    btw, terima kasih yah sobb !! salam kenall

    BalasHapus
    Balasan
    1. tentunya..pasti berpengaruh..
      karena perlu memproses tambahan scriptnya..

      Hapus
  5. makasih atas berbagi ilmunya, ijin sedot buat di gunakan di laman saya. oh iya kalau di tempatkan di halaman posting bisa ga ya? trim

    BalasHapus
  6. Om Satank...ijin pakai codenya yah? Mksh banget ...

    BalasHapus
  7. Wah kerem banget widgetnya bisa jadi referensi kalo mau pake

    BalasHapus
  8. :>) nah yang ini baru lancar bisa ane terapkan di blog.... siip, makasih gan atas widgetnya

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP