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

Jhon Urbano Seguir

Gamma
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
23 Jun 2013
Mensajes
288
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
 

varial361

Gamma
Redactor
Verificado por Whatsapp
Desde
16 Mar 2012
Mensajes
233
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
 

relampago

Iota
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
28 Jun 2011
Mensajes
2.379
Me encanta, creo que voy a intentar añadirlo a mi proyecto.
Si lo consigo adaptar a wordpress te aviso :)
 

adrian

Zeta
Verificación en dos pasos activada
¡Ha verificado su Paypal!
Desde
20 Ene 2011
Mensajes
1.585
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:

Jhon Urbano

Gamma
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
23 Jun 2013
Mensajes
288
tumblr_m8aa5gabS31rpcy83.jpg

Muchas gracias ¡Está genial!

Pero como se haría para wordpress?
 

adrian

Zeta
Verificación en dos pasos activada
¡Ha verificado su Paypal!
Desde
20 Ene 2011
Mensajes
1.585

Edgar Ortega

1
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
15 Ene 2012
Mensajes
973
que excelente esta esto lo implementare en mi blog :encouragement:
 

bdsg1

Delta
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Desde
8 Mar 2012
Mensajes
617
Buenisimo, me lo jalo
 
Arriba