jueves, 31 de marzo de 2011

Problemas con los enlaces de navegación

Uno dos tres cuatro ... sigue la epidemia. Primero fue Karla que me preguntaba por un problema que se producía al utilzar la barra de navegación de Blogger, esa que aparece en la parte inferior y que por defecto dice Entradas antiguas, Inicio y Entradas recientes. Ni siquiera llegué a responder ya que enseguida encontró una respuesta en los foros de ayuda.

Luego, siguió CUENTAGOTAS con un problema similar; distintos síntomas pero siempre ligados a esa parte. Ahora, ya se suman otros y la lista continúa. Se produce un error con esos números que nada dicen, se dejan de mostrar las entradas resumidas si las tenemos agregadas, se muestra una URL errónea, etc, etc.

Todo eso es debido a un bug de Blogger que, en teoría, ya estaba solucionado pero que en su momento me molestó bastante y hay una entrada del año 2007 que habla de eso ... tiempos antiguos cuando los dinosaurios aún reinaban sobre la tierra.

Si vamos a la plantilla con los artilugios desplegados y buscamos el includable llamado nextprev que es el que contiene esa parte del código; lo que se ve por defecto es esto:
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:includable>
donde tal vez se hayan hecho modificaciones personales cambiando los textos por defecto o agregando imágenes que reemplazan los que coloca Blogger:
<data:newerPageTitle/> es el texto a página siguiente
<data:olderPageTitle/> es el texto a página anterior
<data:homeMsg/> es el texto a página de inicio
Todos los problemas se deberían resolver eliminado lo indicado en color es decir, reemplazando esto:
expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;'
por esto:
id='blogpager-newerlink'
y esto:
expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'
por esto:
id='blogpager-olderlink'
Eventualmente, el mismo ID peude ser eliminado ya que n otiene utilidad así que esos enalces bien pordían quedar así:
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:title='data:newerPageTitle'>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:title='data:olderPageTitle'>
Parece que a Blogger se le ha dado por reciclar viejos errores así que no queda más remedio que retroceder en el tunel del tiempo.

Eso de data:widget.instanceId es algo que se ve en muchas partes de las plantillas y desconozco su utilidad; imagino que es algún dato interno que se relaciona con los scripts que inserta el mismo sistema que son los que deben estar causando el error así que si se ven errores en otros enlaces como header, comenatrios, etc; es probable que tengan el mismo origen y es cosa de probar si la solución es aplicable también a ellos.

Las vistas dinámicas en Blogger

Algunos de los cambios que Blogger anunciaba hace unos días ya está aquí, se trata de las llamadas Vistas dinámicas. La opción de Vistas dinámicas sólo está disponible si nuestro blog es público eso se debe a que trabaja con los feed por eso es necesario que en Configuración/Feed del sitio tengamos marcado en completo.


También en Configuración/Formato debemos tener marcado SI o por el contrario si no deseamos que esa opción esté disponible para las visitas marcaremos NO.


Las visitas que deseen visualizar el blog con alguna de las opciones de Vistas Dinámicas sólo tendrán que añadir al final de la url que aparece en el navegador alguno de los cinco estilos que desea visualizar.
Un ejemplo en este mismo blog:

http://gemablog-.blogspot.com/view/flipcard
http://gemablog-.blogspot.com/view/snapshot
http://gemablog-.blogspot.com/view/timeslide
http://gemablog-.blogspot.com//view/mosaic
http://gemablog-.blogspot.com/view/sidebar

En navegadores antiguos no se visualizarán todos los modelos de Vistas Dinámicas (buen momento para actualizar) así como tampoco se visualizarán algunas características como por ejemplo la publicidad.

En la parte superior derecha veremos un menú desplegable con los cinco estilos de Vista Dinámica, y un buscador que nos mostrará los resultados marcados con distinto color de fondo.


La opción que encuentro más útil es flipcard porque proporciona un menú que nos muestra lo siguiente:
Recent: los últimos post.
Date: las publicaciones de los seis últimos meses.
Label: las etiquetas
Autor: resulta muy curioso, si marcamos sobre alguna de las miniaturas veremos un efecto de transición y visualizamos el post completo al que pertenece esa miniatura incluido los comentarios.

TriSlider, otro slider con jQuery

La verdad es que eso de TriSlider me lo he inventado yo porque no tengo la menor idea de cómo se llame este slider, pero muchos lo han visto en la plantilla Dilegno Star y me han pedido que lo publique, así que mientras aparece el nombre real de este slider vamos a llamarlo así.

Aunque está diseñado para mostrar tres imágenes es un slider con un aspecto bastante lindo que estoy seguro que se verá muy bien en muchas plantillas para mostrar el contenido destacado del blog.


Para poner este slider en tu blog primero descarga este archivo, descomprímelo y súbelo a un hosting.
Luego entra en Diseño | Edición de HTML y antes de </head> pega esto:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='URL del archivo' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
jQuery(function(){
var $featured_area = jQuery('#featured-area');
var $featured_item = jQuery('#featured-area div#slider-control div.featitem');
var $slider_control = jQuery('#featured-area div#slider-control');
var $image_container = jQuery('div#s1 > div');
var ordernum;
var pause_scroll = false;

$featured_item.find('img').fadeTo("fast", 0.7);
$slider_control.find("div.featitem.active img").fadeTo("fast", 1);
$image_container.hover(
function () {
jQuery(this).find("img").fadeTo("fast", 0.7);
},
function () {
jQuery(this).find("img").fadeTo("fast", 1);
}
);

function gonext(this_element){
$slider_control.find("div.featitem.active img").fadeTo("fast", 0.7);
$slider_control.find("div.featitem.active").removeClass('active');
this_element.addClass('active');
$slider_control.find("div.featitem.active img").fadeTo("fast", 1);
ordernum = this_element.find("span.order").html();
jQuery('#s1').cycle(ordernum - 1);
}

$featured_item.click(function() {
clearInterval(interval);
gonext(jQuery(this));
return false;
});

var auto_number;
var interval;

$featured_item.bind('autonext', function autonext(){
if (!(pause_scroll)) gonext(jQuery(this));
return false;
});


interval = setInterval(function () {
auto_number = $slider_control.find("div.featitem.active span.order").html();
if (auto_number == $featured_item.length) auto_number = 0;
$featured_item.eq(auto_number).trigger('autonext');
}, 5000);

});
//]]>
</script>

<script type='text/javascript'>
jQuery(function(){
jQuery(&#39;#s1&#39;).cycle({
timeout: 0,
speed: 1000,
fx: &#39;fade&#39;
});

});
</script>
Cambia donde se indica, la URL del archivo que subiste previamente.
Luego antes de ]]></b:skin> pega los estilos del slider:
#gallery {
width:616px; /* Ancho del contenedor general */
height:320px;
margin:0 0 20px 0;
float:left;
display:inline;
}

#featured-area {
height: 300px;
width:616px; /* Este ancho debe ser igual al contenedor general */
position: relative;
padding: 11px 0px 10px 0px;
z-index: 1;
}

#featured-area .pics {
position: absolute;
width: 490px; /* Ancho de las imágenes */
height: 298px;
top: 11px;
left: 14px;
}

#featured-area .pics div.excerpt {
background: #fff; /* Color de fondo de la descripción */
bottom:0;
left:0;
padding:0px 0 0 10px;
position:absolute;
width:480px; /* Ancho de los títulos */
z-index:2;
opacity:0.8;
filter:alpha(opacity=80);
.width: 100%;
}

#featured-area .pics div.excerpt p {
color: #203136; /* Color de la descripción */
width:450px; /* Ancho de la descripción */
height:20px;
}

#featured-area .pics div.excerpt a {
font-size:18px; /* Tamaño de los títulos */
color: #000; /* Color de los títulos */
font-weight:bold;
text-decoration:none;
}
#featured-area .pics div.excerpt a:hover {
color: #ddd; /* Color de los títulos al pasar el cursor */
text-decoration:none;
}
.excerpt-text {
display:inline;
float:left;
font-size:12px; /* Tamaño del texto de la descripción */
width:450px; /* Ancho de la descripción */
padding:0px 0 10px 0;
}

#featured-area .pics span.feat-overlay {
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 490px; /* Mismo ancho de las imágenes */
height:298px;
z-index: 1;
}

#featured-area div#slider-control {
position: absolute;
width: 110px;
height: 296px;
border: 1px solid #b4b4b4;
z-index: 4;
top: 11px;
right: 1px;
}

#featured-area div#slider-control div.featitem {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJT7lDIEAuZ1EOvtRBu8QSiZByOu81ISh1f7BwwM_joM2KX4izL6Fuk66FsjLd1LvVS0ap0_ZQS73Zh7ZC1iWrwi2wYkjqxjKe-JQgwwQJqXoG72E0UstlRtfQAQnRpAw0SXiLcsPqimU/s1600/featitem-bg.png) no-repeat top left;
width: 76px;
height: 77px;
float: left;
padding: 10px 16px 12px 18px;
cursor: pointer;
}

#featured-area div#slider-control div.featitem img {
float: left;
margin-right: 18px;
border: 1px solid #f6f6f6;
margin-top: 5px;
width:67px;
height:67px;
}

#featured-area div#slider-control div.featitem.active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSH4DU3Bvq7zJYUvKushqRSM-AMIxXaH7aMBLQFXlIXVKen-prA3ZMGgG-hCU9j4tEjieMvSBGnaGy0zwqEwAt0Q-tsy0dPzN8URKAQhSYHClQkeZ8B_4WAMjeaGc4HGbpxoc_rgoxWPg/s1600/featitem-bg-active.png) no-repeat top left;
margin-left: -20px;
padding-left: 38px;
}
#featured-area div#slider-control div.featitem.active h2 {display:none;}
#featured-area div#slider-control div.featitem.active span.meta {border: 0px;}
#featured-area div#slider-control div.featitem span.order {display: none;}
#featured-area div#slider-control div.featitem span.meta {display:none;}
Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y pega la estructura del slider:
<div id='gallery'>
<div id='featured-area'>
<div class='pics' id='s1'>

<!-- Imágenes grandes -->
<div>
<img src='URL de la imagen UNO' style='width: 490px; height: 298px;'/>
<div class='excerpt'>
<p><a href='URL del enlace'>Lorem ipsum</a></p>
<p class='excerpt-text'>Aquí va la descripción.</p>
</div>
<a href='URL del enlace'><span class='feat-overlay'/></a>
</div>



<div>
<img src='URL de la imagen DOS' style='width: 490px; height: 298px;'/>
<div class='excerpt'>
<p><a href='URL del enlace'>Lorem ipsum</a></p>
<p class='excerpt-text'>Aquí va la descripción.</p>
</div>
<a href='URL del enlace'><span class='feat-overlay'/></a>
</div>



<div>
<img src='URL de la imagen TRES' style='width: 490px; height: 298px;'/>
<div class='excerpt'>
<p><a href='URL del enlace'>Lorem ipsum</a></p>
<p class='excerpt-text'>Aquí va la descripción.</p>
</div>
<a href='URL del enlace'><span class='feat-overlay'/></a>
</div>

</div>

<div id='slider-control'>

<!-- Imágenes en miniatura -->
<div class='featitem active'>
<img src='URL de la imagen UNO' style='width: 67px ; height: 67px ;'/>
<span class='order'>1</span></div>


<div class='featitem '>
<img src='URL de la imagen DOS' style='width: 67px ; height: 67px ;'/>
<span class='order'>2</span></div>


<div class='featitem '>
<img src='URL de la imagen TRES' style='width: 67px ; height: 67px ;'/>
<span class='order'>3</span></div>


</div>
<div class='clear'/>
</div>
</div>
En este último código cambia donde se indica la URL de las imágenes y la URL de los enlaces. Notarás que cada imagen se pone dos veces, esto es porque una es para la imagen grande y otra para las imágenes en miniatura.
Algo parecido sucede con los enlaces, verás que el enlace se pone dos veces, uno es para en enlace de la imagen grande, y otro para el enlace del titulo que está arriba de la descripción.

En el primer código verás en color azul un número, este es el tiempo en milisegundos que tarda cada imagen en cambiar.

Como mencioné antes el slider está diseñado para mostrar sólo tres imágenes porque aunque se podrían agregar más quedaría poco estético, créanme, no les gustará el resultado si agregan más. Sin embargo pueden cambiar el ancho del slider, sólo hay que poner atención en las anotaciones que están en color verde dentro del segundo código y en el tamaño de las imágenes del tercer código.

Ahí mismo en el segundo código hay áreas que se pueden personalizar, como color del título, color de la descripción, etc. En el caso del fondo del área de las miniaturas es una imagen, bueno en realidad son dos, y si se de desea cambiarlas de color hay que editar las URLs de las imágenes que se encuentran también en el segundo código.

La verdad es que así como está el slider se ve muy bien, es de los pocos gadgets que no necesitan nada más que ponerlo en el blog y presumirlo a sus lectores.

Nueva opción de Blogger: Vistas dinámicas de tu blog


Blogger ahora te ofrece la posibilidad de presentar contenido de formas diversas y apasionantes.

Actualmente hay cinco puntos de vista dinámico para sus blogs públicos.

Estas opiniones sólo son accesibles si se permite por el autor del blog.

# Flipcard: [BlogURL]/view/flipcard
# Mosaico: [BlogURL]/view/mosaic
# Barra Lateral: [BlogURL]/view/sidebar
# Instantánea: [BlogURL]/view/snapshot
# Timeslide: [BlogURL]/view/timeslide

Ejemplos:
Estas vistas dinámicas funcionarán en tu blog siempre que se cumplan todos los requisitos siguientes:
  • Tu blog es público. Los lectores que te siguen no necesitan acceder para ver tu blog.
  • Tu blog tiene totalmente habilitados los feeds. En la pestaña Configuración | Feed del sitio, tienes habilitada la opción Completo o Hasta el salto de línea para el feed de las entradas.
  • No has inhabilitado las vistas dinámicas. En la pestaña Configuración | Formato, la opción de Habilitar vistas dinámicas está establecida en Sí.
Si no se cumple alguna de las condiciones anteriores, cuando los usuarios intenten acceder a las vistas dinámicas de tu blog, se les remitirá a una página de destino y, unos segundos más tarde, se les redirigirá a tu blog original.

No obstante, si se cumplen todas las condiciones anteriores, los lectores que te siguen pueden acceder a las vistas dinámicas con tan solo añadir /view a la URL.

Por ejemplo, http://loseasi.blogspot.com/view

Para ver este blog en las nuevas vistas dinámicas, en lugar de la URL anterior, los usuarios visitarían http://loseasi.blogspot.com/view

No obstante, si quisieran visitar directamente una vista determinada, como la vista Flipcard, simplemente tendrían que ir a http://loseasi.blogspot.com/view/flipcard

Ten en cuenta que estas vistas no son compatibles actualmente con muchas de las funciones que tu blog original puede tener, entre otras, la visualización de anuncios.
Por esta razón, te damos la opción de inhabilitar las vistas dinámicas en la página de configuración.
Pretendemos añadir estas funciones que faltan en los próximos meses y, además, queremos darte la posibilidad de personalizar estas vistas, incluso ofrecerte una opción para que configures una vista concreta como predeterminada.

Ver más información: [1], [2] y [3]


Ten en cuenta que estas vistas no son compatibles actualmente con muchas de las funciones que tu blog original puede tener.

miércoles, 30 de marzo de 2011

Un poco más sobre las transiciones con CSS

Habíamos visto que las transiciones en CSS tienen cuatro propiedades que las controlan de manera individual:

transition-property la utilizamos para listar las propiedades que se cambiarán, separadas por comas; por ejemplo:
transition-property: background;
transition-property: background-color;
transition-property: background, width;
Ese lista no es obligatoria ya que, por defecto, el valor es all lo que significa que, salvo que lo indiquemos expresamente, la transición se hará sobre todas las propiedades que cambien. Por ejemplo, si tengo este DIV con un texto:
<div class="demoT">CSS3</div>

<style>
.demoT {
/* todas las propiedades normales que quiera poner */
background-color:#101921;
border: 6px solid #89A;
border-radius: 10px;
color: #EEE;
cursor: pointer;
font-size: 16px;
height: 50px;
margin: 0 auto;
padding-top: 20px;
text-align: center;
width: 100px;
/* acá irá la transición */
}
.demoT:hover {
/* estas son las propiedades que van a cambiar */
background-color: #606971;
border-radius: 150px;
color: #000;
font-size:64px;
height: 200px;
padding-top: 100px;
width: 300px;
/* acá irá la transición */
</style>
en lugar de agrega esto para animarlo un poco:
transition-property: background-color, border-radius; color, font-size, height, padding-top, width;
transition-duration: 2s;
puedo simplificarlo así:
transition-property: all;
transition-duration: 2s;
o utilizar una sóla línea, separando los valores con un espacio, de manera similar a lo que hacemos con otras propiedades:
transition: all 2s;
El orden es:
transition: transition-property, transition-duration transition-timing-function transition-delay;
Así que en ese ejemplo, sólo habría que agregar los prefijos de los distintos navegadores lo que daría esto:
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;

CSS3

Cuando queremos anular la transición lo que utilizamos es el valor none:
transition: none;
transition-duration es lo que indica la velocidad, o sea, el tiempo que durará la transición y por defecto es cero; al igual que la anterior, si ponemos varios valores, estos se separan con comas:
transition-duration: 1s;
transition-duration: 1s, 2s;
transition-timing-function es la más complicada de comprender; lo que hace es definir el modo en que se ejecutará esa transición; la curva de tiempo que se usa para calcular los diferente estados entre el inicio y el final. Por defecto, tiene el valor ease pero pueden usarse otros: linear, ease-in, ease-out, ease-in-out, cubic-bezier()

Ese valor por defecto genera una animación suave; digamos que, comienza despacio y luego se va ascelerando. El valor linear lo hace de modo constante y usando cubic-bezier() podemos llegar a controlar esa velocidad de manera exacta aunque compleja. Pueden ver y experimentar esto en Ceaser, una herramienta online para probar valores y posibles alternativas. Mientras tanto, en este ejemplo, basta poner el cursor encima para ver como, aún utilizando en todos ellos el mismo valor de tiempo, el resultado final cambia haciendo que algunas se ejecuten más rápido que otras:

ease
linear
ease-in
ease-out
ease-in-out
cubic

Por último:

transition-delay determina el tiempo que transcurrirá antes de comenzar la transición y su valor inicial es cero.

Demasiada cosa, demasiado detalle pero todo es mucho más simple de lo que parece ya que, en realidad, para usos normales, basta saber que sólo necesitamos esto y nada más:
-moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s;
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

Generados de iconos


Icon Generator es una herramienta que nos permite crear iconos en formato png, nos ofrece cinco modelos distintos y la posibilidad de escoger color de fondo y según modelo color de fuente.

Una vez creado el icono y guardado los cambios obtenemos seis tamaños 16x16px, 32x32px, 42x42px, 128x128px, 256x256px, 521x512px todos ellos listos para usar una vez descaragdo el archivo zip.

martes, 29 de marzo de 2011

Pixlr: Editor de imágenes online

La mayoría de los editores de imágenes online comienzan con la letra P y pixlr no es la excepción. Claro, eso sólo es un detalle sin importancia. Lo interesante es que es uno de los mejores que he probado y está en español.

Posee dos aplicaciones, Pixlr Editor es el editor completo y Pixlr Express es un editor con menos opciones, útil cuando lo que necesitamos es hacer retoques rápidos. Ambos utiliza Flash pero son bastante rápidos y además, disponen de un API que puede ser utilizado por desarrolladores de manera gratuita.



Podemos usarlos sin necesidad de registro aunque esto último nos permite enviar las imagenes directamente a alguna red social como Facebook o Picasa. Admite crerar imágenes nuevas, seleccioanrlas desde nuestra PC o desde cualquier web y es bastante intuitivo, parecio al Photoshop. Unos videos muestran el modo de uso de sus características principales.

También resulta interesante la herramienta Grabber que no es otra cosa que una extensión para para Firefox o para Chrome por medio de la cual, tenemos acceso al editor simplemente haciendo click y con el botón derecho sobre cualquier imagen que veamos; de esta manera, podemos adaptarla, recortarla o guardarla.


Ambos servicios tamboén se pueden incluir en cualquier sitio mediante un IFRAME:
<iframe id="pixlr" type="text/html" width="100%" height="100%" src="http://pixlr.com/editor/" frameborder="0"></iframe>

<iframe id="pixlr" type="text/html" width="100%" height="100%" src="http://pixlr.com/express/" frameborder="0"></iframe>
Y acá puse esos IFRAMES en unos enlaces para que se muestren en una ventana modal si es que alguien quiere probar cómo funcionan:

Cuando los videos se sobreponen

Quienes tienen un menú de subpestañas seguramente alguna vez habrán notado que cuando hay un video debajo del menú las subpestañas se esconden detrás del video y pareciera que se trata de un error del menú aunque no lo es. Lo que sucede es que estos videos que insertamos no tienen "transparencia" por defecto por lo que se sobreponen a todo elemento que haya en su misma área.

Vemos este claro ejemplo de este menú drop and down como las subpestañas se muestran por detrás del video.







Para solucionarlo aplicaremos el atributo transparent al parámetro wmode.
Por ejemplo, en los códigos de inserción antigua de los videos de YouTube tenemos un código como este y agregamos lo que está en color rojo:
<object width="640" height="390"><param name="movie" value="http://www.youtube.com/v/XSGBVzeBUbk?fs=1&amp;hl=es_ES&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="transparent" /><embed src="http://www.youtube.com/v/XSGBVzeBUbk?fs=1&amp;hl=es_ES&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="390" wmode="transparent"></embed></object>

Y con eso el video ya no se sobrepondrá ni al menú ni a otro objeto.






Si ya usas el nuevo código de inserción de videos (iframe) que ofrece YouTube entonces el atributo se agrega al final de la URL del video:
<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/XSGBVzeBUbk?rel=0&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>

Esta solución debe ser efectiva para la mayoría de los navegadores sino es que con todos, al menos yo lo he probado en Opera, Safari, Mozilla Firefox, Google Chrome e Internet Explorer. Quizá las versiones antiguas de IE se resistan pero... ¿aun habrá gente que las use? Por mi salud mental espero que no.

Breadcumbs en Blogger


Al igual que una barra de dirección en un navegador de archivos, los breadcumbs muestran la posición actual del usuario en nuestro sitio utilizando las etiquetas como carpetas.

Vista previa de los breadcumbs en Blogger:


¿Cómo insertarlo en Blogger?:

Paso 1: Integrando en la plantilla los breadcumbs:

Primero, vamos a ''Diseño/Edición HTML'', marcamos ''Expandir plantillas de artilugios'' y buscamos el código siguiente y le añadimos lo que está en verde:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<!-- deshabilitar status message
<b:include data='top' name='status-message'/>
deshabilitar status message -->
<b:include data='posts' name='breadcrumb'/>

<data:adStart/>

 Ahora buscaremos un poco mas arriba la siguiente línea:

<b:includable id='main' var='top'>

Sobre esta, añadiremos la siguiente:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Estás en: <a expr:href='data:blog.homepageUrl' rel='tag'>Inicio</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Estás en: <a expr:href='data:blog.homepageUrl'>Inicio</a> &#187; Archivos de <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
Estás en: <a expr:href='data:blog.homepageUrl'>Inicio</a> &#187; Mostrando todas las entradas
<b:else/>
Estás en: <a expr:href='data:blog.homepageUrl'>Inicio</a> &#187;  <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Guardamos los cambios y listo:



Paso 2: Añadiendo los estilos:

Buscamos la siguiente zona en la plantilla:
]]></b:skin>

Sobre esta, pegaremos el siguiente código:

.breadcrumbs {
border-top: 2px ridge #DADADA; /* borde superior */
border-right: 2px ridge #DADADA; /* borde derecho */
border-left: 2px ridge #DADADA; /* borde izquierdo */
border-bottom: 2px ridge #DADADA; /* borde inferior */
background: #FFFFFF; /* color del fondo */
padding: 5px; /* espaciado del contenido en los bordes */
margin-top: 10px;
margin-bottom: 10px;
}

Modificamos los colores, los bordes, márgenes, etc. a gusto y guardamos los cambios:

lunes, 28 de marzo de 2011

Que mañanita !!!








Introducción a las transiciones con CSS

Las transiciones usando CSS son la parte interesante que trae Firefox 4 y que ya existía en otros navegadores como Chrome y Opera; de este modo, aún cuando en Internet Explorer no funcionen, el hecho que un 50% de los usuarios (o más, dependiendo de las estadísticas que se miren) utilicen estos navegadores ya nos permite jugar un poco con ellas.

De todos modos, como cualquier otro "efecto especial", bien puede armonizarse o utilizarse de manera sutil para que los visitantes puedan navegar correctamente aún cuando algunos de ellos no accedan a esas "modernidades".

Una transición es aquello que ocurre entre un momento y otro.

Estamos acostumbrado a ciertos efectos como el hover sobre un texto; es simple, ese texto tiene un color y cuando ponemos el cursor encima, el color cambia. Ha habido una "transición" pero, esta es instantánea; estas nuevas propiedades, entre otras cosas, nos permiten controlar el tiempo que durará ese cambio entre un estado y otro lo que generará una animación simple porque durante ese proceso, la propiedad o propiedades irán cambiando, yendo de un estado inicial a otro final.

Un ejemplo para no hacerse lio.




A la izquierda se ve el efecto hover normal; al poner el cursor encima, el color de fondo cambia de blanco a negro y en el de la derecha pasa lo mismo excepto que el tiempo que tarda es mayor y durante ese tiempo, ese color va virando lentamente mostrando tonos de gris.

La propiedad básica para conseguir esto se denomina transition pero los navegadores sólo la entienden si se utilizan sus prefijos así que tendremos tres versiones distintas que tienen el mismo nombre y la misma sintaxis pero que varían en ese prefijo:

-moz-transition en Firefox
-webkit-transition en Chrome y Safari
-o-transition en Opera

Por lo general, no suele usarse esa propiedad que es la forma resumida sino que se "divide" del mismo modo que lo hacemos con muchas otras. En este caso, son cuatro:

transition-property
transition-duration
transition-timing-function
transition-delay

Pero no hay que asustarse porque para los casos más simples basta usar las dos primeras.

¿Qué hacen? Voy a mostrarlas sin subfijos para no estar escribiendo mucho pero, hay que recordar que deben agregarse o no funcionarán.

transition-property es la que utilizamos para indicar cuál o cuales son las propiedades a cambiar; si son varias, las separamos con comas:
transition-property: color;
transition-property: color, opacity, width;
transition-duration es el tiempo que durará el efecto y también podemos colocar un solo valor o varios, separados por comas; si hacemos esto último, le estamos diciendo al navegador que cada propiedad indicada por transition-property tenga un tiempo de transicion distinto. En todos los casos, el valor está expresado en segundo:
transition-duration: 1s;
transition-duration: 1s, 4s;
Con esas ya podemos crear el efecto anterior que no es otra cosa que un efecto hover:
<style>
.demo {
background-color:#FFF;
-moz-transition-property: background-color;-moz-transition-duration: 2s;
-webkit-transition-property: background-color;-webkit-transition-duration: 2s;
-o-transition-property: background-color;-o-transition-duration: 2s;
}
.demo:hover {
background-color:#000;
-moz-transition-property: background-color;-moz-transition-duration: 2s;
-webkit-transition-property: background-color;-webkit-transition-duration: 2s;
-o-transition-property: background-color;-o-transition-duration: 2s;
}
</style>

<div class="demo"></div>
¿Por qué ponemos las transiciones en ambas reglas? Porque el efecto funcionará en ambos sentidos, se verá cuando colocamos el cursor encima y tambien cuando lo sacamos. Esto no es obligatorio, puede hacerse un efecto en un solo sentido sin problemas.

Las propiedades a las que podemos agregar efectos son muchas; en este ejemplo cambiamos el color de fondo y su ancho (width):


Casi todas las propiedades pueden sufrir efectos te transición: colores, fondos, bordes, tamaños, posiciones, fuentes, opacidad, sombras, márgenes, etc:

¿más?

Error bX-67oaj1 y la solución





Ayer, antes de cambiar mi plantilla, me dí cuenta que tenía un problema al usar los enlaces de navegación de blogger: entradas antiguas y entradas más recientes,  ya que al navegar desde ahí, se mostraban las entradas sin resumen automático y además sin la fecha.



Me sorprendió un poco ese asunto,  ya que no recordaba haber hecho ningún cambio importante, solo había sustituido el texto del enlace por flechas usando caracteres unicode, eso fue todo; posteriormente cuando cambié la plantilla, el problema continuó, lo que me preocupó o mejor dicho ocupo un buen rato.




Como no tenía una idea clara de que se trataba, fui a ver  toda esa parte del código que corresponde a la navegación de blogger, y lo comparé con el código de una plantilla de blogger sin editar, y que es este... (a veces varía un poco en las lineas que corresponden al enlace de la página principal)




<b:includable id='nextprev'>


  <div class='blog-pager' id='blog-pager'>


    <b:if cond='data:newerPageUrl'>


      <span id='blog-pager-newer-link'>


      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>


      </span>


    </b:if>






    <b:if cond='data:olderPageUrl'>


      <span id='blog-pager-older-link'>


      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>


      </span>


    </b:if>






    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>






  </div>


  <div class='clear'/>


</b:includable>





                                                            

Todo se veía igual,  entonces, buscando respuestas, fui a ver otras de mis plantillas para ver si pasaba lo mismo y en la la plantilla Atheros, también  me encontré con el mismo problema,  (no se muestran los resúmenes en las entradas al navegar desde los enlaces de navegación) .



Luego me di cuenta que en las plantillas Mis dulces tentaciones y la  plantilla papel azul y se generaba un error llamado: bX-67oaj1, al navegar desde dichos enlaces, cosa que me hizo sospechar que mi problema con las entradas tenían que ver con ese susodicho error, ya que también provenía de los enlaces de navegación de Blogger.



Teniendo como base ese error,  y ya sabiendo que buscar, fui al foro de Blogger a ver si había reportes sobre ese problema y encontré muchas comentarios mencionando ese error y una solución  planteada por un usuario.





Probé la solución y si funciona pero, posteriormente en una conversación sostenida con JMiur, me comentó que viendo lo del foro, recordó que hace mucho (2007) ya habían tenido un problema con ese código y ahí explicaba una solución, y leyéndola vi que no era necesario eliminar la clase para cada enlace de navegación como se mostraba en la respuesta del foro que les decía, pues lo probé así como dice JMiur y si funciona perfectamente :) Parece que es un fantasma que regresa del pasado para ponerlos los pelos de punta a más de uno, lo bueno es que existen los casa-fantasmas XD




La solución 







Entonces, el problema se soluciona cambiando:




expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' 






 por:





id='blog-pager-newer-link'



y...



expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'




por:



id='blog-pager-older-link'





...del código que se muestra allá arriba, al hacerlo el problema del error bX-67oaj1 desaparece, y también el problema de las entradas que se muestran sin el resumen automático al navegar desde los enlaces en cuestión, como en el caso de mi plantilla.






 A veces los problemas se arreglan solos o mejor dicho Blogger los soluciona, sin embargo a veces hay que echar de mano algunos truquillos mientras las cosas se arreglan.



Quien sabe desde cuando tenía ese problema aquí en mi blog y yo sin enterarme, afortunadamente ya se arregló, así que cuando vean algo raro al navegar en mi blog (siempre y cuando no sea del diseño o una foto mía... jaja) por favor díganmelo, tal vez sea algún problema y la solución ande por ahí navegando como en este caso XD.



Si tienes resumen automático en la entradas o no, sería bueno que revisaras que todo esta bien al navegar por los enlaces de navegación de blogger, tal vez hay un problema y ni siquiera lo sabes, tal y como me paso a mi,  y si lo hay, y se trata de lo que hablamos, pues la solución ya esta dicha, y desde el 2007.  



Nota: Ese código lo verán marcando la casilla de expandir plantillas de artilugios, desde la Edición de HTML de su plantilla y utilicen CTRL F para localizarlo más fácilmente escribiendo una de sus lineas de código.

Solucionar problemas con los códigos de Adsense

Cuando intentamos añadir una sección de publicidad en nuestro blog mediante la plantilla, es muy probable que nos indique que el código está mal, y por esto nos será imposible guardar.

Pongo a su disposición este analizador de códigos con el cual podrán convertir el código del servicio de publicidad que hayan contratado para que funcione correctamente en su plantilla y así puedan guardar los cambios realizados.

Copiar el código a continuación:

Wallpapers animales



REFERENCIA Y DESCARGA:WebDesing

Smowtion Media: publicidad para el blog.

Existen distintos sistemas de publicidad para el blog, entre uno de ellos se encuentra Smowtion Media, una red de publicidad para usuarios con blogs. Es una red bastante nueva y se caracteriza por pagar en eCPM (Effecitve Cost Per Mille, lo que se traduce a un pago por cada mil impresiones).

Los resultados son variables dependiendo del tipo de banner y de la cantidad de éstos en tu sitio.
También permite popunders opcionales, los que permiten aumentar las ganancias finales.

Rentabiliza tu sitio!


Las ventajas de Smowtion son las siguientes:
  • Formas de pago: Tarjetas débito, tarjeta prepaga Smowtion Media Mastercard o paypal.
  • Es compatible con otro tipo de publicidad como Google Adsense.
  • Contiene múltiples banners para tu blog.
  • La integración es rápida y es bastante sencillo darse de alta.
Si estás interesado/a por utilizar Smowtion, te recomiendo que utilizes banners de las siguientes proporciones:
  • 728x90
  • 300x250
  • 160x600
  • 468x60.
Estos tamaños permiten mejores ganancias que los demás formatos.


Un vídeo explicativo sobre Smowtion Media:





Registrarse en Smowtion Media.

domingo, 27 de marzo de 2011

Usar Picasa para insertar videos en Blogger

Es verdad que el editor de Blogger posee un botón mediante el cual podemos agregar un video desde nuestra PC. la opción, existe hace ya tiempo y es muy poco usada, probablemente, porque no nos da ninguna clase de control sobre este, ni siquiera nos dice dónde está alojado pero, Picasa nos da la misma posibilidad, algo que antes sólo podíamos hacer desde el software de escritorio, ahora también es posible hacerlo desde la web misma e incluso, desde el mismo editor de Blogger.

Los formatos aceptados son varios: avi, asf, mov, wmv, mpg, mp4 y otros pero no acepta swfs ni flvs.

Las restricciones en cuanto a capacidad son similares a las imágenes, si el video dura menos 15 minutos, no será tenido en cuenta.

Desde Blogger, podemos subirlos del mismo modo que hacemos con una imagen y con el mísmo ícono:


o bien seleccionar algun oque ya hayamos subdo previamente:

No sé si se tratará de un error circunstancial o no pero, cada vez que lo hice, se duplicaron así que tuve que eliminar uno de ellos.


El código insertado es ... no sabría definirlo , hay que verlo Ver/Ocultar [+]
<div class="separator" style="clear: both; text-align: center;">
<object width="320" height="266" class="BLOGGER-youtube-video" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" data-thumbnail-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYBowGWNNC4DD_nYMUUAL4GlbSBWCty9Y1T1tHhCyYGuhjsCuLPW9T9qtTgctbcD_s7TDwbFrPFxW3_4rVhyw56aRFppPoAt36inKbvGkr2NXi5yOMf-AcJDSUkIGUjvQiUmmLme6z5z0U/s1600/antilope.wmv"><param name="movie" value="http://video.google.com/googleplayer.swf?videoUrl=http%3A%2F%2Fv6.nonxt8.googlevideo.com%2Fvideoplayback%3Fid%3D0ce52be91576c910%26itag%3D18%26ip%3D0.0.0.0%26ipbits%3D0%26expire%3D1301280179%26sparams%3Did%2Citag%2Cip%2Cipbits%2Cexpire%26signature%3D980E168F823E00B745F6D71D48EAD9BB4BBD6F3A.1DDB231BBDDB84FFD78C34955CB1186B895749BC%26key%3Dlh1" />
<param name="bgcolor" value="#FFFFFF" />
<embed width="320" height="266" src="http://video.google.com/googleplayer.swf?videoUrl=http%3A%2F%2Fv6.nonxt8.googlevideo.com%2Fvideoplayback%3Fid%3D0ce52be91576c910%26itag%3D18%26ip%3D0.0.0.0%26ipbits%3D0%26expire%3D1301280179%26sparams%3Did%2Citag%2Cip%2Cipbits%2Cexpire%26signature%3D980E168F823E00B745F6D71D48EAD9BB4BBD6F3A.1DDB231BBDDB84FFD78C34955CB1186B895749BC%26key%3Dlh1" type="application/x-shockwave-flash"></embed></object></div>

Barras de colores moviéndose en el fondo del blog

Este efecto nos recuerda a los años del groovy en los que se usaban mucho este tipo de barras y cuadros de colores. Se trata de un script que muestra en el fondo del blog unas barras de colores en movimiento que le dan dinamismo y mucho estilo al blog.

Puedes ver un ejemplo en este blog de pruebas.

Para ponerlo en tu blog sólo necesitas entrar en Diseño | Edición de HTML y antes de </body> pegar el siguiente script:
<script type='text/javascript'>
// <![CDATA[
var border=50; // Ancho de las barras
var effects=3; // Cantidad veces que se ejecuta el efecto
var speed=50; // Velocidad de la animación (un valor menor lo hará más rápido)
// Aquí abajo ponemos los códigos de los colores
var colours=new Array("#2F1925", "#F8E5DE", "#DCD796", "#F87501", "#9C0A55", "#6594B8", "#90C41A");

/*
1970s Groovy WebPage Effect
(c) 2008 mf2fm web-design
http://www.mf2fm.com/rv
DON'T EDIT BELOW THIS BOX
*/
var swide, shigh;
var h=new Array();
var v=new Array();
var op=1/(effects+1);
window.onload=function() { if (document.getElementById) {
var i, d, s, b;
b=document.createElement("div");
s=b.style;
s.position="absolute";
s.overflow="hidden";
s.zIndex="-1";
b.setAttribute("id", "bod");
i=document.body.style.backgroundColor;
if (document.body.parentNode) {
if (i) document.body.parentNode.style.backgroundColor=i;
document.body.style.backgroundColor="transparent";
}
document.body.appendChild(b);
set_width();
set_scroll();
for (i=0; i<effects*10; i+=10) {
d=document.createElement("div");
s=d.style;
s.width="100%";
h[i]=Math.floor(Math.random()*shigh/2.5);
h[i+1]=Math.floor(Math.random()*shigh/2.5);
h[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
h[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
s.top=h[i]+"px";
s.bottom=h[i+1]+"px";
s.position="absolute";
s.borderColor=jazz();
s.borderStyle="solid";
s.borderWidth=border+"px 0px";
s.backgroundColor=jazz();
if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
else s.opacity=op;
h[i+5]=s;
b.appendChild(d);
}
for (i=0; i<effects*10; i+=10) {
d=document.createElement("div");
s=d.style;
s.height="100%";
v[i]=Math.floor(Math.random()*swide/2.5);
v[i+1]=Math.floor(Math.random()*swide/2.5);
v[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
v[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
s.left=v[i]+"px";
s.right=v[i+1]+"px";
s.position="absolute";
s.borderColor=jazz();
s.borderStyle="solid";
s.borderWidth="0px "+border+"px";
s.backgroundColor=jazz();
if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
else s.opacity=op;
v[i+5]=s;
b.appendChild(d);
}
groovy();
}}

var old_jazz=false;
function jazz() {
var new_jazz;
do { new_jazz=colours[Math.floor(Math.random()*colours.length)]; }
while ( new_jazz==old_jazz );
old_jazz=new_jazz;
return (new_jazz);
}

function scat(no) {
var yes;
no=no*Math.abs(no);
do { yes=2+Math.floor(Math.random()*3); }
while ( no==yes );
return (yes);
}

function groovy() {
setTimeout("groovy()", speed);
var i;
for (i=0; i<effects*10; i+=10) {
h[i]+=h[i+2];
h[i+1]+=h[i+3];
if (h[i]+h[i+1]>shigh-border*2) {
h[i+4]=h[i+2];
h[i+2]=-h[i+3];
h[i+3]=-h[i+4];
h[i+5].backgroundColor=jazz();
}
if (h[i]<-border && Math.random()<1/border) {
h[i+2]=scat(h[i+3]);
if (h[i+1]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i]>shigh && Math.random()<1/border) {
h[i+2]=-scat(h[i+3]);
}
if (h[i+1]<-border && Math.random()<1/border) {
h[i+3]=scat(h[i+2]);
if (h[i]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i+1]>shigh && Math.random()<1/border) {
h[i+3]=-scat(h[i+2]);
}
h[i+5].top=h[i]+"px";
h[i+5].bottom=h[i+1]+"px";
}
for (i=0; i<effects*10; i+=10) {
v[i]+=v[i+2];
v[i+1]+=v[i+3];
if (v[i]+v[i+1]>swide-border*2) {
v[i+4]=v[i+2];
v[i+2]=-v[i+3];
v[i+3]=-v[i+4];
v[i+5].backgroundColor=jazz();
}
if (v[i]<-border && Math.random()<1/border) {
v[i+2]=scat(v[i+3]);
if (v[i+1]>swide) v[i+5].borderColor=jazz();
}
else if (v[i]>swide && Math.random()<1/border) {
v[i+2]=-scat(v[i+3]);
}
if (v[i+1]<-border && Math.random()<1/border) {
v[i+3]=scat(v[i+2]);
if (v[i]>swide) v[i+5].borderColor=jazz();
}
else if (v[i+1]>swide && Math.random()<1/border) {
v[i+3]=-scat(v[i+2]);
}
v[i+5].left=v[i]+"px";
v[i+5].right=v[i+1]+"px";
}
}

window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth-18;
shigh=self.innerHeight-18;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
var s=document.getElementById("bod").style;
s.width=swide+"px";
s.height=shigh+"px";
}

window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
// ]]>
</script>

¿Y luego? Ya nada, con eso es más que suficiente. Ya sólo puedes configurar algunos detalles que se explican al inicio del código en color verde.
Ahí donde se indica puedes poner la cantidad de colores que quieras, sólo necesitas poner los códigos entre comillas y separados por una coma tal como se muestra en el script.

Notarás que los colores tienen cierta opacidad, esto es para que las figuras de los cuadros que se forman se puedan apreciar; si prefieres quitar la opacidad sólo elimina lo que está en color naranja, aunque el resultado final no será igual.

Lindo ¿no?

sábado, 26 de marzo de 2011

Iconos sociales peludos en PNG transparentes

Un conjunto de 6 iconos sociales peludos transparentes en png.

Este conjunto fue diseñado por Andrea Austoni.


Descargar (.zip, 0.88 Mb)

Usted puede utilizar el conjunto de todos, en sus proyectos de forma gratuita y sin restricción alguna.
Usted puede libremente usarlo, tanto para sus proyectos particulares y comerciales, incluyendo software, servicios en línea, plantillas y temas.
El conjunto no se pueden revender, sublicenciar, arrendar, transferir o puesto a disposición para su uso.

Fuente:

Suscripciones por RSS al final de las entradas en Blogger

Este tutorial consta en agregar una sección al final de los posts con la opción de suscripción a las feeds de nuestro blog. Es bastante sencillo, elegante y bastante personalizable.


Vista previa de esta sección:


¿Cómo obtener esta sección en Blogger?

Paso 1: Creando el estilo:

Primero, vamos a ''Diseño/Edición HTML'' marcamos ''Expandir plantillas de artilugios'' y buscamos la siguiente sección:
]]></b:skin>

Sobre esta, pegaremos el siguiente código:

#suscripcion-rss{background: #FBF8F8 url(https://lh3.googleusercontent.com/-MxYRXaTG_q4/TY6uzCusiHI/AAAAAAAAAm8/rKR5PwUcGhs/s1600/feed_icon.png) 10px center no-repeat;border-top: 2px solid #990000;border-bottom: 2px solid #990000;margin: 10px 0 11px 0;padding: 10px 20px 20px 65px;text-align: center;font-size: 13px;line-height: 25px;height:40px;}
.social {
text-align:center;
}

Paso 2: Agregando la sección:

Ahora buscaremos la siguiente línea:
<data:post.body/>

Debajo de esta, pegaremos el siguiente código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='suscripcion-rss'>&#191;Te ha gustado este post? Suscríbete mediante <a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='nofollow'>RSS feed</a> para recibir nuevas actualizaciones.</div></b:if>
Guardamos los cambios y listo:


Consideraciones:

Para cambiar el color de fondo y los bordes, modifica los siguientes valores:
  • background: #FBF8F8 (Corresponde al color de fondo)
  • border-top: 2px solid #990000 (Corresponde al borde superior)
  • border-bottom: 2px solid #990000 (Corresponde al borde inferior)
 Para reemplazar la imagen, cambias la URL por la de la imagen deseada.

Bulandra y el diablo




Así se hacen los globos

Multibanner en Blogger

Hace no mucho creé una sección para insertar distintos banners, esta versión incluye una sección para 4 banners de 125x125px, 7 favicons de 32x32px y un banner cambiante de 260x60px, es la que uso en mi blog y quiero compartirla con ustedes.
  
Vista previa del multibanner:



Consideraciones:

Sólo utiliza el multibanner si tienes suficiente espacio en la sidebar, mínimo 300px de ancho.

¿Cómo obtener este multibanner?

Paso 1: Añadiendo los estilos:

Vamos a ''Diseño/Edición HTML'', en donde marcamos ''Expandir plantilla de artilugios''. Buscaremos la siguiente línea:
]]></b:skin>

Arriba de ésta, pegaremos el siguiente código:

/* Banners 125 x 125
----------------------------------------------- */
.ads {
margin-top:5px;
margin-left:5px;
}
.ads img {
padding: 4px;
margin-bottom: 5px;
}


/* miniBanners 32 x 32
----------------------------------------------- */
.adsmini {
margin-top:5px;
margin-left:5px;
}
.adsmini img {
padding: 1.6px;
margin-bottom: 5px;
}

/* BANNER CAMBIANTE
----------------------------------------------- */
{
margin: 0;
padding: 0;
}
#rotator {
border: 1px solid #dadada;
overflow: hidden;
margin-left: 8px ;
padding:2px;
position: relative;
width: 258px;
height: 60px;
}
#rotator img {
border: 0;
width: 258px;
height: 60px;
}

Guardamos los cambios y listo:


Paso 2: Instalando el script del multibanner:

En ''Diseño/Edición HTML'' buscaremos la siguiente sección:
</head>
 Arriba de ésta, pegas el siguiente código:

<script src='https://sites.google.com/a/blogsydescargas.co.cc/ayudabloggers/scripts/xfade2.js' type='text/javascript'/>

Guardas los cambios y listo:


Paso 3: Añadiendo el multibanner:

Vamos a ''Dieño/Edición HTML'' marcamos ''Expandir plantillas de artilugios'' y buscamos la siguiente línea:
<div id='sidebar-wrapper'>

Debajo de esta, pegaremos el siguiente código:


<div class='ads'>
<a href='URL DE DESTINO' title='¡Espacios disponibles para tu banner!'><img src='https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg'/></a>
<a href='URL DE DESTINO' title='¡Espacios disponibles para tu banner!'><img src='https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg'/></a>
<a href='URL DE DESTINO' title='¡Espacios disponibles para tu banner!'><img src='https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg'/></a>
<a href='URL DE DESTINO' title='¡Espacios disponibles para tu banner!'><img src='https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg'/></a>
</div>

<div id='rotator'>
<a href='URL DE DESTINO' title='Obtén este espacio'><img alt='Obtén este espacio gratis!' src='https://lh3.googleusercontent.com/-e0tXfBvRnMs/TY1sOYKMAxI/AAAAAAAAAmg/DgBqWqBvwMU/s1600/banner260x60.png'/></a>
<a href='URL DE DESTINO' title='Obtén este espacio'><img alt='Obtén este espacio gratis!' src='https://lh3.googleusercontent.com/-e0tXfBvRnMs/TY1sOYKMAxI/AAAAAAAAAmg/DgBqWqBvwMU/s1600/banner260x60.png'/></a>
<a href='URL DE DESTINO' title='Obtén este espacio'><img alt='Obtén este espacio gratis!' src='https://lh3.googleusercontent.com/-e0tXfBvRnMs/TY1sOYKMAxI/AAAAAAAAAmg/DgBqWqBvwMU/s1600/banner260x60.png'/></a>
<a href='URL DE DESTINO' title='Obtén este espacio'><img alt='Obtén este espacio gratis!' src='https://lh3.googleusercontent.com/-e0tXfBvRnMs/TY1sOYKMAxI/AAAAAAAAAmg/DgBqWqBvwMU/s1600/banner260x60.png'/></a>
</div>

<div class='adsmini'>
<a href='URL DE DESTINO' title='¡Obtén este espacio!'><img src='https://lh4.googleusercontent.com/-4DFAUAJ4VzU/TYqpt7iKIPI/AAAAAAAAAk4/XTq8mnBdGCI/s1600/banner32.jpg'/></a>
<a href='URL DE DESTINO' title='¡Obtén este espacio!'><img src='https://lh4.googleusercontent.com/-4DFAUAJ4VzU/TYqpt7iKIPI/AAAAAAAAAk4/XTq8mnBdGCI/s1600/banner32.jpg'/></a>
<a href='URL DE DESTINO' title='¡Obtén este espacio!'><img src='https://lh4.googleusercontent.com/-4DFAUAJ4VzU/TYqpt7iKIPI/AAAAAAAAAk4/XTq8mnBdGCI/s1600/banner32.jpg'/></a>
<a href='URL DE DESTINO' title='¡Obtén este espacio!'><img src='https://lh4.googleusercontent.com/-4DFAUAJ4VzU/TYqpt7iKIPI/AAAAAAAAAk4/XTq8mnBdGCI/s1600/banner32.jpg'/></a>
<a href='URL DE DESTINO' title='¡Obtén este espacio!'><img src='https://lh4.googleusercontent.com/-4DFAUAJ4VzU/TYqpt7iKIPI/AAAAAAAAAk4/XTq8mnBdGCI/s1600/banner32.jpg'/></a>
<a href='URL DE DESTINO' title='¡Obtén este espacio!'><img src='https://lh4.googleusercontent.com/-4DFAUAJ4VzU/TYqpt7iKIPI/AAAAAAAAAk4/XTq8mnBdGCI/s1600/banner32.jpg'/></a>
<a href='URL DE DESTINO' title='¡Obtén este espacio!'><img src='https://lh4.googleusercontent.com/-4DFAUAJ4VzU/TYqpt7iKIPI/AAAAAAAAAk4/XTq8mnBdGCI/s1600/banner32.jpg'/></a>
</div> 

Previsualizas los cambios y si el resultado es satisfactorio guardas los cambios:

Paso 4: Sólo mostrar al ingresar a las entradas (Opcional):

A petición de Chamorro, mostraré cómo evitar que la sección de banners se muestren en la página principal:

Primero, buscas el código del paso 3, y ese código deberás ponerlo entre el siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
CODIGO-PASO3</b:if>

De tal forma que quede de la siguiente forma:


 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='ads'>
<a href='URL DE DESTINO' title='¡Espacios disponibles para tu banner!'><img src='https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg'/></a>
<a href='URL DE DESTINO' title='¡Espacios disponibles para tu banner!'><img src='https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg'/></a>
<a href='URL DE DESTINO' title='¡Espacios disponibles para tu banner!'><img src='https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg'/></a>
<a href='URL DE DESTINO' title='¡Espacios disponibles para tu banner!'><img src='https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg'/></a>
</div>

<div id='rotator'>
<a href='URL DE DESTINO' title='Obtén este espacio'><img alt='Obtén este espacio gratis!' src='https://lh3.googleusercontent.com/-e0tXfBvRnMs/TY1sOYKMAxI/AAAAAAAAAmg/DgBqWqBvwMU/s1600/banner260x60.png'/></a>
<a href='URL DE DESTINO' title='Obtén este espacio'><img alt='Obtén este espacio gratis!' src='https://lh3.googleusercontent.com/-e0tXfBvRnMs/TY1sOYKMAxI/AAAAAAAAAmg/DgBqWqBvwMU/s1600/banner260x60.png'/></a>
<a href='URL DE DESTINO' title='Obtén este espacio'><img alt='Obtén este espacio gratis!' src='https://lh3.googleusercontent.com/-e0tXfBvRnMs/TY1sOYKMAxI/AAAAAAAAAmg/DgBqWqBvwMU/s1600/banner260x60.png'/></a>
<a href='URL DE DESTINO' title='Obtén este espacio'><img alt='Obtén este espacio gratis!' src='https://lh3.googleusercontent.com/-e0tXfBvRnMs/TY1sOYKMAxI/AAAAAAAAAmg/DgBqWqBvwMU/s1600/banner260x60.png'/></a>
</div>

<div class='adsmini'>
<a href='URL DE DESTINO' title='¡Obtén este espacio!'><img src='https://lh4.googleusercontent.com/-4DFAUAJ4VzU/TYqpt7iKIPI/AAAAAAAAAk4/XTq8mnBdGCI/s1600/banner32.jpg'/></a>
<a href='URL DE DESTINO' title='¡Obtén este espacio!'><img src='https://lh4.googleusercontent.com/-4DFAUAJ4VzU/TYqpt7iKIPI/AAAAAAAAAk4/XTq8mnBdGCI/s1600/banner32.jpg'/></a>
<a href='URL DE DESTINO' title='¡Obtén este espacio!'><img src='https://lh4.googleusercontent.com/-4DFAUAJ4VzU/TYqpt7iKIPI/AAAAAAAAAk4/XTq8mnBdGCI/s1600/banner32.jpg'/></a>
<a href='URL DE DESTINO' title='¡Obtén este espacio!'><img src='https://lh4.googleusercontent.com/-4DFAUAJ4VzU/TYqpt7iKIPI/AAAAAAAAAk4/XTq8mnBdGCI/s1600/banner32.jpg'/></a>
<a href='URL DE DESTINO' title='¡Obtén este espacio!'><img src='https://lh4.googleusercontent.com/-4DFAUAJ4VzU/TYqpt7iKIPI/AAAAAAAAAk4/XTq8mnBdGCI/s1600/banner32.jpg'/></a>
<a href='URL DE DESTINO' title='¡Obtén este espacio!'><img src='https://lh4.googleusercontent.com/-4DFAUAJ4VzU/TYqpt7iKIPI/AAAAAAAAAk4/XTq8mnBdGCI/s1600/banner32.jpg'/></a>
<a href='URL DE DESTINO' title='¡Obtén este espacio!'><img src='https://lh4.googleusercontent.com/-4DFAUAJ4VzU/TYqpt7iKIPI/AAAAAAAAAk4/XTq8mnBdGCI/s1600/banner32.jpg'/></a>
</div>
</b:if>


Notas:
  • Recuerda que en paso 1, deberás modificar los márgenes y los valores pertinentes. 
  • Si deseas agregar un banner de mi blog en la sección, visita este enlace.