32 Widget Recent Post Animasi Dengan JQuery

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

 

widget recent post animasi

Banyak versi widget recent post yang bisa anda gunakan untuk blog anda, mulai dari widget yang disediakan blogger sampai widget dari pihak ketiga. Diblog ini saja kira-kira terhitung sudah ada tiga versi widget recent post yang telah saya posting. Dan kali ini saya akan mengetengahkan cara menambahkan sebuah versi baru dari sekian jumlah widget recent post blogger yang ada. Widget recent post berikut selain memiliki effect animasi spy karena penggunaan script JQuery juga dilengkapi dengan thumbnail dan captions. Sebuah karya hasil pengembangan dari blogger Indonesia (Abu Farhan).

Nah seperti apa widget berikut silahkan lihat screenshoot disamping atau lihat live demo disini, jika anda tertarik tuk mencobanya, silahkan ikuti tutorial selanjutnya.

1. Setelah sig in pada blogger dengan account anda >>> pada dasbor klik rancangan >>> pada elemen laman >>> klik tambah gadget >>> HTML/JavaScript

2. Copy kode berikut dan paste pada kolom konten

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

    <script language='JavaScript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://amatullah83.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
    <script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Catatan: ganti home page dengan URL blog anda, kode lainnya masih dapat anda modifikasi lagi seperti background image, lebar dan tinggi thumbnail, lebar caption dll.

3. Klik simpan, dan simpan lagi.

Selesai. Mudah bukan? Selamat mencoba, semoga berhasil dan manfaat!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

32 komentar :

  1. wah.. bagus nih.. patut dicoba.. oh ya sekarang kok klo tambah gadget nggak dikasih judul nggak bisa ya.. padahal rata rata script iklan kan nggak perlu judul..

    BalasHapus
  2. @ Ali: kalau dulu boleh, klu skrg sdh g' blh sy blm nyoba. Gini coba beri aja dl judul setelah itu masuk pd bagian rancangan edit HTMl ganti judul tadi dgn nm HTML?

    Oke sy cek dulu ya?!

    BalasHapus
  3. @ Ali: sy dah uji dibeberapa blog sy masih bisa tuh? Cobalh dl cara mdh yg sy paparkan diats?!

    Smg dapat membantu.

    BalasHapus
  4. waduh, kayanya saya harus banyak belajar nih.. masih awam banget masalah ginian :)

    BalasHapus
  5. @ Ali: kalau dulu boleh, klu skrg sdh g' blh sy blm nyoba. Gini coba beri aja dl judul setelah itu masuk pd bagian rancangan edit HTMl ganti judul tadi dgn nm HTML?

    maaf kalo ane sok tau..
    ane pun mengalami hal serupa, sdh ane coba, ga bs ukht..

    tapi ane sdh nemuin solusi yg lain..

    pd bagian rancangan edit HTML, cari judul yg sdh di isikan, berlanjut ke kode/script sesudahnya, hapus az kode/script
    <h2 class='title'><data:title/ ></h2>.

    Insya Allah bisa.

    BalasHapus
  6. @ Girant_31: gpp terimakasih tambahan dan masukkanx, klu ditemplate sy tuh masih bisa, lihat featured post slideer dibeberapa free template sy, seperti pd template tweety.

    @ Ali: silahkan dicoba cara yg dipaparkan girant, moga bs membantu

    BalasHapus
  7. kakak ini suciyellow.. uci mau kode template yg tweety dunk
    terima kasih banyak ya kak

    BalasHapus
  8. @ Suci: Iya de' mmg khusus untuk ade khn awalx, maaf ya ats sgla kekuranganx!

    BalasHapus
  9. wuiih! keren! nanti langsung praktek deh! siiplah

    BalasHapus
  10. Narutopedia Express is exclusive encyclopedia about everything in naruto anime like character biographies, jutsu, hidden village, handseal, jinchuriki, akatsuki, and other skills

    BalasHapus
  11. makasih tips nyaaaaaaaaaaaaaaaaaaaa

    BalasHapus
  12. keren nih tutornya, saya mau meLuncur duLu ke widget yang Lain (artikeL terkait). terima kasih atas sharenya.
    ijin untuk menjadi foLLower di bLog yang keren ini, saLam kenaL.

    BalasHapus
  13. Makasih gan Atas Titornya sangant berguna Buat Bloger baru seperti dava ini,..
    heheheheee,..
    Klo Da wktu sempetin y berkunjung ke http://www.davasiappatahhati.co.cc/
    &
    http://www.davastie.co.cc/

    BalasHapus
  14. mau coba juga mbak ...
    keren sprtiny, dan bermanfaat bagi sy ..

    solusi lain utk membuat widget tanpa label,
    cb pake tag html namanya,
    misal


    sy cb, dan bisa, gk rumit kok ...

    salam_
    http://www.safe-computing.co.cc

    BalasHapus
  15. makaish banyak atas ilmunya........ lain kali kunjungi blog Q ea :D

    BalasHapus
  16. ass.. dedy balik lagi nih coba postingan baru kk..
    oya widget recent postnya. udah di coba, berhasilll di blog ku yang http://www.carmild.com/
    tapi.. ko gak mau jalan ya ka??
    apa ada yang salah ya.. atau ada settingan lain paya jalan... mohon informasinya..

    BalasHapus
  17. bagaimana caranya biar bisa dimasukkan di halaman posting. sudah dicoba tapi tdk berhasil, cuma bisa di sidebar sj. tlg dong caranya. thanks

    BalasHapus
  18. mantapzz Bang, thanks Ilmu gratisnya.. ;)

    BalasHapus
  19. Thanks ya amatullah83, artikelnya sangat bermanfaat sekali, bisa tidak JQuery ini hanya muncul di beranda, setelah kita klik artikelnya dia akan hilang, saya terinsfirasi untuk menggunakan templet yg sederhana tapi menarik contohnya pada website www.melayuonline.com

    thanks atas bantuannya..

    BalasHapus
  20. kenapa di blog sya tiadak keluar gmbr ye,yng keluar byk gmbr tinypic je,kenpa yee??

    BalasHapus
  21. mas kok di blog-nya q ga' bissa muncul si...
    tapi saat q coba pake domain yg lain muncul
    contoh-nya gini domain-q
    royan-trick.blogspot.com, itu recent post-nya ga' keluar, tapi saat q pake domin temen q bisa keluar atou muncul
    punya solusi ga' mazz please bantu

    BalasHapus
  22. wahhh.. simple abiess nih trik nya tinggal copas aja.. udah saya pasang di blog saya coba dicek gmn menurut agan...??

    BalasHapus
  23. syukron ya ukh, senangnya ketemu blog ukhtymau ny:
    1. ada gmbr yg gak bs munul, tiny pict gt katanya..gmn ya?
    2. sebagian jdl artikel kepotong, tp ut ukuran height dan weight nya udah pas, gmn ya?
    syukron ya ukh, ane br belajar...

    BalasHapus
  24. tutorial ini yang aku cari terima kasih ya mas, kemarin cari recent pos animasi agak kesulitan

    BalasHapus
  25. Makasi atas infonya...!! ^^

    tapi kak
    wktu aw gnti "boxwidth" ke ukuran yg aku mau, ko nggk brubah sesuai ukuran yg aku mau ya?
    ,gmn tuh kak?
    ,,Mohon bantuannya, makasih ^^

    BalasHapus
  26. pas saya pasang kodenya bisa dan berjalan tapi nafigasi menu di navbar saya jadi nggak berfungsi gmna nih?

    BalasHapus
  27. Makasih banyak bermanfaat tipsnya.... mampir ke blogku ya d-t3xfa.blogspot.com

    BalasHapus
  28. subhanallah mesti banyak belajar lagi nih , makasih ya ka atas sharenya

    BalasHapus
  29. sumpah keren banget nih.....
    ane copas dulu yach.....

    BalasHapus
  30. Ini tutorial yang jelas dan gampang diikuti tentang recent comment. langsung coba...

    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:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!