Panduan Membuat Recent Posts Dengan Thumbnails

Wednesday, January 14, 2015

Panduan Membuat Recent Posts Dengan Thumbnails - Sebelum Saya membahas inti dari artikel ini, terlebih dahulu Saya akan menjelaskan apa itu recent posts dengan thumbnails.

Recent posts merupakan widget yang akan menampilkan artikel terbaru dari blog anda sedangkan thumbnails adalah gambar dari artikel blog anda. Jadi, recent posts dengan thumbnails merupakan widget yang menampilkan artikel terbaru dari blog anda disertai dengan gambar.

Widget ini sangat membantu pengunjung blog anda untuk mengetahui artikel terbaru dari blog anda tanpa harus ke halaman utama blog anda. Jika anda tertarik untuk menggunakan widget ini, silahkan anda perhatikan langkah - langkah berikut ini .

Panduan Membuat Recent Posts Dengan Thumbnails

1. Masukkan akun blogger anda
2. Klik Tata Letak kemudian Tambahkan Gadget selanjutnya pilih HTML/JavaScript
3. Kemudian masukkan kode dibawah ini :

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

</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://begini-blog.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>

KeteranganKode :

Tulisan yang berwarna Merah adalah lebar widget. Silahkan anda ganti sesuai dengan lebar sidebar blog anda
Tulisan berwarna Orange adalah teks dibelakang jumlah komentar. Anda bisa menggantinya dengan komentar atau comments
Tulisan berwarna Kuning adalah jumlah postingan terbaru yang akan di-crawl, ganti sesuai dengan nilai yang anda inginkan
Tulisan berwarna Hijau, anda ganti dengan url blog anda
Tulisan berwarna Aqua adalah jumlah postingan terbaru dalam sekali tampilan, ganti sesuai dengan nilai yang anda inginkan
Tulisan berwarna Biru adalah kecepatan scroll dalam milisecond (ms), ganti dengan keinginan anda

4. Kemudian Simpan

Itulah Panduan Membuat Recent Posts Dengan Thumbnails, semoga artikel ini bermanfaat. Terima kasih

Jika ingin mendapatkan artikel terbaru melalui sosial media, silahkan like serta follow akun dibawah & jangan lupa di share.

Ikuti Blog Ini / Facebook / Google+ / Twitter

Terima kasih telah berkunjung di Begini Blog. Silahkan berikan komentar anda dikolom komentar atau klik disini

0 Komentar untuk "Panduan Membuat Recent Posts Dengan Thumbnails"

Peraturan berkomentar :

1. Silahkan berikan komentar anda sesuai dengan topik artikel.
2. Gunakan tombol "Balas" jika ingin membalas komentar agar komunikasi lebih terstruktur.
3. Gunakan bahasa yang baik dan mudah dimengerti.
4. Dilarang keras meninggalkan link hidup atau aktif.

Terima kasih telah berkunjung.

Panduan Membuat Recent Posts Dengan Thumbnails

Panduan Membuat Recent Posts Dengan Thumbnails

Share :

Previous

Next

0 Komentar untuk "Panduan Membuat Recent Posts Dengan Thumbnails"