Skip to main content

follow us


www.azid.web.id - Cara Membuat Recent Post Keren Dengan Thumbnail Post. Selamat datang kembali di azid.web.id, pada kesempatan kali ini saya akan share tentang cara membuat recent post dengan thumbnail. Sebelum membuat recent post, saya akan menjelaskan ulasan sedikit tentang recent post itu sendiri dan manfaatnya.

Recent post atau nama lain dari artikel terbaru merupakan sebuah tampilan pada blog yang hampir mirip layaknya popular post atau artikel terpopular. Recent post sangat bermanfaat bagi blog kita untuk memudahkan pengunjung mengetahui artikel terupdate kita saat mereka mengunjungi blog kita. Recent post biasanya diletakkan pada menu sidebar dan paling atas. Jika blog sobat tidak memiliki sidebar maka saya sarankan jangan memakai recent post ini karena pastinya kurang bermanfaat bagi blog sobat. Akan tetapi jika sobat memiliki sidebar pada template sobat, maka sobat bisa mengeksekusi tutorial tentang membuat artikel terbaru dengan thumbnail post atau recent post dengan thumbnail gambar ini.

Baik, untuk membuat recent post dengan thumbnail sangatlah mudah. Sobat bisa mengikuti langkah-langkah berikut ini;

Pertama, sobat harus masuk blogger terlebih dahulu dan klik menu layout atau tata letak.
Kedua, buatlah widget baru pada tampilan sidebar sobat, dengan klik new widget pada sidebar paling atas dan pilih HTML/Java Script.
Ketiga, setelah klik pilihan HTML/ Java Script maka sobat akan ditampilkan menu kosongan. Pada menu tersebut copas kode script dibawah ini dan letakkan pada menu tampilan HTML/ Javascript


<style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:12px}
#recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}
#recent-posts ul{margin:0;padding:0}
#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#recent-posts ul li:last-child{border-bottom:0}
#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5;
var rcp_snippet_length=150;
var rcp_info='yes';
var rcp_comment='Comments';
var rcp_disable='';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script></div>

Keempat, jika sobat sudah meletakkan kode tersebut langkah terakhir adalah save widget yang barusan sobat buat dan jangan lupa untuk merefresh blog sobat dengan klik F5. Pastikan tampilannya sudah reseponsive dan sesuai.

NB: jangan lupa untuk mengubah numpost = 5 jika sobat ingin menambah jumlah postingan yang akan sobat tampilkan.

Demikianlah Cara Membuat Recent Post Keren Dengan Thumbnail Post. Semoga bermanfaat. Amin.
PERHATIAN!: setiap link template pada blog ini di direct 5 -7 kali jadi harap bersabar.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar