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 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:

• Cara Menambahkan Recent Posts Dengan Bullets
• Cara Membuat Recent Post Berdasarkan Label dan Thumbnail

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

Tidak tahu cara berlangganan? Klik disini

Related Post:

Widget

• Cara Membuat/Memasang Widget Top Komentator Berbentuk Cloud
• Cara Menambah Tombol Google +1
• Membuat Navigasi Breadcrumb Di Blogspot
• Cara Membuat Widget Top Komentator
• Cara Membuat Widget Translator Berbentuk Bendera
• Membuat Kotak Berlangganan Via Email
• Cara Membuat Kotak Blogroll dan Efek Marque
• Cara Membuat dan Memasang Shoutbox di Blog
• Menambahkan Random Posts Widget
• Cara Membuat Recent Post Berdasarkan Label dan Thumbnail
• Cara Menambahkan Recent Posts + Comment Dengan Javascript
• Recent Artikel Blog di Facebook Melalui NetworkedBlogs
• Menambahkan Artikel Populer Pada Sidebar
• Cara Membuat Tab View Widget Pada Sidebar

Blog

• Ribuan Backlink Gratis dari IMTalk
• Cara Memasang Tweetmeme di Setiap Postingan
• Cara Mendaftarkan Blog ke DMOZ
• Cara Membuat Short URL Google Plus
• Cara Daftar Google Plus (Google+)
• Google Update Pagerank Juli 2011
• Cara Menghapus dan Mengecek Broken Link Pada Blog
• Apa itu Google Plus (Google+) ?
• Tips Menghadapi Komentar Negatif
• Menambah Meta Tag Untuk Perkuat Postingan Kontes SEO
• Kontes SEO, Berbahaya!
• Pentingnya Menjawab Setiap Komentar di Blog
• Kenali Pengunjung Blog Anda
• 10 Artikel Terbaik Bulan Juni 2011
• Metode On Page dan Off Page SEO
• Cara Membuat Link Internal di Setiap Postingan
• Siapa Pengunjung Setia di Blog Anda?
• Tips Mendapatkan Pengunjung Setia di Blog
• Favicon Generate - Fitur Baru Blogger
• Cara Menambah Tombol Google +1
• DAW-XP Toolbar - Akses Cepat Menuju DAW-XP
• Cara Membuat Toolbar Alexa Sendiri
• Cara Memasang Alexa Widget
• Manfaat Alexa Toolbar
• Apa itu Alexa Rank?

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.