Tabela CSS Personalizada Com Miniaturas de Imagens Para Vídeos
Nesta postagem compartilho com vocês este tutorial mostrando como se cria uma tabela com puro CSS.
A tabela é bem elegante como vocês podem ver...
Veja uma demonstração na tabela abaixo:A tabela é bem elegante como vocês podem ver...
Tabela Personalizada by DicasHot
.Aqui vem o nome do vídeo
Aqui coloque uma breve descrição para o seu vídeoAqui vem o nome do vídeo
Aqui coloque uma breve descrição para o seu vídeoAqui vem o nome do vídeo
Aqui coloque uma breve descrição para o seu vídeoAqui vem o nome do vídeo
Aqui coloque uma breve descrição para o seu vídeoAqui vem o nome do vídeo
Aqui coloque uma breve descrição para o seu vídeoAqui vem o nome do vídeo
Aqui coloque uma breve descrição para o seu vídeoAqui vem o nome do vídeo
Aqui coloque uma breve descrição para o seu vídeoAqui vem o nome do vídeo
Aqui coloque uma breve descrição para o seu vídeoAqui vem o nome do vídeo
Aqui coloque uma breve descrição para o seu vídeoAqui vem o nome do vídeo
Aqui coloque uma breve descrição para o seu vídeoAqui vem o nome do vídeo
Aqui coloque uma breve descrição para o seu vídeoAqui vem o nome do vídeo
Aqui coloque uma breve descrição para o seu vídeoPara colocar em seu blog/site é muito simples...
Clique em adicionar "Adicionar um Gadget" do tipo "HTML/JavaScript" e cole o seguinte código
<div class="tituloBox" id="episodios" style="background: rgb(51, 51, 51); border-top-left-radius: 5px; border-top-right-radius: 5px; color: #999999; float: left; height: 20px; line-height: 16px; margin: 0px; padding: 3px 10px 0px 5px; width: auto;"> <h2 style="font-weight: 400; margin: 0px; padding: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"> Tabela Personalizada by DicasHot</span></h2> <span style="font-family: Arial, Helvetica, sans-serif;">.</span></div> <div class="conteudoBox2" style="background: rgb(27, 27, 27); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-right-radius: 5px; border: 2px solid rgb(51, 51, 51); float: left; line-height: 16px; margin: 0px 0px 10px; padding: 0px; width: 629.390625px;"> <div itemprop="episode" itemscope="" itemtype="http://schema.org/TVEpisode" style="margin: 0px; padding: 0px;"> <div class="epsBox" style="border-bottom-color: rgb(51, 51, 51); border-bottom-style: dotted; border-bottom-width: 1px; color: #cccccc; height: 75px; margin: 0px 10px; padding: 0px;"> <div class="epsBoxImg" style="border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; float: left; height: 55px; margin: 10px 0px; padding: 0px; position: relative; width: 90px;"> <div class="tempoEps" style="background: rgba(0, 0, 0, 0.901961); border-bottom-right-radius: 2px; border-top-left-radius: 2px; bottom: 0px; color: white; margin: 0px; opacity: 0.7; padding: 3px 5px; position: absolute; right: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif;">23:39</span></div> <a href="http://dicashot.blogspot.com.br/2014/08/tabela-css-personalizada-com-miniaturas.html" style="margin: 0px; padding: 0px;" title="Code: Breaker Episódio 1Online"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Code: Breaker Episódio 1" src="http://images.alphacoders.com/135/135631.jpg" height="90" style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; height: 55px; margin: 0px; padding: 0px; width: 90px;" title="Code: Breaker Episódio 1 Online" width="120" /></span></a></div> <div class="epsBoxSobre" style="float: right; height: 55px; margin: 10px 0px 10px 10px; padding: 0px; width: 501.15625px;"> <h3 itemprop="name" style="color: #ff9966; font-weight: 400; margin: 0px; padding: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><a href="http://dicashot.blogspot.com/" target="_blank">Aqui vem o nome do vídeo</a></span></h3> <span style="font-family: Arial, Helvetica, sans-serif;">Aqui coloque uma breve descrição para o seu vídeo</span></div> </div> <div class="epsBox" style="border-bottom-color: rgb(51, 51, 51); border-bottom-style: dotted; border-bottom-width: 1px; color: #cccccc; height: 75px; margin: 0px 10px; padding: 0px;"> <div class="epsBoxImg" style="border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; float: left; height: 55px; margin: 10px 0px; padding: 0px; position: relative; width: 90px;"> <div class="tempoEps" style="background: rgba(0, 0, 0, 0.901961); border-bottom-right-radius: 2px; border-top-left-radius: 2px; bottom: 0px; color: white; margin: 0px; opacity: 0.7; padding: 3px 5px; position: absolute; right: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif;">24:00</span></div> <a href="http://dicashot.blogspot.com.br/2014/08/tabela-css-personalizada-com-miniaturas.html" style="margin: 0px; padding: 0px;" title="Code: Breaker Episódio 2Online"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Code: Breaker Episódio 2" src="http://bunkernerd.com.br/wp-content/uploads/2013/09/biju.jpg" height="90" style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; height: 55px; margin: 0px; padding: 0px; width: 90px;" title="Code: Breaker Episódio 2 Online" width="120" /></span></a></div> <div class="epsBoxSobre" style="float: right; height: 55px; margin: 10px 0px 10px 10px; padding: 0px; width: 501.15625px;"> <h3 itemprop="name" style="color: #ff9966; font-weight: 400; margin: 0px; padding: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><a href="http://dicashot.blogspot.com/" target="_blank">Aqui vem o nome do vídeo</a></span></h3> <span style="font-family: Arial, Helvetica, sans-serif;">Aqui coloque uma breve descrição para o seu vídeo</span></div> </div> <div class="epsBox" style="border-bottom-color: rgb(51, 51, 51); border-bottom-style: dotted; border-bottom-width: 1px; color: #cccccc; height: 75px; margin: 0px 10px; padding: 0px;"> <div class="epsBoxImg" style="border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; float: left; height: 55px; margin: 10px 0px; padding: 0px; position: relative; width: 90px;"> <div class="tempoEps" style="background: rgba(0, 0, 0, 0.901961); border-bottom-right-radius: 2px; border-top-left-radius: 2px; bottom: 0px; color: white; margin: 0px; opacity: 0.7; padding: 3px 5px; position: absolute; right: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif;">23:39</span></div> <a href="http://dicashot.blogspot.com.br/2014/08/tabela-css-personalizada-com-miniaturas.html" style="margin: 0px; padding: 0px;" title="Code: Breaker Episódio 3Online"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Code: Breaker Episódio 3" src="http://thumb.mais.uol.com.br/13405125-medium.jpg" height="90" style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; height: 55px; margin: 0px; padding: 0px; width: 90px;" title="Code: Breaker Episódio 3 Online" width="120" /></span></a></div> <div class="epsBoxSobre" style="float: right; height: 55px; margin: 10px 0px 10px 10px; padding: 0px; width: 501.15625px;"> <h3 itemprop="name" style="color: #ff9966; font-weight: 400; margin: 0px; padding: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><a href="http://dicashot.blogspot.com/" target="_blank">Aqui vem o nome do vídeo</a></span></h3> <span style="font-family: Arial, Helvetica, sans-serif;">Aqui coloque uma breve descrição para o seu vídeo</span></div> </div> <div class="epsBox" style="border-bottom-color: rgb(51, 51, 51); border-bottom-style: dotted; border-bottom-width: 1px; color: #cccccc; height: 75px; margin: 0px 10px; padding: 0px;"> <div class="epsBoxImg" style="border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; float: left; height: 55px; margin: 10px 0px; padding: 0px; position: relative; width: 90px;"> <div class="tempoEps" style="background: rgba(0, 0, 0, 0.901961); border-bottom-right-radius: 2px; border-top-left-radius: 2px; bottom: 0px; color: white; margin: 0px; opacity: 0.7; padding: 3px 5px; position: absolute; right: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif;">23:59</span></div> <a href="http://dicashot.blogspot.com.br/2014/08/tabela-css-personalizada-com-miniaturas.html" style="margin: 0px; padding: 0px;" title="Code: Breaker Episódio 4Online"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Code: Breaker Episódio 4" src="http://thumb.mais.uol.com.br/13420317-medium.jpg" height="90" style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; height: 55px; margin: 0px; padding: 0px; width: 90px;" title="Code: Breaker Episódio 4 Online" width="120" /></span></a></div> <div class="epsBoxSobre" style="float: right; height: 55px; margin: 10px 0px 10px 10px; padding: 0px; width: 501.15625px;"> <h3 itemprop="name" style="color: #ff9966; font-weight: 400; margin: 0px; padding: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><a href="http://dicashot.blogspot.com/" target="_blank">Aqui vem o nome do vídeo</a></span></h3> <span style="font-family: Arial, Helvetica, sans-serif;">Aqui coloque uma breve descrição para o seu vídeo</span></div> </div> <div class="epsBox" style="border-bottom-color: rgb(51, 51, 51); border-bottom-style: dotted; border-bottom-width: 1px; color: #cccccc; height: 75px; margin: 0px 10px; padding: 0px;"> <div class="epsBoxImg" style="border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; float: left; height: 55px; margin: 10px 0px; padding: 0px; position: relative; width: 90px;"> <div class="tempoEps" style="background: rgba(0, 0, 0, 0.901961); border-bottom-right-radius: 2px; border-top-left-radius: 2px; bottom: 0px; color: white; margin: 0px; opacity: 0.7; padding: 3px 5px; position: absolute; right: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif;">23:59</span></div> <a href="http://dicashot.blogspot.com.br/2014/08/tabela-css-personalizada-com-miniaturas.html" style="margin: 0px; padding: 0px;" title="Code: Breaker Episódio 5Online"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Code: Breaker Episódio 5" src="http://thumb.mais.uol.com.br/13449492-medium.jpg" height="90" style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; height: 55px; margin: 0px; padding: 0px; width: 90px;" title="Code: Breaker Episódio 5 Online" width="120" /></span></a></div> <div class="epsBoxSobre" style="float: right; height: 55px; margin: 10px 0px 10px 10px; padding: 0px; width: 501.15625px;"> <h3 itemprop="name" style="color: #ff9966; font-weight: 400; margin: 0px; padding: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><a href="http://dicashot.blogspot.com/" target="_blank">Aqui vem o nome do vídeo</a></span></h3> <span style="font-family: Arial, Helvetica, sans-serif;">Aqui coloque uma breve descrição para o seu vídeo</span></div> </div> <div class="epsBox" style="border-bottom-color: rgb(51, 51, 51); border-bottom-style: dotted; border-bottom-width: 1px; color: #cccccc; height: 75px; margin: 0px 10px; padding: 0px;"> <div class="epsBoxImg" style="border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; float: left; height: 55px; margin: 10px 0px; padding: 0px; position: relative; width: 90px;"> <div class="tempoEps" style="background: rgba(0, 0, 0, 0.901961); border-bottom-right-radius: 2px; border-top-left-radius: 2px; bottom: 0px; color: white; margin: 0px; opacity: 0.7; padding: 3px 5px; position: absolute; right: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif;">23:59</span></div> <a href="http://dicashot.blogspot.com.br/2014/08/tabela-css-personalizada-com-miniaturas.html" style="margin: 0px; padding: 0px;" title="Code: Breaker Episódio 6Online"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Code: Breaker Episódio 6" src="http://thumb.mais.uol.com.br/13466467-medium.jpg" height="90" style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; height: 55px; margin: 0px; padding: 0px; width: 90px;" title="Code: Breaker Episódio 6 Online" width="120" /></span></a></div> <div class="epsBoxSobre" style="float: right; height: 55px; margin: 10px 0px 10px 10px; padding: 0px; width: 501.15625px;"> <h3 itemprop="name" style="color: #ff9966; font-weight: 400; margin: 0px; padding: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><a href="http://dicashot.blogspot.com/" target="_blank">Aqui vem o nome do vídeo</a></span></h3> <span style="font-family: Arial, Helvetica, sans-serif;">Aqui coloque uma breve descrição para o seu vídeo</span></div> </div> <div class="epsBox" style="border-bottom-color: rgb(51, 51, 51); border-bottom-style: dotted; border-bottom-width: 1px; color: #cccccc; height: 75px; margin: 0px 10px; padding: 0px;"> <div class="epsBoxImg" style="border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; float: left; height: 55px; margin: 10px 0px; padding: 0px; position: relative; width: 90px;"> <div class="tempoEps" style="background: rgba(0, 0, 0, 0.901961); border-bottom-right-radius: 2px; border-top-left-radius: 2px; bottom: 0px; color: white; margin: 0px; opacity: 0.7; padding: 3px 5px; position: absolute; right: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif;">23:49</span></div> <a href="http://dicashot.blogspot.com.br/2014/08/tabela-css-personalizada-com-miniaturas.html" style="margin: 0px; padding: 0px;" title="Code: Breaker Episódio 7Online"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Code: Breaker Episódio 7" src="http://thumb.mais.uol.com.br/13868738-medium.jpg" height="90" style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; height: 55px; margin: 0px; padding: 0px; width: 90px;" title="Code: Breaker Episódio 7 Online" width="120" /></span></a></div> <div class="epsBoxSobre" style="float: right; height: 55px; margin: 10px 0px 10px 10px; padding: 0px; width: 501.15625px;"> <h3 itemprop="name" style="color: #ff9966; font-weight: 400; margin: 0px; padding: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><a href="http://dicashot.blogspot.com/" target="_blank">Aqui vem o nome do vídeo</a></span></h3> <span style="font-family: Arial, Helvetica, sans-serif;">Aqui coloque uma breve descrição para o seu vídeo</span></div> </div> <div class="epsBox" style="border-bottom-color: rgb(51, 51, 51); border-bottom-style: dotted; border-bottom-width: 1px; color: #cccccc; height: 75px; margin: 0px 10px; padding: 0px;"> <div class="epsBoxImg" style="border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; float: left; height: 55px; margin: 10px 0px; padding: 0px; position: relative; width: 90px;"> <div class="tempoEps" style="background: rgba(0, 0, 0, 0.901961); border-bottom-right-radius: 2px; border-top-left-radius: 2px; bottom: 0px; color: white; margin: 0px; opacity: 0.7; padding: 3px 5px; position: absolute; right: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif;">23:59</span></div> <a href="http://dicashot.blogspot.com.br/2014/08/tabela-css-personalizada-com-miniaturas.html" style="margin: 0px; padding: 0px;" title="Code: Breaker Episódio 8Online"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Code: Breaker Episódio 8" src="http://thumb.mais.uol.com.br/14121929-medium.jpg" height="90" style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; height: 55px; margin: 0px; padding: 0px; width: 90px;" title="Code: Breaker Episódio 8 Online" width="120" /></span></a></div> <div class="epsBoxSobre" style="float: right; height: 55px; margin: 10px 0px 10px 10px; padding: 0px; width: 501.15625px;"> <h3 itemprop="name" style="color: #ff9966; font-weight: 400; margin: 0px; padding: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><a href="http://dicashot.blogspot.com/" target="_blank">Aqui vem o nome do vídeo</a></span></h3> <span style="font-family: Arial, Helvetica, sans-serif;">Aqui coloque uma breve descrição para o seu vídeo</span></div> </div> <div class="epsBox" style="border-bottom-color: rgb(51, 51, 51); border-bottom-style: dotted; border-bottom-width: 1px; color: #cccccc; height: 75px; margin: 0px 10px; padding: 0px;"> <div class="epsBoxImg" style="border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; float: left; height: 55px; margin: 10px 0px; padding: 0px; position: relative; width: 90px;"> <div class="tempoEps" style="background: rgba(0, 0, 0, 0.901961); border-bottom-right-radius: 2px; border-top-left-radius: 2px; bottom: 0px; color: white; margin: 0px; opacity: 0.7; padding: 3px 5px; position: absolute; right: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif;">23:59</span></div> <a href="http://dicashot.blogspot.com.br/2014/08/tabela-css-personalizada-com-miniaturas.html" style="margin: 0px; padding: 0px;" title="Code: Breaker Episódio 9Online"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Code: Breaker Episódio 9" src="http://thumb.mais.uol.com.br/14199558-medium.jpg" height="90" style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; height: 55px; margin: 0px; padding: 0px; width: 90px;" title="Code: Breaker Episódio 9 Online" width="120" /></span></a></div> <div class="epsBoxSobre" style="float: right; height: 55px; margin: 10px 0px 10px 10px; padding: 0px; width: 501.15625px;"> <h3 itemprop="name" style="color: #ff9966; font-weight: 400; margin: 0px; padding: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><a href="http://dicashot.blogspot.com/" target="_blank">Aqui vem o nome do vídeo</a></span></h3> <span style="font-family: Arial, Helvetica, sans-serif;">Aqui coloque uma breve descrição para o seu vídeo</span></div> </div> <div class="epsBox" style="border-bottom-color: rgb(51, 51, 51); border-bottom-style: dotted; border-bottom-width: 1px; color: #cccccc; height: 75px; margin: 0px 10px; padding: 0px;"> <div class="epsBoxImg" style="border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; float: left; height: 55px; margin: 10px 0px; padding: 0px; position: relative; width: 90px;"> <div class="tempoEps" style="background: rgba(0, 0, 0, 0.901961); border-bottom-right-radius: 2px; border-top-left-radius: 2px; bottom: 0px; color: white; margin: 0px; opacity: 0.7; padding: 3px 5px; position: absolute; right: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif;">23:59</span></div> <a href="http://dicashot.blogspot.com.br/2014/08/tabela-css-personalizada-com-miniaturas.html" style="margin: 0px; padding: 0px;" title="Code: Breaker Episódio 10Online"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Code: Breaker Episódio 10" src="http://thumb.mais.uol.com.br/14217828-medium.jpg" height="90" style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; height: 55px; margin: 0px; padding: 0px; width: 90px;" title="Code: Breaker Episódio 10 Online" width="120" /></span></a></div> <div class="epsBoxSobre" style="float: right; height: 55px; margin: 10px 0px 10px 10px; padding: 0px; width: 501.15625px;"> <h3 itemprop="name" style="color: #ff9966; font-weight: 400; margin: 0px; padding: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><a href="http://dicashot.blogspot.com/" target="_blank">Aqui vem o nome do vídeo</a></span></h3> <span style="font-family: Arial, Helvetica, sans-serif;">Aqui coloque uma breve descrição para o seu vídeo</span></div> </div> <div class="epsBox" style="border-bottom-color: rgb(51, 51, 51); border-bottom-style: dotted; border-bottom-width: 1px; color: #cccccc; height: 75px; margin: 0px 10px; padding: 0px;"> <div class="epsBoxImg" style="border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; float: left; height: 55px; margin: 10px 0px; padding: 0px; position: relative; width: 90px;"> <div class="tempoEps" style="background: rgba(0, 0, 0, 0.901961); border-bottom-right-radius: 2px; border-top-left-radius: 2px; bottom: 0px; color: white; margin: 0px; opacity: 0.7; padding: 3px 5px; position: absolute; right: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif;">23:59</span></div> <a href="http://dicashot.blogspot.com.br/2014/08/tabela-css-personalizada-com-miniaturas.html" style="margin: 0px; padding: 0px;" title="Code: Breaker Episódio 11Online"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Code: Breaker Episódio 11" src="http://thumb.mais.uol.com.br/14226596-medium.jpg" height="90" style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; height: 55px; margin: 0px; padding: 0px; width: 90px;" title="Code: Breaker Episódio 11 Online" width="120" /></span></a></div> <div class="epsBoxSobre" style="float: right; height: 55px; margin: 10px 0px 10px 10px; padding: 0px; width: 501.15625px;"> <h3 itemprop="name" style="color: #ff9966; font-weight: 400; margin: 0px; padding: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><a href="http://dicashot.blogspot.com/" target="_blank">Aqui vem o nome do vídeo</a></span></h3> <span style="font-family: Arial, Helvetica, sans-serif;">Aqui coloque uma breve descrição para o seu vídeo</span></div> </div> <div class="epsBox" style="border-bottom-color: rgb(51, 51, 51); border-bottom-style: dotted; border-bottom-width: 1px; color: #cccccc; height: 75px; margin: 0px 10px; padding: 0px;"> <div class="epsBoxImg" style="border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; float: left; height: 55px; margin: 10px 0px; padding: 0px; position: relative; width: 90px;"> <div class="tempoEps" style="background: rgba(0, 0, 0, 0.901961); border-bottom-right-radius: 2px; border-top-left-radius: 2px; bottom: 0px; color: white; margin: 0px; opacity: 0.7; padding: 3px 5px; position: absolute; right: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif;">23:59</span></div> <a href="http://dicashot.blogspot.com.br/2014/08/tabela-css-personalizada-com-miniaturas.html" style="margin: 0px; padding: 0px;" title="Code: Breaker Episódio 12Online"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Code: Breaker Episódio 12" src="http://thumb.mais.uol.com.br/14233631-medium.jpg" height="90" style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; height: 55px; margin: 0px; padding: 0px; width: 90px;" title="Code: Breaker Episódio 12 Online" width="120" /></span></a></div> <div class="epsBoxSobre" style="float: right; height: 55px; margin: 10px 0px 10px 10px; padding: 0px; width: 501.15625px;"> <h3 itemprop="name" style="color: #ff9966; font-weight: 400; margin: 0px; padding: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><a href="http://dicashot.blogspot.com/" target="_blank">Aqui vem o nome do vídeo</a></span></h3> <span style="font-family: Arial, Helvetica, sans-serif;">Aqui coloque uma breve descrição para o seu vídeo</span></div> </div> <div class="epsBox" style="border-bottom-color: rgb(51, 51, 51); border-bottom-style: dotted; border-bottom-width: 1px; height: 75px; margin: 0px 10px; padding: 0px;"> <div class="epsBoxImg" style="border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; color: #cccccc; float: left; height: 55px; margin: 10px 0px; padding: 0px; position: relative; width: 90px;"> <div class="tempoEps" style="background: rgba(0, 0, 0, 0.901961); border-bottom-right-radius: 2px; border-top-left-radius: 2px; bottom: 0px; color: white; margin: 0px; opacity: 0.7; padding: 3px 5px; position: absolute; right: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif;">23:50</span></div> <a href="http://dicashot.blogspot.com.br/2014/08/tabela-css-personalizada-com-miniaturas.html" style="margin: 0px; padding: 0px;" title="Code: Breaker Episódio 13Online"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Code: Breaker Episódio 13" src="http://thumb.mais.uol.com.br/14233639-medium.jpg" height="90" style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; height: 55px; margin: 0px; padding: 0px; width: 90px;" title="Code: Breaker Episódio 13 Online" width="120" /></span></a></div> <div class="epsBoxSobre" style="float: right; height: 55px; margin: 10px 0px 10px 10px; padding: 0px; width: 501.15625px;"> <h3 itemprop="name" style="color: #ff9966; font-weight: 400; margin: 0px; padding: 0px;"> <span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><a href="http://dicashot.blogspot.com/" target="_blank">Aqui vem o nome do vídeo</a></span></h3> <div style="color: #cccccc;"> <span style="font-family: Arial, Helvetica, sans-serif;">Aqui coloque uma breve descrição para o seu vídeo </span></div> <div style="text-align: right;"> <span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: xx-small;">Tabela by<span style="color: #cccccc;"> </span><a href="http://dicashot.blogspot.com.br/2014/08/tabela-css-personalizada-com-miniaturas.html" target="_blank"><span style="color: #444444;">DicasHot</span></a></span></span></div> </div> </div> </div> </div>