Contador general de visitas

menu interactivo

BlogandWeb.com

Cartel con texto animado

viernes, 25 de mayo de 2012

Suscripción por email nativo en Blogger

Fuente:  http://blogandweb.com/blogger/suscripcion-correo-email-blogger/



Blogger empieza con las novedades de este año, esta vez, presentando un nuevo gadget desuscripción por email o Seguir por correo electrónico como lo han llamado.

Funcionamiento

seguir-por-correo-electronico
Al agregarlo, automáticamente agrega el blog a Feedburner, crea la URL del feed y la usa para la suscripción de correo.
blogger-suscription-email
El gadget se muestra con un sencillo formulario donde el lector puede escribir su dicción de email y confirmar su suscripción. Al parecer, el botón se adapta automáticamente a la paleta de colores del blog.

Configuración

Para configurar las opciones de la suscripción por email les recomiendo revisar nuestra Guía para ofrecer suscripción por email paso a paso.

Código

Como todos los widget de Blogger, se puede modificar el código del formulario buscando por el título o, en este caso, FollowByEmail. El código generado por el gadget es como el siguiente:
<b:widget id='FollowByEmail1' locked='false' title='Follow by Email' type='FollowByEmail'>
<b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
  <div class='widget-content'>
    <div class='follow-by-email-inner'>
      <form action='http://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true&quot;' method='post' target='popupwindow'>
        <span>
          <input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>
        </span>
        <input class='follow-by-email-submit' type='submit' value='Submit'/>
        <input expr:value='data:feedPath' name='uri' type='hidden'/>
        <input name='loc' type='hidden' value='en_US'/>
      </form>
    </div>
  </div>
  <span class='item-control blog-admin'>
    <b:include name='quickedit'/>
  </span>
</b:includable>
</b:widget>
En él, yo recomiendo cambiar:
<input name='loc' type='hidden' value='en_US'/>
Por:
<input name='loc' type='hidden' value='es_ES'/>
Para que el mensaje de confirmación se muestre en español.

Estilos

Blogger agrega por defecto los siguientes estilos:
/*Contenedor general*/
.FollowByEmail .follow-by-email-inner {
    position: relative;
}
/*Campo de email*/
.FollowByEmail .follow-by-email-inner .follow-by-email-address {
    border: 1px inset;
    font-size: 13px;
    height: 22px;
    line-height: 22px;
    margin: 0;
    padding: 0 2px;
    width: 100%;
}
/* Botón de submit */
.FollowByEmail .follow-by-email-inner .follow-by-email-submit {
    -moz-border-radius: 2px 2px 2px 2px;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
    border: 0 none;
    color: #FFFFFF;
    font-size: 13px;
    height: 24px;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
    z-index: 0;
}
.FollowByEmail .follow-by-email-inner input {
    font-family: arial,sans-serif;
}
Sobra decir que estos se pueden sobre escribir desde el código de la plantilla si se desea personalizar.
Un nuevo gadget que facilita la vida, pero que no hace algo realmente haga falta para el usuario Blogger, como más condicionales en la plantilla o un alojamiento de archivos.

Vistas en Blogger

Fuente:  http://blogandweb.com/blogger/vistas-en-blogger/


Blogger lanza hoy cinco "vistas" para todos sus blogs:

¿Qué son las vistas Blogger?

Las vistas Blogger son diferentes versiones de tu blog, en cierta modo, diferentes formas de navegar tu blog, sin cambiar tu plantilla, usando Ajax, HTML 5 y CSS 3.
Actualmente son cinco vistas:
1. Vista de Sidebar. Una barra lateral con la lista de post y la columna principal con el contenido y comentarios.
view-sidebar
2. Vista de Flipcard. Organización tipo galería.view-flipcard
3. Vista en Mosaico. Organización tipo mosaico con las imágenes de los posts.
view-mosaic
4. Vista en Instantáneas (Snapshot). Organización tipo galería y en forma de fotografías instantáneas.
view-snapshot
5. Vista en diapositivas (Timeslide).
view-timeslide

Cómo usar las vistas en tu blog

Para usar las vistas únicamente agrega /view al final de la URL de tu blog. Por ejemplo:
http://myblog.blogspot.com/view
Las vistas se mostraran sin problema si:
  • Están habilitadas desde el panel en Escritorio → Configuración → Formato → Habilitar vistas dinámicas
  • Tu blog es público.
  • El feed esta configurado en completo. Escritorio → Configuración → Feed del sitio → Completo

Ventajas

  • Scroll infinito. Es decir, sin páginas de "Siguiente" o "Atrás", con hacer scroll las entradas aparecen automáticamente.
  • Carga rápida. Al cargar solo bajo demanda, no se cargan más elementos que los que se desea ver.
  • Organización. Más opciones para presentar el contenido a gusto del lector.

Conclusiones

Por primera vez, Blogger incorpora algo novedoso y hasta revolucionario respecto a otras plataformas, un cambio positivo para bloggers y lectores.

FreeDream, plantilla Blogger

Fuente:  http://blogandweb.com/blogger/freedream-plantilla-blogger/






FreeDream es un diseño sencillo pero fresco creado por Dreamweaver Gratuit para WordPress y adaptado a Blogger por Blog and Web y BTemplates.
freedream-template

Descargar

Blogger: Descargar | Demo
WordPress: Descargar | Demo

Instalación

Para instalarla consulta el videotutorial y nuestra miniguía de instalación. Además puedes leer nuestraspreguntas frecuentes y enterarte de los problemas más comunes y su solución.

Configuración

Menú principal
Para agregar enlaces al menú, solo crea una página estáticas desde el panel.
El último enlace contiene un menú desplegable, este se puede editar buscando el siguiente código en la plantilla:
<!-- Drop down menu -->
     <li class='page_item'><a href='#' title='Parent Page'>More</a>
      <ul class='children'>
       <li class='page_item'><a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
       <li class='page_item'><a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
       <li class='page_item'><a href='http://blogger.com'>Login</a></li>
       <li class='page_item'><a href='#'>Edit</a></li>
      </ul>
     </li>
     <!-- Drop down menu -->

Licencia

Licenciado bajo GPL. Uso en sitios personales y comerciales permitido dejando por favor intactos los créditos de diseño (sin quitar o agregar enlaces en los créditos).

Matala en plantilla para Blogger

Fuente: http://blogandweb.com/wordpress/matala-en-plantilla-para-blogger/



Matala es el diseño anterior del creador de WordPressMatt Mullenberg, diseñado por GNV & Partners y ahora adaptada a Blogger por Blog and Web y BTemplates.
matala-theme

Descargar

Blogger: Descargar | Demo
WordPress: Descargar | Demo

Instalación

Para instalarla consulta el videotutorial y nuestra miniguía de instalación. Además puedes leer nuestraspreguntas frecuentes y enterarte de los problemas más comunes y su solución.

Configuración

1. Menú principal
Para agregar enlaces al menú, solo crea una página estáticas desde el panel.
2. Fecha
Cambia el formato de cabecera de fecha (Inicio → Configuración → Formato → Formato de cabecera de fecha) por la penúltima opción.
plantilla-formato-fecha

Licencia

Licenciado bajo GNU.

Crear una página Google+ para tu blog

Fuente: http://blogandweb.com/productos-google/crear-una-pagina-google/


Google+ acaba de liberar la creación de páginas para sitios web, marcas, negocios, etc. y sin duda es un buen canal para promocionar tu blog o sitio web y establecerlo como un método más de suscripción, tal como hicimos antes con las páginas de Facebook y Twitter.

Cómo crear una página en Google+

El proceso es bastante sencillo:
1. Todo empieza entrando el formulario de creación de páginas y seleccionando el rubro de la misma. Al no existir una opción directa para sitios web, “Otro” será el más adecuado. Aunque claro, de acuerdo al contenido de tu sitio web, podría encajar perfectamente en algunos de los existentes.
2. Agrega el nombre de tu blog o website, la URL y lee las condiciones de uso para aceptarlas.
3. Agrega un slogan o descripción de tu sitio web, así como la foto para el perfil de la página.
Google+ Además te ofrece la opción de editar la foto del perfil inmediatamente después de subirla con las herramientas de Picnik.
4. Inmediatamente tienes las opción de compartir con tus amigos, aunque tal vez no sea el mejor momento, pues tu página esta vacío. Te recomiendo esperar a importar tu contenido antes de compartirla.
5. Listo. Tu página Google+ esta terminada. Así que es un buen momento de dejar el primer mensaje y que mejor, que uno de bienvenida.
Por supuesto, estas invitado a suscribirte por TwitterFacebookGoogle+RSS o correo electrónico a nuestras actualizaciones.

Nuevas opciones SEO en Blogger

Fuente:  http://blogandweb.com/blogger/opciones-seo-blogger/#more-3091


Blogger ha lanzado una nueva sección de opciones que pueden ayudar a mejorar el SEO de tu blog, son cuestiones tal vez muy básicas, pero importantes. Esta nueva sección se llama Preferencias de búsqueda y se encuentra en Escritorio → Configuración → Preferencias de búsqueda.
Veamos una a una su funcionamiento:

Etiquetas meta.

Las famosas metatags, o etiquetas meta como fueron traducidas, permiten dar información de cada página al buscador, por ahora Blogger permite agregar una descripción general del blog.

Errores y redireccionamientos.

Mensaje de página no encontrada personalizado.
Permite definir un mensaje para el famoso Error 404, ahora podemos hacerlo más original y más útil.
Redireccionamiento personalizado.

Como su nombre indica, esta opción permite hacer redireccionamiento de URLs determinadas, sea por que la página no exista, se haya linkeado una página de forma errónea o simplemente para redireccionar a un post más reciente esta herramienta será muy útil.

Rastreadores e indexació.

Archivo robots.txt personalizado.
El archivo robots.txt es una herramienta muy poderosa para indicar que contenido debería ser rastreado y cual no. Las instrucciones se escriben directamente y Blogger generará el archivo automáticamente.
Etiquetas de encabezado de robots personalizadas.
Esta opción tiene una función similar a la característica anterior pero funciona a través de los headers de cada consulta y permite indicar, entre otras cosas, la indexación, el rastreo y la utilización del contenido por parte de los bots, particularmente para la secciones: Home, archivo y páginas de búsqueda y las publicaciones individuales: entradas y páginas.

Conclusión.

Blogger era/es una de las plataformas menos flexibles para hacer SEO, las herramientas son pocas y no fáciles de implementar, así que esta nueva sección ayuda a mejorar este aspecto, aunque aun aun tienen muchas tareas por hacer.
Para mi es curioso como por una lado Google da una serie de recomendaciones para el correcto rastreo de contenido y por otro, no da las suficientes herramientas para su implementación en su servicio más popular de generación de contenidos.