Tuesday, August 21, 2012

Membuat Widget Recent Post Dengan Thumbnail yang Bisa Berputar

Membuat Widget Recent Post Dengan Thumbnail yang Bisa Berputar


Jika beberapa hari yang lalu saya membagikan random post dengan thumbnail yang bisa berputar, kali ini saya akan membagikan sebuah widget yang di buat oleh Abu Farhan dan Mungkin sebagian dari kalian sudah mengetahui tentang widget ini. Yup inilah widget artikel terbaru atau yang biasa kita sebut dengan recent post.

Widget ini akan menampilkan artikel terbaru dari blog kamu beserta thumbnail. Widget ini juga bisa di ubah sesuai keinginan kamu loh. Oh iyah, efek yang ditimbulkan dari widget ini adalah turun kebawah otomatis serta akan berputar saat kamu menyorot thumbnail-nya. Oke langsung saja kita lihat cara pembuatannya di bawah ini :

1. Login ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript setelah itu kamu salin dan masukkan kode di bawah ini kedalam kotak HTML/Javascript tersebut.


<style type="text/css">
#spylist-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
    font-family:calibri;
}

#spylist-widget ul {
    width: autopx;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#spylist-widget li {
    width: autopx;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrNY5_80LJTuEzeAKLvNenEoKmReIQV3tTE8_QA_Obe92HsaeqYxBzuXi2ROewIsWwnhYhujk6xoyRV22UBUNjrVkcSn5EGfRFHD5F49b9y81YHMicyE1X7fSp_m_E3JxPEintWVDE6Xs/s320/latesthack.com-.jpg) repeat-x;
    border: 1px solid #ddd;
}

#spylist-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#spylist-widget img {
    float: left;
    margin-top: 5px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#spylist-widget img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
imgr[5] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;fntsize = 9;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";numposts = 10;
home_page = "http://www.hzndi.blogspot.com/";
limitspy=5;
intervalspy=4000;
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script><br />
<div id="spylist-widget">
<script src="http://hzndi.googlecode.com/files/hzndi.blogspot.com-scrollpost.js" type="text/javascript"></script>
</div>

Note :
  • Ubah jumlah postingan yang ditampilkan dengan mengubah kode numposts = 10
  • Ubah http://www.hzndi.blogspot.com dengan alamat URL blog kamu, untuk mengganti URLnya harus menggunakan http://www.namablogkamu.com/ ingat pake garis miring '/' dibelakang domain kamu, kalau tidak widget ini tidak akan berjalan !
  • Ubah showPostDate = true; ke false jika tidak ingin menamplkan tanggal postingan 
4. Simpan dan kamu lihat hasilnya dan untuk demo livenya mungkin kamu bisa melihatnya di bawah ini.

Postingan Terkait:

93 comments:

  1. Mau mencoba, tp kira2 brhasil apa kagak ya?

    ReplyDelete
    Replies
    1. berhasil asalkan mengikuti langkah2nya dengan seksama :)

      Delete
  2. met lebaran ya. maaf lahir dan batin

    ReplyDelete
    Replies
    1. maaf lahir batin juga yah kang, maaf baru bales komennya :)

      Delete
  3. Kunjungan sob

    Taqobalallaahu minnaa wa minkum, shiyamana wa shiyamakum. Mohon maaf lahir dan batin, ja’alanallaahu minal ‘aidin wal faizin

    Semoga Allah menerima amal-amal kami dan kamu, Puasa kami dan kamu. Mohon maaf lahir dan batin, dan semoga Allah menjadikan kami dan kamu termasuk dari orang-orang yang kembali (dari perjuangan Ramadhan) sebagai orang yang menang.

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) mohon maaf lahir batin juga yah om

      Delete
  4. wah baru lagi ya gan. yang ini lebih berputar ya. ehmmm.. matap, bisa buat koleksi nie.

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) heheh iyah gan

      Delete
  5. Mantap tutornya Sob, ijin nyimak artikelnya ya

    ReplyDelete
  6. Replies
    1. maaf baru bales komennya :) iyah dong agar lebih fresh hhehe

      Delete
  7. Tutorial yang bagus sekali, saya bookmark dulu ya, coz masih mggunakan mobile. Nanti akan saya praktekkan kalau sudah masuk kantor.

    ReplyDelete
  8. terungkap caranya begini.
    saya sempat kagum tu sama temen2 yang pake muter-muterin thumbnail.

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) iyah dong om, dicoba juga dong :)

      Delete
  9. lebih keren sob... tampilan nya.. btw buat loading nya bikin berat ga sob :)
    mantap2 nih tutor nya abang hzndi :D

    ReplyDelete
    Replies
    1. maaf baru bales komennya :)hehe menurut ane sih engga sob :D

      Delete
  10. link dan follow sukses sobat, di tunggu linkback dan followback nya yah.. makasih dan salam kenal :)

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) sip makasih sudah datang

      Delete
  11. sangat mantab ini widget recent post yang sip :)

    ReplyDelete
    Replies
    1. maaf baru bales komennya :)hehe makasih mbae

      Delete
  12. pernah mencoba si, tapi yang biasa yang g bisa berputar gambarnya. Ikut menyimak aja dech hehe.

    ReplyDelete
  13. Replies
    1. maaf baru bales komennya :) hehe thanks sudah datang

      Delete
  14. Mohon maaf lahir batin, Mulai dari nol lagi ya... ^_^

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) jadi kayak iklan hehe

      Delete
  15. wahhh baru lagi nih bisa berputar...
    thanks banget dah,, hal baru nih

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) hehe iyah dong bang dayat

      Delete
  16. terima kasih tutorialnya ya, nanti bisa saya coba

    ReplyDelete
  17. kren sob... wah di banding punya saya yang gak ada stylenya heheee
    ijin bookmark ya.. :)

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) slakan di bookmark om

      Delete
  18. Wahh..mantef nih bang tutornya..minal aidinwal fa idzien ya bang.

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) yah bang icah, maafin ane juja yah hehe

      Delete
  19. langsung bisa menduga kalau ini kerjaannya om CSS :D


    nice info kang :D

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) hahah bisa aja ente gan, makasih yah sudah datang

      Delete
  20. wahhh bisa dicoba nih gan,,
    tp apa gk berat template nya ya gan??

    ReplyDelete
    Replies
    1. tidak berat gan, ane udah nyoba sendiri asal di blog agan jangan masang banyak widget juga

      Delete
  21. Replies
    1. maaf baru bales komennya :) thanks juga sudah datang

      Delete
  22. wah mantep nih, boleh dicoba sob :D thnaks ya...

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) thanks juga bang cireboon, eh mas cirebon hehe

      Delete
  23. artikel yg sangat menarik sob, aku mau coba ya, trims

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) makasih sudah datang om

      Delete
  24. Wah,,, mantap mas,tapi saya takut loadingnya jadi lambat.

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) hehe yaudah gpp gan :) taoi menurut ane sih engga lambat kok :D

      Delete
  25. keren tuh kayak nya,,,ntar di coba ah,,,

    ReplyDelete
  26. I like it..
    Mantap kawan.. :D
    terima kasih yah..

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) makasih juja sudah datng

      Delete
  27. weh mantebss nih sobat, dibungkus dulu deh

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) kayak nasi bungkus saaja om hehe

      Delete
  28. Manteb. Perlu dicoba nih totorialnya. .

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) bang yuyud baru keliatan lagi nih hehe

      Delete
  29. mampir bari bawa oleh2 sekarung (cucian)...plissss bantuin kitah menyelesaikannya hohoho

    mudik kemana sob ?

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) yah jangan kasih cucian dong :|, ane ga mudik mbae :)

      Delete
  30. widgetnya keren sob, tapi kayaknya agak berat ya ...

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) kalau menurut ane sih engga berat sobat :D

      Delete
  31. tapi harus diperhatikan juga kompisisi template & widget tsb,balance agar terlihat enak dipandang

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) bener nih kata bang andy :D

      Delete
  32. tutorialnya mantap nih..terimakasih ya...

    ReplyDelete
  33. kunjungan balikku sob.. met kenal ya..

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) met kenal juga gan hehe

      Delete
  34. makasih gan ilmunya ....oh ya gan ..mumpung masih suasana lebaran ni minal aidin wal faidzin maaf lahir batin ya gan ...kalo ada komen -komen ku yg kurang berkenan di blog ini....

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) iyah gan maaf lahir batin juga yah

      Delete
  35. Kunjungan lagi bro....

    semoga bermanfaat

    ReplyDelete
    Replies
    1. selamat datang kembali, sorry ane belom bisa datang masih sibuk di dunia nyata hehe

      Delete
  36. Cursor iconnya mantep banget..btw bisa copy code commentnya nga blok nya bagus

    ReplyDelete
    Replies
    1. copy code reply commentnya maksud ente bos ? silakan lihat di bagian ini

      http://hzndi.blogspot.com/2012/06/membuat-threaded-comment-dengan-3.html

      Delete
  37. Anjangsana kesini, kawan! Berharap kue lebaran eh, maap dan keikhlasan atas segala luput dan salah gue!

    Jgn sering muter2, entar pusing!

    Mohon maaf lahir dan batin, eaa... ;-)

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) beh si abang baru datang, maaf lahir batin juga yah bang :)

      Delete
  38. Lebih keren karena berputar/berjalan.
    Simpan dulu kapan-kapan dicoba... makasih tips-nya.

    ReplyDelete
  39. kalau bisa berputar..menarik memang tapi semoga saja para pengunjung kepalanya tidak ikut berputar :)

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) kecil kemungkinannya kepala pengunjung pada puyeng hehehe

      Delete
  40. keren gan, nanti ane coba tunggu dapet template yg pas ...

    ReplyDelete
    Replies
    1. maaf baru bales komennya :)emang ente mau ganti template yah bang :)

      Delete
  41. menarik gan tapi terlalu bnyak ya scriptnya

    ReplyDelete
    Replies
    1. maaf baru bales komennya :) ya engga lah gan, wong tinggal copas doangan :)

      Delete
  42. Saya sudah coba berhasil memang. Namun napa nda ada Imagenya ya. NO IMAGE. Gimana mengatasinya nih Sob? Mohon pencerahannya

    ReplyDelete
    Replies
    1. di postingan om, gambarnya tidak di upload, coba om upload sendiri gambarnya pasti bisa kayak punya ane :)

      Delete
  43. Sudah diupload di postingan. Namun tidak juga muncul juga. wah jadi prustesien neh ane. Mau dicopot aja deh skripnya

    ReplyDelete
  44. Hehehe kata orang template BLOG saya tidak kompatible dengan sekrip ini. HIheiheiheieihie. Tetap semangadssssssssssss

    ReplyDelete
    Replies
    1. hehe yaudah nanti kalau ada yang lain ane kasih dah om :D

      Delete
  45. terimakasih gan infonya sungguh membantu

    ReplyDelete

Komentarmu menunjukan kecerdasanmu, Kalau komentar cuma buat cari link buat apa ? :)

Twitter Delicious Facebook Digg Stumbleupon Favorites More