Blogger - Añadir Gadget "Nuevas Entradas" con script en Javascript

RESUMEN: 
He visto en varios Blogs que tienen en un lado las nuevas entradas que van subiendo para que las vean las personas que leen el blog (yo hago eso), este es el tutorial para añadir esa característica  a Blogger




INSTALAR BRACKETS
Si no lo tiene instalado siga este tutorial:

http://facilitarelsoftwarelibre.blogspot.com/2017/11/como-instalar-brackets-en-ubuntu.html

INSTRUCCIONES PARA AÑADIR EL GADGET:
Copiar este script, pegarlo y modificarlo a su gusto en Brackets:

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTs9aTgAkK7TQZlHRZ1jfLyYqabF4oZY4-cIipMoRS0ZTmApDCl_T8x9NlHjSsdAMBJv0IUfTKOUFD_aSDU45T8mnHLmL5bVrXEPnOl9mEr-9dR3da689vFp1GFFPcqeFoao6D3YYbd_Gv/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 170;
        /* 
    summary_chars es la cantidad de texto
    que tendra el resumen de la entrada
    Tenia menos, yo le puse 170
    Add by Wachin
    */
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 15px; color: #373434; margin-top: 14px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb{width:100px;height:100px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:15px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 0px;}
    /* 
    donde esta: "font:15px 'Ubuntu Condensed'," 
    "px" es el tamaño del texto del resumen de la entrada 
    Add by Wachin
    */
ul.recent-posts-container li:nth-child(1n+0) {background: #F6BBA6; width: 210%}
    /* 
    Al final en "width: 210%" tenia mucho menos
    yo le puse 210% para que sea mas ancha la entrada
    porque era muy angosta y no se podia leer bien
    Add by Wachin
    */
ul.recent-posts-container li:nth-child(2n+0) {background: #C19EB1; width: 210%}
ul.recent-posts-container li:nth-child(3n+0) {background: #C6C1BB; width: 210%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #B5A5B0; width: 210%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #FCE5DE; width: 210%;}
ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #333;}
     /* 
    Donde dice: "; color: #333;" es el color del 
    texto del resumen de la entrada
    Add by Wachin
    */
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 15px;color: #D93000; font-weight: bold;}
    /* 
    donde esta: ".recent-post-title a {font-size:" 
    "px" es el tamaño del titulo de la entrada
    Add by Wachin.
    Nota: Este script es de aqui:
    https://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html
    */
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>

Nota: Este script no es mío, es una modificación del script en Javascript de:

5 Cool Recent Post Widgets for Blogger - Helplogger
https://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html

Luego añadalo como un Gadget/Javascript



Siga las instrucciones de este video:

Otras herramientas usadas:

Draw Freely | Inkscape
https://inkscape.org/en/

Cómo instalar gpick en Ubuntu 14.04 (Trusty Tahr)
https://www.howtoinstall.co/es/ubuntu/trusty/gpick