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




No hay comentarios.:

Publicar un comentario

Sobre mi


 Hola, soy Washington Indacochea Delgado (Wachín), la siguiente es la historia de cómo empecé a usar Ubuntu. Todo empezó hace muchos años atrás en el año 2007 cuando estaba haciendo un deber y eran como las once de la noche y estaba en la computadora en Windows XP que se había puesto muy lento, demasiado, y había estado lidiando tratando de hacer el deber desde las ocho de la noche y el deber era para el siguiente día y yo ya quería dormir, y seguí tratando de usar la computadora para terminar el deber pero no pude, y ya era pasado de las doce casi la una (luego supe que tenía un virus) y tuve que irme a dormir y yo quedé muy frustrado por lo sucedido, ¡tanto tiempo allí con esa maquina lentísima y sin poder avanzar en la tarea! ¡fue algo horrible! todo funcionaba en camara lenta, era desesperante y sin poder hacer nada y con el apuro de terminar un deber importante para la mañana siguiente (no lo pude entregar).
  Al siguiente día en la noche en la iglesia había el culto de oración, yo fui y allí le pedí a Dios que me ayudará para nunca más volver a pasar por algo así por los virus. Luego pasó medía semana y mi hermano (estudiante de informática, muy inteligente) me dió un CD con el Sistema Operativo Ubuntu 7.10 (Gutsy Gibbon liberado en Octubre del 2007), y el me dijo que a éste no le afectaban los virus, y el me enseñó a instalarlo y me explicó como usarlo. Y desde allí empecé a practicar en este sistema operativo Ubuntu y poco a poco avanzando y leyendo en los foros en español y en inglés (allí hay más información). Pero usaba en ese tiempo más Windows que Ubuntu y ya para el año 2012 cuando hice mi tesis de Ingeniería en Alimentos usaba más Ubuntu (estaba probando los sabores https://kubuntu.org, https://ubuntustudio.org, y me había quedo usando Ubuntu Studio), sin embargo en ese año para hacer mi tesis utilicé Windows porque decía entre mi: "No sea que luego no me acepten mi tesis presentándola en formato odt del LibreOffice o algo me reclamen, o tenga luego yo que pasar de odt a doc, habiendo mucha posibilidad que se mueva algo del formato y tenga que corregirlo lo cual sería horas y horas", pero desde que terminé mi tesis estaba usando casi en su totalidad Ubuntu Studio (soy una persona musical y este UbuntuStudio es también para eso, usa un Kernel de baja latencia). Bien, a la fecha puedo decir que estoy libre de los virus, pero eso si frecuentemente actualizo el Sistema Operativo pues como ya sabrán los que usan Linux esa es la manera de protegerse de posibles ataques. Y también añado que desde el año 2020 estoy usando MX Linux porque Ubuntu dejó de dar soporte a 32 bits y con ello también UbuntuStudio. A continuación les dejo con varios vídeos sobre el tema de porqué Linux es más seguro:


[Aalto Talk with Linus Torvalds (Subtitulado)] min 31:52 sobre el Kernel.

Nota: Estas ultimas dos de Red Hat las puede ver con subtítulos en español si les da clic en la Tuerca y allí lo selecciona entre los varios idiomas que tiene.
Si usted quiere saber las vulnerabilidades que van encontrando en Ubuntu puede revisar esta página:

Ubuntu security notices (usn)

está sobre entendido que una vez que las encuentren las arreglarán y el parche se lo enviarán en las actualizaciones.
Puede leer también:

SecurityTeam - Ubuntu Wiki


 A mediados del 2018 estoy usando Xubuntu 18.04 de 32 bits por la razón de que Ubuntu Studio ha dejado de dar soporte a 32 bits, no obstante para hacer música estoy usando Jack Audio Connection Kit pues he aprendido a configurarlo.

También lea sobre la Historia de esta página

Proyecto Facilitar el Software Libre en el Ecuador: Historia
https://facilitarelsoftwarelibre.blogspot.com/2019/08/historia-de-esta-pagina.html

Que Dios les bendiga