Cara Membuat Recent Post Dengan Thumbnails



Cara Membuat Recent Post Dengan Thumbnails - Hari ini kita akan mempelajari tentang recent post dengan versi thumbnail atau Cara Membuat Recent Post Dengan Thumbnails.

Recent Post dengan thumnails? Sebelumnya kita harus tahu dulu thumbnails itu apa.
Thumbnails merupakan gambar atau pictures yang terpajang di media-media, contohnya widget yang sekarang kita bahas ini. Gambar yang dihiasi kata-kata dari javascript ini sangat bagus. Anda tidak akan menyesal untuk mencobanya.

Recent Post With Thumbnails


Recent post dengan thumbnails ini berbeda dengan artikel terbaru yang hanya menggunakan bullet sebagai penghiasnya (baca: Menambahkan Recent Posts + Comment Dengan Javascript). Slideshow kali ini dilengkapi dengan efek marquee/berjalan (baca: Cara Membuat Kotak Blogroll dan Efek Marquee) yang membuat blog kita semakin cantik. Dengan membuat Slide Show pada halaman blog kita, pengunjung akan lebih mudah lagi untuk menyelusuri daftar isi pada blog yang kita buat.

Tertarik membuatnya? Ikuti langkah berikut di bawah ini.
1. Login ke akun blogger sobat.
2. Lalu klik rancangan - tambah gadget - pilih HTML/Javascript.


3. Lalu masukkan kode di bawah ini di kolom tersebut.
<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:355px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:335px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/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 = 300;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "Reply(s)";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://daw-xp.blogspot.com/";
limitspy=5
intervalspy=6000
</script>

<div id="spylist">
    <script type='text/javascript'>
//<![CDATA[
 /*
 * Script dikombinasikan dari bloggerstricks.com
 * spy effect dari jqueryfordesigners.com
 * Oleh Abu Farhan (www.abu-farhan.com)
 * Modifikasi oleh daw-xp.blogspot.com
 */
jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div class="spyWrapper" />').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">'+n+'</div><div class="spycomment">'+cmtext+"</div>";document.write(v);j++}document.write("</ul>")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
//]]>
</script>
</div>
  • boxwidth = 300 adalah lebar widget dalam pixel (px), ganti nilainya sesuai dengan lebar sidebar blog.
  • text = "Reply(s)" adalah teks di belakang jumlah komentar, ganti Reply(s) sesuai keinginan, misalnya: komentar, comment(s), dll.
  • numposts = 10; adalah jumlah posting terbaru yg akan di-crawl, ganti nilainya sesuai keinginan.
  • limitspy=5 adalah jumlah posting terbaru dalam sekali tampilan, ganti nilainya sesuai keinginan.
  • intervalspy=6000 adalah kecepatan scroll / spy dalam milisecond (ms), ganti nilainya untuk mengatur kecepatannya.

4. Save widget dan lihat hasilnya.

Selesai sudah cara membuat artikel terbaru dengan thumbnails. Bagi sobat kunjungi terus dan dapatkan artikel terbaru disini.

Selayaknya Dibaca:

Ingin Berlangganan Artikel Terbaru ke email kamu? Masukan Email kamu disini:

Tidak tahu cara berlangganan? Klik disini

Related Post:

Anda sedang membaca artikel tentang Cara Membuat Recent Post Dengan Thumbnails dan anda bisa menemukan artikel Cara Membuat Recent Post Dengan Thumbnails ini dengan url http://daw-xp.blogspot.com/2011/04/cara-membuat-recent-post-dengan.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Recent Post Dengan Thumbnails ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Cara Membuat Recent Post Dengan Thumbnails sumbernya.


40 comments

Qari' Ayatullah April 18, 2011 at 8:38 PM

nice bro.....!!!!! foolbacknya .....

Reply delete
myone1way April 19, 2011 at 2:35 PM

pengunjung setia : mas, dah berhasil tak coba & bagus sich, tapi koq side bar-ku yg paling atas jadi hilang begitu yg scrip pengganti kode 'head' kuhilangin side bar-ku yg diatas berfungsi kembali tapi recent post slideshownya gak jalan...gimana tuh? jawab dunk ASAP...

Reply delete
Deny Arya Wiranata April 19, 2011 at 3:06 PM

@Qari: Sudah sob
@myone1way
Apa maksud sob kode ini?
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
Jika benar, letakkan kode di atas ]]>.

Jika masih tidak berfungsi, ikuti tutorial di artikel di atas, lalu ke pengaturan > feed situs > ijinkan feed blog > penuh.

Reply delete
myone1way April 20, 2011 at 4:40 PM

kodenya udah diletakin ditas ]]> trus feed blog juga dah dibikin penuh, tapi masih gitu,kayaknya bentrok ma slide show gambar yg ada di blogku dech..kucoba tutorial blog lain (tanpa ada kode tambahan yg diatas ]]>) hasilnya juga sama aja...

Reply delete
Deny Arya Wiranata April 21, 2011 at 2:09 PM

@myone1way
Oh Anda sebelumnya punya slideshow ya? Ga bisa dong, harus dihilangkan dulu biar ga bentrok tuh slideshownya ..

Reply delete
Boby Kurniawan May 18, 2011 at 4:53 PM

thx sob.. sangat mmbantu.. blognya bagus..

Reply delete
Deny Arya Wiranata May 18, 2011 at 5:57 PM

@Boby Kurniawan : OK, sama-sama sob. Makasih ya dah berkunjung dan komentar. Kunjungi terus blog ini ya. :D

Reply delete
aNaK KoS EnTerTaiNmEnT May 27, 2011 at 12:23 AM

pake yang nhe takut berat sob...

Reply delete
Deny Arya Wiranata May 27, 2011 at 12:10 PM

@aNaK KoS EnTerTaiNmEnT : Nda juga kok, kita bisa ngatur ukuran gambarnya, tapi itu semua balik kepada sobat sendiri. :)

Reply delete
Radja Software May 29, 2011 at 10:19 AM

akan lebih baik kalau di beri penjelasan lebih mendalam...

Seperti untuk mengubah ukuran gambar nya itu apa kode nya,terus lebar nya dll.

karena bagi yg masih newbie seperti saya masih kurang jelas.

dan yang cuma ngeliat2 artikel ini terus ragu2 untuk praktekin hem.

di jamin widget ini 100% Work. kox
tentu nya kalu ikutin petunjuk nya .

Reply delete
Deny Arya Wiranata May 29, 2011 at 12:37 PM

@Radja Software : Oh begitu ya. Saya sangat berterima kasih kepada anda atas saran dan kritikan sobat pada artikel ini. Saya tidak membuat begitu sebelumnya karena ukuran gambarnya sudah pas dan kecil. Tapi saya akan tetap membuat catatan mengenai itu. Makasih sebelumnya gan. :)

Reply delete
Hanifa Free Download July 14, 2011 at 5:58 PM

saya coba di blog saya ya sob,
trims ya

Reply delete
Hanifa Free Download July 14, 2011 at 6:04 PM

kok g bisa sob

Reply delete
Deny Arya Wiranata July 14, 2011 at 6:05 PM

@Hanifa Free Download : ok silahkan sob. Sama-sama. :)

Reply delete
Deny Arya Wiranata July 14, 2011 at 6:08 PM

@Hanifa Free Download : blognya error ya sob? kok aku buka langsung kaya aneh gitu? Coba lihat SSnya: http://i56.tinypic.com/egbhjb.jpg

Reply delete
NewsNow October 26, 2011 at 2:02 AM

mas koq gak bisa ya padahal saya suka sekali dengan widget punya mas yang side bar kiri >> "ARTIKEL TERBARU" apa template saya gak ngedukung ya mas ? heheh maaf newbie lagi belajar, kalo berkenan ini blog saya http://automotique.blogspot.com apa musti ganti template ya mas, makasih

Reply delete
Deny Arya Wiranata October 26, 2011 at 5:47 PM

@NewsNow sudah saya edit mas silakan dicoba kembali. Semoga berhasil :)

Reply delete
shafira November 30, 2011 at 3:27 PM

trimakasih kk,,.. aku coba dulu ya,,,..

Reply delete
davis December 3, 2011 at 8:15 AM

ane ijin copas ya gan, ntar mw ane praktekin ke blog ane..

Reply delete
BitInspiration December 10, 2011 at 1:39 PM

keren gan....sharingnya...patut dicoba...

Reply delete
Achmad Zaelani December 19, 2011 at 12:57 AM

mass sripnya bisa tapi tampilanya bukan post saya melainkan pos agan ..
tolong pencerahanya apanya yg di ganti ..

Reply delete
win7 December 24, 2011 at 1:07 AM

sip gan....

Reply delete
hanumuslem December 30, 2011 at 9:42 PM

thanks

Reply delete
nadia mulya January 4, 2012 at 6:42 PM

terima kasih yah petunjuknya, sudah saya terapkan di blog saya

Reply delete
achmad reza January 4, 2012 at 6:43 PM

Mantab Gan terima kasih atas referensinya

Reply delete
Gembong Abisatya January 10, 2012 at 8:29 AM

sob, kok gak keluar gambar ya?

Reply delete
nas_phie January 19, 2012 at 9:23 AM

saya udah ikuti caranya,,kok yang muncul malahan postingan agan si??

Reply delete
wahid sahidu January 30, 2012 at 2:10 PM

makasih om akhirnya ane nemuin juga langsung ane coba, makasih ya udah share

Reply delete
Haji dan Umroh Murah Gratis March 19, 2012 at 3:18 PM

Keren banget. Makasih ya infonya :)

Reply delete
Ramdani Pesat April 4, 2012 at 12:47 PM

Nice Posting Sobat.
Thnx.

Mau tanya dong, coding untuk mengganti background'nya yg mana yah ??
Terima kasih bnyk jika anda mau menjawab pertnyaan saya ini. :)

Reply delete
Tutorial Blogger April 9, 2012 at 3:06 PM
Rendra Osaka June 29, 2012 at 2:57 PM

thank bro..
kalo ga keberatan, kunjungi jg bloh saya,, baru belajar nih.. ehehe
http://rendra-osaka.blogspot.com/

Reply delete
Mang uem October 12, 2012 at 3:23 PM

Thanks sudah berbagi infonya, sukses selalu...

Reply delete
putra mahayana November 7, 2012 at 8:23 PM

sob mau tanya, knp kalau saya pasang widget ini, slide yg lain ga bkerja ya? btw thanks atas informasinya, sangat bermanfaat salam suksess sob

Reply delete
rizky aditya January 2, 2013 at 8:11 PM

gan ada yg tau caranya buat site info di bawah sendiri gak? yg isinya info2 ( about me )
review blog ane gan http://mucilgogreen.blogspot.com/

Reply delete
obat herbal kanker otak January 14, 2013 at 2:25 PM

nice info gan .
jadi nambah ilmu buat ngeblog.

Reply delete
Blogger Awn January 19, 2013 at 2:13 PM

wah manata gan
scrolnya otomatis ya gan

Reply delete
hezty tatawarna December 24, 2013 at 10:03 AM

makasii infonya ... :D

Reply delete
Andrii X April 6, 2014 at 1:13 AM

Makasih bro! Kereennn ;))))

Pesan kampret ini disampaikan dari: Andrypedia.blogspot.com

Reply delete

Post a Comment

Silahkan Anda kritik dan sarannya pada kolom komentar di bawah ini. Karena setiap satu kata Anda berkomentar sangat berarti untuk kemajuan blog ini (baca: Cara Berkomentar yang Baik).

 

Site Info

  • Fortuner SUV Terbaik
  • Commonwealth Life Perusahaan Asuransi Jiwa Terbaik Indonesia
  • Cincin Kawin
  • PageRank

    Followers

    back to topReturn to top of page Copyright © 2012 | Blog SEO DAW - XP | Tutorial Blogspot | Belajar SEO Blogspot - Privacy Policy Template by Hack Tutors