Cara Buat Recent Post Responsive Terbaru

Sahabat uongduro selamat berjumpa kembali, sengaja di pekan-pekan bulan ini saya fokus menambah perbendaharaan di blog uongduro dengan artikel yang khusus membahas tentang Recent Post alias artikel terbaru.

Saya berharap para sahabat tidak bosan mengikuti setiap artikel yang diposting oleh uongduro, sengaja saya sajikan artikel-artikel simple dalam blog ini dengan maksud mempermudah penerapannya ke dalam blog para sahabat dengan tanpa bahasa yang jelimet. Untuk demonya klik tautan berikut!

Ok... Kita sudahi dulu basa-basinya ya, langsung saja kita menuju TKP, hehe :)

1. Silahkan masuk ke akun blogger sahabat
2. Di dasbor klik Tata letak
3. Klik Tambahkan gadget
4. Pilih dan klik HTML/JavaScript [</>]
5. Copy dan paste kode berikut didalamnya
<style type='text/css'>
img.recent_thumb {padding:0px;width:128px;height:78px; float:left;margin-right:10px;border:1px solid #ddd;border-radius:3px}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: auto;margin: 5px 0px 5px 0px;padding: 0;font-size:16px;}
ul.recent_posts_with_thumbs li {min-height:88px;border:none}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;color:#ddd} </style>
<script style='text/javascript'> function showrecentpostswiththumbs(json){document.write('<ul class="recent_posts_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;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!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh42vCt164ypgSOxE9vN6nngfWnVluypB0xotinn0U-SmGR8QFf9LEme8OgxEQniepHJnFMeSU4h7RTyBg9GpQZoD4BO8Uok6iq51a5UZzPfnyZ1UYAgE_ISndozsceKR3e00A2Iit8nJJp/s1600/a.png';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true) document.write('<img class="recent_thumb" src="'+thumburl+'"/>');document.write('<a href="'+posturl+'" target ="_top">'+posttitle+'</a><br>');if("content"in entry){var postcontent=entry.content.$t;} else if("summary"in entry){var postcontent=entry.summary.$t;} else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');} else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br><strong>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;} if(showcommentnum==true){if(flag==1){towrite=towrite+' | ';} if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;} if(displaymore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">wonggun.blogspot.com</a>';flag=1;;} document.write(towrite);document.write('</strong></li>');if(displayseparator==true) if(i!=(numposts-1))
document.write('<hr size=0.5>');}document.write('</ul>');}</script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = fallse;
var showpostsummary = false;
var numchars = 100;</script> <script src='https://wonggun.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

6. Ganti warna merah dengan url blog sahabat
7. Klik Simpan, lihat hasilnya. Jika template sahabat suport tentu sahabat dah memiliki Recent Post dengan bentuk elegan, responsive dan mudah pembuatannya.
Postingan Terkait

Belum ada tanggapan untuk "Cara Buat Recent Post Responsive Terbaru"

Post a Comment