Incluir imágenes en pestañas de un blog en Blogger

iori1700 · 25 Jul 2014

Hola amigos como estan les cuento que estoy armando un blog y quisiera saber como se hace para poner imágenes por pestañas.
Me refiero a esto:

Espero que me puedan ayudar.
Saludos

ricardo23 · 25 Jul 2014

quieres imágenes por pestañas o una barra de navegación por páginas? porque más parece lo segundo .-.

iori1700 · 25 Jul 2014

hola ricardo quiero lo primero

imágenes por pestañas, podrías decirme como se hace?

LuisNara · 25 Jul 2014

Me uno a la pregunta, por si alguien sabe

ricardo23 · 25 Jul 2014

Haré uno, vale? Demoraré un poco xD

iori1700 dijo:
hola ricardo quiero lo primero
imágenes por pestañas, podrías decirme como se hace?

LuisNara dijo:
Me uno a la pregunta, por si alguien sabe

iori1700 · 25 Jul 2014

ricardo23 dijo:
Haré uno, vale? Demoraré un poco xD

Genial ricardo, a la espera entonces

Gracias

ricardo23 · 25 Jul 2014

Bien, este es el código :v ... ponlo donde quieras xD

HTML:

<style>
#contenedor {
width: 560px;  /* Ancho del contenedor */
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#contenedor input {
height: 32px;
visibility: hidden;
}
#contenedor label {
border: 1px solid #c3c3c3;
float: left;
cursor: pointer;
font-size: 15px;  /* Tamaño del texto de las pestañas */
line-height: 30px;
height: 30px;
padding: 0 15px;
display: block;
color: #fff;  /* Color del texto de las pestañas */
text-align: center;
border-radius: 10px;
background: #000;  /* Fondo de las pestañas */
margin-right: 5px;
margin-bottom:100px;
}
#contenedor input:hover + label {
background: #ddd;  /* Fondo de las pestañas al pasar el cursor por encima */
color: #000;  /* Color del texto de las pestañas al pasar el cursor por encima */
}
#contenedor input:checked + label {
background: #444;  /* Fondo de las pestañas al presionar */
color: #fff; /* Color de las pestañas al presionar */
z-index: 6;
line-height: 30px;
height: 30px;
position: relative;
-webkit-transition: .1s;
-moz-transition: .1s;
-o-transition: .1s;
-ms-transition: .1s;
}
.content img{
border: 1px solid #c3c3c3;
min-width:500px;
max-width:500px;
min-height:350px;
max-height:350px;
}
.content {
background: transarent;  /* Fondo del contenido */
width: 500px; /* Ancho del contenido */
height: 350px;  /* Alto del contenido */
padding: 30px;
z-index: 5;
border-radius: 2%;
}
.content div {
position: absolute;
z-index: -100;
opacity: 0;
transition: all linear 0.1s;
}
#contenedor input.tab-selector-1:checked ~ .content .content-1,
#contenedor input.tab-selector-2:checked ~ .content .content-2,
#contenedor input.tab-selector-3:checked ~ .content .content-3,
#contenedor input.tab-selector-4:checked ~ .content .content-4 {
    z-index: 100;
    opacity: 1;
    -webkit-transition: all ease-out 0.2s 0.1s;
-moz-transition: all ease-out 0.2s 0.1s;
-o-transition: all ease-out 0.2s 0.1s;
-ms-transition: all ease-out 0.2s 0.1s;
}
</style>
<div id="contenedor">
	<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked"/>
	<label for="tab-1" class="tab-label-1">1</label>
	<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2"/>
	<label for="tab-2" class="tab-label-2">2</label>
	<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3"/>
	<label for="tab-3" class="tab-label-3">3</label>
	<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4"/>
	<label for="tab-4" class="tab-label-4">4</label>
	<div class="content">
		<div class="content-1">
			<img height='350px' src='http://2.bp.blogspot.com/-W13SW6snwrU/Usz3i71isvI/AAAAAAAAEuw/52fjBBXR8w0/s1600/imagenes+bonitas.jpg'/>
		</div>
		<div class="content-2">
			<img src='http://www.fotos-bonitas.com/wp-content/uploads/2013/08/28997-imgenes-para-el-pin-blackberry-picture.jpg'/>
		</div>
		<div class="content-3">
			<img src='http://www.imagenestop.com/chistosas1/chistosas-bb-pin-65372.jpg'/>
		</div>
		<div class="content-4">
			<img src='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQPAQxis0--gNqO3nSJlqVPi4xo4qvcCXOPhfHAU4IgLMtuUADV'/>
		</div>
<!-- más contenido enumerado aquí abajo -->
	</div>
</div>

te quedará asi

Puedes modificar el css a tu gusto :v y aumentarle más números y contenido obviamente xd

antes de " <div class="content">"

Insertar CODE, HTML o PHP:

<input id="tab-X" type="radio" name="radio-set" class="tab-selector-X"/>
	<label for="tab-X" class="tab-label-X">X</label>

y antes de ""

Insertar CODE, HTML o PHP:

<div class="content-X">
		<img src='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQPAQxis0--gNqO3nSJlqVPi4xo4qvcCXOPhfHAU4IgLMtuUADV'/>
	</div>

Espero te sirva

PD: X es igual al número de página que quieres agregar xD

iori1700 dijo:
Genial ricardo, a la espera entonces
Gracias

LuisNara · 25 Jul 2014

ricardo23 dijo:

Bien, este es el código :v ... ponlo donde quieras xD

HTML:

<style>
#contenedor {
width: 560px;  /* Ancho del contenedor */
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#contenedor input {
height: 32px;
visibility: hidden;
}
#contenedor label {
border: 1px solid #c3c3c3;
float: left;
cursor: pointer;
font-size: 15px;  /* Tamaño del texto de las pestañas */
line-height: 30px;
height: 30px;
padding: 0 15px;
display: block;
color: #fff;  /* Color del texto de las pestañas */
text-align: center;
border-radius: 10px;
background: #000;  /* Fondo de las pestañas */
margin-right: 5px;
margin-bottom:100px;
}
#contenedor input:hover + label {
background: #ddd;  /* Fondo de las pestañas al pasar el cursor por encima */
color: #000;  /* Color del texto de las pestañas al pasar el cursor por encima */
}
#contenedor input:checked + label {
background: #444;  /* Fondo de las pestañas al presionar */
color: #fff; /* Color de las pestañas al presionar */
z-index: 6;
line-height: 30px;
height: 30px;
position: relative;
-webkit-transition: .1s;
-moz-transition: .1s;
-o-transition: .1s;
-ms-transition: .1s;
}
.content img{
border: 1px solid #c3c3c3;
min-width:500px;
max-width:500px;
min-height:350px;
max-height:350px;
}
.content {
background: transarent;  /* Fondo del contenido */
width: 500px; /* Ancho del contenido */
height: 350px;  /* Alto del contenido */
padding: 30px;
z-index: 5;
border-radius: 2%;
}
.content div {
position: absolute;
z-index: -100;
opacity: 0;
transition: all linear 0.1s;
}
#contenedor input.tab-selector-1:checked ~ .content .content-1,
#contenedor input.tab-selector-2:checked ~ .content .content-2,
#contenedor input.tab-selector-3:checked ~ .content .content-3,
#contenedor input.tab-selector-4:checked ~ .content .content-4 {
    z-index: 100;
    opacity: 1;
    -webkit-transition: all ease-out 0.2s 0.1s;
-moz-transition: all ease-out 0.2s 0.1s;
-o-transition: all ease-out 0.2s 0.1s;
-ms-transition: all ease-out 0.2s 0.1s;
}
</style>
<div id="contenedor">
	<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked"/>
	<label for="tab-1" class="tab-label-1">1</label>
	<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2"/>
	<label for="tab-2" class="tab-label-2">2</label>
	<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3"/>
	<label for="tab-3" class="tab-label-3">3</label>
	<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4"/>
	<label for="tab-4" class="tab-label-4">4</label>
	<div class="content">
		<div class="content-1">
			<img height='350px' src='http://2.bp.blogspot.com/-W13SW6snwrU/Usz3i71isvI/AAAAAAAAEuw/52fjBBXR8w0/s1600/imagenes+bonitas.jpg'/>
		</div>
		<div class="content-2">
			<img src='http://www.fotos-bonitas.com/wp-content/uploads/2013/08/28997-imgenes-para-el-pin-blackberry-picture.jpg'/>
		</div>
		<div class="content-3">
			<img src='http://www.imagenestop.com/chistosas1/chistosas-bb-pin-65372.jpg'/>
		</div>
		<div class="content-4">
			<img src='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQPAQxis0--gNqO3nSJlqVPi4xo4qvcCXOPhfHAU4IgLMtuUADV'/>
		</div>
<!-- más contenido enumerado aquí abajo -->
	</div>
</div>

te quedará asi

Ver el archivo adjunto 31556

Puedes modificar el css a tu gusto :v y aumentarle más números y contenido obviamente xd

antes de " <div class="content">"

Insertar CODE, HTML o PHP:

<input id="tab-X" type="radio" name="radio-set" class="tab-selector-X"/>
	<label for="tab-X" class="tab-label-X">X</label>

y antes de ""

Insertar CODE, HTML o PHP:

<div class="content-X">
		<img src='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQPAQxis0--gNqO3nSJlqVPi4xo4qvcCXOPhfHAU4IgLMtuUADV'/>
	</div>

Espero te sirva

PD: X es igual al número de página que quieres agregar xD

Gracias :encouragement:

ricardo23 · 25 Jul 2014

De nada

LuisNara dijo:
Gracias :encouragement:

Rawstian · 25 Jul 2014

Claro, es un contenedor de TABS, como muchos hacen con los videos cuando quieren ver un capítulo, OPCION UNO , DOS TRES y así... lo mismo pero con imágenes

parrax · 26 Jul 2014

Es esto mismo | TABS REYANIME --> PanchisWeb | Almost Identical Copies!: Tabs de ReyAnime

ricardo23 · 26 Jul 2014

Yo solo use CSS xD... ese tiene Script, creo que está más chulo :v

parrax dijo:
Es esto mismo | TABS REYANIME --> PanchisWeb | Almost Identical Copies!: Tabs de ReyAnime

Karpol · 26 Jul 2014

Muy bueno, y muy sencillo. Y lo mas importante es que no necesita scripts por lo visto. Muy bueno gracias por este aporte que de seguro me servira para un blog de mangas de anime que tengo.

Saludos y gracias por el aporte!

ricardo23 · 26 Jul 2014

Fue un gusto!

si... ya me imaginaba que para eso lo podrían usar! recuerda configurar los anchos y altos, que sean igual al tamaño original de la imagen (cada pagina del manga)

Saludos!

PD: Cualquier duda cn el codigo manda MP

Zonarutoppuden dijo:
Muy bueno, y muy sencillo. Y lo mas importante es que no necesita scripts por lo visto. Muy bueno gracias por este aporte que de seguro me servira para un blog de mangas de anime que tengo.

Saludos y gracias por el aporte!

CarlosFreshX7 · 26 Jul 2014

Gracias por el aporte.. !

DenisS · 27 Jul 2014

Valla esto es lo que se llama ser un profesional en Javascript

iori1700 · 27 Jul 2014

Muchísimas gracias amigo!!

Funciona Perfecto!

ricardo23 · 28 Jul 2014

Fue un placer haberte ayudado, a ti y amuchos

Éxitos!

iori1700 dijo:
Muchísimas gracias amigo!!
Funciona Perfecto!

- - - Actualizado - - -

Sólo use CSS DenisS xD

DenisS dijo:
Valla esto es lo que se llama ser un profesional en Javascript

- - - Actualizado - - -

De nada

CarlosFreshX7 dijo:
Gracias por el aporte.. !

Incluir imágenes en pestañas de un blog en Blogger

iori1700 Seguir

Adjuntos

ricardo23

iori1700

LuisNara

ricardo23

iori1700

ricardo23

LuisNara

ricardo23

Rawstian

parrax

ricardo23

Karpol

ricardo23

CarlosFreshX7

DenisS

iori1700

ricardo23