Cara membuat widget artikel terbaru dengan gambar di blog

Memiliki tampilan bolg menarik adalah impian untuk semua blogger, seperti saya contohnya, ada banyak cara untuk mempercantik tampilan blogger, dari Mengganti template menambahkan widget, atau variasi lainnya.

Nah kali ini saya akan membagikan tutorial dari salah satu cara di atas , yaitu menambahkan widget pada blog dan widget yang akan saya bahas adalah postingan terbaru.

Widget postingan terbaru memiliki manfaat tersendiri, salah satunya adalah membuat daya tarik pengunjung untuk membuka artikel artikel terbaru.

Oke, langsung saja saya akan membagikan tutorialnya,

Cara membuat widget artikel terbaru dengan gambar di blog


Langkah pertama kalian login ke blogger


Pilih tata letak >>tambahkan gadget>>html/javascrip

Cara menambah widget artikel terbaru


Pilihlah judul sesuai keinginan contohnya "artikel terbaru"


Lalu pada halaman isi, kalian tempelkan kode di bawah ini

<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=10;
var rcp_snippet_length=150;
var rcp_info='yes';
var rcp_comment='Comments';
var rcp_disable='T?t Nh?n xét';
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>

Maka hasilnya akan seperti ini


Membuat artikel terbaru

Kalian bisa mengganti jumlah artikel yang akan di tampilkan caranya "numposts=10;" Silahkan ganti angka 10 dengan angka yang kalian inginkan untuk menampilkan jumlah postingan.

Sebenarnya cuma itu saja si cara membuat widget artikel terbaru dengan gambar di blog,  jika ada yang mempunya cara yang lebih keren lagi tampilannya silahkan komen di bawah.

Penutup:

Sampai disini saja tutorial saat ini, semoga akan membawa manfaat untuk kalian semua
Terima kasih.

0 Response to "Cara membuat widget artikel terbaru dengan gambar di blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel