¿Cómo obtener el código HTML y CSS del widget de 'HOT SONGS' en metrolyrics.com?

  • Autor Autor Jhon Urbano
  • Fecha de inicio Fecha de inicio
Jhon Urbano

Jhon Urbano

Gamma
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola un saludo a todos!

(no se en que sección va esto, así que lo dejo por aquí)

Tengo una pagina de musica y recientemente vi un widget genial en esta pagina que me ha gustado, es la sección 'HOT SONGS' a un lado de la pantalla.

Quisiera saber si alguien lo puede descomponer para así obtener el Codigo HTML y CSS de esta caja?

estuve revisando en la hoja de estilos pero me perdí :sorrow: sí soy un novato
 
Hola amigo, creo que por el foro ronda un tema de cómo hacerte tu propio gadget de lo más visto, me imagino que es similar a lo que buscas. No estoy muy seguro pero creo que lo subió en usuario Clicklow
 
Me encanta, creo que voy a intentar añadirlo a mi proyecto.
Si lo consigo adaptar a wordpress te aviso 🙂
 
Bueno Jhon Urbano, esto es lo que he podido sacar:

Demo: www.diezminutos.net para Blogger
Esta igual para WordPress

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body><style>html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}

.tmb{display:block;overflow:hidden;box-shadow:1px 1px 3px rgba(0,0,0,0.25)}.tmb img{display:block;width:100%;height:auto;min-height:100%}.tmb.tmb-special-top5{width:300px;height:210px}
body{position:relative;color:#292929;font-family:proxnov-reg,arial,sans-serif;font-style:normal;font-weight:normal;text-rendering:optimizeLegibility;background:#e1e1e1 }.module{margin-bottom:40px;text-shadow:0 1px rgba(255,255,255,0.5)}.module ul{list-style:none;padding:0}.module header .more-link{position:absolute;right:0;bottom:0.5454em;margin:0;color:#8b8b8b;font-family:proxnov-bold,arial,sans-serif;font-style:normal;font-weight:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-size:0.6875em;text-transform:uppercase}.module header h3{color:#666;text-transform:uppercase}.module header h3 span{padding-bottom:4px;color:#ed195a;border-bottom:3px solid #ed195a}.module .content{margin-top:0;margin-bottom:0;font-family:proxnov-sbold,arial,sans-serif;font-style:normal;font-weight:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}.module .content a{display:block;position:relative}.module .content a.button{display:inline-block}.module .content a:hover img{opacity:0.9;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}.module .content a:hover h5{color:#0371a0}.module .content time{display:block;font-family:proxnov-bold,arial,sans-serif;font-style:normal;font-weight:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-size:0.6875em;text-transform:uppercase}.module .content img{display:block;box-shadow:1px 1px 3px rgba(0,0,0,0.25)}.module .content h5{color:#292929;font-size:0.875em}.module .content .rank{color:#ed195a}.module.hot-songs ul{margin:0;font-size:0.875em}.module.hot-songs ul li{padding:0px;width:50px;}.module.hot-songs ul li a{display:block;color:#d9d9d9;font-family:proxnov-sbold,arial,sans-serif;font-style:normal;font-weight:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}.module.hot-songs ul li a:hover{color:#fff}.module.hot-songs ul:nth-child(odd){background:rgba(255,255,255,0.05)}.module.special-top5 .content{background:#292929}.module.special-top5 .content .tmb{position:relative;box-shadow:none}.module.special-top5 .content .tmb:after{position:absolute;left:0;bottom:0;width:50%;height:54px;content:"";background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(41,41,41,0)), to(#292929));background-image:-webkit-linear-gradient(top, rgba(41,41,41,0), #292929);background-image:-moz-linear-gradient(top, rgba(41,41,41,0), #292929);background-image:-o-linear-gradient(top, rgba(41,41,41,0), #292929);background-image:linear-gradient(to bottom, rgba(41,41,41,0), #292929)}.module.special-top5 .content ul{margin:-54px 0 0 0;padding-bottom:10px;border-top-color:#141414;border-top:1px solid rgba(0,0,0,0.5)}.module.special-top5 .content ul li{padding:10px 20px;text-shadow:0 1px 0 #000;overflow:hidden;border-top-color:#3e3e3e;border-top:1px solid rgba(255,255,255,0.1);border-bottom-color:#141414;border-bottom:1px solid rgba(0,0,0,0.5)}.module.special-top5 .content ul li .rank,.module.special-top5 .content ul li .vid,.module.special-top5 .content ul li .song{float:left}.module.special-top5 .content ul li .rank{position:relative;margin-right:10px;width:40px;text-align:right;font-family:proxnov-light,arial,sans-serif;font-style:normal;font-weight:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-size:1.875em;line-height:1em}.module.special-top5 .content ul li.one .rank{color:#e61e0c}.module.special-top5 .content ul li.two .rank{color:#eb7406}.module.special-top5 .content ul li.three .rank{color:#ffbe01}.module.special-top5 .content ul li.four .rank{color:#bbc600}.module.special-top5 .content ul li.five .rank{color:#3eaf00}.module.special-top5 .content ul li .vid{margin:3px 10px 0 0;color:#fff}.module.special-top5 .content ul li .vid:hover{color:#0495d2}.module.special-top5 .content ul li .song{width:183px;color:#fff;font-family:proxnov-reg,arial,sans-serif;font-style:normal;font-weight:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-size:0.875em}.module.special-top5 .content ul li .song strong{display:block}.module.special-top5 .content ul li .song:hover{color:#0495d2}
</style><div class="module special-top5">    <header>        <h3><span>Hot</span> Songs</h3>    </header>    <div class="content">        <span class="tmb tmb-special-top5"><img src="http://userserve-ak.last.fm/serve/252/17943635/Pnk+new08.jpg" /></span>        <ul>                        <li class="one">                <span class="rank">#1</span>                    <a href="http://www.metrolyrics.com/just-give-me-a-reason-lyrics-pink.html" class="song hasvid" ;">                    <strong>Just Give Me A Reason</strong>                    Pink                </a>            </li>                        <li class="two">                <span class="rank">#2</span>                    <a href="http://www.metrolyrics.com/titanium-lyrics-david-guetta.html" class="song hasvid";">                    <strong>Titanium</strong>                    David Guetta                </a>            </li>                        <li class="three">                <span class="rank">#3</span>                    <a href="http://www.metrolyrics.com/someone-like-you-lyrics-adele.html" class="song hasvid";">                    <strong>Someone Like You</strong>                    Adele                </a>            </li>                        <li class="four">                <span class="rank">#4</span>                    <a href="http://www.metrolyrics.com/a-thousand-years-lyrics-christina-perri.html" class="song " onmousedown="ev('Hot Songs Module','Item');">                    <strong>A Thousand Years</strong>                    Christina Perri                </a>            </li>                        <li class="five">                <span class="rank">#5</span>                    <a href="http://www.metrolyrics.com/cup-song-lyrics-anna-kendrick.html" class="song " onmousedown="ev('Hot Songs Module','Item');">                    <strong>Cup Song</strong>                    Anna Kendrick                </a>            </li>                    </ul>    </div></div></body></html>
 
Última edición:
tumblr_m8aa5gabS31rpcy83.webp

Muchas gracias ¡Está genial!

Pero como se haría para wordpress?
 
Gracias! eres muy amable. Saludos!
 
Bueno Jhon Urbano, esto es lo que he podido sacar:

+1

Ni neymar lo hubiera hecho mejor.😛8:

Jolines adrian, eres de lo que no hay, con eso te digo todo.
 
que excelente esta esto lo implementare en mi blog :encouragement:
 
Buenisimo, me lo jalo
 
Atrás
Arriba