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 «

Furniture

Search This Blog