Cara Terbaru Membuat Recent Post Responsive DI Blogger

==Iklan Dipate Disini===

Lapakinfo.net - Pada kesempatan kali ini saya akan berbagi tutorial yang sangat penting keberadaanya buat blog kalian yaitu tutorial Cara Terbaru Membuat Recent Post Responsive DI Blogger, kenapa sangat penting keberadaannya? Karena selain menampilkan postingan yang populer atau yang lagi rameh di baca, recent post juga bisa mempermudah pengunjung untuk mengetahui artikel terbaru dari blog kita. Selain widget popular post, recent post juga salah satu widget yang sangat penting bagi blog, karena kedua widget tersebut berfungsi menampilkan daftar postingan yang sering di baca atau postingan terbaru dari blog kita.


Untuk memasang recent post ini sangatlah gampang bahkan dari default bloggerpun sudah menyediakan widget tersebut, kalian cukup memasukan url blog dengan bantuan feed maka recent post kalian akan keluar. Nah, disini saya akan memodifikasi sedikit dari recent post tersebut agar lebih menarik dan responsive. Buat kalian yang mau memasang recent post agar lebih responsive bisa ikuti langkahnya di bawah ini.

Cara Terbaru Membuat Recent Post Responsive Di Blogger ( Tanpa Tumbhnail )

Recent post ini sangat simpel dan sangat saya rekomendasikan menggunakan recent post ini

1. Buka Blog kalian
2. Pilih Tata Letak
3. Tambah Gadget/Add Gadget
4. Pilih HTML/Javascript
5. Salin kode di bawah ini dan letakan di dalam HTML/Javascript tersebut

<style scoped='' type="text/css">
ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
li.recent-posts:last-child{border-bottom:0;}
li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#444;text-decoration:underline}
</style>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://www.lapakinfo.net/",
numPosts = 10;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>

6. Simpan

Catatan :

• Ganti http://www.lapakinfo.net dengan url blog kalian
• Jumlah artikel yang akan tampil numPosts = 10; ganti sesuai ke inginan kalian

Cara Terbaru Membuat Recent Post Responsive Di Blogger ( Menggunakan Tumbhnail )

1. Buka Blog kalian
2. Pilih Tata Letak
3. Tambah Gadget/Add Gadget
4. Pilih HTML/Javascript
5. Salin kode di bawah ini dan letakan di dalam HTML/Javascript tersebut

<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=7;
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>

6. Simpan

Catatan :

• Ini adalah jumlah artikel yang akan keluar var rcp_numposts=7; silahkan ganti sesuai keinginan kalian

Bagaimana sangat mudah sekali bukan untuk membuat recent post yang responsive ini, jika kalian mempunyai pertanyaan seputar blogger atau seputar postingan di atas kalian bisa bertanya melalui kolom komentar di bawah ini. Semoga bermanfaat dan terimakasih sudah berkunjung.

==Iklan Dipate Disini===