Multibanner en Blogger

Por Anónimo el sábado, marzo 26, 2011

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 == "item"'>
CODIGO-PASO3</b:if>

De tal forma que quede de la siguiente forma:

<b:if cond='data:blog.pageType == "item"'>
<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.

Ir a la página principal Subir A favoritos