Cómo agregar un cuadro con sinopsis, imagen y contador

  • Autor Autor Allan Cano
  • Fecha de inicio Fecha de inicio
Allan Cano

Allan Cano

Zeta
Verificación en dos pasos activada
Buenas noches 😛anda:

Alguien sabe cómo poner esté cuadro, el cuadro contiene una sinopsis, una imagen y un contador de visualizaciones :welcoming:

sOTSLfe.png


Esté es el sitio en donde mire el cuadro, Mantenimiento

Ya mire el código fuente de la pagina pero no me sale, me da un error, y no sé si copie códigos de más o de menos, 🙂
 
eso se puede hacer con css y html
porque no le preguntas al dueño?
 
eso se puede hacer con css y html
porque no le preguntas al dueño?

Es qué es más difícil contactar al dueño, aquí en este foro saben mucho :welcoming: y me han ayudado bastante en cosas incluso más difíciles 🙂
 
Es un div y dentro tiene tablas, es fácil realizar sólo hay que sacar el css y luego armar el div class con sus tablas correspondientes para cada sección..
 
Aquí está la estructura, ya solo ponle los colores que quieras con CSS:

HTML:
<div class="table_info">
<table width="1030" border="0" cellpadding="0" cellspacing="4">
  <tbody><tr>
    <td width="770"><h1>El sorprendente hombre araña 2 Online</h1> </td>
    <td width="268" align="right">
    <div style="position:relative;">
    <div class="nube_info" style="display:none;">
<div class="title">Te Gusta esta pelicula?</div>
<div class="msg">Dále una valoración</div>
<div class="arrow"></div>
</div>
<div itemscope="" itemtype="http://schema.org/Article">
<meta itemprop="name" content="Ver Película El sorprendente hombre araña 2 Online Gratis (2014)">
<meta itemprop="url" content="http://www.yaske.to/es/pelicula/0005348/ver-the-amazing-spider-man-2-online.html">
<meta itemprop="description" content="Peter Parker lleva una vida muy ocupada, compaginando su tiempo entre su papel como Spider-Man, acabando con los malos, y en el instituto con la persona a la que quiere, Gwen. Peter no ve el momento de graduarse. No ha olvidado la promesa que le hizo al padre de Gwen de protegerla, manteniéndose lejos de ella, pero es una promesa que simplemente no puede cumplir. Las cosas cambiarán para Peter cuando aparece un nuevo villano, Electro, y un viejo amigo, Harry Osborn, regresa, al tiempo que descubre nuevas pistas sobre su pasado.">

<div id="rating_star_movie" style="padding-right:20px;">
 <div class="star_rating" title="Votaciones sobre esta pelicula">
   <ul class="star" default="98.6" style="float:none; left:auto;">
        <li class="curr" style="width: 98.6%;"></li>
       </ul>
 </div>
<div style="display: none;" itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<meta itemprop="bestRating" content="5">
<meta itemprop="ratingValue" content="4.93">
<meta itemprop="ratingCount" content="3440">
<meta itemprop="reviewCount" content="3440"></div>
    <span id="ratingValue">4.93</span> media de: <span id="reviewCount">3440</span> votos
</div>
</div>
</div>
    </td>
    </tr>
  <tr>
    <td class="subtitle"><span>Titulo original:</span> The Amazing Spider-Man 2 - <span>2014</span></td>
    <td align="right"><h3>Visto: 280 110 veces</h3></td>
    </tr>
  </tbody></table>
<script>
(function(id){
 $('#rating_star_movie .star_rating > .star').on('mousemove click', function(e){
  if (e.offsetX == undefined) e.offsetX = e.originalEvent.layerX;
  var stars = 5;
  var percent = ((e.offsetX / this.offsetWidth) * 100).toFixed(2);
   exactitud = (percent / (stars * 2)).toString().split('.');
  if (e.type == 'mousemove' && percent > 100) return false; 
  if (Number(exactitud[1]) > 0)
   exactitud = Number(exactitud[0]) + 1;
  exactitud = (exactitud / 2).toFixed(0);
  percent = (exactitud * (stars * 2)) * 2;
  var valor = (percent * ((stars * 2) / 100)) / 2;
  $(this).find('li').css('width', percent + '%');
  if (e.type == 'click'){
   $(this).attr('default', percent);
   if (valor < 3)
        valor = 3;
   $.get('http://www.yaske.to/api/rating/', { value: valor, alt: 'json', id: id, stars: 5}, function(data){
    $('#ratingValue').text(data.avg_star);
    var total = Number($('#reviewCount').text());
    $('#reviewCount').text(total + 1);
   }, 'json');
  }
 }).on('mouseout', function(){
  $(this).find('li').css('width', $(this).attr('default') + '%');
 });   
})('86cc6c835d9786a5cf9f66d66ae60ff3');
</script>
<div class="hr"></div>
<table width="1030" border="0" cellpadding="0" cellspacing="20">
  <tbody><tr>
    <td width="135" height="195" align="center" valign="top"><img src="http://www.yaske.to/upload/images/thumb3-l_1872181_d677e7ce-1399765174.jpg" width="192" height="272" style="border: 1px solid #299a0b;"></td>

    <td width="355" align="left" valign="top" class="sinopsis"><span>Sinopsis</span><div class="hr" style="margin-bottom:10px; margin-top:10px;"></div>Peter Parker lleva una vida muy ocupada, compaginando su tiempo entre su papel como Spider-Man, acabando con los malos, y en el instituto con la persona a la que quiere, Gwen. Peter no ve el momento de graduarse. No ha olvidado la promesa que le hizo al padre de Gwen de protegerla, manteniéndose lejos de ella, pero es una promesa que simplemente no puede cumplir. Las cosas cambiarán para Peter cuando aparece un nuevo villano, Electro, y un viejo amigo, Harry Osborn, regresa, al tiempo que descubre nuevas pistas sobre su pasado.</td>
    <td width="480" align="left" valign="top"><table width="474" border="0" cellpadding="0" cellspacing="4">
      <tbody><tr>
        <td width="133" align="right" valign="top">Genero : </td>
        <td width="329" align="left" valign="top"><a href="http://www.yaske.to/es/peliculas/genero/action">Accion</a><a href="http://www.yaske.to/es/peliculas/genero/adventure">Aventura</a><a href="http://www.yaske.to/es/peliculas/genero/sci_fi">ciencia Ficcion</a></td>
        </tr>
      <tr>
        <td align="right" valign="top">Directores : </td>
        <td align="left" valign="top"><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Marc+Webb&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Marc Webb</a></td>
        </tr>
      <tr>
        <td align="right" valign="top">Escritores : </td>
        <td align="left" valign="top"><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Alex+Kurtzman&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Alex Kurtzman</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Roberto+Orci&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Roberto Orci</a></td>
        </tr>
      <tr>
        <td align="right" valign="top">Reparto : </td>
        <td align="left" valign="top"><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Andrew+Garfield&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Andrew Garfield</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Emma+Stone&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Emma Stone</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Jamie+Foxx&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Jamie Foxx</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Dane+DeHaan&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Dane DeHaan</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Campbell+Scott&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Campbell Scott</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Embeth+Davidtz&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Embeth Davidtz</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Colm+Feore&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Colm Feore</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Paul+Giamatti&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Paul Giamatti</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Sally+Field&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Sally Field</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Martin+Sheen&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Martin Sheen</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Chris+Zylka&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Chris Zylka</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Denis+Leary&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Denis Leary</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Frank+Deal&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Frank Deal</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Marton+Csokas&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Marton Csokas</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Stan+Lee&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Stan Lee</a></td>
      </tr>
    </tbody></table>


    </td>
  </tr>
  </tbody></table>
</div>
 
Aquí está la estructura, ya solo ponle los colores que quieras con CSS:

HTML:
<div class="table_info">
<table width="1030" border="0" cellpadding="0" cellspacing="4">
  <tbody><tr>
    <td width="770"><h1>El sorprendente hombre araña 2 Online</h1> </td>
    <td width="268" align="right">
    <div style="position:relative;">
    <div class="nube_info" style="display:none;">
<div class="title">Te Gusta esta pelicula?</div>
<div class="msg">Dále una valoración</div>
<div class="arrow"></div>
</div>
<div itemscope="" itemtype="http://schema.org/Article">
<meta itemprop="name" content="Ver Película El sorprendente hombre araña 2 Online Gratis (2014)">
<meta itemprop="url" content="http://www.yaske.to/es/pelicula/0005348/ver-the-amazing-spider-man-2-online.html">
<meta itemprop="description" content="Peter Parker lleva una vida muy ocupada, compaginando su tiempo entre su papel como Spider-Man, acabando con los malos, y en el instituto con la persona a la que quiere, Gwen. Peter no ve el momento de graduarse. No ha olvidado la promesa que le hizo al padre de Gwen de protegerla, manteniéndose lejos de ella, pero es una promesa que simplemente no puede cumplir. Las cosas cambiarán para Peter cuando aparece un nuevo villano, Electro, y un viejo amigo, Harry Osborn, regresa, al tiempo que descubre nuevas pistas sobre su pasado.">

<div id="rating_star_movie" style="padding-right:20px;">
 <div class="star_rating" title="Votaciones sobre esta pelicula">
   <ul class="star" default="98.6" style="float:none; left:auto;">
        <li class="curr" style="width: 98.6%;"></li>
       </ul>
 </div>
<div style="display: none;" itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<meta itemprop="bestRating" content="5">
<meta itemprop="ratingValue" content="4.93">
<meta itemprop="ratingCount" content="3440">
<meta itemprop="reviewCount" content="3440"></div>
    <span id="ratingValue">4.93</span> media de: <span id="reviewCount">3440</span> votos
</div>
</div>
</div>
    </td>
    </tr>
  <tr>
    <td class="subtitle"><span>Titulo original:</span> The Amazing Spider-Man 2 - <span>2014</span></td>
    <td align="right"><h3>Visto: 280 110 veces</h3></td>
    </tr>
  </tbody></table>
<script>
(function(id){
 $('#rating_star_movie .star_rating > .star').on('mousemove click', function(e){
  if (e.offsetX == undefined) e.offsetX = e.originalEvent.layerX;
  var stars = 5;
  var percent = ((e.offsetX / this.offsetWidth) * 100).toFixed(2);
   exactitud = (percent / (stars * 2)).toString().split('.');
  if (e.type == 'mousemove' && percent > 100) return false; 
  if (Number(exactitud[1]) > 0)
   exactitud = Number(exactitud[0]) + 1;
  exactitud = (exactitud / 2).toFixed(0);
  percent = (exactitud * (stars * 2)) * 2;
  var valor = (percent * ((stars * 2) / 100)) / 2;
  $(this).find('li').css('width', percent + '%');
  if (e.type == 'click'){
   $(this).attr('default', percent);
   if (valor < 3)
        valor = 3;
   $.get('http://www.yaske.to/api/rating/', { value: valor, alt: 'json', id: id, stars: 5}, function(data){
    $('#ratingValue').text(data.avg_star);
    var total = Number($('#reviewCount').text());
    $('#reviewCount').text(total + 1);
   }, 'json');
  }
 }).on('mouseout', function(){
  $(this).find('li').css('width', $(this).attr('default') + '%');
 });   
})('86cc6c835d9786a5cf9f66d66ae60ff3');
</script>
<div class="hr"></div>
<table width="1030" border="0" cellpadding="0" cellspacing="20">
  <tbody><tr>
    <td width="135" height="195" align="center" valign="top"><img src="http://www.yaske.to/upload/images/thumb3-l_1872181_d677e7ce-1399765174.jpg" width="192" height="272" style="border: 1px solid #299a0b;"></td>

    <td width="355" align="left" valign="top" class="sinopsis"><span>Sinopsis</span><div class="hr" style="margin-bottom:10px; margin-top:10px;"></div>Peter Parker lleva una vida muy ocupada, compaginando su tiempo entre su papel como Spider-Man, acabando con los malos, y en el instituto con la persona a la que quiere, Gwen. Peter no ve el momento de graduarse. No ha olvidado la promesa que le hizo al padre de Gwen de protegerla, manteniéndose lejos de ella, pero es una promesa que simplemente no puede cumplir. Las cosas cambiarán para Peter cuando aparece un nuevo villano, Electro, y un viejo amigo, Harry Osborn, regresa, al tiempo que descubre nuevas pistas sobre su pasado.</td>
    <td width="480" align="left" valign="top"><table width="474" border="0" cellpadding="0" cellspacing="4">
      <tbody><tr>
        <td width="133" align="right" valign="top">Genero : </td>
        <td width="329" align="left" valign="top"><a rel="nofollow" href="http://www.yaske.to/es/peliculas/genero/action">Accion</a><a rel="nofollow" href="http://www.yaske.to/es/peliculas/genero/adventure">Aventura</a><a rel="nofollow" href="http://www.yaske.to/es/peliculas/genero/sci_fi">ciencia Ficcion</a></td>
        </tr>
      <tr>
        <td align="right" valign="top">Directores : </td>
        <td align="left" valign="top"><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Marc+Webb&button=&title=Especial%3ABuscar" target="_blank">Marc Webb</a></td>
        </tr>
      <tr>
        <td align="right" valign="top">Escritores : </td>
        <td align="left" valign="top"><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Alex+Kurtzman&button=&title=Especial%3ABuscar" target="_blank">Alex Kurtzman</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Roberto+Orci&button=&title=Especial%3ABuscar" target="_blank">Roberto Orci</a></td>
        </tr>
      <tr>
        <td align="right" valign="top">Reparto : </td>
        <td align="left" valign="top"><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Andrew+Garfield&button=&title=Especial%3ABuscar" target="_blank">Andrew Garfield</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Emma+Stone&button=&title=Especial%3ABuscar" target="_blank">Emma Stone</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Jamie+Foxx&button=&title=Especial%3ABuscar" target="_blank">Jamie Foxx</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Dane+DeHaan&button=&title=Especial%3ABuscar" target="_blank">Dane DeHaan</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Campbell+Scott&button=&title=Especial%3ABuscar" target="_blank">Campbell Scott</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Embeth+Davidtz&button=&title=Especial%3ABuscar" target="_blank">Embeth Davidtz</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Colm+Feore&button=&title=Especial%3ABuscar" target="_blank">Colm Feore</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Paul+Giamatti&button=&title=Especial%3ABuscar" target="_blank">Paul Giamatti</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Sally+Field&button=&title=Especial%3ABuscar" target="_blank">Sally Field</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Martin+Sheen&button=&title=Especial%3ABuscar" target="_blank">Martin Sheen</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Chris+Zylka&button=&title=Especial%3ABuscar" target="_blank">Chris Zylka</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Denis+Leary&button=&title=Especial%3ABuscar" target="_blank">Denis Leary</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Frank+Deal&button=&title=Especial%3ABuscar" target="_blank">Frank Deal</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Marton+Csokas&button=&title=Especial%3ABuscar" target="_blank">Marton Csokas</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Stan+Lee&button=&title=Especial%3ABuscar" target="_blank">Stan Lee</a></td>
      </tr>
    </tbody></table>


    </td>
  </tr>
  </tbody></table>
</div>

Muchas gracias amigo, quedo super bien. :welcoming:

---------- Post agregado el 15-may-2014 hora: 05:54 ----------

Es un div y dentro tiene tablas, es fácil realizar sólo hay que sacar el css y luego armar el div class con sus tablas correspondientes para cada sección..

Pues lo intentaré hacer yo mismo, aunque xcite me dio la estructura, pero lo haré para ver sí me sale. 🙂
Por cierto tu sitio se ve bastante bien. :encouragement:
 
Atrás
Arriba