Virada premiada do BlogBlogs

Nível: intermediário

Demorei, mas finalmente vou colocar aqui o esqueleto dos códigos CSS que utilizei ao fazer meus novos widgets de últimos leitores BlogBlogs para participar da promoção Virada Premiada.

Digo esqueleto porque, se eu colocar o código completo, com todas as cores e imagens que usei, pode ter gente preguiçosa e cara-de-pau colocando widget igual ao meu. O regulamento da promoção é muito claro quanto a cópias.

Estarão desclassificados, também, blogs que fizerem uma cópia (comprovada) do layout de um widget de outro blog.

Apesar de ter cinco blogs, só estou participando com dois widgets, nos blogs HTMHelen e Sacoleira.

O widget HTMHelen

<style type="text/css">
#bbw_readers {border:25px double #99cc00; border-left:0px; border-right:0px; padding:5px; margin:0px; font-family:trebuchet ms; color:white; width:200px; background:#000000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoTwhmz_7VXpd43e6zJPIxGlMsdNeBfqJHwob5ejemaZHrsaKPLnkc9V6YSYKCryDdJ1l8JTFlCRF-x4XU7s0THAlZxAa0r4mLBELq166O3EOU9Tip2BLmG8ayyvhcuZnTAcBeByYZ6yV_/s400/bg.jpg') repeat fixed;}
#bbw_readers a {color:?????; text-decoration:?????; cursor:?????;}
#bbw_readers a:link {color:?????;}
#bbw_readers a:hover {color:?????; text-decoration:?????;}
#bbw_readers a:active {color:?????; text-decoration:?????;}
.bbw_rank {font-size:?????; text-align:?????; margin-top:?????; padding-left:?????;}
.bbw_subtitle {font-size:?????; text-align:?????; margin-bottom:?????; padding-right:?????;}
.bbw_control {font-size:?????; text-align:?????;}
.bbw_control img {display:?????;}
#bbw_readers img {border:?????; border-right:?????; border-bottom:?????; padding:?????; margin:?????;}
#bbw_readers .bbw_icons img {border:?????; margin:?????;}
#bbw_readers .bbw_title img {border:?????; margin:?????;}
.bbw_subtitle img, .bbw_buttons img, .bbw_footer img {border:?????;}
</style> <center> <script src="http://embed.blogblogs.com.br/embed/readers?blog_id=span class='destaq'>XXXXXX&layout=GS&style=0&n=79&img=b" type="text/javascript"></script> </center>

O widget Sacoleira

<style type="text/css">
#bbw_readers {background:?????; border:?????; border-right-width:?????; border-left-width:?????; border-bottom-color:?????; padding:?????; padding-top:?????; margin:?????; margin-top:?????; font-family:?????; font-size:?????; color:?????; width:?????; text-align:?????;}
#bbw_readers a {color:?????; text-decoration:?????;}
#bbw_readers .bbw_rank a, #bbw_readers .bbw_rank a:link, #bbw_readers .bbw_rank a:active {color:?????;}
#bbw_readers .bbw_rank a strong {color:?????; border:?????; padding:?????; background:?????;}
#bbw_readers .bbw_rank a:hover strong {color:?????;}
#bbw_readers .bbw_subtitle a, #bbw_readers .bbw_rank a, #bbw_readers .bbw_control a {cursor:?????;}
#bbw_readers a:link {color:?????;}
#bbw_readers a:hover, #bbw_readers .bbw_rank a:hover {color:?????; text-decoration:?????;}
#bbw_readers a:active {text-decoration:?????;}
#bbw_readers a img, #bbw_readers a:link img, #bbw_readers a:hover img, #bbw_readers a:active img {border:?????;}
#bbw_readers .bbw_title {display:?????; background:?????; margin:?????; }
#bbw_readers .bbw_icons {display:?????; text-align:?????; background:?????; margin:?????; }
#bbw_readers .bbw_rank {font-size:?????; text-align:?????; display:?????; margin-toP:?????; margin-left:?????;}
#bbw_readers .bbw_subtitle {font-size:?????; text-align:?????; margin-toP:10px; margin-bottom:?????;}
#bbw_readers .bbw_control {font-size:?????; text-align:?????; margin-bottom:?????;}
#bbw_readers .bbw_control img {display:?????;}
#bbw_readers a img.bbw_avatar {margin:?????; cursor:?????; float:?????; Position:?????; border:?????; border-color:????? ????? ????? ?????;}
#bbw_readers .bbw_icons img {cursor:?????;}
#bbw_readers .bbw_title img {text-align:?????; padding-left:?????;}
#bbw_readers .bbw_footer {text-align:?????; clear:?????;}
#bbw_readers .bbw_subtitle img, .bbw_buttons img {border:?????;}
</style>
<center><script src="http://embed.blogblogs.com.br/embed/readers?blog_id=XXXXXX&layout=GS&style=0&n=55&img=w" type="text/javascript"></script> </center>

Onde está escrito ????? você define os valores desejados para cada um dos atributos. O script do widget do seu blog você pega na página blogblogs.com.br/meu-blogblogs/ferramentas/widget/ultimos-leitores.

Vale lembrar que as inscrições são até o dia 30 de janeiro.