Membuat Recent Post dengan Thumbnail

hai sobat wahid emalution udah lama saya tidak membagikan tutorial nih, mungkin karena saya sibuk dengan sekolah, tetapi saya kembali dengan membawa tutorial yang bermanfaat untuk sobat, yaitu

Membuat Recent Post Dengan Thumbnail

recent post ini berfungsi untuk menampilkan post terbaru dari suatu blog, dan bagi saya bisa membantu pengunjung mengetahui post terbaru di blog saya.

caranya tidak susah kok , langsung saja kita ke caranya.

1.Login Blogger.com

Tata Letak > add gadget/ Tambahkan gadget > pilih widget HTML/JAVASCRIPT

lalu masukkan isinya

<style scoped>


img.recent_thumb
{width:72px;height:72px;float:left;transition:all 0.3s
ease-in-out;padding:5px;background:#f6f6f6;margin:0 2px 2px 0;}


.recent_thumb img {border-radius:3px;}


img.recent_thumb:hover {opacity:0.8;}


.recent_posts_with_thumbs {font-size:13px;}


ul.recent_posts_with_thumbs li
{font-size:13px;color:#8f8f8f;overflow:hidden;margin-left:5px;margin-left:5px;}


.recent_posts_with_thumbs a
{text-decoration:none;font-weight:400;}


.recent_posts_with_thumbs normal
{font-size:13px;}


</style>


<script type='text/javascript'>


//<![CDATA[


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/AVvXsEi_um_7hECglFzGX5wTYgq8kcd9MI4velgF0yscpLgEyWavsPj-tW2RujTXgQ_qrx-pvUtlZqKioehdf64f6ovyD9mkD4efBeqXoUi_eIwt2Qrq6J-QfzLtUHvS79K-o8nelXMN_vCZxAla/s320/noimage.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+'"
title="'+posttitle+'" alt="'+posttitle+'"/>');


document.write('<b><a
class="alink" href="'+posturl+'"
title="'+posttitle+'" target
="_top">'+posttitle+'</a></b><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('<i>');


        
document.write(postcontent);


         
document.write('</i>');}


     
else {


         
document.write('<i>');


        
postcontent = postcontent.substring(0, numchars);


        
var quoteEnd = postcontent.lastIndexOf(" ");


        
postcontent = postcontent.substring(0,quoteEnd);


        
document.write(postcontent + '...');


         
document.write('</i>');}


}




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='Add
Comment';


commenttext = '<a class="alink"
href="'+commenturl+'" target
="_top">'+commenttext+'</a>';


towrite=towrite+commenttext;


flag=1;


;


}




if(displaymore==true) 


{


if (flag==1) towrite=towrite+' | ';


towrite=towrite+'<a class="alink"
href="'+posturl+'" title="'+posttitle+'"
class="url" target ="_top">More -></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>


var numposts = 3;


var showpostthumbnails = true;


var displaymore = false;


var displayseparator = false;


var showcommentnum = false;


var showpostdate = false;


var showpostsummary = false;


var numchars = 75;


</script>


<script src="http://wahid-emalution.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs"
type="text/javascript"></script>

Setelah itu simpan widgetnya, "ganti link http://wahid-emalution.blogspot.com dengan link sobat" .
dan selesai , jika ada yang ingin ditanyakan silahkan bertanya melalui komentar , Terima Kasih