Favicon personalizado.

Hola a todos! hoy quiero comentaros un pequeño detalle que aporta personalidad a nuestro blog. Se trata del FAVICON.
El favicon es el icono que aparece en las pestañas del navegador junto con el nombre de tu blog. Pues bien por defecto en tu blog de blogger va a aparecer el favicon de Blogger ..

Para cambiarlo solo debes ir a tu  menú principal y en diseño editar la caja superior izquierda. Dentro de este gadget nos pedirá que elijamos una imagen y esa será nuestro icono personal.

Pero antes debemos crear esa imagen pequeña. Podemos partir de una imagen grande y utilizar algunas de las herramientas online para que nos generen esa imagen pequeña.

En este enlace encontrarás  FAVICON GENERATOR. ORG en el que solo debes elegir la imagen y te crea  un archivo .ico para descargar en tu ordenador. Luego en el menú diseño lo seleccionamos en nuestro gadget de favicon y ya está listo.

http://favicon-generator.org/

Espero que os sea útil y fácil.

Gifs animados online

Para crear nuestros propios gifs animados sin necesidad de meternos en editores de imagen como GIMP, existen en la red varios lugares en los que podemos crear uno en pocos segundos.
Podemos elegir la velocidad en la que se nos presentan las imágenes, la altura la anchura y la calidad de las imágenes.

En estos dos lugares no necesitamos tener cuenta para crear nuestro propio gif,  seleccionamos nuestras imágenes y se crea en segundos. Lo malo es que estas imágenes se quedan en uso público.

Obtenemos el código para incrustarlo en el blog y ya está.

Aquí tenéis un ejemplo.

Novedades crear página en Blogger

Para aquellos que empiezan a crear sus blogs con Blogger ahora, y para aquellos que ya conocían Blogger os presento en la página dedicada a crear páginas, la nueva forma de crear páginas, reorganizarlas, y hacerlas visibles o no.

Haz click en la imagen o aqui.

Tipografía en el blog

Hola a todos como buenos maestros o blogeros, queremos hacer más interesante el blog y para ello cambiar la tipografía del blog es algo esencial.

Pues bien aunque en la plantilla podamos personalizar algunos textos con las opciones que nos ofrece Blogger, podemos aspirar a cambiar los estilos eligiendo el tipo de letra o tipografía. En este caso desde Google fonts. Google nos ofrece más de 600 tipos de letras a elegir. 

En este vídeo tutorial sigo los pasos para cambiar varias partes de los textos del blog, como el título, el texto de la entrada, el texto de los gadgets, el texto del título de la entrada etc..

Como en el vídeo no se ve con claridad el código de cada uno de los bloques que edito, os añado al final unas capturas de pantalla con las explicaciones para que nadie se pierda.

Estos pasos son más avanzados y atrevidos pero si se siguen poco a poco no hay peligro.

¿Dónde colocar el enlace de Google Fonts?. Debajo de la etiqueta Head

En page text cambio la tipografía del texto de la entrada.

Cambio la tipografía de los gadgets.

Cambio la tipografía de las pestañas

Cambio la tipografía del título del blog también.

Precipitaciones en el blog

Hola hoy os quiero presentar un par de gadgets divertidos para esta época del año en la que la lluvia y la nieve o frío se dan a menudo, teniendo además la Navidad tan cerca.
Se trata de dos efectos atmosféricos que podemos incorporar en nuestro blog. La lluvia y la nieve.

Para ello solo debemos copiar los códigos como siempre en los gadgets.  Lo podeís poner en un gadget en un menú lateral  o mucho mejor en los dos menús laterales, para tener más lluvia por todo el blog. O en un gadget debajo de la cabecera.

Para añadir lluvia en tu blog, copia este código en un gadget de los de HTML ¿ recordáis?, el que tiene este icono:

<div style="display: none;">
<script src="http://blogparts.giffy.me/0117/parts.js" type="text/javascript"></script><br />
<div style="margin: 0; padding: 0; text-align: center;">
<a href="http://giffy.me/baby/"><img alt="降水確率100%ブログパーツ;" src="http://blogparts.giffy.me/0117/parts.gif" style="border: 0;" /></a></div>
<div style="font-size: 12px; margin: 10px 0 0 0; padding: 0; text-align: center;">
[PR] <a href="http://typing.twi1.me/" rel="nofollow">楽しくタイピング練習！</a></div>
</div>

Este código lo he obtenido de la página http://www.ciudadblogger.com/2014/10/poner-lluvia-en-el-blog.html. Pero a diferencia del código de la página lo que he hecho es omitir las líneas que incorporaban un efecto de sonido de lluvia y tormenta, porque creo que puede ser cargante para el visitante. Pero si lo deseáis con sonido incluido copiar el código del enlace de arriba.

Este código lo he obtenido de la página http://www.mybloggerwidgets.com/2013/04/add-snow-falling-effect-in-blogger.html. Con él conseguimos que copitos de nieve caigan delicadamente sobre nuestro blog. Es igual de fácil de aplicar. Lo hacemos con los gadgets en nuestros menús laterales o de arriba como en el caso anterior.

<script type="text/javascript">  //Configure below to change URL path to the snow image  var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_GWOp0fLsx6t3Odi8fb2beyC4FzYEpTt4mzaZJbV9ySJ5jFOMWGrxQ9N96hzGksUZNK0gHRs2KN8Qzr4EsKXneYVQTr3fSgVKTRYBG_rMa3qjojZr9CVFQFbl9ZGAThhwqHy04lRryKY/s400/snow.gif"  // Configure below to change number of snow to render  var no = 30;  // Configure whether snow should disappear after x seconds (0=never):  var hidesnowtime = 0;  // Configure how much snow should drop down before fading ("windowheight" or "pageheight")  var snowdistance = "pageheight";///////////Stop Config//////////////////////////////////  var ie4up = (document.all) ? 1 : 0;  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;    function iecompattest(){    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body    }  var dx, xp, yp;    // coordinate and position variables  var am, stx, sty;  // amplitude and step variables  var i, doc_width = 800, doc_height = 600;  if (ns6up) {    doc_width = self.innerWidth;    doc_height = self.innerHeight;  } else if (ie4up) {    doc_width = iecompattest().clientWidth;    doc_height = iecompattest().clientHeight;  }  dx = new Array();  xp = new Array();  yp = new Array();  am = new Array();  stx = new Array();  sty = new Array();  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "http://2.bp.blogspot.com/-MsCdyoGtGdA/UX5gk72qNoI/AAAAAAAAAfQ/LaKTmUG-aJM/s1600/snow+falling+effect.gif" : snowsrc  for (i = 0; i < no; ++ i) {
    dx[i] = 0;                        // set coordinate variables    xp[i] = Math.random()*(doc_width-50);  // set position variables    yp[i] = Math.random()*doc_height;    am[i] = Math.random()*20;         // set amplitude variables    stx[i] = 0.02 + Math.random()/10; // set step variables    sty[i] = 0.7 + Math.random();     // set step variables        if (ie4up||ns6up) {      if (i == 0) {        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");      } else {        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");      }    }  }  function snowIE_NS6() {  // IE and NS6 main animation function    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;        doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;    for (i = 0; i < no; ++ i) {  // iterate for every dot      yp[i] += sty[i];      if (yp[i] > doc_height-50) {        xp[i] = Math.random()*(doc_width-am[i]-30);        yp[i] = 0;        stx[i] = 0.02 + Math.random()/10;        sty[i] = 0.7 + Math.random();      }      dx[i] += stx[i];      document.getElementById("dot"+i).style.top=yp[i]+"px";      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
    }    snowtimer=setTimeout("snowIE_NS6()", 10);  }    function hidesnow(){        if (window.snowtimer) clearTimeout(snowtimer)        for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"    }if (ie4up||ns6up){    snowIE_NS6();        if (hidesnowtime>0)        setTimeout("hidesnow()", hidesnowtime*1000)        }</script>