Agregar cuadro similar a imagen en mi blog

Allan Cano Seguir

Iota
Verificación en dos pasos activada
Desde
26 Feb 2014
Mensajes
2.017
Está es la imagen. y el enlace a la página quiero agregarle un cuadro similar con las opciones de siguiente capítulo.

tS6vGDX.png
 
Última edición:

CopperDeveloper

Épsilon
Programador
Desde
9 Sep 2012
Mensajes
762
El cuadro es un <div> con las características en el css:
margin: 0px;
padding: 10px 0pt 5px;
border-radius: 8px 0pt 8px 8px;
border-top: medium none;
width: 598px;
background-color: #E9EBEB;
border: 1px solid #CCCCCC;
float: left;

Eso lo podes ver haciendo click derecho -> inspeccionar elemento.
 

dogo

Zeta
Marketing
Desde
17 Ene 2014
Mensajes
1.511
Mira el código de la web y fijate que script es el que hace esta función con eso tendrás una guia.
 

Allan Cano

Iota
Verificación en dos pasos activada
Desde
26 Feb 2014
Mensajes
2.017
Mira el código de la web y fijate que script es el que hace esta función con eso tendrás una guia.

Lo que sucede es que soy muy nuevo, y no sé como hacerlo =/ me puedes enviar a un tutorial? para mirar como se hace, pues supongo que es algo complicado, pues la página quizás tenga muchos scripts y saber cual tiene esa función es difícil para mi.

---------- Post agregado el 19-mar-2014 hora: 22:18 ----------

El cuadro es un <div> con las características en el css:
margin: 0px;
padding: 10px 0pt 5px;
border-radius: 8px 0pt 8px 8px;
border-top: medium none;
width: 598px;
background-color: #E9EBEB;
border: 1px solid #CCCCCC;
float: left;

Eso lo podes ver haciendo click derecho -> inspeccionar elemento.

Donde tengo que pegar ese div, la verdad no entiendo muchas cosas, pues el la plantilla tiene muchos div's, sí conocía la función inspeccionar elemento y sí aparece lo que busco pero después no se donde pegar el código que me aparece.

Muchos saludos y muchas gracias por responder, buena respuesta el problema es que yo no sé hacerlo aún.
 

CopperDeveloper

Épsilon
Programador
Desde
9 Sep 2012
Mensajes
762
Lo que sucede es que soy muy nuevo, y no sé como hacerlo =/ me puedes enviar a un tutorial? para mirar como se hace, pues supongo que es algo complicado, pues la página quizás tenga muchos scripts y saber cual tiene esa función es difícil para mi.

---------- Post agregado el 19-mar-2014 hora: 22:18 ----------



Donde tengo que pegar ese div, la verdad no entiendo muchas cosas, pues el la plantilla tiene muchos div's, sí conocía la función inspeccionar elemento y sí aparece lo que busco pero después no se donde pegar el código que me aparece.

Muchos saludos y muchas gracias por responder, buena respuesta el problema es que yo no sé hacerlo aún.

Como te comenté antes no manejo mucho blogger, pero se que una forma de hacerlo es:
Antes del </head> pones: <style type='text/css'> .nombre-del-div{
los atributos que pegué antes
}
</style>
 

Allan Cano

Iota
Verificación en dos pasos activada
Desde
26 Feb 2014
Mensajes
2.017
Como te comenté antes no manejo mucho blogger, pero se que una forma de hacerlo es:
Antes del </head> pones: <style type='text/css'> .nombre-del-div{
los atributos que pegué antes
}
</style>

Ohh Ahora mismo probaré, y ya te aviso sí me da resultado = D

---------- Post agregado el 19-mar-2014 hora: 23:14 ----------

Como te comenté antes no manejo mucho blogger, pero se que una forma de hacerlo es:
Antes del </head> pones: <style type='text/css'> .nombre-del-div{
los atributos que pegué antes
}
</style>

No me funciona, y lo peor es que no sé que demonios estoy haciendo mal =/
 

parrax

Gamma
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
8 Nov 2012
Mensajes
170
acá te lo dejo mi amigo
la demo -->prueba amigo | Series y PelÃ*culas Online

antes de

</head> pegas esto

<style>
.videobox {
margin: 0 0 0 10px;
padding: 10px 0 15px 0;
width: 598px;
background-color: #E9EBEB;
border: 1px solid #CCCCCC;
float: left;
border-radius: 8px;
-moz-border-radius: 8px;
}
.the_video {
margin: auto;
padding: 9px;
text-align: center;
float: none;
}
.video_nav {
float: none !important;
margin: auto !important;
}
.video_nav {
margin: 0 0 0 21px;
padding: 0px;
width: 580px;
height: 51px;
float: left;
}
.btn_nav {
color: #FFFFFF;
display: inline-block;
font-family: Arial,Tahoma,Helvetica,sans-serif;
font-size: 20px;
font-weight: bold;
height: 28px;
padding: 13px 22px 10px 50px;
text-decoration: none;
width: 180px;
text-align: center;
}
.btn_nav_n {
color: #FFFFFF;
display: inline-block;
font-family: Arial,Tahoma,Helvetica,sans-serif;
font-size: 20px;
font-weight: bold;
height: 28px;
padding: 13px 56px 10px 16px;
text-decoration: none;
width: 180px;
text-align: center;
}
</style>


Y En la entrada pegas lo siguiente

<div id="videobox_content" class="videobox" style="margin: 0px; padding: 0px 0pt 5px; border-radius: 8px 0pt 8px 8px; border-top: medium none;">
<div id="the_video-1" class="the_video lgv_1">

<iframe src="http://vk.com/video_ext.php?oid=182777164&id=167780625&hash=1c6275160918dbca&hd=1" width="580" height="318" frameborder="0"></iframe>

<div class="video_nav" style="margin: 0 0 0 11px;">
<div style="display:inline-block; width:252px; height:51px; background:url(http://2.bp.blogspot.com/-D1K2cWOjYp4/UyqB6R8TXDI/AAAAAAAAW90/Ff1beP9Jq5E/s1600/before.png); float: left;">
<a rel="nofollow" rel="nofollow" class="btn_nav" href="ENLACE DE LOS EPISODIOS">Ver Episodios</a></div>

<div style="float:left;"><a href="ENLACE CAPITULO ANTERIOR"><img src="http://3.bp.blogspot.com/-8DKmjXhs-iw/UyqCFA-Zj7I/AAAAAAAAW98/B27wDuNvGTI/s1600/lista_anime.jpg" width="77" height="51" title="Volver a la lista de Capitulos" alt="Volver a la lista de Capitulos"></a></div>

<div style="display:inline-block; width:251px; height:51px; background:url(http://1.bp.blogspot.com/-E5qcOJdkRfw/UyqCQkWb1dI/AAAAAAAAW-E/Dq0s1ZGVNzM/s1600/next.png); float: right;">
<a class="btn_nav_n" href="ENLACE CAPITULO SIGUIENTE">Capitulo Siguiente</a>
</div>
</di></div></div>


el código te lo puedo transformar a un script para que quede más resumido... pero bueno con eso yo creo que basta... suerte!!!
 
Última edición:

Allan Cano

Iota
Verificación en dos pasos activada
Desde
26 Feb 2014
Mensajes
2.017
acá te lo dejo mi amigo
la demo -->prueba amigo | Series y PelÃ*culas Online

antes de

</head> pegas esto

<style>
.videobox {
margin: 0 0 0 10px;
padding: 10px 0 15px 0;
width: 598px;
background-color: #E9EBEB;
border: 1px solid #CCCCCC;
float: left;
border-radius: 8px;
-moz-border-radius: 8px;
}
.the_video {
margin: auto;
padding: 9px;
text-align: center;
float: none;
}
.video_nav {
float: none !important;
margin: auto !important;
}
.video_nav {
margin: 0 0 0 21px;
padding: 0px;
width: 580px;
height: 51px;
float: left;
}
.btn_nav {
color: #FFFFFF;
display: inline-block;
font-family: Arial,Tahoma,Helvetica,sans-serif;
font-size: 20px;
font-weight: bold;
height: 28px;
padding: 13px 22px 10px 50px;
text-decoration: none;
width: 180px;
text-align: center;
}
.btn_nav_n {
color: #FFFFFF;
display: inline-block;
font-family: Arial,Tahoma,Helvetica,sans-serif;
font-size: 20px;
font-weight: bold;
height: 28px;
padding: 13px 56px 10px 16px;
text-decoration: none;
width: 180px;
text-align: center;
}
</style>


Y En la entrada pegas lo siguiente

<div id="videobox_content" class="videobox" style="margin: 0px; padding: 0px 0pt 5px; border-radius: 8px 0pt 8px 8px; border-top: medium none;">
<div id="the_video-1" class="the_video lgv_1">

<iframe src="http://vk.com/video_ext.php?oid=182777164&id=167780625&hash=1c6275160918dbca&hd=1" width="580" height="318" frameborder="0"></iframe>

<div class="video_nav" style="margin: 0 0 0 11px;">
<div style="display:inline-block; width:252px; height:51px; background:url(http://2.bp.blogspot.com/-D1K2cWOjYp4/UyqB6R8TXDI/AAAAAAAAW90/Ff1beP9Jq5E/s1600/before.png); float: left;">
<a rel="nofollow" rel="nofollow" class="btn_nav" href="ENLACE DE LOS EPISODIOS">Ver Episodios</a></div>

<div style="float:left;"><a href="ENLACE CAPITULO ANTERIOR"><img src="http://3.bp.blogspot.com/-8DKmjXhs-iw/UyqCFA-Zj7I/AAAAAAAAW98/B27wDuNvGTI/s1600/lista_anime.jpg" width="77" height="51" title="Volver a la lista de Capitulos" alt="Volver a la lista de Capitulos"></a></div>

<div style="display:inline-block; width:251px; height:51px; background:url(http://1.bp.blogspot.com/-E5qcOJdkRfw/UyqCQkWb1dI/AAAAAAAAW-E/Dq0s1ZGVNzM/s1600/next.png); float: right;">
<a class="btn_nav_n" href="ENLACE CAPITULO SIGUIENTE">Capitulo Siguiente</a>
</div>
</di></div></div>


el código te lo puedo transformar a un script para que quede más resumido... pero bueno con eso yo creo que basta... suerte!!!

Woww Al fin me funciono y gracias a ti, Lo explicaste tan bien que sólo pegue los códigos y me dio resultado, lo usare siempre, de verdad muchas gracias, me agote buscando en google lo que tu me explicaste en un sólo comentario, ya me había dado por vencido, esté foro es grande gracias a usuarios como tu (=
Muchas gracias amigo.
 
Arriba