Rabu, 18 Januari 2012

Cara Membuat Recent Post Dengan Thumbnails

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 menarik untuk di pajang di blog sobat. Anda memang harus mencobanya... :)


Recent Post Dengan Thumbnails ini berbeda dengan Artikel Terkait yang hanya menggunakan bullets,,Thumbnails menampilkan gambar postingan dan memiliki slide show yang membuat blog anda lebih indah...


Anda harus mencobanya sobat..
ikuti langkah berikut :

1. Login ke Blogger Sobat
2. Lalu klik Rancangan - Tambah Gadget - dan pilih HTML/Javascript.

3. Masukkan (copy-paste) kode di bawah ini kedalam kotak tersebut.



Kode nya Disini !!!


<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:435px;
}
#spylist ul{
width:230px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:212px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#8080
url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:center;
color:#4B545B;
font-size:12px;
height:15px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:30px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:20px;
font-family:Tahoma,Arial,verdana, sans-serif;
}


-->
</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";
imgr[5] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 5;
cellspacing = 1;
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://cuba-tuleh.blogspot.com/";
limitspy=5
intervalspy=6000
</script>

<div id="spylist">
<script type='text/javascript'>
//<![CDATA[

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

  • 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.
  • http://cuba-tuleh.blogspot.com ganti dengan Url Blog sobat.
4.  Save widget dan lihat hasil nya .
Selesai sudah prosesnya ,ber eksperimen lah dengan kode-kode diatas agar sesuai dengan tampilan blog sobat..


SELAMAT MENCOBA,,SEMOGA BERHASIL,,DAN PASTI BERHASIL :)


-JANGAN LUPA LIKE DAN FOLLOW BLOG KAMI...TERIMA KASIH-
Link Download Mediafire Bermasalah ??,,Cara Download di Mediafire melalui adf.ly Klik Disini .
-Ingin mengganti domain Dot Com ??,,GRATIS KLIK DISINI-

Baca Juga Artikel Menarik Lainnya:

Comments
0 Comments

0 komentar:

Posting Komentar

:::Silahkan Berbagi Artikel Kami, Tinggalkan Komentar Anda Dan Follow Blog Kami,Mari Kita Bangun Negeri Kita Indonesia Dengan Saling Berbagi Informasi:::

:: www.cuba-tuleh.blogspot.com ::...:: Thanks to Scpgz (sarchopaguz) team Lhokseumawe,Teknik Informatika Unimal,and All my Friends ...::