4 Banners horizontales con CSS3

Hoy en día tener algo de publicidad en nuestro blog mediante banners puede generarte un poco más de ganancias de lo que ganas habitualmente con Adsense, ya que si tienes un blog que tenga bastantes visitas, puedes ofrecer un espacio disponible para que otros bloggers puedan anunciar su blog en el tuyo, haciendo que te paguen una suma razonable.

"BANNER CONTEX"

Los códigos CSS pueden lograr cosas extraordinarias como lo hizo con este multibanner hirozontal, que primeramente muestra una imágen de 652x157, al pasar el curso se despliega y se muestran 4 banners de 125x125.

"Banner Context" creado por Z+Kreations.

Demostración

Ahora para agregarlo en nuestro blog, nos vamos a Plantilla, Editar HTML y adentro presionamos CTRL+F y buscamos:

 ]]></b:skin>

Y antes pegamos el siguiente código CSS:

 .banners-pl {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 14px 2px -10px #CCCCCC;
    margin-bottom: 30px;
    padding: 8px;
    position: relative;
    width: 652px;
    z-index: 15;
}

.corte-img {
    cursor: pointer;
    height: 167px;
    overflow: hidden;
    position: relative;
}

.corte-img > img {
    -moz-transition: all 500ms;
    -webkit-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
    position: absolute;
    z-index: 50;
    opacity: 1;
    left: 0;
}

.banners-pl:hover .corte-img > img {
    opacity: 0;
    margin-top: -167px;
}

.conten-pl-home {
    position: absolute;
    top: 0;
    z-index: 10;
}

.conten-pl-home a {
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 2px 0 #333333 inset;
    display: block;
    float: left;
    margin: 13px;
    padding: 6px;
    position: relative;
    text-decoration: none;
    width: 125px;
    height: 125px;
    -moz-transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.conten-pl-home a:hover {
    background: #07aaee;
}

.banners-pl .conten-pl-home a strong {
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    font-weight: normal;
    right: -20px;
    padding: 3px 6px;
    position: absolute;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
    top: 0;
    z-index: 9999;
}

.banners-pl .conten-pl-home a strong {
    opacity:0;
    -webkit-transition-property: opacity, top;
    -webkit-transition-duration: 500ms;
    -moz-transition-property: opacity, top;
    -moz-transition-duration: 500ms;
    -o-transition-property: opacity, top;
    -o-transition-duration: 500ms;
    transition-property: opacity, top;
    transition-duration: 500ms;
}

.conten-pl-home  a:hover strong {
    opacity:1;
    top: 120px;
}

Ahora solo nos queda Guardar la Plantilla, y dirigirnos a Diseño, Añadir Gadget, HTML/Javascript, y en el cuadro pegamos:

 <div class="banners-pl">
<div style="position:relative">
<div class="corte-img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhucrbo_36OpmUBSuGmkQg4oZ29_GWW1hah2IJyvA3QXl4BNPGIJeY2LLPtB2bGdeMYdsLDjtWs1bN451oeEkoSJim3HozmSGSL5uFolhddz6HCpTHoi-hSZIuX1F4Ko6QVLpFRu8dLgwH1/s1600/652x167.jpg" />
</div>
<div class="conten-pl-home">
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUSebTr3-Pa6UXGhJMVBzXxTL4plMtLbvk221sWuHZ6hirLT-skwr806V2Y-PC6c_Gbf-KC8u5a9Xcc-MCjNA_Ngq5XrdtYCiP_qsq54WBFoaUHwLXKDt4sHf0fMvZ9ZsmgDoV4oZpDTIa/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>Nombre imagen</strong>
</a>
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUSebTr3-Pa6UXGhJMVBzXxTL4plMtLbvk221sWuHZ6hirLT-skwr806V2Y-PC6c_Gbf-KC8u5a9Xcc-MCjNA_Ngq5XrdtYCiP_qsq54WBFoaUHwLXKDt4sHf0fMvZ9ZsmgDoV4oZpDTIa/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>Nombre imagen</strong>
</a>
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUSebTr3-Pa6UXGhJMVBzXxTL4plMtLbvk221sWuHZ6hirLT-skwr806V2Y-PC6c_Gbf-KC8u5a9Xcc-MCjNA_Ngq5XrdtYCiP_qsq54WBFoaUHwLXKDt4sHf0fMvZ9ZsmgDoV4oZpDTIa/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>Nombre imagen</strong>
</a>
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUSebTr3-Pa6UXGhJMVBzXxTL4plMtLbvk221sWuHZ6hirLT-skwr806V2Y-PC6c_Gbf-KC8u5a9Xcc-MCjNA_Ngq5XrdtYCiP_qsq54WBFoaUHwLXKDt4sHf0fMvZ9ZsmgDoV4oZpDTIa/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>Nombre imagen</strong>
</a>
</div>
</div></div>

Ten en cuenta que...

• Lo que está enazules la imágen de 652x157 que se mostrará antes de pasar el cursor.

• Lo resaltado enverdeson las imágenes que de 125x125 que se mostrarán cuando el la imagen de 625x157 se despliegue.

• Lo pintado enrojodeberás reemplazar por una URL.

• Por último, lo resaltado ennaranjaes el texto que se mostrará al pasar el cursor sobre las imágenes de 125x125.

Add Comment

 

Gadgets