Cara Membuat Recent Posts Dilengkapi Gambar Thumbnail Animasi dengan jQuery-CSS3

Judul posting semrawut seperti di atas adalah wujud bingungnya gubhug reyot ketika berusaha membuat kalimat yang tepat dan pendek. Mungkin bila dituliskan secara panjang lebar akan seperti ini:

Cara Memasang dan Membuat Recent Posts dilengkapi Gambar/Image atau Thumbnail dengan Efek Animasi Menggunakan Javascript, Kode CSS, JQuery dan CSS3 Transition-Transformation serta CSS3 yang lain!

Ha .... ha .... ha ....! Masih nggak bener juga? Ada yang salah? Uh .... biar saja, emang buat judul nggak pusing?! He .... he ....

D E M O

Mungkin ini bisa menjadi bahan baru buat blog sampeyan. Bagus, ko'! Jozhlah, pokoknya...! Coba saja lihat di DEMO. Jangan bingung carinya. Letaknya di ujung paling bawah dengan judul (ushh ... judal-judul terus!) "Recent Posts using jQuery-CSS3". Bagi sampeyan yang selama ini sudah menggunakan jQuery, maka silahkan copy javascript, kode CSS dan xHTML-nya saja. Bagi yang belum menggunakan jquery.1.3.2.min.js, silahkan copy semua kode yang ada termasuk link jquery.1.3.2.min.js-nya. Kita akan buat dengan cara yang paling mudah dengan menyimpan seluruh kode melalui Add a Gadget. Kecuali ... ini kecuali, lho.... Bagi yang mau menggunakan jQuery-nya untuk berbagai kepentingan yang lain, simpanlah jQuery.1.3.2.min.js di atas kode <head>, sedang kode yang lain bisa di simpan melalui Add a Gadget. Jika mau sedikit rapi, biar kode CSS terkumpul di satu tempat, silahkan simpan kode CSS di atas kode ]]></b:skin> (jika di sini jangan lupa membuang tag style-nya!). Javascript dan xHTML bisa di simpan lewat Add a Gadget.

JQuery-Javascript "Recent Posts Bergambar Beranimasi Bertumbel (mbel ... mbel ... mbel ...)"

Javascript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://gubhugreyot-icon.googlecode.com/svn/CircleGRV66H66.jpg";
imgr[1] = "http://gubhugreyot-icon.googlecode.com/svn/CircleGRV66H66.jpg";
imgr[2] = "http://gubhugreyot-icon.googlecode.com/svn/CircleGRV66H66.jpg";
imgr[3] = "http://gubhugreyot-icon.googlecode.com/svn/CircleGRV66H66.jpg";
imgr[4] = "http://gubhugreyot-icon.googlecode.com/svn/CircleGRV66H66.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;borderColor = "#232c35";bgTD = "#000000";
thumbwidth = 55;
thumbheight = 58;
fntsize = 11;
acolor = "#555";aBold = true;icon = " ";text = "comments";
showPostDate = true;summaryPost = 40;summaryFontsize = 10;
summaryColor = "#333";icon2 = " ";
numposts = 20;
home_page = "http://tantytm.blogspot.com/";
limitspy=4
intervalspy=4000
//]]>
</script>

Kode CSS "Recent Posts Bergambar Beranimasi Bertumbel (mbel ... mbel ... mbel ...)"

Kode CSS:

<style type="text/css" media="screen">
#recpost{
      overflow: hidden;
      margin: 0 auto;
      padding: 4px 2px;
      height: 327px;
      background: #aaa;
      border: 1px solid #666;
      border-radius: 10px;
}
#recpost ul{
      width: 210px;
      overflow: hidden;
      list-style: none;
      padding: 0;
      margin: 0;
}
#recpost li{
      width: 198px;
      padding: 5px;
      margin: 0 0 5 0;
      list-style: none;
      float: none;
      height: 70px;
      overflow: hidden;
      border-radius: 6px;
      background:#444 url(http://gubhugreyotprojects-smallbg.googlecode.com/svn/GR_lurik.jpg);
      border:1px solid #ddd; 
      color:#66CCFF;
}
#recpost li{ 
      position: relative;
      -o-transition: all 1.2s linear;
      -moz-transition: all 1.2s linear;
      -webkit-transition: all 1.2s linear;
}
#recpost li:hover{background: #663300;}
#recpost li a{
      background: none;
      text-decoration: none;
      font-size: 11px;
      line-height: 14px;
      color: #babffa;
      font-family: Helvetica, Serif, Arial, Tahoma;
      line-height: 10px;
      margin:0;
      padding:0 0 2px 0;
}
#recpost li a:hover{
      color:#eee;
      text-shadow: 1px 1px 1px #000;
}
#recpost li img{
      float: left;
      padding: 4px;
      border: 2px solid #eee;
      border-radius: 6px;
      margin-right: 5px;
      background: #888;
      -o-transition: all 1.2s linear;
      -moz-transition: all 1.2s linear;
      -webkit-transition: all 1.2s linear; 
}
#recpost li:hover img{
      -o-transform: rotate(360deg) scale(1.1) translate(-2px, 0);
      -moz-transform: rotate(360deg) scale(1.1) translate(-2px, 0);
      -webkit-transform: rotate(360deg) scale(1.1) translate(-2px, 0);
}
.spydate, .spycomment{
      position: absolute; 
      bottom: 5px; 
      right: 3px;
      font-size: 9px;  
      height: 15px;
      background: #aaa; 
      text-align: center; 
      width:70px;
      padding:0;
      margin:0; 
      font-family: Arial, Helvetica;
}
.spycomment{
      left: 76px;
      width: 60px;
}
</style>

xHTML "Recent Posts Bergambar Beranimasi Bertumbel (mbel ... mbel ... mbel ...)"

xHTML:

<div style="float:right;margin:0px;padding:0;min-width:200px;">
<div id="recpost">
<script src='http://gubhugreyotprojects.googlecode.com/svn/GR_jQrecentposts.js' type='text/javascript'></script>
</div>
</div>

Cara Menggunakan dan Menyimpan Kode

Login ke Blogger
Setelah masuk di Dasbor, klik "Design/Rancangan".
Lanjutkan dengan klik Add a Gadget. Pilih tempat yang tepat untuk widget recent post ini (bisa di sidebar).
Pilih dan KLIK "HTML/Javascript".
Setelah box penambahan widget terlihat, copy dan pastekan semua kode.
KLIK "SAVE/Simpan".
Lihat hasilnya dengan membuka blog.
Setelah bisa tertampilkan dengan sempurna di halaman blog, ganti kode berwarna merah yang berupa URL (http://gubhugreyot.blogspot.com) dengan URL blog sampeyan.
Untuk mengatur jumlah posting yang akan di tampilkan, ganti kode yang berwarna hijau (numposts = 20) dengan nilai yang lain. Semakin besar maka semakin banyak yang di tampilkan.
Jika sebelumnya anda sudah menggunakan jQuery versi 1.3.2 atau yang lain maka kQuery yang disertakan di sini nggak usah dipakai.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Ngahad Pahing, Maret, 04, 2012

» Happy Blogging - gubhugreyot «

12 komentar:

Gee18 Oktober 2010 pukul 19.06
kang tag cloud eror lgi ya kang . . .
BalasHapus
Balasan
gitosamin18 Oktober 2010 pukul 19.27
Tag Cloud: javascript di stashbox.org. Sering ngadat! Pindah saja jsriptnya ke ripway.com.
Tentang cursor: yang ekornya molor!
Itu ekornya si gubhug reyot (emang suka molor-molor!). Jangan potong sekarang n'tar nggak bisa pakai. Tak buat ekor yang masih segar dulu trus baru potong ekor yang ini!
Tentang: Menu Accordion di sebelah kiri! Sudah terposting. Cari di menu Javascript-jQuery.
Tentang Template gubhug reyot: Lain Waktu aku bongkar. Saat ini kodenya masih tambal sulam!
Tentang Email: aku jarang buka email. Klo ada unek-uneg sampaikan leawt comment. n'tar aku buat posting (kuwatir dikira sombong atau tidak memperhatikan. Soalnya aku hampir tidak pernah membuka email!)

Salam ...

Gubhug reyot
BalasHapus
Balasan
Gee18 Oktober 2010 pukul 20.06
mna tuh kang javascript tag cloud'na,,
yang d stasbox ga bsa di bka kan
BalasHapus
Balasan
gitosamin18 Oktober 2010 pukul 20.14
Javascript Tag Cloud Cumulus:

Ganti: cumulus.js yang dari stahbox.org dengan

http://h1.ripway.com/santyeka/Cumulus/MasterCumulus-bgs1-GR.js

Salam ....

gubhug reyot
BalasHapus
Balasan
Gee18 Oktober 2010 pukul 20.19
ok kang...
makasih ^_^
tpi kok yang akang g diganti sih??
BalasHapus
Balasan
gitosamin18 Oktober 2010 pukul 20.44
Udah seebel, nih! Masa' tiap kali macet melulu! Aku mo pindah saja yang dari stashbox ke ripway semua! Susah! Bikin deg-deg-kan saja. Emang kitanya nggak malu punya blog yang ditonton banyak orang ko' kacau balau! Apalagi klo DEMO-nya yang macet! Hu ... Malu dikira bo'ong-bo'ongan!
Oi ... Blog aku kaya'nya jadi sedikit bermasalah, ya, gara-gara pakai "Energy Saving Mode" yang pakai jQuery. Sidebar kanan ma pas buat comment ko' ada troble, ya?! Bener, nggak?

Salam ....

gubhug reyot
BalasHapus
Balasan
Gee18 Oktober 2010 pukul 21.01
ah nggak kang,,, menurut gw biasa aja !!!
mlah kok skrang kok rda ringan yah blog'na :D

kang minta tutor tooltips kya d blog ini dong kang???
BalasHapus
Balasan
gitosamin18 Oktober 2010 pukul 21.16
N'tar tak postingkan! Tak siapin dulu. Nggak lama ko'. Paling 1, 2, 3 hari udah nongol!

Salam ...

gubhug reyot
BalasHapus
Balasan
Gee18 Oktober 2010 pukul 21.20
ok siap kang,,,
thanks...
akang jago banget tentang css'y???
belajar dmna kang???
BalasHapus
Balasan
gitosamin18 Oktober 2010 pukul 21.53
He...he ... belajar di kebun sambil nanam singkong ma' bakar ketela ! He ... he ... kata orang tua ..., "Dimana ada kemauan di situ ada jalan!" He ... asal nggak jalan ke neraka, saja, toh!
Belajar dan selalu belajar itu saja kuncinya. Cangkul di tangan kanan, pensil di tangan kiri, trus buku di bawah topi bambu! Hua .... ha ... ha ....!

Salam ....

gubhug reyot
BalasHapus
Balasan
->[R][D][B][C]<-26 November 2010 pukul 08.19
Mas .
Gmna cara buat ganti kata" .
Kan saya promosi in blog lewat facebook .
Dengan cara .
- Klik tautan
- Tulis website
- Kan udah keluar tuh gambar n website nya .
- Eh punya saya malah kata-kata nya aneh .
- Kolo punya sampeyan malah kata-kata nya bagus
- Contoh : Panduan blogger,Tutorial blogger DLL.
- Tolong yo mas bantu blog saya .
Thx .
BalasHapus
Balasan

Tambahkan komentar

gubhug reyot

Keterangan Penting

Cumulus swf - flash

Categories

Arsip...

Flag Counters

Pengikut

Recent Comments plus Kode CSS Box Gelap

Vertical Menu

Download Browser

Widget

CSS 3

Special Tutorials

Javascript-JQuery

Blog-Email-Modem

File Hosting

Promosi Blog

Adobe-Image-Animasi

Tutorial BlogDETIK

New BloGGER Templates

Panduan BloGGeR

Tutorial Blogger

Tips-Trik Blogger

Pengilon

Ge-eR

Sobat Ngeblogh