26 jul. 2014

Tutorial: Gadget de posts recientes cute

Hola hola~ ¿qué tal todas? >3< Vuelvo a disculparme por mi tardanza en publicar, no estuve mucho en casa :< Aquí hace muchísimo calor y paso el día dentro del agua para poder sobrevivir (?) No en serio, estos días han sido odiosos ag, odio el calor, me pone de mal humor si no puedo ir a bañarme xD
Bueno, lo que he hecho en estos días es hacer eso de entradas recientes que acabo de poner en la cabecera, que hace un tiempo llevo pensando poner y nunca lo pongo porque el que viene en Blogger es horrible. Lo hice totalmente yo, osea, lo personalicé de mil maneras hasta que me quedara así, y además, logré que quedara fácil de usar aunque quedó un poco largo~ (fácil ahora, mientras lo hice no .n.)
No hace falta que ponga imagen ni preview ni nada, ahí lo tenéis en mi cabecera moviéndose, y ahora os voy a explicar cómo ponerlo 
[Por favor, si lo publican no se olviden dar créditos, ya que es mi trabajo.]

Empecemos~
Vamos a Diseño >> Añadir gadget >> HTML/Javascript

Pegamos el código, que es este:
<marquee onmouseover="stop()" onmouseout="start()" scrollamount="2" scrolldelay="100" direction="up" width=200px height=50px ><br /><br />
<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='http://1.bp.blogspot.com/-jv2TKvF0WXo/UngNsifOR5I/AAAAAAAAIKI/K1vfVFPmQcg/s1600/no-image.jpg';
}
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] = "Ene";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Abr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Ago";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dic";document.write('<li class="clearfix">');

if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><span style="color: #6fa8dc; font-family: Arial; font-size: x-small;">'+posttitle+'</b></span>');
    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=='0 Comments') commenttext='0 comentarios';
if(commenttext=='1 Comment') commenttext='1 comentario';
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"><span style="color: #8e7cc3; font-family: Arial; font-size: x-small;">Ver</span></a>';
flag=1;
;
}
document.write(towrite);
document.write('</strong></li>');
if(displayseparator==true)
if (i!=(numposts-1))
document.write('');
}document.write('</ul>');
}
//]]>
</script>
<script style='text/javascript'>
var numposts = 5; /* Número de entradas que quieres que se muestren */var showpostthumbnails = false; /* Si quieres que salga una imagen en miniatura al lado de cada post*/var displaymore = true; /* Esto es para que salga el ''ver'' NO lo quiten*/var displayseparator = false;
var showcommentnum = false; /*Si quieres que salga el número de comentarios*/var showpostdate = false; /*Si quieres que salga la fecha*/var showpostsummary = true;
var numchars = 60;</script> /*Número de letras que quieres que ocupe cada post*/<script src='http://NOMBREDETUBLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
<br /><br /></marquee><br /></p></div>

 Ahora explico:
ROJO: 
Eso es el marquee que es lo que hace que se mueva. Si quieres que se mueva hacia abajo, donde pone ''up'' pon ''down'', si quieres hacia derecha o izquierda pues ''right'' o ''left''.
Donde pone scrollamount="2" significa la velocidad en la que va, si lo quieres más rápido y si lo quieres más despacio disminuye.
Por último donde pone width=200px height=50px, modifica por el tamaño que quieras. El mio es gordito y bajo porque es para que quede a medida en la cabecera pero si lo quieres ajustar de otra manera, editalo como gustes.
[si no quieres que se mueva pues quita todo lo que está en rojo en el código]

NARANJA:
<b><span style="color: #6fa8dc; font-family :Arial; font-size: x-small;">'+posttitle+'</b></span>
Donde pone '' '+posttitle+' " significa el título de cada post, pues bien, lo que está en naranja es para que edites la fuente, el color y el tamaño en que quieres que se vea. Puedes buscar los códigos de los colores y las fuentes en Internet.

VIOLETA:
<span style="color: #8e7cc3; font-family: Arial; font-size: x-small;">Ver</span>
Esto es igual que el paso que hicimos en el color naranja. Editar color, fuente y tamaño de la palabra ''Ver''. Puedes poner la palabra que quieras, ''más'', ''seguir'', ''leer'', etc. Si quieres ponerle un mini gif al lado al igual que hice yo, simplemente pon <img src="url">. Quedando así:
<span style="color: #8e7cc3; font-family: Arial; font-size: x-small;"><img src="url">Ver</span>
Y donde pone url pues la url del mini gif o lo que sea. Puedes ponerlo delante y detrás, no ponerlo, esto es cuestión de gustos.

ROSA:
En el código lo dejé todo bien explicado. Si quieren alguna cosa como que se vea la fecha, el número de comentarios, etc, cambien ''false'' por ''true''. Mi código lo tiene como false porque no quería eso. El ''ver'' dije que no lo quitaran porque el título no es un link y no te llevará al post porque yo lo quité ya que prefería el ''ver'', así que si lo quitan no tendrían ninguna manera de ir a ese post xD

AZUL:
Esto está claro, donde pone NOMBREDETUBLOG pues pones el nombre de tu blog. Si tu blog es de Argentina, México, etc, pues cambia el .com

Y bueno esto es todo, ya tenéis un gadget de posts recientes más lindo que el de Blogger al menos. Espero que os haya servido, comentadme qué os pareció y si lo usasteis cómo os quedó y esas cosas.~
Tardaré 4 o 5 días en volver a publicar ya que tengo que estudiar uwu Pero no es mucho, volveré con más.
Muchos besos, y recuerden que esto es totalmente mio~
Ya casi somos 200 aww *^*

3 comentarios:

  1. espero luego ponerlo en practica, ojala pudieras poner previas para ver como queda, gran tuto!!

    ResponderEliminar
  2. Ohhh...que buen tutorial, puede que lo consulte si es que cambio de plantilla <3

    ResponderEliminar

Gracias por dejar tu saludito ·ω· Si tienes algún error o necesitas ayuda con un tutorial, dale a ''haz click aquí'' en la cabecera y mándame un e-mail diciéndome lo que necesitas y si sólo tienes dudas de algo te contestaré en tu blog para que puedas verlo♥♥
––––•(-•RECUERDA: Si quieres afiliar y/o que visite tu blog, pídemelo en ''Afiliados'' en el menú de la cabecera, o en la C-Box (sólo en esos dos sitios, o sino no aceptaré)`•.¸¸.•´´¯`••._.•