[+/-] Blogger publicitará los mejores blogs

En el blog oficial de Blogger, la Administradora de Comunidad Lisa Ding nos comenta en su post que de hoy en adelante la plataforma de Blogging gratuita mas importante comenzará a "centrarse en colaborar con la comunidad de usuarios y en conectar a más lectores hacia los blogs excepcionales", apuntó.

Cada semana recibirá de nosotros Bloggers las sugerencias de excelentes blogs, de los cuales filtrará a los mejores y les difundirá

Leer la entrada completa

[+/-] CSS3: Rotar/Girar elementos al pasar mouse o raton

Alguna vez en toda tu vida de webmaster o diseñador web, ¿te imaginaste que algún día podrías utilizar CSS para crear una animación?. Yo tampoco(si la respuesta fue no xD) pero ahora es posible, gracias a CSS3 y a sus nuevas características podemos fácilmente prescindir de flash u otras tecnologías.

El CSS desde la llegada de su tercera versión, ha dejado de ser unas simples reglas para modificar la apariencia de elementos web, a ser un complejo lenguaje de diseño y animación web y aquí en santyweb nos estamos volviendo locos con estas nuevas funcionalidades que estan por aparecer masivamente en la web 3.0

Bien, basta de preambulos.

El efecto es el siguiente:

Leer la entrada completa

[+/-] Nuevas caracteristicas en imagenes alojadas en Blogger

Hace algunos días que me percate de una nueva característica de las imágenes que subimos a Blogger. Se trata de modificar el tamaño de la imagen mediante el url de esta, para no sobrecargar la página.

Veamoslo de un modo práctico...

Leer la entrada completa

[+/-] Optimizar el titulo de las entradas

En esta ocasion trabajaremos con el titulo de nuestras entradas o noticias, en su caso. Ya que ésta es un área crucial al momento de retener a nuestras visitas, pues nuestros usuarios se fijaran mas en esta parte para determinar si el contenido es de su interés.

Para captar eficazmente la atención de tus usuarios aqui te daré algunos consejos, no son los mejores consejos del mundo ;). Pero crean una buena perspectiva:

Leer la entrada completa

[+/-] Google Webmaster Tools agrega características

Si tienes un blog, esta información te será muy útil si es que quieres que tu blog aparezca en el buscador de Google. Se trata de una herramientas que el mismo Google ha creado para que nosostros los bloggers o webmasters con ideas exelentes podamos aprovechar todo el potencial de su buscador.

Esto solo aplica para el buscador Google y dado que se lleva el 84.64% de la cuota de uso en lo que va del año segun NetMarketShare(página dedicada a estadisticas de uso en buscadores, navegadores, etc...). No creo que alguien desprecie estar bien posicionado en dicho buscador, ¿o si?.

Leer la entrada completa

[+/-] Blogger: Acerca del Autor de la entrada tipo WordPress

Seguro ya habrán visto en algunos blogs que al final de la entrada se encuentra un pequeño apartado donde el autor de la entrada se presenta con sus lectores con un pequeño texto.

Es un recurso interesante, pues mediante eso, los autores del blog pueden hacerse algo de audiencia y preferencia única hacia ellos, mientras que de la manera tradicional casi siempre o siempre pasa desapercibido quien fue el autor que escribió tan fantástica entrada.

Esto no quiere decir que el blog se dividirá en varios sub-blogs, donde cada autor cree sus entradas y cada uno tenga su propia audiencia dentro del mismo blog. Pudiera ser, pero no propiamente, se trata solo de darle los créditos de la entrada al autor la entrada.

Puedes ver un ejemplo de su funcionamiento: Acerca del autor. Aunque no es posible en blogger de manera nativa o por defecto, podemos hacerlo manualmente y conseguiremos el efecto deseado, como se puede ver en la entrada de ejemplo.

Leer la entrada completa

[+/-] WebFonts: Usar cualquier tipografia en nuestra web

Muchas veces los diseñadores o webmasters, al realizar un diseño o modificación a nuestra página web casi siempre nos topamos con elegir el tipo de fuente para determinadas áreas de nuestro diseño sin que nuestros visitantes se sientan incómodos leyendo nuestros posts o noticias.

Pero después de elegir la que mejor se adapta a nuestro diseño, sin sobrecargar la vista. Nos llevamos la sorpresa de que ese tipo de fuente no existe en algún sistema operativo y nuestro web se ve horrible y sobrecargado.

Pero gracias, de nuevo, a nuestros amigos de Google Font Directory podremos escoger de entre 35 fuentes, que podemos aplicar en nuestro blog sin preocuparnos del sistema operativo de nuestros visitantes. Y lo mejor es que lo hace sin imágenes( que hacen que cargue demasiado despacio ).

Como es posible?, continua leyendo xD!!

Leer la entrada completa

[+/-] Buscadores de iconos

Una cosa imprescindible para todo diseñador o webmaster, es sin lugar a dudas encontrar(o si se puede crear) iconos de buena calidad y variedad. Para esto la mayoría de nosotros requeriremos mucho tiempo y esfuerzo en lograr encontrar el icono perfecto para el diseño de nuestra página web.

En momentos críticos como el que acabo de describir sería como caído del cielo algo así como un Google especializado para encontrar solo iconos, que hiciera todo el trabajo sucio de realizar la búsqueda por miles y miles de sitios hasta mostrarnos una lista con los que se adapten mejor a nuestro criterio de búsqueda.

Leer la entrada completa

[+/-] Blogger: Sustituir el nombre de las etiquetas por imagenes

Si te molesta que en cada entrada se muestren las etiquetas en forma de texto, por estética o por lo que quieras, sencillamente podrías hacer que cada etiqueta, en vez de mostrar su nombre en texto, mostrara una imagen relacionada con ella.

Es decir, si tienes de etiqueta algo así como "noticias", en vez de que tu entrada muestre "noticias" en la parte de las etiquetas muestre un periódico, diaro, boletin. Como le digan en tu país. En el siguiente enlace puedes ver un demo

En fin, ya entrados en el tema. lo que tenemos que hacer para mostrar las etiquetas con forma de imagen:

Leer la entrada completa

[+/-] CSS3: Box Shadow (Sombras)

Otra propiedad sobresaliente y novedosa en la nueva version de CSS, la numero 3, es:

Box-Shadow

La sintaxis de esta propiedad es la misma que en

Text-Shadow

Pero a diferencia de Text-Shadow, Box Shadow no es muy generica y por el momento es necesario colocar un "-moz","-khtml","-webkit" para que funcione perfectamente en todos los navegadores excepto IE:

podrías utilizarlo en cualquier elemento html:




Una caja de texto

En una etiqueta de parrafo <p>

[+/-] Blogger: Sustituir el nombre del autor con una imagen

Colocar una imagen con la firma personalizada del autor en vez del clásico nombre del autor por la cuestión que se te ocurra, puede ser atractiva a la vista de nuestros lectores además de poder poner en la imagen lo que mejor te parezca.

Pero si no sabes bien como crear tu firma o que ponerle. Aqui te dejo algunas herramientas que te pueden resultar interesantes:

Cool Text

Potente herramienta donde puedes escoger el tipo de texto, despues puedes personalizarlo de la manera en que tu quieras, me parecio muy buena esta herramienta.

3D Text Marker

Esta otra exelente herramienta permite escoger muchisimos tipo de letras, asi como el color de la misma y otros parametros avanzados. Muy buena!

Leer la entrada completa

[+/-] CSS3: Varias imagenes de fondo(BackGround)

CSS es una herramienta muy potente, que ha ido evolucionando siendo CSS3 la ultima versión, en la cual se agregaron y se eliminaron características. Tambien se modificaron, como es el caso de la propiedad Background la cual admite mas de una imagen, sin tener que agregar capas flotantes, el resultado es el siguiente:

Este es el efecto!!

Si no lo observas es el siguiente:

Código HTML: Código CSS:

Leer la entrada completa

[+/-] Google Docs soporta cualquier tipo de archivo

Parece que Google le está haciendo un espacio a su nuevo sistema operativo Chrome OS para darle la posibilidad de poder almacenar archivos personales en la "nube". Ya que desde el martes pasado Google anunció en su el blog oficial de Google Docs, que dicho servicio ofrecia dos nuevas opciones:

Leer la entrada completa

[+/-] Gadget unico de Comentarios recientes.

Comentarios recientes, es un gadget que utiliza el feed del blog en el que se instala para poder recopilar los comentarios. Y los formatea de manera que puedan mostrarse. Estas técnicas de autopromoción se utilizan mucho en las web/blogs ya que permiten al lector econtrar posts mas escondidos, pues con el tiempo se van olvidando o enterrando los primeros posts.

Ahora me encontré que en SantyWeb tengo solo un post de mostrar comentarios recientes y también encontré otra manera de hacerlo mucho mas sencillo, es decir, solo agregando un gadget!!.

Leer la entrada completa

[+/-] CSSTXT; Manipular el estilo de tus textos

Herramienta que permite manipular de manera muy sencilla las diversas propiedades que tiene un texto por defecto en CSS. Esta forma de manipular estilos CSS es tan sencilla que cualquier persona puede lograr los efectos que quiera en cuestión de algunos minutos.

En la página dan los códigos fuente CSS que el usuario va creando conforme manipula los controles. Con lo que para colocar esos estilos solo habría que copiar lo siguiente:

Leer la entrada completa

[+/-] Mostrar avatar del autor, en los comentarios

Hace poco que Blogger introdujo la opción de habilitar los avatares en los comentarios del Blog. Algo que muchísimos Bloggers habíamos estado esperando ansiosamente. Y la utilización es simple:
[1] Entra en el panel de Configuración de tu blog.
[2] Entra en sección de Comentarios.

[3] Selecciona la opción si de Mostrar imágenes de prefil en los comentarios

Solo revisa las entradas de tu blog, y tendrás los avatares de tus comentaristas junto a sus comentarios!!!

[4] Pero existe la mínima posibilidad de que no se muestren, y para eso necesitarás entrar en Diseño>Edicion de HTML>Expandir plantillas de artilugios
[5] Donde buscarás:

Leer la entrada completa

[+/-] Ahora nativo de Blogger: Leer mas

Es algo sumamente parecido a Leer mas solo en algunas entradas, pero ahora esta integrado en Blogger. Lo que significa que no necesitarás mas que colocar SOLO UNA etiqueta dentro del post para que sea visible un enlace hacia la entrada completa.

Leer la entrada completa

[+/-] Padding y Margin en CSS

En el lenguaje CSS existen estos dos atributos para cada elemento html en una página web, y debido a que los funcionamientos de estos atributos es un tanto similar puede existir una alguna confusión a la hora de utilizarlos. Si bien esta claro que cada atributo crea un espacio alrededor del elemento pero cada uno lo hace a su manera.

Leer la entrada completa

[+/-] Otras formas de mostrar "Entradas recientes"

Existen varias formas de mostrar las entradas mas recientes de nuestro mismo blog o incluso de cualquier otro blog, de manera que puedes elegir entre las mas sencillas hasta las mas complejas. Como lo puede ser añadir un Gadget de feed directamente hasta un script que muestre parte de la entrada y hasta la fecha de la entrada.

Puedes usarlo para auto-promocionar el blog, esa técnica es muy utilizada para que los lectores puedan encontrar fácilmente lo que buscan o interesarse por las demás entradas de nuestro blog.

Ejemplo

Había tenido bastante tiempo estudiando los feeds del blog, de hecho yo mismo desarrollé la mayoría de los siguientes scripts. Solo el último fue desarrollado por Hans de Beautiful Beta

Los gadgets funcionan recogiendo las entradas por medio del feed del blog, al recoger las entradas simplemente les da un poco de formato, es decir los textos en negrita, el titulo y etc...

Simples

Este es el código del ejemplo, el mas pequeño y con mas funcionalidad que cualquier otro gadget en proporcion al código, lo que le quita capacidad de personalización pero al fin y al cabo cumple bien su función que es mostrar las entradas mas recientes.

Mostrar código

<div id='howentrrec'>
<script type='text/javascript'>
entradasrec = function (json) { 
var m = 3; 
var mltr = 100;
var f = ''; 
for (var i=0;i < m;i++) { 
var n = json.feed.entry[i]; 
var l = n.link[4].href; 
var r = '[...]'.link(l); 
var e = n.summary.$t.substring(0, mltr); 
var t = n.title.$t.link(l).bold(); 
f = f + t + '<br/>'; 
f = f + e + r +'<br/><br/>'; 
} 
document.write(f);
}</script>
<script src='http://NOMBRE DE TU BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=entradasrec' type='text/javascript'></script>
</div>

En donde el texto color:
Rojo.- Máximo de entradas a mostrar
Verde.- Máximo de caracteres por entrada

Con metodos DOM

Es similar al anterior solo que este script tiene mas capacidad de personalización, es decir, puedes cambiar fácilmente los colores, la letra, el fondo. Utiliza métodos DOM para agregar el código al contenedor.

Mostrar código

<div id='howentrrec'><script type='text/javascript'>
entradasrecientesDOM = function(json) {
  var m = 3; 
  var mltr = 100;
  var contenedor = document.createElement('div');
  contenedor.setAttribute('class','howentradasrecientes');
  for (var i=0;i < m;i++) {
    var contenedorPost = document.createElement('div');
    contenedorPost.setAttribute('class','howpostreciente')
    var post = json.feed.entry[i];
    var link = post.link[4].href;
    var readMore = document.createTextNode('[...]');
    var entrada = post.summary.$t.substring(0, mltr);
    entrada = document.createTextNode(entrada);
    var titulo = document.createElement('a');
    titulo.setAttribute('href',link);
    titulo.setAttribute('style','font-weight:bold;');
    var txtTitulo = post.title.$t;
    txtTitulo = document.createTextNode(txtTitulo);
    titulo.appendChild(txtTitulo);
    var salto = document.createElement('br');
    var salto_ = document.createElement('br');
    contenedorPost.appendChild(titulo);
    contenedorPost.appendChild(salto);
    contenedorPost.appendChild(entrada);
    contenedorPost.appendChild(readMore);
    contenedorPost.appendChild(salto_);
    contenedor.appendChild(contenedorPost);
  }
  document.getElementById('howentrrec').appendChild(contenedor);
}
</script>

<script src='http://NOMBRE DE TU BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=entradasrecientesDOM' type='text/javascript'></script></div>

En donde el texto color:
Rojo.- Máximo de entradas a mostrar
Verde.- Máximo de caracteres por entrada

Para modificar el estilo puedes utilizar los siguientes selectores

Para modificar el contenedor de las entradas
.howentradasrecientes {}
Estilo de cada entrada
.howpostreciente {}

Estilo del titulo de cada entrada
.howpostreciente a {}

Normales

Código mucho mas similar al simple, pero este tiene algunos arreglos que lo hacen mas fácil de personalizar incluso que al anterior. Utiliza el metodo innerHTML acelerando así la injección de código.

Mostrar código

<div id='howentrrec'><script type='text/javascript'>
entradasrecientes = function (json) {
  var id = 'howentrrec';
  var c = (document.getElementById(id)?document.getElementById(id):document.All[id]);
  var m = 3; 
  var mltr = 100;
  var f = "";
  for (var i=0;i < m;i++) {
    var n = json.feed.entry[i];
    var l = n.link[4].href;
    var r = '[...]'.link(l);
    var e = n.summary.$t.substring(0, mltr);
    var t = n.title.$t.link(l).bold();
    f = f + '<div class="howpostreciente">' + t + '<br/>';
    f = f + '<div class="howposttext">' + e + '</div>' + r +'<br/><br/></div>';
  }
  c.innerHTML = f;
}
</script>

<script src='http://NOMBRE DE TU BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=entradasrecientes' type='text/javascript'></script></div>

En donde el texto color:
Rojo.- Máximo de entradas a mostrar
Verde.- Máximo de caracteres por entrada

Para modificar el estilo puedes utilizar los siguientes selectores

Estilo del contenedor#howentrrec {}
Estilo de cada entrada
.howpostreciente {}
Estilo del titulo de cada entrada
.howpostreciente a{}
Estilo del texto de cada entrada
.howposttext {}

Mas coplejas

Este script realizado por Hans, es uno de los mas complejos en el área. Pues tiene la funcionalidad de mostrar parte de la entrada así como la fecha en que fue publicada.

Mostrar código

<script type="text/javascript">
function showrecentposts(json) {

  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 == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    posttitle = posttitle.link(posturl);
    var readmorelink = '(leer mas)';
    readmorelink = readmorelink.link(posturl);
    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';
    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 (!standardstyling) document.write('<div class='bbrecpost'>');
    if (standardstyling) document.write('<br/>');
    document.write(posttitle);
    if (showpostdate == true) document.write(' - ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)]);
    if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
    if (showpostsummary == true) {
      if (standardstyling) document.write('<br/>');
      if (postcontent.length < numchars) {
         if (standardstyling) document.write('<i>');
         document.write(postcontent);
         if (standardstyling) document.write('</i>');}
      else {
         if (standardstyling) document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(' ');
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...' + readmorelink);
         if (standardstyling) document.write('</i>');}
}
    if (!standardstyling) document.write('</div>');
    if (standardstyling) document.write('<br/>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
document.write('<span style='font-size:80%;'><a href='http://beautifulbeta.blogspot.com'></a></span>');
if (!standardstyling) document.write('</div>');

}
</script>

<script type="text/javascript">
//Numero de entradas que mostrará
var numposts = 10;
//Numero de caracteres por entrada
var numchars = 50;
//Mostrar fecha(true o false)
var showpostdate = false;
//Mostrar el (leer mas)...(true o false)
var showpostsummary = true;
//Mostrar entradas con el estilo predeterminado
var standardstyling = false;
</script>

<script type="text/javascript" src="http://NOMBRE DE TU BLOG.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Para añadir las entradas recientes que elegiste, simplemente debes agregar los códigos en un gadget HTML/javascript.

Personalmente yo utilizo este tipo de gadgets, pues cuando los usuarios están navegando en una entrada, se muestran las cinco(o las que quieras) entradas mas recientes a lado de la entrada. Así cada que cambien de entrada verán mas entradas y navegarán mas por el blog.

|✔| Puedes aprender CSS, en Hacker of the Web tenemos un manual muy bueno, aunque es básico: Manual básico de CSS.

[+/-] Administracion personal del Blog

Para los que ocultamos la navbar de Blogger, o al menos a mi, se hace muy tedioso el tener que ingresar a Blogger y después darle en edición de entradas, en especial si no esta activado el icono editor rápido de entradas. Pero gracias a una clase de CSS, predefinida por el mismo Blogger, esta tarea se simplifica y nos ahorra un poco de tiempo.

Lo primero a hacer, es obtener el id de el blog. Lo cual se consigue entrando a crear una entrada, en donde la barra de direcciones se contendrá algo parecido a esto:

Una vez que conoces el ID del blog, deberás sustituir el texto en rojo del siguiente código por el ID de tu blog:

<div id='Admin-Blog'
<span class='item-control blog-admin'>
<a href='http://draft.blogger.com/home'>Blogger Draft</a> |
<a href='http://draft.blogger.com/post-create.g?blogID=XXXXXXXXXXXXXXXXXX'>Crear entrada</a> |
<a href='http://draft.blogger.com/posts.g?blogID=XXXXXXXXXXXXXXXXXX'>Edición de entradas</a> |
<a href='http://draft.blogger.com/blog-options-basic.g?blogID=XXXXXXXXXXXXXXXXXX'>Configuración</a> |
<a href='http://draft.blogger.com/rearrange?blogID=XXXXXXXXXXXXXXXXXX'>Diseño</a>
<br/>
<a href='http://www.blogger.com/home'>Blogger</a> |
<a href='http://www.blogger.com/post-create.g?blogID=XXXXXXXXXXXXXXXXXX'>Crear entrada</a> |
<a href='http://www.blogger.com/posts.g?blogID=XXXXXXXXXXXXXXXXXX'>Edicion Entradas</a> |
<a href='http://www.blogger.com/blog-options-basic.g?blogID=XXXXXXXXXXXXXXXXXX'>Configuración</a> |
<a href='http://www.blogger.com/rearrange?blogID=XXXXXXXXXXXXXXXXXX'>Diseño</a>
</span>
</div>

Este código se agrega en un gadget HTML, pero no te preocupes nadie lo verá, solamente tu y eso solamente cuando estés logueado en Blogger.

De hecho lo que tenga las clases 'item-control blog-admin', solo podrá ser visto por los administradores del blog. Algún código en prueba o lo que se te ocurra.