Creando banners [creatubanner.com]

Hola amigos, hoy vengo con un tutorial... pero, de otro tipo. Se podria decir que con una recomendación y un tutorial.
Justamente, les voy a enseñar como crear un banner de calidad, online, gratis y facil en creatubanner.com.

Como verán, esta herramienta online permite crear banners, de diferentes estilos, tamaños, colores, etc, etc.

Cuando abramos la página, observaremos una vista previa de como ira quedando nuestro banner, a medida que lo vayamos haciendo:

Se puede observar, a la izquierda, que la dicha aplicacion posee diferentes medidas de banners a escojer:

• 728×90 - Leaderboard (clasico)
• 475×70 - Banner Extendido
• 475×200 - Banner Extendido Amplio
• 468×60 - Banner Horizontal
• 234×60 - Medio Banner
• 300×300 - Cuadrado
• 336×280 - Rectangulo Grande
• 500×40 - Banner Delgado (fino)
• 120×600 - Banner Vertical (skyscraper)
• 728×400 - Banner Gigante
• 125×125 - Cuadrado Pequeño

También quizás, desees subir tu propia imagen de fondo para el banner, ya que quieres personalizarlo, o solo por algún otro motivo. Por suerte esta herramienta incluye la opción de: ''Subir mi propia imagen y usarla como fondo del banner.'' Al hacer click, en la anterior casilla, automaticamente la aplicación activara la opción de ''subir tu propia imagen'' para el fondo del banner.

El panel en el que se realizan los cambios, es el siguiente:

Se puede observar que también se pueden agregar diferentes ''luminosidades'' (Únicamente si se usan colores, no una imagen) y por encima los colores a elegir, (Solo 2 colores).

Y además, arriba en la imagen, también se pueden ver diferentes pestañas, las cuales son:

Una vez que terminamos en ''Diseño'' nos dirigimos a ''Texto'' y veremos lo siguiente:

Allí podemos escribir los textos sobre el banner (Si lo deseas). También elegimos las fuentes de texto, color, tamaño, sombra, posición, y rotación.
Una vez que esta hecho, nos dirigimos a ''Borde'':

En esta pestaña, elegimos el tamaño del borde (En Px) y su color.

A continuación vamos a efectos:

Veremos todo como la anterior imagen. En esa pestaña, podemos, o no, seleccionar los efectos para el banner tenemos:

• Sin efecto
• Negativo
• Escala gris
• Brillo
• Contraste
• Contorno
• Borroso
• Repujado
• Sketch
• Sepia

 Les recomiendo probar todos, y si no gusta marcas '' Sin efecto'' y listo.

Y por ultimo nos vamos a ''Guardar'':

 

Allí seleccionaremos de que manera lo vamos a usar.

Si simplemente lo quieres guardar, presiona click derecho sobre la imagen del banner, y selecciona ''Guardar imagen como...'' y guardas la imagen.

Sino, la aplicación te da a elegir otras cosas que puedes hacer con el banner:

Enlace directo a la imagen del banner
Código html para colocarlo en una pagina web

Banner para Myspace (Header)
Banner para Myspace (masthead)
Banner para Myspace (Extendido)

Al hacer click en el banner enviar a esta pagina web (URL):

Abrir enlace en la misma ventana Abrir enlace en una nueva ventana


Esas son las opciones que te dará la herramienta, cuando selecciones lo que desees, presionas:

Debajo del anterior botón, encontraras una caja de texto, que es la que te dará, el código, según las opciones que hayas seleccionado.

Espero que el tutorial les funcione, se los recomiendo.

Añadir enlace de salto y enlace al comentario en Blogger

El jump-link y el comment-link son los enlaces que se encuentran en la página principal y que muestran tanto el salto de página como el número de comentarios.

Algunas plantillas no tienen esta función incorporada, y en este tutorial les enseñaré a situar correctamente estos enlaces.

En la siguiente imagen pueden apreciar tanto el jump-link como el comment-link

El tutorial:

Paso 1: Añadiendo las funciones:

En "Diseño | Edición HTML" marcaremos la opción '' Expandir plantillas de artilugios''.

Deberás buscar la siguiente línea:

<data:post.body/>

Importante: Este valor suele repetirse varias veces, por lo que hay buscar el que esté dentro de:

<div class='post-body entry-content'>

Una vez encontrado el valor, pegaremos los siguientes códigos debajo de este:

<b:if cond='data:blog.pageType == "index"'>
<!-- Inicio del Jump-link -->
<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</b:if>

<!-- Cierre del Jump-link -->

<!-- Inicio del Comment-link -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></b:if>
</b:if>
</b:if>
<!-- Cierre del Comment-link -->
</b:if>

Previsualiza los cambios y si está todo en orden guardas la plantilla.

Paso 2: Personalizando los enlaces:

Para modifical la apariencia de los enlaces, puedes crear las definiciones de la siguiente forma:

a.comment-link {/*Enlace a los comentarios*/
atributos;
}
a.jump-link {/*Enlace de salto de página*/
atributos;
}

Veamos un ejemplo:

a.comment-link { *Enlace a los comentarios*/
margin:10px; /*Márgenes*/
background:#b83636; /*Color de fondo*/
color:#fff; /*Color del enlace*/
border:2px solid #e7922d; /*Bordes*/
padding:4px; /*Paddings*/
float:right; /*Este código permite situar el enlace a la derecha*/
}

a.jump-link { /*Enlace de salto de página*/
margin:10px; /*Márgenes*/
background:#b83636; /*Color de fondo*/
color:#fff; /*Color del enlace*/
padding:4px; /*Paddings*/
border:2px solid #e7922d; /*Bordes*/
float:left; /*Este código permite situar el enlace a la izquierda*/
}

 Importante: Los valores en verde se pueden eliminar posteriormente, son sólo comentarios.

Sección de banners en cada entrada en Blogger

En esta oportunidad, y a petición de un usuario anónimo les mostraré cómo añadir una sección de banners en las entradas de Blogger tal como lo tengo yo añadido en mi blog.

Tiene como característica ser aleatorio, es decir que se mostrará uno al azar al cambiar o actualizar la página.

Prueba actualizando esta entrada y verás que el banner en la zona superior de la entrada cambiará.

¿Cómo añadirlo a Blogger?

En ''Diseño | Edición HTML'' marcamos ''Expandir plantillas de artilugios''. Buscaremos la siguiente sección:

<div class='post-body entry-content'>

Justo arriba pega el siguiente código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script language='JavaScript'>
imagenes = new Array(4)
imagenes[0] = &quot;<a href='URL1' target='_blank'><img border='0' src='URL-IMAGEN-1' style='padding-left:80px;' title='Título del banner 1'/></a>&quot;

imagenes[1] = &quot;<a href='URL2' target='_blank'><img border='0' src='URL-IMAGEN-2' style='padding-left:80px;' title='Título del banner 2'/></a>&quot;

imagenes[2] = &quot;<a href='URL3' target='_blank'><img border='0' src='URL-IMAGEN-3' style='padding-left:80px;' title='Título del banner 3'/></a>&quot;

imagenes[3] = &quot;<a href='URL4' target='_blank'><img border='0' src='URL-IMAGEN-4' style='padding-left:80px;' title='Título del banner 4'/></a>&quot;

aleatorio = Math.random() * (imagenes.length)
aleatorio = Math.floor(aleatorio)
document.write(imagenes[aleatorio])
</script>
</b:if>

Reemplaza los valores correspondientes y guarda los cambios. Recomiendo el uso de banners de 468x60px.

Consideraciones:

1. Para agregar un nuevo banner simplemente haz lo siguiente:

Pega el siguiente código debajo de la última imagen:

imagenes[4] = &quot;<a href='URL5' target='_blank'><img border='0' src='URL-IMAGEN-5' style='padding-left:80px;' title='Título del banner 5'/></a>&quot;

En donde deberás cambiar ''imagenes[4]'' por el número de la imagen.

Después cambia el siguiente valor:

imagenes = new Array(4)

Deberás poner la cantidad de banners que tienes añadidos (Incluyendo el cero).


2. Si el banner se vé poco alineado realiza los siguientes pasos:

Cada imagen tiene el atributo siguiente

padding-left:80px;

Reemplaza el valor por uno mayor para aumentar el margen izquierdo y disminúyelo obtener el efecto contrario, hazlo con todas las imágenes.

Banners con rotación en la sidebar de Blogger

Anteriormente había creado 2 variables para insertar banners en la sidebar en Blogger, uno constaba en añadir 4 banners sencillos en la sidebar, mientras que el otro era un multibanner (distintos tamaños). En esta oportunidad les dejo a su disposición esta nueva versión la cual consta en un espacio para 4 banners con ángulos distintos.

Vista previa de los banners:

Cómo añadirlos en Blogger?

Paso 1: Añadiendo los estilos:

En ''Diseño | Edición HTML'' marcamos ''Expandir plantillas de artilugios''. Buscaremos la siguiente línea:

]]></b:skin>

Arriba de esta, pega el siguiente código:

#banners {
margin-bottom:20px;
padding-left:10px;
}

.banner1 {-webkit-transition:  -webkit-transform .15s linear;
margin-left:20px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform:  rotate(-12deg);
-moz-transform: rotate(-12deg);
}
.banner1:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}
.banner2 {-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform:  rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.banner2:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}
.banner3 {-webkit-transition:  -webkit-transform .15s linear;
margin-left:20px;
margin-bottom:20px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform:  rotate(+12deg);
-moz-transform: rotate(+12deg);
}
.banner3:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}

.banner4 {-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform:  rotate(-12deg);
-moz-transform: rotate(-12deg);
}
.banner4:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}

Paso 2: Añadiendo los banners:

Ahora busca la siguiente sección:

<div id='sidebar-wrapper'>

Arriba de esta, pega el siguiente código:

<div id='banners'>
<a href="URL1" target="_blank">
<img class="banner1" src="http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" width="105" border="0" height="105"></img></a>

<a href="URL2" target="_blank">
<img class="banner2" src="http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" width="125" border="0" height="125"></img></a>

<a href="URL3" target="_blank">
<img class="banner3" src="http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" width="70" border="0" height="70"></img></a>

<a href="URL4" target="_blank">
<img class="banner4" src="http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" width="110" border="0" height="110"></img></a>     
</div>

Guarda los cambios y listo:

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.

Agregar banners de 125x125 en la sidebar Blogger

En el post anterior comentaba la importancia de enlazarse en un blog, ya que servia como un plus para obtener unas visitas extras, pero también es importante que agregues algunos blogs a tu sidebar.

Con este método podrás crear una sección en tu sidebar con algunos banners en los que podrás enlazar tu mismo otros blogs a ella.

-Primero, vamos a Diseño, Edición de HTML y buscas:

 ]]></b:skin>

-Justo antes de esta línea pegas el siguiente código:

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

 Ahora guardamos la plantilla.

Luego vamos a Diseño, Elementos de la página y creamos un Gadget HTML/Javascript con el siguiente código:

<div class="ads">
<a href="URL del enlace"><img src="URL de la imagen"/></a>
<a href="URL del enlace"><img src="URL de la imagen"/></a>
<a href="URL del enlace"><img src="URL de la imagen"/></a>
<a href="URL del enlace"><img src="URL de la imagen"/></a>
</div>

Cambias las URL por las correspondientes.

Si consideras que los gadgets están muy a la izquierda modificas esto en el código de la plantilla  
margin-left:5px;
Puedes también aumentar o disminuir el espacio de los banners con esto :
padding: 4px


Bueno eso es todo, espero que les haya servido, y saludos a todos.

.

Gadget ''Enlázanos'' en Blogger

Crear un botón ''Enlázanos'' es muy útil ya que permite que los otros blogs agreguen un banner o un enlace de tu blog al suyo, lo cual nos beneficia enormemente ya que puedes obtener algunas visitas extras. Puedes ver un ejemplo de este gadget aquí:

<a href="http://ayuda-bloggers.blogspot.com" target="_blank" title="Ayuda Bloggers"><img border="0" alt="Blogs y Descargas" src="http://3.bp.blogspot.com/-FvtK7j-cxUo/TZxvTabSR_I/AAAAAAAAApM/pNPvo9at6Yk/s1600/mibanner.png"/></a><br /><br /> <a href="http://ayuda-bloggers.blogspot.com" target="_blank">Ayuda Bloggers</a>

 Primero, debemos crear un Gadget HTML, en el cual pegar el siguiente código:

<a href="URLBLOG"><img src="URL-IMAGEN" title="EL NOMBRE DE TU BLOG"/></a>
<textarea rows="3" cols="20" onclick="this.select();"><a href="URLBLOG" target="_blank" title="NOMBRE DE TU BLOG"><img border="0" alt="NOMBRE DE TU BLOG" src="URL-IMAGEN"/></

a><br />
<a href="URLBLOG" target="_blank">NOMBRE DE TU BLOG</a></textarea>

-''URLBLOG'' deberás reemplazarlo por la URL de tu blog
-''NOMBRE DE TU BLOG'' reemplazalo por el nombre de tu blog.
-''URL-IMAGEN'' es la URL de la imágen (banner).


Eso es todo, si desean consultar o si tienen dudas pueden comentar, saludos.


.

Crea tu banner de 125x125

Construir un banner es algo importante al momento de querer enlazar tu blog en otros lados, esto es muy útil para aumentar las visitas en blogs ya que otros sitios sirven como referencia a tus blogs, por lo que al publicitar tu sitio en otro más popular, éste recibe muchas más visitas que al no tener referencias.

Free125Cards es una web que permite crear un banner de 125x125 píxeles, contiene muchas plantillas y es muy fácil de usar. Esto es muy útil ya que no necesitas conocimientos avanzados para crear un Banner de carácter semiprofesional, dependiendo de tus habilidades y gustos puedes crear un banner bastante vistoso.

Crea tu banner


.