Cómo colocar banner en miniaturas de imágenes en Wordpress

Streamlife · 25 Nov 2014

Muy buenas noches, estoy armando un proyecto de peliculas con el wordpress y necesito desesperadamente a quien peuda darme una mano con el siguiente problema,

Nesecito colocar sobre las minuaturas de las imagenes dos baners ( como se muestra en la siguiente foto )

http://i.imgur.com/qqBa33i.png

Esto es sacado de la pagina de
VER PELICULAS ONLINE FLV EN 720P LATINO Y SUBTITULADA

Fijandome en el codigo logre Recopilar esto

Insertar CODE, HTML o PHP:

`/*///////////////////////////////////////*/
/* ITEM MOVIES */
/*///////////////////////////////////////*/

#mitems {
list-style: none;
margin: 0;
padding: 0;
}
#mitems .item-movies {
position: relative;
margin-right: 15px;
width: 140px;
height: 336px;
padding-left: 0px;
margin: 0px;
display: inline-block;
margin-bottom: 15px;
margin-left: 15px;
}
#mitems .image-block {
width: 140px;
height: 200px;
display: block;
border: 1px solid #333;
background-color: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-border-radius: 5px;
position: relative;
-webkit-box-shadow: 0px 0px 6px #fff;
-moz-box-shadow: 0px 0px 6px #fff;
box-shadow: 0px 0px 6px #fff;
}

#mitems .image-block > img {
width: 131px;
height: 191px;
border: 0;
padding: 3px;
border: 1px #222 solid;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/*
opacity:0.85;
filter:alpha(opacity=85);
*/
}

#mitems .item-movies .bottombox {
width: 148px;
height: 117px;
background: url(http://2.bp.blogspot.com/-adsKSBLH630/UVO0PmIc12I/AAAAAAAAAhE/GwZhUpjt-94/s1600/box_item.png) center no-repeat;
margin: 0 0 0 0;
padding: 23px 0 0 0;
position: relative;
}
#mitems .item-movies .bottombox li {
list-style-type: none;
padding: 2px 0 2px 0;
margin: 0;
}
#mitems .item-movies .bottombox li:nth-child(1) {
text-align: center;
font-size: 13px;
margin: 5px 10px 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: #f2f1f1;
}
#mitems .item-movies .bottombox li:nth-child(1) a {
color: #f2f1f1;
text-decoration: none;
}
#mitems .item-movies .bottombox li:nth-child(1) a:hover {
color: #f2f1f1;
text-decoration: underline;
}
#mitems .item-movies .bottombox li:nth-child(2) {
color: #60c5f8;
text-align: center;
font-size: 11px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin: 0 10px 5px;
}
#mitems .item-movies .bottombox li:nth-child(3) {
text-align: center;
}
#mitems .item-movies .bottombox li:nth-child(3) img {
line-height: 0.1em;
margin-top: 2px;
}
#mitems .item-movies .bottombox li:nth-child(4) {
text-align: center;
padding-top: 6px;
}
#mitems .item-movies > .view {
position: absolute;
top: 180px;
right: 4px;
font-size: 12px;
text-align: center;
height: 0px;
width: 85px;
border-bottom: 18px solid #282828;
border-left: 25px solid transparent;
color: #f1f1f1;
}
#mitems .item-movies > .view > span {
margin-right: 3px;
line-height: 1.7em;
}
#mitems .item-movies > .quality {

position: absolute;
top: 3px;
right: 3px;
width: auto;
height: 18px;
background-color: #fff;
font-weight: bold;
z-index: 1;
padding-left: 5px;
padding-right: 5px;
color: #f1f1f1;
font-size: 12px;
line-height: 1.5em;
border-bottom: 1px solid #333;
border-left: 1px solid #333;
-moz-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#mitems .item-movies > .trailer a {
color: #f1f1f1;
display: block;
text-decoration: none;
}
#mitems .item-movies > .trailer > span {
margin-right: 3px;
line-height: 1.7em;
position: absolute;
top: -1.7em;
left: 0px;
width: 100%;
}

#mitems .item-movies.c1 .image-block, #mitems .item-movies.c2 .image-block {
-webkit-box-shadow: 0px 0px 5px 4px #f81c16;
-moz-box-shadow: 0px 0px 5px 4px #f81c16;
box-shadow: 0px 0px 5px 4px #f81c16;
/*border:#f81c16;*/
background: #f81c16; /* Old browsers */
background: -moz-linear-gradient(top, #f81c16 0%, #282828 57%, #282828 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f81c16), color-stop(57%,#282828), color-stop(99%,#282828)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f81c16 0%,#282828 57%,#282828 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f81c16 0%,#282828 57%,#282828 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f81c16 0%,#282828 57%,#282828 99%); /* IE10+ */
background: linear-gradient(to bottom, #f81c16 0%,#282828 57%,#282828 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f81c16', endColorstr='#282828',GradientType=0 ); /* IE6-9 */
}
#mitems .item-movies.c1 > .quality, #mitems .item-movies.c2 > .quality {
background: #f81c16;
color: #f1f1f1
}
#mitems .item-movies.c3 .image-block {
-webkit-box-shadow: 0px 0px 5px 4px #db6506;
-moz-box-shadow: 0px 0px 5px 4px #db6506;
box-shadow: 0px 0px 5px 4px #db6506;
/*border:#db6506;*/
background: #ff7400; /* Old browsers */
background: -moz-linear-gradient(top, #ff7400 0%, #282828 57%, #282828 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff7400), color-stop(57%,#282828), color-stop(99%,#282828)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff7400 0%,#282828 57%,#282828 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff7400 0%,#282828 57%,#282828 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff7400 0%,#282828 57%,#282828 99%); /* IE10+ */
background: linear-gradient(to bottom, #ff7400 0%,#282828 57%,#282828 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7400', endColorstr='#282828',GradientType=0 ); /* IE6-9 */
}
#mitems .item-movies.c3 .quality {
background-color: #ff7400;
color: #111
}
#mitems .item-movies.c4 .image-block, #mitems .item-movies.c5 .image-block {
-webkit-box-shadow: 0px 0px 5px 4px #22a309;
-moz-box-shadow: 0px 0px 5px 4px #22a309;
box-shadow: 0px 0px 5px 4px #22a309;
/*border:#22a309;*/
background: #22a309; /* Old browsers */
background: -moz-linear-gradient(top, #22a309 0%, #282828 57%, #282828 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#22a309), color-stop(57%,#282828), color-stop(99%,#282828)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #22a309 0%,#282828 57%,#282828 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #22a309 0%,#282828 57%,#282828 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #22a309 0%,#282828 57%,#282828 99%); /* IE10+ */
background: linear-gradient(to bottom, #22a309 0%,#282828 57%,#282828 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22a309', endColorstr='#282828',GradientType=0 ); /* IE6-9 */
}
#mitems .item-movies.c4 .quality, #mitems .item-movies.c5 .quality {
background-color: #22a309;
color: #f1f1f1
}
#mitems .item-movies.c6 .image-block {
-webkit-box-shadow: 0px 0px 5px 4px #006699;
-moz-box-shadow: 0px 0px 5px 4px #006699;
box-shadow: 0px 0px 5px 4px #006699;
/*border:#006699;*/
background: #006699; /* Old browsers */
background: -moz-linear-gradient(top, #006699 0%, #282828 57%, #282828 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#006699), color-stop(57%,#282828), color-stop(99%,#282828)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #006699 0%,#282828 57%,#282828 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #006699 0%,#282828 57%,#282828 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #006699 0%,#282828 57%,#282828 99%); /* IE10+ */
background: linear-gradient(to bottom, #006699 0%,#282828 57%,#282828 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006699', endColorstr='#282828',GradientType=0 ); /* IE6-9 */
}
#mitems .item-movies.c6 .quality {
background-color: #006699;
color: #f1f1f1
}
#mitems .item-movies.c7 .image-block, #mitems .item-movies.c8 .image-block {
-webkit-box-shadow: 0px 0px 5px 4px #d89419;
-moz-box-shadow: 0px 0px 5px 4px #d89419;
box-shadow: 0px 0px 5px 4px #d89419;
/*border:#d89419;*/
background: #d89419; /* Old browsers */
background: -moz-linear-gradient(top, #d89419 0%, #282828 57%, #282828 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d89419), color-stop(57%,#282828), color-stop(99%,#282828)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d89419 0%,#282828 57%,#282828 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d89419 0%,#282828 57%,#282828 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d89419 0%,#282828 57%,#282828 99%); /* IE10+ */
background: linear-gradient(to bottom, #d89419 0%,#282828 57%,#282828 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d89419', endColorstr='#282828',GradientType=0 ); /* IE6-9 */
}
#mitems .item-movies.c7 .quality, #mitems .item-movies.c8 .quality {
background-color: #d89419;
color: #111
}

Me pude bajar un Scrip Que contiene Lo que necesito pero es para Bloger no para wordpress, es el Clon de la pagina de yaske y lo unico unico qu enecesito de alli es como poner en las miniaturas esas dos imagenes ( no quiero clonar el sitio ni nada )

Bueno espero que me puedan brindar una mano, si necesitan alguna info mas me la solicitan estoy online las 24hs,

Desde ya muchas gracias
Cordiales Saludos.

Mi pagina

Las Mejores Descargas De la Web - Descargas De: Películas/Series/Animaciones/Musica

Mi Foro

Vsk Gaming - Portal

SnakeNet · 26 Nov 2014

Solo es un div y css debes adaptarlo e ir jugando no te va a servir el mismo solo el css de la forma. ya que lo demás lo tenéis diferente.

garedat · 26 Nov 2014

Esto te puede servir css - How do I position one image on top of another in HTML? - Stack Overflow
😱nthego:

Cómo colocar banner en miniaturas de imágenes en Wordpress

Streamlife

SnakeNet

garedat

Temas similares