26 Fevereiro 2008 3 Comentários

Tudo o que escrevi foi para chegar aqui, neste ponto, porque senti necessidade de compartilhar este conhecimento que estava em falta, meu maior problema ao começar o Blogblogs era personalizar o widget com as cores que utilizo no meu blog.

Para mim que conhece um pouco de linguagens web, não foi díficil, mas demorado, porque o processo é parecido com engenharia reversa, você precisa desmistificar o código javascript misturado com css e procurar os nomes e entender quais classes e identificadores da CSS que mudam e dão forma ao widget. E infelizmente isso não encontrei isso em nem um outro site nem no próprio Blogblogs.

Mas agora seus problemas acabaram! Você poderá personalizar seu widget como quiser, chega de verde! Eu nem sou palmeirense! risos

Após colar o código do widget no seu blog, agora é só colar também o seguinte CSS antes do código do Blogblogs no seu site.

Código do 1º exemplo

<style type=”text/css”>
#bbw_readers, #bbw_readers *, #bbw_readers div, #bbw_readers a, #bbw_readers a:hover {
margin:0px; padding:0px; border:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px; font-weight: normal;
text-align: left; color: #004D66; line-height:1em; }

#bbw_readers {
background-color:#F1F5F8;
width:169px;
color:#fff;
padding:2px;
text-align:center; }

#bbw_readers * a, #bbw_readers * a:hover {text-decoration: none; border:0; font-weight: normal; color: #fff; }

#bbw_readers .bbw_title { background:i#F1F5F8; text-align: center; padding:0; font-weight:bold; height:30px; }

#bbw_readers .bbw_icons { background-color:#9AB9CB; padding:0px; font-size:1px; height:26px;
margin-top:2px; margin-bottom: 2px; text-align:center;
/* background-image:url(http://assets4.blogblogs.com.br/public/bb/embed/readers/menubg.jpg);*/
background:#9AB9CB; }

#bbw_readers .bbw_rank { background-color:#BACAD9; padding:2px;
margin-bottom:2px; text-align:center;
/* background-image:url(http://assets4.blogblogs.com.br/public/bb/embed/readers/menubg.jpg);*/
background:#799CBA;
}

#bbw_readers .bbw_rank strong { font-weight: bold; }

#bbw_readers .bbw_entry { padding:2px 0 1px 2px; }

#bbw_readers .bbw_entry:hover { padding:2px 0 1px 2px;
background-color:#004D66; }

#bbw_readers .bbw_entry2 {
padding:2px 0 1px 2px; background-color:#DCE6ED;
/* background-image:url(http://assets4.blogblogs.com.br/public/bb/embed/readers/menubg.jpg);*/
background:#799CBA }

#bbw_readers .bbw_entry2:hover {
padding:2px 0 1px 2px; background-color:#32CDCD;
}

#bbw_readers .bbw_entry a, #bbw_readers .bbw_entry2 a { text-decoration: none; }

#bbw_readers .bbw_entry a:hover, #bbw_readers .bbw_entry2 a:hover { text-decoration: none; color:#9AB9CB; }

#bbw_readers .bbw_avatar {
height:24px; width:24px; border:0px; }

#bbw_readers .bbw_subtitle {
text-align: center; font-size: 10px; background-color:#004D66; padding:2px; }

#bbw_readers .bbw_control { text-align: center; font-size: 10px; background-color:#DCE6ED; padding:2px; margin-top:2px; }

#bbw_readers .bbw_footer { text-align: center; font-size: 10px; background-color:#004D66; padding:1px;}

#bbw_readers .bbw_control a, #bbw_readers .bbw_footer a, #bbw_readers .bbw_rank a {
font-size: 10px; font-weight: bold;}

#bbw_readers .bbw_control a:hover, #bbw_readers .bbw_footer a:hover, #bbw_readers .bbw_rank a:hover {
font-size: 10px; color:#32CDCD; }

#bbw_footer {background-color:004D66;}
</style>

Depois de colar o código você muda conforme sua preferência

Qualquer problema ou dificudade poste um comentário que terei maior prazer de responde-lo.