Dicas Blogger: HTML/CSS

Home » Categories: HTML/CSS

Mostrando postagens com marcador HTML/CSS. Mostrar todas as postagens

Como personalizar a caixa de pesquisa do Blogger

<div class="separator" style="clear: both; text-align: center;">
</div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiplgbJ0s9a7xzotJ2KxphfvlHr39DBnlyLm1W0gtR6B0fCtjIqnvvAGivBZqAGP8RWwcADkZsbxvwaIHmP9zmQQSgNl6o7xgBp3rvdXiimJ25SYfM6Df-TIsyd0wmpG0vTKtYRY_zcKuWm/s120/Search-icon.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiplgbJ0s9a7xzotJ2KxphfvlHr39DBnlyLm1W0gtR6B0fCtjIqnvvAGivBZqAGP8RWwcADkZsbxvwaIHmP9zmQQSgNl6o7xgBp3rvdXiimJ25SYfM6Df-TIsyd0wmpG0vTKtYRY_zcKuWm/s120/Search-icon.png" /></a>A caixa de pesquisa ( ou caixa de busca) é um dos recursos mais importantes em um blog. É através dela que o leitor irá procurar por outros posts mais antigos e de maior interesse dele. É muito útil também para o dono do blog encontrar seus próprios artigos. 
 
 
 
Como colocar a caixa de busca do Blogger 
 
O Blogger já disponibiliza um gadget nativo e bastante funcional. Para adicionar em seu blog, siga estes passos: 
<ol>
<li>Entre em layout</li>
<li>Clique em adicionar um gadget</li>
<li>Escolha "caixa de pesquisa" e clique no ícone "+"</li>
<li>Marque as opções que você desejar e salve</li>
</ol>
Por padrão, o título deste gadget será "pesquisar este blog". Para mudar o título, é só clicar na caixa "título" e escrever um do seu gosto. 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKzvwNJ0xGlM9dZHgzlHns9ILO8Np1I5pWsgq1Poj5wiNf63Lxp4bQVQwT_6uLIkkgZM_Z8MctxHEhuxGvA0JJnpB7_pbkS6x5HYa2wFBFOBziBGs7e8QcHUBiCFzGUMwbnnjwSAfgizDL/s550/busca-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKzvwNJ0xGlM9dZHgzlHns9ILO8Np1I5pWsgq1Poj5wiNf63Lxp4bQVQwT_6uLIkkgZM_Z8MctxHEhuxGvA0JJnpB7_pbkS6x5HYa2wFBFOBziBGs7e8QcHUBiCFzGUMwbnnjwSAfgizDL/s1600/busca-blogger.png" /></a></div>
 Como personalizar a caixa de busca do Blogger 
 
A Caixa de busca nativa do Blogger possui o seguinte modelo: 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHRP7DFWxBfUyB3aRQIhyHI0Jq1YeA-voGCIXTXD-ZyXaozJ4rBX7IGNXVsHm4orEjiV8SOH0EuL3tzG5CuCl6eGkWxFxoB6DeLTbJbPpm0jmnclxkW15Hh-YXBC0AvVDm0iz6SlPq7nat/s337/modelo-pesquisa-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHRP7DFWxBfUyB3aRQIhyHI0Jq1YeA-voGCIXTXD-ZyXaozJ4rBX7IGNXVsHm4orEjiV8SOH0EuL3tzG5CuCl6eGkWxFxoB6DeLTbJbPpm0jmnclxkW15Hh-YXBC0AvVDm0iz6SlPq7nat/s1600/modelo-pesquisa-blogger.png" /></a></div>
 
Para personalizar a caixa de pesquisa e deixá-la com um visual que combine melhor com o template do blog, será preciso incluir um código no HTML do template. 
 
Entre em "modelo" e clique em "editar HTML". Clique em qualquer lugar dentro do HTML, dê um Crtl+F com o teclado e na caixa "search" escreva (ou cole)  </b:skin>. Clique em "enter" para encontrar esta tag dentro do HTML do seu template. 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyvxBaB6BHxvIu0soiiSc_bci3ZmEZuwQniqqv8Syw66xFbevkJt0NFfGO2Xmuph6LmPcLZOmLYEgHNNqaPm9Ry860gK6YNz9_vV4X_XqWwIcZlFK8FJKhRb3_LhrWI5mR8KqwhtNQirdr/s550/procurando-tag.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyvxBaB6BHxvIu0soiiSc_bci3ZmEZuwQniqqv8Syw66xFbevkJt0NFfGO2Xmuph6LmPcLZOmLYEgHNNqaPm9Ry860gK6YNz9_vV4X_XqWwIcZlFK8FJKhRb3_LhrWI5mR8KqwhtNQirdr/s1600/procurando-tag.png" /></a></div>
Agora copie o código abaixo e cole ANTES da tag </b:skin>: 
 
<blockquote class="tr_bq">
/* BUSCA ----------------------------------------------- */ td.gsc-input input { background: #fff; /*Cor de fundo do campo de texto*/ border: 1px solid #ddd; /*Estilo e cor da borda do campo de texto*/ color: #666; /*Cor do texto do campo de texto*/ font-size: 11px; /*Tamanho do texto do campo de texto*/ height: 15px; padding: 4px; } td.gsc-input input:hover { border: 1px solid #999; /*Estilo e cor da borda quando o mouse estiver em cima do campo de texto*/ } input.gsc-search-button { padding:4px; background: #eee; /*Cor de fundo do botão*/ border: solid 1px #ddd; /*Estilo e cor da borda do botão*/ font-size: 12px; /*Tamanho do texto do botão*/ text-shadow: #fff 1px 1px 0px; } input.gsc-search-button: hover { border:1px solid #999; /*Estilo e cor da borda quando o mouse estiver em cima do botão de pesquisa*/ background:#ddd; /*Cor de fundo quando o mouse estiver em cima do botão de pesquisa*/ color:#000; /*Cor do texto quando o mouse estiver em cima do botão de pesquisa*/ }</blockquote>
As partes assinaladas em vermelho é onde aplicamos os estilos em CSS. Para mudar as cores, veja <a href="http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm" target="_blank">esta tabela de correspondência em CSS </a> 
 
Clique em "visualizar modelo" e se tudo estiver certo, clique em "salvar modelo". Este será o resultado final: 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbsllqHIX2LYbYAHNrEpi0_Bh9jAZFkgOfOZq8VOixRzg0j_CMiFfy9dn3MfqI731EPotqeLQ3l0WnrR9eBrc3VLYQo0Sl79_iPFptwpIPulowUiHwHnvfTObMyN1JihUQVscA6fEMNcWv/s355/busca-final.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbsllqHIX2LYbYAHNrEpi0_Bh9jAZFkgOfOZq8VOixRzg0j_CMiFfy9dn3MfqI731EPotqeLQ3l0WnrR9eBrc3VLYQo0Sl79_iPFptwpIPulowUiHwHnvfTObMyN1JihUQVscA6fEMNcWv/s1600/busca-final.png" /></a></div>
 
Como retirar o título da caixa de pesquisa 
 
Para não mostrar nenhum título, não basta deixar a caixa "título" em branco. É preciso fazer uma outra alteração no HTML. Clique em "ir para um widget" e procure por "custom search". 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd5U7Qb3k5WH0XOkMXztj9maJosH7l5nw7GMXUFxSAqaIvXqP_GLdU7fUTqi9v2X9bvnd_E5LggT_XhjKqjP7x3RSXJnZjqLTakSQA7fbSrhYkorlLdhgV7gdAZyoXe79wyL5e6iPn9oyO/s550/custom-search.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd5U7Qb3k5WH0XOkMXztj9maJosH7l5nw7GMXUFxSAqaIvXqP_GLdU7fUTqi9v2X9bvnd_E5LggT_XhjKqjP7x3RSXJnZjqLTakSQA7fbSrhYkorlLdhgV7gdAZyoXe79wyL5e6iPn9oyO/s1600/custom-search.png" /></a></div>
 Clique em duas setinhas para expandir o código e apague o seguinte trecho: 
<blockquote class="tr_bq">
     <b:if cond='data:title != &quot;&quot;'>       <h2 class='title'><data:title/></h2>     </b:if></blockquote>
Visualize e salve. Pronto! Sua caixa de pesquisa já está personalizada! 
 
Fonte do código CSS original: <a href="http://templateseacessorios.blogspot.com.br/2013/03/personalizar-caixa-de-pesquisa-nativa.html" target="_blank">Templates e Acessórios</a>

Como personalizar a caixa de pesquisa do Blogger

A caixa de pesquisa ( ou caixa de busca) é um dos recursos mais importantes em um blog. É através dela que o leitor irá procurar por outro...

Continue Lendo >>

09:52

Onde está o CSS no novo editor HTML do Blogger

<div style="text-align: justify;">
O novo editor HTML do Blogger tem novas funcionalidades e, principalmente, um novo visual. Mas onde estão os códigos CSS? Cadê o body, header, outer-wrapper, footer, sidebar, ect? Sumiram e não consigo encontrar onde estão para editar o meu template! </div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Fique tranquilo, como disse anteriormente, os códigos não mudaram e não sumiram. Basta apenas procurar pelas propriedades dentro do editor ou expandir a linha: <b:skin>...</b:skin>, que fica no início do código HTML, podendo alterar o número da linha conforme o template usado. No modelo a seguir, a linha respectiva é a 7, mas em outro template era a 20. Enfim, procure pela linha que mencionei. Veja na imagem abaixo:</div>
<div>
 </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj86KOUVBbuGA8LISA2nFUS_4wnCS6Sa8mSlr98ssmgfSDuN03oLmrqBSkQ-yvOZgGk51wJcrZ3D75bPwyyzvU0_1r_1TXRSjeESBWWNd9rcHvTRBiWjuCBevtya6_uRUWPLCXsyusYwpnf/s1600/Editor+CSS+blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj86KOUVBbuGA8LISA2nFUS_4wnCS6Sa8mSlr98ssmgfSDuN03oLmrqBSkQ-yvOZgGk51wJcrZ3D75bPwyyzvU0_1r_1TXRSjeESBWWNd9rcHvTRBiWjuCBevtya6_uRUWPLCXsyusYwpnf/s1600/Editor+CSS+blogger.jpg" /></a></div>
<div>
 </div>
<div style="text-align: justify;">
Observem que a numeração da linha de contagem pula de 7 para 365. Ao expandir a skin, clicando na setinha preta à frente do número, na linha com o código <b:skin>...</b:skin>, todo o seu código CSS irá aparecer. Conforme demonstrado na imagem:</div>
<div style="text-align: justify;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl5H-ujlFK9MsSigqxJuJtZzSOzR60y36_rX1nUqVz3BDj6fZsTuGk8eZDxHzejl2dSxUhyphenhyphen55DeO5THm-burqddTbyhgxdrBmxjWo_76R01G-rccub-3NxmCwdfN3jCPSwOTMoV6lemd_3/s1600/Editor+CSS+expandido.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl5H-ujlFK9MsSigqxJuJtZzSOzR60y36_rX1nUqVz3BDj6fZsTuGk8eZDxHzejl2dSxUhyphenhyphen55DeO5THm-burqddTbyhgxdrBmxjWo_76R01G-rccub-3NxmCwdfN3jCPSwOTMoV6lemd_3/s1600/Editor+CSS+expandido.jpg" /></a></div>
<div style="text-align: justify;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
Se você, caro leitor, se assustou quando não encontrou o CSS do seu blog, fique tranquilo. Nem a dama da Blogosfera, Juliana Sardinha, encontrou :P</div>

Onde está o CSS no novo editor HTML do Blogger

O novo editor HTML do Blogger tem novas funcionalidades e, principalmente, um novo visual. Mas onde estão os códigos CSS? Cadê o body, head...

Continue Lendo >>

00:03

Novidades: Saiba tudo sobre o novo editor HTML no Blogger

Nos últimos dias estava pensando se o Blogger iria lançar alguma novidade este ano, já que 2012 foi um ano repleto de novidades. E como meus presságios não estavam borbulhando à toa, ontem à noite foi liberado o novo editor HTML do Blogger, conforme informado no<a href="http://buzz.blogger.com/2013/04/improvements-to-blogger-template-html.html"> Blogger Buzz</a>. 
<div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; margin: 0px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj14XirBJDl6fpFFux2CiXUtRMaa3gqaTBJYOa-NIX5xT_aqLVOwnoy3XHr5m0dlqqzpGAOV5WVbha-MS60YyK3piywliMufMwBw-aaDRXwNbQJfl_tAwXQZcMTinGDFV19WRwZcO7YZNCj/s1600/Novo+editor+HTML+Blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj14XirBJDl6fpFFux2CiXUtRMaa3gqaTBJYOa-NIX5xT_aqLVOwnoy3XHr5m0dlqqzpGAOV5WVbha-MS60YyK3piywliMufMwBw-aaDRXwNbQJfl_tAwXQZcMTinGDFV19WRwZcO7YZNCj/s1600/Novo+editor+HTML+Blogger.jpg" /></a></div>
<div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; margin: 0px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
  </div>
<div style="text-align: justify;">
O novo editor HTML do Blogger teve a sua aparência completamente reformulada, abandonando aquela cara de editor de textos e ganhando uma característica mais profissional. Além disso, ele apresenta algumas novidades bem interessantes como:</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Numeração de linhas, destaque sintaxe e auto-identação</div>
<div style="text-align: justify;">
Esses recursos possibilitam uma leitura mais fácil do código e é muito útil para quem programa, melhorando a estética e o recuo dos códigos. Com destaque para a exibição em cores das classes no código HTML.</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Código dobrado dentro do widget</div>
<div style="text-align: justify;">
A opção "Expandir modelos de widgets" não sumiu, ela foi alterada. Agora, basta clicar na seta para o lado que o código daquele widget é expandido. O uso do código dobrado permite uma visualização mais direta de todo o código do template. E, em caso de edição, é possível expandir especificamente aquele widget.</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Formatar modelo</div>
<div style="text-align: justify;">
É a opção que limpa automaticamente o recuo do código do template. Padronizando a formatação (apresentação) do código.</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Pesquisar dentro do Editor</div>
<div style="text-align: justify;">
Além disso, agora é possível pesquisar um termo dentro do editor HTML pressionando a tecla "Ctrl + F". Somente assim você poderá encontrar os termos mencionados dentro dos códigos widgets dobrados. Vale lembrar, que se você usar a opção pesquisar do navegador, os termos poderão não ser localizados. Para isso, é necessário acionar corretamente as teclas Ctrl+F dentro do editor. </div>
<div style="text-align: justify;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbfBAXEH3z39bE7LRG-_RmDxeK8N3bPW4VrOQZesOuJtL1vboXBgzKraHvEsGTkQ_plk9Sfi6HtbUnFkvApJWns64Qm27ZtLP09BlKCHSB4yvY6kkFDY4kd2HhPkJqhw3ubqJGM3I-3F_r/s1600/Pesquisa+Novo+Editor+Blog.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbfBAXEH3z39bE7LRG-_RmDxeK8N3bPW4VrOQZesOuJtL1vboXBgzKraHvEsGTkQ_plk9Sfi6HtbUnFkvApJWns64Qm27ZtLP09BlKCHSB4yvY6kkFDY4kd2HhPkJqhw3ubqJGM3I-3F_r/s400/Pesquisa+Novo+Editor+Blog.jpg" /></a></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Outra dica: para localizar e substituir os termos do texto um a um, você poderá usar as teclas "Ctrl + Shift + F" ou para localizar e substituir todos os termos de uma só vez, use as teclas "Ctrl + Shift + R".</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Ir para um widget</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw_iDmdcnlBkyDXdOCLZZxjGZCCdQuBChofaZQtuJ0b__3A9VtOdgXDxybigQpN1wMkE-_RSMH6M-I79UnxT5heWR-6-YU5D59PsvXzVWhm-NlFoTI_1IayBk2KLO14UAWI2k_xJod1ZvZ/s1600/Template+Blogger+Template+Personalizado.jpg" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw_iDmdcnlBkyDXdOCLZZxjGZCCdQuBChofaZQtuJ0b__3A9VtOdgXDxybigQpN1wMkE-_RSMH6M-I79UnxT5heWR-6-YU5D59PsvXzVWhm-NlFoTI_1IayBk2KLO14UAWI2k_xJod1ZvZ/s320/Template+Blogger+Template+Personalizado.jpg" /></a></div>
<div style="text-align: justify;">
Esta opção permite ir diretamente para o widget ou tag específica. Ela irá variar conforme o template e os widgets do blog. Alguns indicarão mais opções, enquanto outros irão indicar as configurações básicas de widgets. Veja na imagem como esta opção é apresentada em dois templates diferentes.</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Reverter alterações</div>
<div style="text-align: justify;">
Não se iluda. Essa opção não trás seu template antigo de volta. Ela serve apenas como opção de retornar antes de salvar, é como a opção desfazer. Ela se aplica às alterações feitas no template, das quais você poderá visualizar antes de salvar, mas não depois de salvar.</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Reverter modelos de widget para o padrão</div>
<div style="text-align: justify;">
Com esta opção é possível retornar à configuração padrão de um widget. Digamos que você tenha alterado a cor dele e queira voltar a utilizar a configuração padrão, basta clicar nesta opção, selecionar o widget e clicar em reverter o widget selecionado ou, então, fazer o mesmo procedimento selecionando todos. Contudo, ela não se aplica àqueles que foram excluídos. Para tê-lo novamente no seu template, será necessário instalá-lo outra vez.</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Visualizar modelo</div>
<div style="text-align: justify;">
No editor anterior, esta opção era aberta em um nova página permitindo a visualização das alterações feitas no template. Agora, essa visualização é exibida dentro do próprio editor. E, quando selecionada, desativa todas as outras opções, sendo necessário selecionar "editar modelo" para continuar a edição ou acessar as outras opções. 
 
<h3 style="text-align: center;">
<a href="http://www.dicasblogger.com.br/2013/04/onde-esta-o-css-no-novo-editor-html-do-blogger.html" target="_blank">Onde está o CSS no novo editor HTML do Blogger?</a></h3>
</div>
<div style="text-align: justify;">
 
Recomendações</div>
<div style="text-align: justify;">
Antes de mexer no template do seu blog <a href="http://www.dicasblogger.com.br/2012/05/como-fazer-backup-no-novo-blogger.html">faça o backup</a>, pois se houver qualquer alteração mal sucedida, será possível retornar ao que era antes por meio da reinstalação do template. Ou então, faça as alterações em um blog de testes que tenha o mesmo template do seu blog, assim você poderá mexer no HTML sem tantas ressalvas e não colocará em risco o modelo usado no seu blog, instalando widgets e hacks que possam prejudicar a funcionalidade dele.</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Como qualquer novidade, é necessário paciência e adaptação. As alterações apresentam melhorias importantes e, em breve, você já estará familiarizado com o novo editor. Contudo, se você não sabe mexer é melhor estudar bem antes, brincar em um blog de testes ou contratar alguém que possa fazer a instalação sem comprometer o seu blog. Vale lembrar que todo o código continua lá, havendo alteração apenas nas funcionalidades e aparência do editor.</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Feedback</div>
<div style="text-align: justify;">
O nosso feedback é muito importante para que a equipe do Blogger possa avaliar o impacto das alterações, corrigir possíveis problemas e implementar novas funcionalidades. Conforme informado pela Jéssica, Guia do Blogger, "as opiniões podem ser enviadas através da opção reportar problema localizada no painel do Blogger. Esta é a melhor forma de informar ao Google sobre eventuais problemas e insatisfações com o produto". <a href="http://productforums.google.com/forum/#!category-topic/blogger-pt/KZ6NwU-nqac">(Fonte)</a></div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Continuaremos acompanhando e compartilhando as novidades, conforme elas forem acontecendo. Mas não deixe de nos dizer oque achou da novidade. Compartilhe conosco a sua opinião!</div>
<div style="text-align: justify;">
Deixe seu comentário.</div>

Novidades: Saiba tudo sobre o novo editor HTML no Blogger

Nos últimos dias estava pensando se o Blogger iria lançar alguma novidade este ano, já que 2012 foi um ano repleto de novidades. E como meus...

Continue Lendo >>

16:10

Como criar botões com CSS

<img align="right" alt="css3" border="0" height="112" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBYS3Uc1tXaSc6bnA6ql8ADK9ois1H158Vphk-DRr_EJA_sNAbTfG5l0wE7XjLwCdgUQfLwRf31CYZ1mLJg3S-Clt8Jgou7V-I7_liyaL80D9s5QEN3mlBoM5fRLmdL_3su0rdGYMhGMrj/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: right; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="112" />Com o advento e avanço do CSS 3, muitos designers estão optando por reduzir o uso de imagens em sites, a fim de aumentar a velocidade das páginas da web. Eu <a href="http://www.dicasblogger.com.br/search/label/HTML%2FCSS">já ensinei</a> algumas técnicas legais pra deixar seu blog do Blogger mais bonito e profissional e hoje vou explicar como criar botões (buttons) usando apenas CSS. Entre no site <a href="http://css-tricks.com/examples/ButtonMaker/">Button Maker</a> e utilize o painel da direita para personalizar o botão: <img alt="css-button-maker" border="0" height="297" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKDq8n8RnKGaIHGRL90YV4Cvxtox9dwMPVzVy32GVRBp2mKG0u7Nx9-acKmJ2Jpqo0Kq0ia155atHUWi7AYJprD5-hkAGOCrvX5m5JatMGjUswU1DFF_t969rzW2lmPxb3tFEfM2sJey5j/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="502" /> Use os 3 controles deslizantes para escolher o tamanho e profundidade do botão. Embaixo, escolha as cores da seguinte maneira: <ul><li>Top Gradient Color: cor do topo em gradiente </li><li>Bottom gradiente color: cor de baixo em gradiente </li><li>Top Border Color: cor da borda do topo </li><li>Hover background color: cor do fundo ao passar o mouse </li><li>Text Color: cor do texto </li><li>Hover Text Color: cor do texto ao passar o mouse </li><li>Active background color: cor de fundo ao clicar no botão</li></ul>Depois que o botão estiver pronto, clique sobre ele e copie o código. <img alt="css-button-maker" border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5WRBZbo_fvSgqU9wJ92vGutqEfQXbdsS3zspS9U1DDk_bOQErdQ8Hd8ZjI5aCyJxMma9vBpUIWp8XqSlepF63-Ylv9_aWHCca4QeJfG7Sz63YfgdZKtBJBqL8EfMcqSupuWntSKnfyGrq/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="502" /> Entre no painel do Blogger, clique em design>editar HTML. Faça um <a href="http://www.dicasblogger.com.br/2008/05/backup-template-widgets-blogger.html">backup do template</a> e cole o código antes da tag ]]></b:skin> (use o Crtl+F do teclado para encontrá-la). Substitua o ponto (.) que está antes de cada palavra “button” por jogo da velha (#). Ficará assim: #button. Visualize e salve. Em “elementos de página”, clique em adicionar gadget HTML/javascript. Cole este código: <blockquote><div id="button>ESCREVA AQUI O TEXTO</div></blockquote>Escreva, no local indicado, o texto que deverá aparecer no botão. Se quiser colocar um link, use este outro código: <blockquote><div id="button"><a href=”LINK”>TEXTO</a></div></blockquote>Pronto! Agora seu blog já tem um botão feito apenas com CSS ;) Veja, na imagem abaixo, um botão que criei para o DB ( é o azul): <img alt="css-button-maker" border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp1krCPoDDXars6POENJ4ccvLX6svOz_Qmfx_N7outYD3FC-Uo7t2P6A8f-AGcEoCZP1EMZ6zadTijtYs7QvnY9r7tTdeuE-FyIiIrKysTaJbzJEyvAlF7Y1b4C-GTke2XJKzolb1XauoM/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="502" /> Existem outros sites para criar botões personalizados em CSS: <ul><li><a href="http://www.cssbuttongenerator.com/">CSS Button Generator</a> </li><li><a href="http://css3buttongenerator.com/">CSS3 Button Generator</a> </li><li><a href="http://www.1pagedesign.com/css_button_maker.php">CSS Button Maker</a></li></ul>

Como criar botões com CSS

Com o advento e avanço do CSS 3, muitos designers estão optando por reduzir o uso de imagens em sites, a fim de aumentar a velocidade das pá...

Continue Lendo >>

09:49

Como colocar recursos nos posts via HTML

<img align="left" alt="filetype_html" border="0" height="97" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDRSFwQt5sTzzftivoyxn26O47jNtmspGUEDl_p6bZInsDibaz6MFSOF45viL6lG643MxRAUIB8E1EPEe-AMefalSOD_GMm1rckfy6Nm_ymRoQ1J_XxII2M3L2g19tljmHsIzTl2LvsLjy/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: left; margin: 0px 5px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="filetype_html" width="97" />Antes de mais nada, quero adiantar que este post é mais voltado a usuários que já possuem alguma noção sobre HTML e CSS. A idéia é auxiliá-los a colocar novos recursos em seus templates, mostrando onde ficam alguns códigos essenciais e exclusivos do Blogger. 
Abordaremos os códigos que são responsáveis pela área de postagem, através das “divs”, que são tags HTML que delimitam espaços dentro de um layout. 
 
<h2 style="text-align: center;">
<a href="http://www.dicasblogger.com.br/2013/04/novidades-novo-editor-html-no-blogger_10.html" target="_blank">Saiba tudo sobre o novo editor HTML do Blogger</a></h2>
<div style="text-align: center;">
<a href="http://www.dicasblogger.com.br/2013/04/novidades-novo-editor-html-no-blogger_10.html" target="_blank">clique aqui</a></div>
<blockquote>
Os elementos e <div> são usados para agrupar e estruturar um documento e são freqüentemente usados em conjunto com os atributos class e id. Fonte: <a href="http://pt-br.html.net/tutorials/css/lesson8.php" target="_blank">HTML.net</a></blockquote>
Para incluir anúncios, mensagens, botões do Twitter  ou quaisquer outros códigos/recursos nas áreas que englobam os posts, deve-se seguir estes critérios: 
<blockquote>
NA PRIMEIRA LINHA DO RODAPÉ DOS POSTS 
<div class='post-footer-line post-footer-line-1'> 
Código 
</div> 
NA SEGUNDA LINHA DO RODAPÉ DOS POSTS 
<div class='post-footer-line post-footer-line-2'> 
Código 
</div> 
ABAIXO DO TÍTULO 
Código 
<div class='post-header-line-1'> 
ENTRE O TÍTULO E OS POST 
<div class='post-header-line-1'> 
Código 
NO FINAL DO POST 
Código 
<div class='post-footer'></blockquote>
Isso significa que, por exemplo, se eu quiser colocar um anúncio entre o título do post e o texto, eu devo procurar dentro do HTML do template por: 
<blockquote>
<div class='post-header-line-1'></blockquote>
E colocar o código do anúncio logo embaixo dessa linha. Vejam estas imagens: 
<img alt="código-anuncios" border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUr4IaqdLN3cEhmwMaUXbO6R3p7AmzUne7JbzQiG8GVgx6moCjDGWGKldBmBOB4EUw46VGQqRF0fTx6tTbNnJAAzuveERE1p7RM44rRzUp1xOEROcgXvd90PxbSXzRP8xNnt9T10hjXtjz/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Inserindo o código" width="452" /> 
<img alt="anuncios" border="0" height="296" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6tJtLi2Ee_beuCOfKSso7G5EVoMteN6BpZyl7ma6DCI1x5r_IjLAOpTvdh1P-IrHm2Q7ihPNTPOs_L9Q93EK4NMs6qfCpjoDll7EZe8wFZnZVQg6HbO2dYbzJHaBoS8Vfg0PrpLnznyWK/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Resultado" width="452" /> 
Percebam que o código do anúncios foi inserido entre o título e o post, ou seja, logo embaixo de <div class='post-header-line-1'> 
Para encontrar as divs dentro do HTML, é preciso marcar a caixa “expandir modelos de widgets” e usar o Ctrl+F do teclado. 
<img alt="procurando-as-divs" border="0" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQwI1GOBA9O_J7cF0Hb5JxqZ-I8cUt5HyZpKChet6Q1Q3r8B2G_gAYWl-iuS3GF_NbShyEp4Zx2LLj3GEEfXRaiP8_L5Mf3cnkKeGDjf9iUm6rAsbRcj_dRqjvFx0Y6Jk65DTTI9aOXIqk/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Procurando as DIVs" width="452" /> 
Passemos agora para uma outra imagem, também aqui do Dicas Blogger: 
<img alt="classes" border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5fVIfFRQFRFfYJ2eG7zL9_V6wuUhokgtO4e7alpixaNo-V-1M78PZkmLAszigUqU7MMduSJTbUnNRCjJ3FUC19XzOqsR7rQrK14-ev7xBY2ywfxLVSXQD9UUFj1x26FMtt4alEA3w9ZFo/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="<spans>" width="452" /> 
A área onde aparecem o meu nome, data e marcadores corresponde a <div class='post-header-line-1'> e fica logo embaixo do título da postagem. Nesse caso, ao contrário do anterior, o código foi inserido ANTES da linha 'post-header-line-1'. 
Já a área onde aparecem os ícones de compartilhamento e os comentários, correpondem a <div class='post-footer-line post-footer-line-1'>, que é a primeira linha do rodapé dos posts, também chamado de post-footer. 
Para modificar a disposição do nome do autor, marcadores, data e link para os comentários, basta ir movendo os códigos correspondentes, dentro das divs. 
<blockquote>
AUTOR DOS POSTS 
 
          <b:if cond='data:top.showAuthor'> 
            <data:top.authorLabel/> <data:post.author/> 
          </b:if> 
            
MARCADORES 
 
          <b:if cond='data:post.labels'> 
            <data:postLabelsLabel/> 
            <b:loop values='data:post.labels' var='label'> 
              <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if> 
            <b:if cond='data:blog.pageType == &quot;item&quot;'> 
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name +  &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/> 
</b:if></b:loop> 
          </b:if> 
        
A DATA 
<b:if cond='data:post.dateHeader'> 
em <data:post.dateHeader/> 
</b:if> 
COMENTÁRIOS 
 
    <b:if cond='data:blog.pageType != &quot;item&quot;'> 
    <b:if cond='data:post.allowComments'> 
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> 
    <b:if cond='data:post.numComments == 1'>1 Comentário 
    <b:else/> <data:post.numComments/> <data:top.commentLabelPlural/> </b:if> </a> 
    </b:if> 
    </b:if> 
    </blockquote>
Vamos para um exemplo prático. Supondo que eu queira colocar os marcadores logo abaixo do título das postagens. Nesse caso, eu irei deslocar o código dos marcadores, para cima da div <div class='post-header-line-1'> 
<img alt="exemplo" border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_lXRtPxk0XA-xdRM4bymDhskz0jbE8UG__tZXEdszb6hbZVN32mwnpcIAwNWETRzMRuxP7VokioZA0AvdfCjQzwHeGO5gcTF2U5hdRyjv6MOn72HgO2-4Z_QIpUNqSVjnN50Hv363Sp7d/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="exemplo" width="452" /> 
Para aplicar estilos em CSS, é só encontrar o seletor de cada um deles. Exemplo: 
<blockquote>
</blockquote>
correspondente: 
<blockquote>
.comment-link</blockquote>
Claro que tudo isso irá variar de template para template. O segredo é, usando o Crtl+F, procurar a linha de códigos que mais se aproxima das que postei aqui e testar SEMPRE em um blog de testes, para evitar de fazer bobagem no blog principal. 
Acessem os artigos abaixo, que mostrarm ótimos recursos que podem ser empregados, usando o tutorial de hoje: 
<ul>
<li><a href="http://www.dicasblogger.com.br/2010/02/tweetmeme-botao-de-retweet-blogger.html">TweetMeme- Inserindo botão de Retweet no Blogger</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/09/como-colocar-o-botao-do-facebook-no.html">Como colocar o botão do Facebook no Blogger</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/03/topsy-outro-botao-de-rt-para-o-seu-blog.html">Topsy – outro botão de RT para o seu blog</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/01/mensagens-no-rodape-dos-posts.html">Mensagens no rodapé dos posts</a> </li>
<li><a href="http://www.dicasblogger.com.br/2008/05/anuncios-nas-postagens-do-blogger.html">Anúncios nas postagens do Blogger</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/04/botao-share-this-compartilhe-redes.html">Botões para compartilhar posts nas redes sociais</a> </li>
</ul>

Como colocar recursos nos posts via HTML

Antes de mais nada, quero adiantar que este post é mais voltado a usuários que já possuem alguma noção sobre HTML e CSS. A idéia é auxiliá-l...

Continue Lendo >>

15:08

Aprenda a mexer em códigos facilmente

<img align="right" alt="notepad" border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF8autDRYvGbd6e_G2rpaqbqOeJDBa0yGbgr7BBr0r263OuKsSOJb_-nY-yvIWzzyzoRo5Xofi91MHFFb26rE6pQ-9bHHeAyPPPCSZ5xUIDp7Ejfqjoe0Ryfhqapqwca4XZTo9B2Z-9jZ2/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: right; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="notepad" width="100" />Hoje eu vou dar uma dica de ouro pra quem gosta de mexer com códigos em geral, seja HTML, CSS, javascript e etc, mas que também serve para quem precisa apenas fazer edições nos códigos dos gadgets 
Trata-se do aplicativo Notepad++, um editor de textos cheio de recursos e que trabalha com diversas linguagens de programação. 
<blockquote>
Notepad++ é um editor de texto e códigos fonte completo que suporta as mais diversas linguagens de programação e, sendo assim, uma ótima alternativa ao bloco de notas. Dessa forma, com uma ferramenta mais avançada e versátil que outros editores de texto, você tem suporte às linguagens C, C++, Java, C#, XML, HTML, PHP, Javascript, ASCII art, doxygen, ASP, VB/VBS, SQL, Objective-C, CSS, Pascal, Perl, Python, Lua, TeX, TCL, Assembler, Ruby, Lisp, Scheme, Properties, Diff, Smalltalk, Postscript, VHDL, Ada, Caml, AutoIt, KiXtart, Matlab, Verilog, Haskell e InnoSetup. Fonte: <a href="http://www.baixaki.com.br/download/notepad-.htm" target="_blank">Baixaki</a></blockquote>
Um dos recursos que pode ser muito útil para qualquer blogueiro, independente do nível de conhecimento, é o de substituir trechos dos códigos de forma automática. 
Vamos para um exemplo. No post anterior - <a href="http://www.dicasblogger.com.br/2011/01/pop-up-assine-os-feeds.html">Pop-up assinar feeds</a> – divulguei um código javascript para colocar uma janela pop-up, incentivando os visitantes a assinarem os feeds do blog. Nesse código, é preciso substituir a frase “nomedofeed” três vezes. Experimente encontrar tal frase no meio daquele código imenso, quando já foi colado no gadget HTML/javascript. Complicado, né? 
Pra quem não tem o Notepad, um Crtl+F do teclado ajuda, mas mesmo assim é necessário digitar o nome do feed 3 vezes. Quando forem 20, 30 substituições – como em um template, por exemplo -  o gasto de tempo pode ser grande. 
Agora vejam na imagem abaixo o que o Notepad++ é capaz de fazer. 
<img alt="notepad-substituir" border="0" height="330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8R3WWm9Rps9xuE4cTtqnePnchcPMTTlGf_ERpYLTlSS4AQy-xrnNR7UBZj3rjS5kTWBjJBcfK1lWd2zzz8o1qh3Sb2JxEIOyIiVHq3KF19pYChbeFiFcr5id40JabIAdejZB1j0_8X5ib/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="notepad-substituir" width="502" /> 
Sim, com poucos cliques ele substitui trechos de códigos de uma só vez. No exemplo acima, escolhi substituir “nomedofeed”, pela URL final do feed do Dicas Blogger. 
Para fazer substituições de trechos dos códigos, siga estes passos: 
<ol>
<li>Instale o Notepad++ </li>
<li>Abra o aplicativo e cole o código que será modificado </li>
<li>Dê um Crtl+F com o teclado </li>
<li>Clique na guia “substituir” </li>
<li>Em “localizar” escreva o trecho que deverá ser substituído </li>
<li>Em “substitua por”, escreva o novo trecho </li>
<li>Clique em “Substituir todos” </li>
</ol>
Depois, é só copiar o código já modificado e colar no gadget HTML/javascript. 
Para baixar o Notepad++, acesse um dos links abaixo: 
<ol>
<li>Notepad++ – <a href="http://notepad-plus-plus.org/release/5.8.6" target="_blank">site do desenvolvedor</a> </li>
<li>Notepad++ – <a href="http://www.baixaki.com.br/download/notepad-.htm" target="_blank">Baixaki</a> </li>
<li>Notepad++ portable – <a href="http://www.baixaki.com.br/download/notepad-portable.htm" target="_blank">Baixaki</a> </li>
</ol>
Para editar templates, é só colar o código HTML inteiro no Notepad++, fazer as alterações e salvar no formato .XML; mas para isso eu ainda prefiro o próprio editor do Blogger que me permite ir editando e visualizando as mudanças ;)

Aprenda a mexer em códigos facilmente

Hoje eu vou dar uma dica de ouro pra quem gosta de mexer com códigos em geral, seja HTML, CSS, javascript e etc, mas que também serve para q...

Continue Lendo >>

14:56

CSS – aplicando estilos às bordas

<img align="right" alt="z_file_css" border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiorP5xz6urAbV59Un5Phvd4-9plnURXEik_qjsRzWZCTA4-rLHDwh2YBnQcTuarOUD8BPLOMEnA3B4fvDGPsvxuJvnMEUHhyphenhyphentTeZ4Ik4Z0Jq2Ucib9NCpvxr6glkzZg2WjQb_QL6A3cMA5/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: right; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="z_file_css" width="128" />Hoje irei explicar como aplicar estilos às bordas, usando CSS. 
O atalho chama-se “border” e suas propriedades são: 
<ol>
<li>border-top ( borda superior) </li>
<li>border-right (borda direita) </li>
<li>border-bottom (borda inferior) </li>
<li>border-left ( borda esquerda) </li>
</ol>
Para aplicar o mesmo estilo para todos os lados, usamos apenas o atalho “border”. 
A sintaxe para aplicar estilos às bordas é: 
<blockquote>
seletor { border: largura estilo cor;}</blockquote>
Exemplo: 
<blockquote>
#linkbar a { color:#e6e6e6; text-transform:none; border-right:1px solid #808080; }</blockquote>
O seletor, em CSS, é o que vem sempre precedido por # (jogo da velha). “border-right” se refere ao lado da borda que receberá o estilo. “1px” é a largura, “solid” é o desenho e “#808080” é a cor da borda. 
No exemplo acima, apliquei um estilo`apenas à borda direita da linkbar. 
<blockquote>
#busca { border: 1px solid #FFF; padding: 6px; } </blockquote>
Nesse outro exemplo, apliquei o mesmo estilo para os 4 lados da borda da busca. 
Como vocês já devem ter notado, podemos aplicar estilos ao desenho da borda: 
<ul>
<li>none: sem estilos </li>
<li>dotted: borda desenhada com pontos </li>
<li>dashed: borda desenhada com pequenas linhas </li>
<li>solid: borda desenhada com uma linha contínua </li>
<li>outset: borda em 3D </li>
<li>double: borda dupla </li>
</ul>
Vamos para outros exemplos, mostrando os desenhos das bordas: 
<div style="border-bottom: #ff0000 1px solid; border-left: #ff0000 1px solid; border-right: #ff0000 1px solid; border-top: #ff0000 1px solid;">
border: 1px solid #FF0000; </div>
<div>
</div>
<div style="border-bottom: #ff0000 1px dotted; border-left: #ff0000 1px dashed; border-right: #ff0000 1px solid; border-top: #ff0000 1px double;">
border-bottom: #ff0000 1px dotted; border-left: #ff0000 1px dashed; border-top: #ff0000 1px double; border-right: #ff0000 1px solid</div>
Assim como nos demais posts, recomendo que vocês façam as modificações em um blog de testes e que visualizem até encontrarem um resultado satisfatório.

CSS – aplicando estilos às bordas

Hoje irei explicar como aplicar estilos às bordas, usando CSS. O atalho chama-se “border” e suas propriedades são: border-top ( borda s...

Continue Lendo >>

12:25

Formatando texto com CSS

<img align="left" alt="image" border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj171etbvyYqZca7gsc3k4bD4WPACsm4NQA6eDmjB2MSFHjrqKYyLzf6ib2cUWSETI1nenC1dSVsXEFyB-i5Yg9uu3ALtkmL2TL0rMDiFmIZVBvUMO2c02_WiKzv5FoD1t4atnuivhkbUcU/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: left; margin: 0px 6px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="letras" width="116" />Outra coisa importante para melhorar um site, é a personalização dos textos. O CSS permite que façamos muitas coisas interessantes, como escolher o tipo de fonte, tamanho, cor, se maiúscula, normal ou minúscula e etc 
As fontes 
Uma fonte é um conjunto de grifos. A grosso modo, é a letra que usamos para escrever um texto. A propriedade “font” é o atalho para estilos de fontes no CSS: 
<ul>
<li>font-style: aplica-se um estilo à fonte </li>
<li>font-weight: define a espessura da fonte </li>
<li>font-size: define o tamanho da fonte </li>
<li>font-family: define o tipo da fonte </li>
</ul>
Os atributos mais usados são: 
<ul>
<li>font-style: italic ou normal </li>
<li>font-weight: bold ou normal </li>
<li>font-size: 30px; </li>
<li>font-family: arial, sans-serif; (veja outros exemplos, <a href="http://maujor.com/w3ctuto/fonts.html">clicando aqui)</a> </li>
</ul>
O texto 
Define a aparência e a apresentação do conteúdo textual. 
<ul>
<li>text-align: right; ( alinhado à direita) </li>
<li>text-align: center; (alinhado no centro) </li>
<li>text-align: justify; (justificado) </li>
<li>text-decoration: underline; (linha embaixo) </li>
<li>text-decoration: overline; (linha em cima) </li>
<li>text-decoration: line-through; (linha no centro do texto) </li>
<li>text-transform :uppercase; ( letras maiúsculas) </li>
<li>text-transform: capitalize; ( a primeira letra fica maiúscula) </li>
<li>text-transform:lowercase; (todas as letras minúsculas) </li>
<li>text-transform : none; ( não aplica estilos) </li>
</ul>
Cor do texto 
A cor pode ser modificada usando as propriedades hexadecimais ou rgb. 
<ul>
<li>color: #FF0000; ( cor vermelha, em hexadecimal) </li>
<li>color: rgb(255, 0, 0); ( cor vermelha, em RGB) </li>
</ul>
Veja <a href="http://cores.gratuita.com.br/">aqui</a> uma tabela de equivalência de cores para web. 
Nos templates para o Blogger, geralmente usamos as variáveis, que permitem que façamos as edições das fontes e das cores através do painel  do designer do modelo. 
<img alt="image" border="0" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUoBrv5QF-SMe72kYb-hjs5BRVq_KPKaEWH7esK-Al-1rzieDO_PI61MBKgi-X4QgS2XtI2n5Eb0b4-U2RhOkAFPIlZ3x9h-fCZumsqOXCemIaOmMiVjak4-4BIVu8b2mw1IUkKx704376/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="As variáveis do Blogger" width="452" /> 
Para cada tipo de fonte, tamanho e cor, é preciso ter uma variável correspondente. 
<blockquote>
#header h1 { color:$blogTitleColor; font:$blogTitleFont; font-variant:small-caps; margin:0; padding:10px 20px 0; }</blockquote>
Variável que fica logo no começo do CSS: 
<blockquote>
<Variable name="blogTitleColor" description="Blog Title Color" type="color" default="#800040" value="#ffffff"> </blockquote>
A variável é sempre precedida do símbolo “$”. Para criar variáveis, basta seguir o modelo acima. Como exemplo, vou criar uma variável para o título da barra lateral: 
<blockquote>
<Variable name="sidebarTitleColor" description="Sidebar Title Color" type="color" default="#800040" value="#ffffff"></blockquote>
<blockquote>
#sidebar h1 { color:$sidebarTitleColor; font:$sidebarTitleFont;  font-weight: bold; margin:0; padding:10px 20px 0; }</blockquote>
Percebam que a grafia da variável tem que ser idêntica. A primeira parte deve ser colocada com as demais variáveis – que ficam logo no começo do CSS. Já a segunda parte, deve seguir a sequência de cascata dos seletores CSS.

Formatando texto com CSS

Outra coisa importante para melhorar um site, é a personalização dos textos. O CSS permite que façamos muitas coisas interessantes, como esc...

Continue Lendo >>

11:22

As propriedades margin e padding do CSS

<img align="left" alt="CSSEditLogo" border="0" height="94" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaLfhuMSTKNW-yODjpQe9zBB2GCSPILZh7v7Jwo8HTvcMhnWddQ7XZcD9vco5EYk91cW9NN6cQSs5VG6f3cgDedlwZxvUj38M_Do9KuazLjdTmhBsHPcCMcCfSCwe4lX3oub8mPb8SByEj/?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: inline; float: left; margin: 0px 8px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="CSS" width="94" />Duas importantes propriedades do CSS, se chamam margin (margem) e padding (preenchimento). São elas que definem os espaçamentos entre os elementos do layout. 
A margem é o que separa um elemento de outro e o preenchimento é o espaço entre o conteúdo e a borda desse conteúdo. 
Para fazer o controle dos espaços, usamos um código com valores que podem ser em pixels (px), em porcentagem (%) ou em “em”. A palavra “em” vem da tipografia impressa e se refere ao tamanho da letra M maiúscula para uma determinada fonte. 
Para este tutorial, vou usar as medidas em px (pixels). 
Antes, é importante que vocês saibam o que quer dizer cada valor: 
<ul>
<li>0 – estamos dizendo ao navegador que é para usar um espaço padrão </li>
<li>0px – estamos dizendo ao navegador para não colocar espaço </li>
<li>5px – estamos dizendo ao navegador para colocar 5 pixels de espaço </li>
</ul>
Vamos ver um exemplo do código para configurar as margens: 
<blockquote>
margin-top: 100px; 
margin-right: 40px; 
margin-bottom: 10px; 
margin-left: 70px;</blockquote>
ou, simplicando: 
<blockquote>
margin: 100px 40px 10px 70px;</blockquote>
O mesmo código se aplica ao preenchimento: 
<blockquote>
padding-top: 100px; 
padding-right: 40px; 
padding-bottom: 10px; 
padding-left: 70px;</blockquote>
Os valores são apenas ilustrativos, onde: 
<ol>
<li>top: espaço entre o conteúdo e a parte superior </li>
<li>right: espaço entre o conteúdo e a direita </li>
<li>bottom: espaço entre o conteúdo e a parte inferior </li>
<li>left: espaço entre o conteúdo e o lado esquerdo </li>
</ol>
A ordem deve sempre ser esta: top, right, bottom e left. 
Também podemos usar um código ainda mais simples, quando os valores são iguais para todos os lados: 
<blockquote>
margin: 3px; ( equivale a 3 px em top, right, bottom e left) 
padding: 4px; ( equivale a 5 px em top, right, bottom e left)</blockquote>
Se o valor for o mesmo para as partes superior e inferior e outro para direita e esquerda, usamos: 
<blockquote>
margin: 3px 5px ( superior e inferior=3px e direita e esquerda=5px)</blockquote>
Agora vou mostrar uma imagem, usado o template do Dicas de Informática 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6cMDs2C-k5H2ZlZ2Jho4PJkGUDkSIdBcSc3CwtAMI7fAXqrMULABx1VpvX5KkAj41pfUSntCTedAz20yY1bK0YrYu-61b0InA7Hh0qnecsNYifJULO28eGk33inZut5sGLH7P9g0TnmqO/s1600-h/padding%5B3%5D.png"><img alt="padding" border="0" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib9h8eqFs2ZGoWyb6zyp_t4KfuZ1WfPoHtgzq-MkZYqgu5el0Qc5POFB6AA1hlG4EbWdgnwLJ7SfmuN0qibXz0bYhn9wttlqSev_wCCQKATZLEj8Gx-uwVIgBxYgjnVKsjeJBWmbJIpu9K/?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="padding" width="452" /></a> 
Clique na imagem para ampliar. Veja que o CSS do header (cabeçalho) é: 
<blockquote>
/* HEADER ----------------------------------------------- */ #header-wrapper { width:970px; background:transparent; border:1px solid transparent; margin:0; padding:4px; }</blockquote>
A margem foi definida em zero e o preenchimento é de 4px em todos os lados. 
Na imagem abaixo, vemos o conceito de box model do CSS 
<img alt="css-box-model" border="0" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2_NknLw1nGboogFA0s7QT9Uenj2Q0iGUVSumUL1NM64npmMGhLgxDzNQBwEeyGgZaTgs96FcTHDHcGr5qk3O1hnbFJBvoxBGMocRT7KJc8JOgW79pxhc4q1tFnrOyEC6cKy_QU-fuNmsK/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="css box model" width="435" /> 
<div align="center">
Fonte: <a href="http://www.w3.org/TR/CSS21/box.html">W3.org</a></div>
<div align="justify">
Pode parecer complicado ( e é), mas para modificar templates do Blogger, basta saber o código para controlar os espaços, ir testando valores e ir visualizando até encontrar o efeito desejado. Use um blog de testes e nao tenha medo de errar ;)</div>

As propriedades margin e padding do CSS

Duas importantes propriedades do CSS, se chamam margin (margem) e padding (preenchimento). São elas que definem os espaçamentos entre os e...

Continue Lendo >>

20:05

Destacar mensagens nos posts

<img align="right" alt="rss" border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpFmOwEP4CfD4v5qo2cd3NO7drddVDm0PliQ3RQjglc25DuWzKOPxVBzvnb9vLI8Zsk2f-aREzTS7VR6lsqX4blXu-k7uJCNMRVULbuIrjJH7Af4aiNHcjPB1V293MEaVDeJkiqCMD9eCv/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: right; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="128" />Eu já expliquei uma vez como colocar uma mensagem no rodapé dos posts, convidando os leitores a assinarem os feeds -  <a href="http://www.dicasblogger.com.br/2008/09/widget-assine-o-feed-no-rodape-dos.html">Widget "Assine o Feed" no rodapé dos posts</a> 
Agora que fiquei mais espertinha em CSS e abandonei as tabelas (né, Cidão?), fiz um código novo que pode ser usado para destacar qualquer mensagem dentro dos posts. 
Vejam um exemplo, na imagem abaixo. É um convite pra assinar os feeds: 
<img alt="" border="0" height="52" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXO7imsqNyju69dcoBbXc_V9A5L3rXcwDR901c8hYYv-7vaBu1b7yF-F7_YEVvuAGZnILyhIxWpaSJXIrKR-MB3s7nTP0v4lx-oYeux1VUkNU-QWfuNgksK155C8g1g_oexeZm4SdlIgVA/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="580" /> 
O código é simples, mas requer que vocês façam algumas substituições: 
<blockquote>
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='text-align: left; color: #7b7c7d; font-size: 110%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'> <img alt='' src='URL DA IMAGEM' style='width: 32px; height: 32px;float:left;'/> TÍTULO: TEXTO 1       <a href='LINK'>Clique aqui </a>TEXTO 2. </div> 
</b:if></blockquote>
Escolha uma imagem de 32 x 32px, faça o upload para o <a href="http://www.dicasblogger.com.br/2010/07/como-hospedar-imagens-no-picasa.html" target="_blank" title="Como hospedar imagens no Picasa">Picasa</a> ou outro site de sua preferência e copie a ULR. Abra o código acima no bloco de notas e substitua URL DA IMAGEM pela URL da imagem que você vai usar; em TÍTULO, coloque um título pra mensagem; em TEXTO 1, escreva o primeiro paráfrafo e em TEXTO 2, o segundo. 
Você ainda pode alterar a cores de fundo em “background” , a borda em “border” e a cor da fonte em “color”. Se necessário, ajuste o tamanho da fonte em “font-size: 110%”, a largura em “width” e a margem superior em “margin-top”. 
Para usar imagens maiores, altere: width: 32px; height: 32px 
Vejam estes exemplos: 
<blockquote>
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div style='text-align: left; color: #7b7c7d; font-size: 110%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'> <img alt='' src='<a href="http://lh6.ggpht.com/_mcq01yDJ2uY/TOP-Je99_AI/AAAAAAAAD98/s24k47t_TmU/rss_file.png" title="http://lh6.ggpht.com/_mcq01yDJ2uY/TOP-Je99_AI/AAAAAAAAD98/s24k47t_TmU/rss_file.png">http://lh6.ggpht.com/_mcq01yDJ2uY/TOP-Je99_AI/AAAAAAAAD98/s24k47t_TmU/rss_file.png</a><a href="http://%27/">'</a> style='width: 32px; height: 32px;float:left;'/> RSS/Feed: Receba automaticamente todas os artigos deste blog!       <a href='LINK DO FEED'>Clique aqui </a> para assinar nosso feed. O serviço é totalmente gratuito </div> 
</b:if></blockquote>
<img alt="" border="0" height="59" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_CnYIeU8NzZKV6_WDF8mdsew7DNheyDHlYYE6fP7mnjsljMV762AC0L5SXd-2C-7ft92HcGOd0yO_jwwEFU9-9SqpiyocykAi_0AtFf7jGXDrGFvCAVjqQ7iVw12RdZVAIirnUTK8Q15h/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Assinar Feeds" width="584" /> 
<blockquote>
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div style='text-align: left; color: #7b7c7d; font-size: 90%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'> <img alt='' src='<a href="http://png-4.findicons.com/files/icons/2152/snowish/32/dialog_warning.png'">http://png-4.findicons.com/files/icons/2152/snowish/32/dialog_warning.png'</a> style='width: 32px; height: 32px;float:left;'/> Alerta! É terminantemente proibido copiar os artigos deste blog.       <a href='LINK'>Clique aqui </a> e veja nossa licença. Plágio é crime previsto no Código Penal. </div> 
</b:if></blockquote>
<img alt="image" border="0" height="52" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdPy_uyH3Cv-r8Z-I7wTLjpf_PL4g0SOpV1EvKez5sKlbiJWAgEt7RuSfRwRmrsv8f10UgG1mjjNyStAzUk0pRvafDbQiVrV4bKY3QfdP8LAL_NgJ32STt160OIugafIeaA0ExS6swD4_A/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Alerta Plágio" width="588" /> 
Use sua imaginação! As opções são várias: feed, plágio, twitter, facebook e etc. 
Locais para inserir a mensagem 
Embaixo do título do post 
Para encontrar os trechos que citarei, use o comando Ctrl+F do teclado. 
Entre em design>editar HTML. Marque a caixa “expandir modelos de widgets” e cole o código antes da linha  <div class='post-body'> 
No final do post 
Entre em design>editar HTML. Marque a caixa “expandir modelos de widgets” e cole o código antes da linha <div class='post-footer'> 
No rodapé dos posts 
Entre em design>editar HTML. Marque a caixa “expandir modelos de widgets” e cole o código antes da linha   
<img alt="footer" border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghe2swGlyzS92PNle5AkFTh2lIkfsvIhqkQOLXyJ1HXG_YRISGoE-XD5Vtd6J1NdRLuu36TtIAiEpNNA1QOpFbFpixlwbb410fd2gdr4HfoiWRuK2y6jSggvu_ZXIw4yXNlpqbpBic3xy2/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Colando o código" width="452" /> 
Para que a mensagem apareça também na home, apague o que está em vermelho: 
<blockquote>
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='text-align: left; color: #7b7c7d; font-size: 110%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'> <img alt='' src='URL DA IMAGEM' style='width: 32px; height: 32px;float:left;'/> TÍTULO: TEXTO 1       <a href='LINK'>Clique aqui </a>TEXTO 2. </div> 
</b:if></blockquote>

Destacar mensagens nos posts

Eu já expliquei uma vez como colocar uma mensagem no rodapé dos posts, convidando os leitores a assinarem os feeds - Widget "Assine o ...

Continue Lendo >>

12:36

CSS3 - efeito gradiente/degradê

<div align="left">
Artigo de Marco Damaceno –<a href="http://www.dicasbrowser.com/">Dicas Browser</a> – @<a href="http://twitter.com/dicasbrowser">dicasbrowser</a></div>
Algo que todo blogueiro deve se preocupar é se seu blog está bem estruturado. Isso é muito importante! Depois de ter este blog estruturado, ou seja, organizado, é hora de partir para os enfeites para dar maior beleza à obra. 
Vou falar sobre como usar o efeito gradiente em seu layout de uma forma bem fácil que você vai passar a usar em seu blog. 
Primeiramente, é preciso saber o que significa o efeito gradiente ou degradê: 
<blockquote>
"Degradê ou dégradé é uma sequencia de tons contínuos, podendo ser limitado ou ilimitado. Significa o mesmo que gradiente"</blockquote>
Fonte: <a href="http://pt.wikipedia.org/wiki/Degrad%C3%AA" target="_blank">Wikipedia</a> 
Veja um exemplo de degradê na imagem abaixo: 
<div style="height: 0.01%; width: 574px;">
<img src="http://lh3.ggpht.com/_0lCpg_jMUQs/TMLfn0J9pAI/AAAAAAAABn8/PqWEdFoLbig/degrade.jpg" style="display: inline;" /></div>
Repare que a transição do vermelho para o azul é feita de forma suave sem um limite definido para ambas as cores. Isso é um efeito gradiente ou degradê. 
Hoje, com o suporte ao CSS3 fornecido pelos navegadores mais atuais, esse tipo de efeito se torna cada vez mais comum na internet. Vejamos os principais navegadores que suportam o efeito gradiente: 
Firefox 3.6 em diante Google Chrome Safari Internet Explorer 7 em diante 
Cada um desses navegadores utilizam códigos diferentes para mostrar o efeito gradiente. Há três formas de se obter o efeito: vertical, horizontal e radial. Vejamos a estrutura básica de cada um em seus respectivos navegadores: 
Firefox 
<blockquote>
background: -moz-[linear ou radial]-gradient([posição], [cor inicial], [cor final]) 
background: -moz-linear-gradient (top, #CF0000 , #0000FF) /*-- efeito vertical --*/ background: -moz-linear-gradient (left, #CF0000 , #0000FF) /*-- efeito horizontal --*/ background: -moz-radial-gradient (70% 50%, circle [atributo de tamanho], #CF0000, #0000FF) /*-- efeito radial ou central --*/</blockquote>
Se não for determinada uma posição para o efeito, será usado o padrão como de cima para baixo para o vertical, da esquerda para a direita para o horizontal e central para o radial. 
No efeito gradiente radial para o Firefox, é possível determinar onde estará o foco. Para isso, basta inserir dois valores em % no lugar da posição. O primeiro servirá para a posição horizontal e o segundo para a vertical. Veja o exemplo: 
<blockquote>
background: -moz-radial-gradient(50% 50%, circle closest-side #CF0000, #0000FF) /*-- aparece no centro --*/</blockquote>
Todos os atributos para se utilizar efeito gradiente no Firefox se encontram no <a href="https://developer.mozilla.org/en/CSS/-moz-radial-gradient" target="_blank">Mozilla Developer Center</a> 
Google Chrome e Safari 
<blockquote>
background: -webkit-gradient ([linear ou radial], [posição inicial], [posição final], color-stop([espaço em %], [cor inicial]), color-stop([espaço em %], [cor final])) 
background: -webkit-gradient (left top, left bottom, color-stop(80%, #CF0000), color-stop(20%, #0000FF)) /*-- efeito vertical --*/ background: -webkit-gradient (left top, right top, color-stop(80%, #CF0000), color-stop(20%, #0000FF)) /*-- efeito horizontal --*/</blockquote>
O degradê de navegadores webkit nos faz usar um pouco de matemática para a sua aplicação. Como pode ver, nesse nosso exemplo a cor #CF0000 (vermelho) possui 80% de espaço dentro do elemento em que está. O #0000FF tem 20%. O espaço da transição entre uma cor e outra, ou seja, do degradê, será a diferença entre 80% e 20% que é 60%. Logo, o tamanho do espaço do degradê será de 60%. 
Pegamos um outro exemplo, observe o código abaixo: 
<blockquote>
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#cf0000), color-stop(90%,#0000ff))</blockquote>
Nesse exemplo, a cor #CF0000 (vermelho) ocupa 50% do espaço. Já a #0000FF (azul) terá 100% (tamanho total do elemento) - 90% de espaço que dá um total de 10%. Os 40% restantes ficam para o espaço de transição entre as cores. 
Para o efeito radial do degradê para navegadores webkit, o código é um pouco mais complicado. Vejamos a estrutura básica: 
<blockquote>
background: -webkit-gradient(radial, [posição x cor1] [posição y cor1], [intensidade cor1], [posição x cor2] [posição y cor2], [intensidade cor2], from([cor1]), to([cor2]))</blockquote>
Para se formar um círculo perfeito é preciso que x de cor1 seja igual ao x de cor2 e y de cor1 seja igual ao y de cor2. Esses valores devem ser dados em %. Sendo assim, x determina a posição horizontal do foco e y determina a posição vertical. 
O terceiro valor se refere a intensidade do degradê. Quanto mais alto for o valor, maior será o campo de transição entre uma cor e outra. 
Veja como ficaria o código do efeito no exemplo abaixo: 
<blockquote>
background: -webkit-gradient(radial, 70% 50%, 90, 70% 50%, 10, from(#CF0000), to(#0000FF));</blockquote>
Internet Explorer 
O Internet Explorer sempre foi limitado em efeitos do CSS3, mas, mesmo assim, existe código para degradê destinado a ele. Vejamos a estrutura básica: 
<blockquote>
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='[cor inicial]', endColorstr='[cor final]', GradientType=0) para efeito vertical filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='[cor inicial]', endColorstr='[cor final]', GradientType=1) para efeito horizontal</blockquote>
Então, para o nosso exemplo, o código ficaria assim: 
<blockquote>
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CF0000', endColorstr='#0000FF', GradientType=0) /*-- degradê vertical --*/ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CF0000', endColorstr='#0000FF', GradientType=1) /*-- degradê horizontal --*/</blockquote>
Infelizmente, o Intenet Explorer não enxerga gradiente radial como o Firefox e Google Chrome. Pode ser que o IE 9 acrescente mais código para obter este tipo de efeito em sua versão final. 
O efeito 
Agora, veja todos os exemplos que foram dados. Somente o gradiente radial não poderá ser visto no Internet Explorer. Quem usa o Opera e outros navegadores sem suporte verá um fundo vermelho: 
Vertical 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVgecngZH2ZP1-cRnL5_xw3-o2ICahth7rHxLoyNH9IEUPZewcuhQ7NwaBW0tvXQgrKxgZTO2SSVtCmQtVHA6BbT7TfVzS_UeLZDIN4xl1EbWVJxW2DhXlwyKGinSZENFGknbBQeWaTgZc/s1600-h/vertical%5B4%5D.png"><img alt="vertical" border="0" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXI7KeSsBAwPpoNLlNHkaBSQF0LcqfUQq2CMJXwBSZKnaTmSdKxaEhmBLyxP32jUtFN8thdWuaMzgKW_nHGknXmP9DSnXytjqOTCXaMUAVCkDssm6mLHP69ynkc0n_DCCEkzbZAS3tkX3k/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="vertical" width="422" /></a> 
<div id="box-vertical">
</div>
Horizontal 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf03yEhile0xyTqSMXSYA7VXrAqEddAW8fChyphenhyphenQldvmu9lbp2bHI-M3xysZteg4ialWdG2BbjztxvVH2PaPPXq7YdVp6vpM5tLgJoazafnyOeOLlON5phSx5IYnolMVHaurtvthaxFRr-qK/s1600-h/horizontal%5B4%5D.png"><img alt="horizontal" border="0" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvE2u8KIHc9Vc_stIwEt37OpjP2EXyUUmqtqOVacrJ06C_3gg0Z_-MpUlSaQt5lQsOfxN9EIG9tN1PvcsUs9V6Te1KsNK1xXHejhJCoFmMVywk5Ej-qq64o59pXjyWEcg9w7FWT0ZHiS_P/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="horizontal" width="417" /></a> 
<div id="box-horizontal">
</div>
Radial 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZozM8ju4aTpFlGej7GarbetIBA0DcEJF2LEOPZA5elNt43ZzEitEdmb8n5DLRC0faCGpf6X7Py5hneZQkj79EYg_j00-8XIQfvQH6cfLhvuiLjj1Qo38v5rZ7LeveJ4emgq_dFbWE7pyZ/s1600-h/radial%5B4%5D.png"><img alt="radial" border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglNirFCKE_bt8QvHNhps9ZpWAyBP-5F3IXhRq138juv_tovbFqNNH-zY4t5FzWJgNbZOLar81kn6x2Iw6Fiqrqc3KYE0o420aqVPxdo3PBeYIf4RVUMfarF3rtMOhmq61D1P-PAsH-ZZRv/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="radial" width="414" /></a> 
<div id="box-radial">
</div>
Como aplicar o efeito gradiente no blog 
Para aplicar o efeito, é preciso entender que existem navegadores que ainda não tem suporte para esse efeito como, por exemplo, o Opera. Para contornar esse problema, usamos dois tipos de códigos para o background. Um servirá para os que suportam degradê e o outro não. Fica, então, assim: 
<blockquote>
background: #CF0000; background: -moz-linear-gradient(top, #CF0000 , #0000FF); background: -webkit-gradient (left top, left bottom, color-stop(80%, #CF0000), color-stop(20%, #0000FF)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CF0000', endColorstr='#0000FF', GradientType=0);</blockquote>
Observe que há o código destinado ao Google Chrome, Safari, Firefox, Internet Explorer. Caso o navegador não suporte o efeito, ele vai usar o background da primeira linha. 
Para aplicar em seu blog, faça backup do layout antes de qualquer modificação. Depois, vá em Design > Designer do modelo > Avançado. No campo em branco cole o código abaixo mudando as cores que deseja para o seu blog: 
<blockquote>
#header-wrapper     background: #CF0000;     background: -moz-linear-gradient(top, #CF0000 , #0000FF);     background: -webkit-gradient (left top, left bottom, color-stop(80%, #CF0000), color-stop(20%, #0000FF));     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CF0000', endColorstr='#0000FF', GradientType=0); }</blockquote>
Clique em Aplicar ao blog. 
Recomendo que aplique este efeito em um blog de testes para se habituar. Depois que entender e dominar o código, a sua aplicação se torna bem mais fácil. 
Para aqueles que não souberem onde escolher as cores, existe uma <a href="http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm" target="_blank">tabela de cores da web</a> com várias opções. Com certeza, irá te ajudar na hora de aplicar o efeito. 
Espero que tenham gostado desse tutorial de gradiente em CSS3 e também espero que muitos de vocês usem esse recurso que pode dar aquele toque a mais no seu blog. 
Abraço a todos 
Sobre o autor: <a href="http://twitter.com/dicasbrowser">Marco Damaceno</a> é editor do excelente <a href="http://www.dicasbrowser.com/">Dicas Browser</a> – blog especializado em dicas, novidades e tutoriais sobre os principais navegadores web.

CSS3 - efeito gradiente/degradê

Artigo de Marco Damaceno – Dicas Browser – @ dicasbrowser Algo que todo blogueiro deve se preocupar é se seu blog está bem estruturado. I...

Continue Lendo >>

09:14

Text-shadow - colocando sombreado em textos

A propriedade text-shadow do CSS 3, permite colocar um sombreado em textos, dando assim mais profundidade e realçando títulos, listas e parágrafos. Essa propriedade requer quatro informações: deslocamento horizontal, deslocamento vertical, desfoque da sombra e cor do sombreado. Exemplo: text-shadow: –4px 4px 3px #999999 O primeiro valor coloca o sombreado 4 pixels à esquerda do texto. O segundo valor, coloca o sombreado 4 pixel abaixo do texto. O valor de 3 px define o desfoque e #999999 se refere à cor do sombreado. Vejam um exemplo no meu blog <a href="http://www.templates.dicasblogger.com.br/">DB Templates</a>. Notem que o título do post possui um sombreado em cinza escuro, contrastando com a cor original que é azul: <a href="http://www.templates.dicasblogger.com.br/2010/09/template-style.html"><img alt="text-shadow" border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnJocN7dEAGaj1MmmO04ZpP6KbFc1lkxQtjivytzy-nY3jC7foWZCp4XFZZ8MLUkMflMNpdWL-K4u4-F7Sn6xidvx_MOYuOhcEKKIJklFKQ5WYbTiyZROEZDG4rF36bUxojEQsuoyAt8-l/?imgmax=800" style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="text-shadow" width="452" /></a> Podemos usar a propriedade text-shadow em diversos locais do template, especialmente em títulos. Para encontrar a área referente  ao título de cada elemento de página, procure no HTML do template por h1, h2, h3. Exemplos: Código dos títulos da barra lateral (sidebar): <blockquote> #sidebar1 h2,#sidebar2 h2,#sidebar3 h2,#sidebar4 h2 { </blockquote> Código dos títulos dos posts: <blockquote> .post h3 { </blockquote> Código do título do rodapé: <blockquote> #footer h2 { </blockquote> Para colocar o sombreado, basta adicionar a popriedade text-shadow dentro do CSS do título que você deseja alterar. Vamos usar como exemplo, o título dos posts: <blockquote> .post h3 {  color:$postTitleColor; font:$postTitleFont; text-decoration:none; text-shadow: –4px 4px 3px #999999 text-align:left; line-height:1.4em; border-bottom:2px solid $posttitleBorderColor; margin:0 0 20px; padding:0 0 2px; } </blockquote> É possível trabalhar com várias sombras; basta separar os valores com uma vírgula: <img alt="" border="0" height="41" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRMRkF1qbgZXrFCI2SzoWmzTnYx9by_xAkAmN5CdvN2OT3AdJUycpi6nwyMM2MSlEWdgcfehpnrll5YkplJMQnhx8s6KlcUXYqCYVIn3hyhC-sRQippI8sKjnd1xqEGSeKIN5abFJBfyCn/?imgmax=800" style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="" width="250" /> <blockquote> text-shadow: 1px 1px 3px #666, -1px -1px 3px #fff, 1px 1px #666, -1px -1px #fff; </blockquote> <img alt="" border="0" height="44" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxVjPEO8Ylo2KIa3kEFkDkWZxFpKFOLHGmnw_I2Hh3ghy1-BT9Nwr3fgfZnrS7YR2HFAsUk_FN-I8nrWjqxF-7COogF-WC4OCzn0ycjO71y1av4ZudBTrUEYBCz2sedRGE0nzdYJ7KfnLl/?imgmax=800" style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="" width="245" /> <blockquote> text-shadow: 0 6px 4px #33F, -3px -5px 4px #f00, 3px -5px 4px #0F0 </blockquote> É importante escolher a cor base do título, para combinar com o sombreado: <blockquote> .post h3 {  <—título dos posts--> color:#ffffff; <—cor do título dos posts--> font:$postTitleFont; text-decoration:none; text-shadow: 1px 1px 3px #666, -1px -1px 3px #fff, 1px 1px #666, -1px -1px #fff;  <—text-shadow --> </blockquote> Achou complicado? Experimente usar um gerador de código CSS! Entre em <a href="http://css3generator.com/">http://css3generator.com/</a> e procure por text-shadow no menu. Depois, é só criar e ir visualizando o efeito sombreado ;) <table border="0" cellspacing="4" cellpadding="2" width="555"><tbody> <tr> <td valign="top" width="277"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT2QRbzxCx3-x_8KV6vk5TWeCh9dA7zjwJ7ntz8c5oWOxJk3lYZeTC1Vl-mkufBSKV0ZKQYhPKWe45NznbCpoVUoPjp8RZ5OJsnVf1b3rUfKEyzng490z_TvgNapth9rekTZXa3cgivYbE/s1600-h/image%5B10%5D.png"><img alt="css3-generator" border="0" height="169" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Zkzd6ci9E9gNEU4wx0MmRi-iPQkfvJ1jz_yHMMv7jBaOHiWCND8hRt_ltgbapznSnCxGHgwbZ0CnJZ-5L_Q1b8JneZcl1z9-IFIzkhwguuUKGtzX1KAGCaDOWoAKm7FUpWXI_AucY-k8/?imgmax=800" style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="CSS3 generator" width="273" /></a></td> <td valign="top" width="277"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdVOwpNicGdioH8jneyVVtQKyCjsdNEysltksLKsKrUe2oBiuCNhHPUHzI5cOgupP_OaUD7v_9YBxWrQ89Q2jQO2WgGzd-Q3mYE02Tu8WDqx9kHKJRomBcIcr_d8AXuk_tdxcjkh2KjgHV/s1600-h/image%5B11%5D.png"><img alt="text-shadow-generator" border="0" height="169" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsTAnf8I0yJpTDmxkxFQFQRdU0JK5P2OqD6nGTwEh_aJLNOSN8MNa2gzCqoxcCRAhSTsy-YYiCs0VKiUi5HPJzrXXFtZ9IMPyLcht49ZQUVmFs6dApQZubEdpfOhyphenhyphendCaUV4Eli6pcfIHjV/?imgmax=800" style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="Gerador de sombrado" width="269" /></a></td> </tr> </tbody></table> Uma outra opção: http://www.westciv.com/tools/shadows/ Atenção! Como a maioria das propriedades do CSS 3, o text-shadow ainda não é compatível com o navegador Internet Explorer.

Text-shadow - colocando sombreado em textos

A propriedade text-shadow do CSS 3, permite colocar um sombreado em textos, dando assim mais profundidade e realçando títulos, listas e par...

Continue Lendo >>

23:09

Caixa de texto com barra de rolagem

Vocês já devem ter visto em diversos blogs, principalmente nos que publicam códigos, uma caixinha onde o código fica dentro dela e na qual aparece uma barra de rolagem (scroll). Esse efeito, em HTML, se chama textarea. 
A textarea é muito útil, já que economiza espaço dentro do post. 
Como colocar uma caixa de texto com barra de rolagem 
Para colocar uma caixinha com scroll em seus posts, entre no editor do Blogger, clique na aba editar HTML e use as tags <textarea></textarea> no texto que deverá ficar dentro da caixa. Nas imagens abaixo, coloquei um exemplo usando o antigo editor de posts do Blogger, mas o método funciona também no editor atualizado e no Windows Live Writer. (clique sobre as imagens para ampliá-las) 
<ul>
<li><a href="http://www.dicasblogger.com.br/2010/05/os-editores-de-posts-do-blogger.html">Conhecendo os editores de posts do Blogger</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/10/como-usar-o-windows-live-writer.html">Como usar o Windows Live Writer 2011</a></li>
</ul>
Na primeira imagem, vemos a aba “editar html” contendo as tags “textarea”; já na segunda, vemos a aba “escrever”, com a caixinha já pronta: 
<table border="0" cellpadding="2" cellspacing="4" style="width: 555px;"> <tbody>
<tr> <td valign="top" width="277"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKkM24rFbAYdkx5npERCTFtwc4XZO67fpmL_tn-jug4v8p1fqrMKVJjeXTxdhot0x0I8QGkRdrP48CtZErUScvY2c2CpHe_Af-49EbMI54dlOY01TfrOTQy021pP1bPtqLTzHGVKiBvnF2/s1600-h/textarea%5B8%5D.png"><img alt="textarea" border="0" height="144" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiugyZFYZCDaMka0mV7wPK68yYK9Lkq4bz19T3Gt2wi5RKwfjZ12Uou4hF1VH_gVhDOuo3yYXxphv31p0QgI0-FrPrM34TWVhvaMFTv1cw7tLI4Acb2xkkpUSLci0RWV4EIWeeeIibdIoUF/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="textarea" width="277" /></a></td> <td valign="top" width="277"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc0P0iqoLQe9bTKrP-_VU_onYtKa2BrfZn5NS3njLolVB96-FKT59Li_llmYkljclWkX1U-hYwfQOPbj6kEChCMec2cbdLHaQkgs6rS0CIX6o1mdXr9Caq5uxZ3LUCXIrCFRtDJbbrvsJx/s1600-h/caixa%5B7%5D.png"><img alt="caixa" border="0" height="144" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ebsw02cAOXsYPO2u1IjVVdN-_n3Ymoul2SamOaT1gwMcNhgL_TkO-o2kLU1CHnG0oCExnvCts0JR45o_lDkr7owfZEu7KmOQxBAa6y8reEjVeo5NBnuSQ1J_WIAji4rkzexuGCTEmpx2/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="caixa" width="267" /></a></td></tr>
</tbody></table>
Estilizando a caixa de texto com CSS 
Como vocês podem notar, a caixinha não é lá muito bonita, mas um pouco de CSS podemos mudar completamente seu visual ;) 
Entre no painel do Blogger, clique em design e depois em editar HTML. Usando o Ctrl+F do teclado, procure por ]]></b:skin> dentro do HTML do template. Agora, cole o seguinte código logo acima dessa tag e salve. 
<blockquote>
/** textarea */ textarea { border: 3px double #ccc; background: #efefef; width: 80%; height: 100px; }</blockquote>
Vamos para um exemplo prático? Abaixo, segue o código do <a href="http://www.dicasblogger.com.br/2009/04/translator-widget-tradutor-para-blogs.html">Translator Widget</a>: 
<textarea> <div style="border:1px solid #ccc;padding:10px 4px 3px 4px;text-align:center;background-color:#efefef;"> <div align="center"><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Czh-CN&hl=pt&ie=UTF8'); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Chinese" src="http://lh5.ggpht.com/_mcq01yDJ2uY/Sdke4C8za2I/AAAAAAAAAkU/Mpfn_ntCweU/China.png" title="Google-Translate-Chinese"></a><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cfr&hl=pt&ie=UTF8'); return false;" title="Google-Translate-Portuguese to French "><img style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Portuguese to French" src="http://lh4.ggpht.com/_mcq01yDJ2uY/SdkfGSkRgfI/AAAAAAAAAkc/X4E87SASLtA/France.png" title="Google-Translate-Portuguese to French"></a><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cde&hl=pt&ie=UTF8'); return false;" title="Google-Translate-Portuguese to German"><img style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Portuguese to German" src="http://lh3.ggpht.com/_mcq01yDJ2uY/Sdke3rFjMUI/AAAAAAAAAkE/o0kR0MfngXA/Germany.png" title="Google-Translate-Portuguese to German"></a><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cit&hl=pt&ie=UTF8'); return false;" title="Google-Translate-Portuguese to Italian"><img alt="Google-Translate-Portuguese to Italian" style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" src="http://lh3.ggpht.com/_mcq01yDJ2uY/Sdke2xCmrPI/AAAAAAAAAj0/Jv14yyDo1i4/Italy.png" title="Google-Translate-Portuguese to Italian"></a><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cja&hl=pt&ie=UTF8'); return false;" title="Google-Translate-Portuguese to Japanese BETA"><img style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Portuguese to Japanese" src="http://lh5.ggpht.com/_mcq01yDJ2uY/Sdke3f2KbNI/AAAAAAAAAj8/xyGLFdUZbVY/Japan.png" title="Google-Translate-Portuguese to Japanese"></a><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cen&en=pt&en=UTF8'); return false;" title="Google-Translate-Portuguese to English "><img style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Portuguese to English" src="http://lh4.ggpht.com/_mcq01yDJ2uY/SdkhG4bjxqI/AAAAAAAAAks/Ws6AzZdnZTw/United%20States%20of%20America%20%28USA%29.png" title="Google-Translate-Portuguese to English"></a><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cru&hl=pt&ie=UTF8'); return false;" title="Google-Translate-Portuguese to Russian BETA "><img style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Portuguese to Russian" src="http://lh5.ggpht.com/_mcq01yDJ2uY/SdkfGVESWsI/AAAAAAAAAkk/-ruu99vFElQ/Russian%20Federation.png" title="Google-Translate-Portuguese to Russian"></a><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Ces&hl=pt&ie=UTF8'); return false;" title="Google-Translate-Portuguese to Spanish "><img style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Portuguese to Spanish" src="http://lh3.ggpht.com/_mcq01yDJ2uY/Sdke312ethI/AAAAAAAAAkM/KeACgltRc38/Spain.png" title="Google-Translate-Portuguese to Spanish"> <center><a href="http://www.dicasblogger.com.br/2009/04/translator-widget-tradutor-para-blogs.html" target="_blank">Translator Widget by Dicas Blogger</a></center>

Podemos alterar a cor da borda e do plano de fundo, bem como largura e altura:

/** textarea */
textarea {
border: 3px double #ccc; (espessura e cor da borda)background: #efefef; (plano de fundo da caixa)
width: 80%; (largura)
height: 100px; (altura)
}

Veja uma tabelas de cores neste link – Tabela de cores web e boa diversão.

Caixa de texto com barra de rolagem

Vocês já devem ter visto em diversos blogs, principalmente nos que publicam códigos, uma caixinha onde o código fica dentro dela e na qual a...

Continue Lendo >>

14:34

CSS - Tabela com bordas e linhas visíveis

A tabela é um recurso fantástico do HTML, já que possui a capacidade de nos dar muitas informações uando pouco espaço. 
Antigamente – antes do CSS – a tabela HTML era usada até para criar o layout de um site. Hoje, o uso ficou mais restrito à exibições de ítens em forma de planilha. 
A tabela em HTML puro, sem CSS, é muito, muito feia. Vejam: 
 
<table border="2" cellpadding="2" cellspacing="4" style="width: 559px;"> <tbody>
<tr> <td valign="top" width="270">célula 1</td> <td valign="top" width="273">célula 2</td></tr>
</tbody></table>
<blockquote>
<table border="2" cellspacing="4" cellpadding="2" width="559"><tbody> 
    <tr> 
      <td valign="top" width="270">célula 1</td> 
      <td valign="top" width="273">célula 2</td> 
    </tr> 
  </tbody></table></blockquote>
TABLE é a tabela toda, TR são as linhas,  TD são as colunas e célula é o conteúdo. 
Aplicando um pouco de CSS, podemos transformar a tabela em algo muito mais bonito:<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfTqsJpxADKClVQXTZpZerWFzNfxKkT2naS6UPuqLxR4TupQiKy2QXpcKhvLIUHT2p-plX5Zdpy-WU_IaiSozJVOIaNwkCU5gPFty37D4yzN2JiX2I4sVSUJoiB4DDn6lDmcsw2joh5QI6/s1600-h/image%5B2%5D.png"><img alt="table-css" border="0" height="138" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcCBBqQts9yv_z8kGP1yd3Y7jU7n0w_8wpqa42TvTSgTzN5hDkxbbWwXYG2_S0fnMcQMQktXnWF2wtVIeZGm_uG7OZFwRLAZyAHzgnzP-rfULTR8iWBcYDLX7fRnNVKD59s0b0hyvuDgEH/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Tabela estilizada com CSS" width="502" /></a>Observem como os ítens ficaram super organizados e ocupando pouco espaço. 
Abaixo temos uma tabela com bordas e linhas visíveis, que foi estilizada usando CSS 
<table border="1" bordercolor="#cccccc" class="bordasimples" style="width: 550px;"> <tbody>
<tr> <td style="background-color: #eeeeee; font-weight: bold;">Título</td> <td style="background-color: #eeeeee; font-weight: bold;">Título</td> <td style="background-color: #eeeeee; font-weight: bold;">Título</td></tr>
<tr> <td>item 1</td> <td>item 1</td> <td>item 1</td></tr>
<tr> <td>item 2</td> <td>item 2</td> <td>item 2</td></tr>
</tbody></table>
Uma forma simples de “desenhar” a tabela do jeito que queremos, é usando um editor HTML. O meu preferido é o <a href="http://www.baixaki.com.br/download/nvu-portable.htm">NVU Portable</a>. (clique sobre as imagens para ampliá-las) 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6GHwaqPoDEnCTWA-TaJutZr-Deo6gEvHWEgncyYkKypeK-kQjYkoS-hyaJeM5Xgqh2P1ytgaD2MSku8MqU8LVI1UHiDxIFMLCfKRY9JfLvW4eO8ihMoZiz0G5R_26Z2PVtPUBFc6RASf1/s1600-h/image%5B5%5D.png"><img alt="nvu-portable" border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOf-Aaly_9Ej5I1Ye3j0RaSgX1kbxdbK_klj27pJc14BEr16oCI3ZooG_VH9rHIR3XRMzWL9ZdVMfTR-jBHDr3jWn3DVTwnE8tPwK9NTesbSIlAXXE0q9n5tb3kmEymsleBS2Uyk70Guj7/?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Desenhando a tabela no NVU" width="502" /></a> 
Notem que no NVU eu posso inserir mais linhas, colunas e células com alguns cliques. 
Também é possível colocar um plano de fundo nas células e na tabela e ainda dá para inserir links e formatar cores e fontes do texto da mesma forma que fazemos no editor de posts do Blogger e no Windows Live Writer. 
Vamos brincar um pouquinho? Entre no NVU e acesse a aba “código-fonte”. 
Cole o código abaixo e depois clique na aba “normal”. 
<blockquote>
<style type="text/css"> table.bordasimples {border-collapse: collapse;} table.bordasimples tr td {border:1px solid #ccc; padding-left: 5px;} </style> <table style="width: 550px;" class="bordasimples" border="1" bordercolor="#cccccc"> <tbody><tr><td style="background-color: rgb(238, 238, 238); font-weight: bold;">T&iacute;tulo</td> <td style="background-color: rgb(238, 238, 238); font-weight: bold;">T&iacute;tulo</td> <td style="background-color: rgb(238, 238, 238); font-weight: bold;">T&iacute;tulo</td> </tr><tr> <td>item 1</td> <td>item 1</td> <td>item 1</td> </tr><tr> <td>item 2</td> <td>item 2</td> <td>item 2</td> </tr></tbody></table> </blockquote>
A parte que coloquei em vermelho, corresponde ao CSS. 
Clique com o botão direito do mouse sobre alguma célula e escolha “cor do plano de fundo” . Selecione então as cores de fundo tanto das células quanto da tabela. 
<table border="0" cellpadding="2" cellspacing="4" style="width: 555px;"> <tbody>
<tr> <td valign="top" width="277"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir36i1vnSd5zNjHHiHCmk44kNDoySg-NDUVQrfF8XakGbfLqxNAepM9W4WW66iEtN1C3k6-Iwzp4dtnM_VTyw19VjGENB5fGs1OPv7esaZRaxNI0LlAUVS3s_xq8Rc2rl4LBu9TwiHgfIm/s1600-h/image%5B41%5D.png"><img alt="nvu-table" border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3dNjoAFhZFn2tEkqcm7iq7FDA-DrP-YVVJkXmGgvJ0pihLw6ahXiXTVDdV8UcwTQ6IGLFIbs0F0yeHU34iY2udQfRgkhV5aNx_BVLNRT6tPNszlc7UJ1zgmjp87pIfWfS1X7jUw1mZJn2/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Plano de fundo da tabela" width="259" /></a></td> <td valign="top" width="277"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3WmD3wN4-44eBEMUPkXqqxZvaG28w8bOrYaGlTUVo_8qRt2g-Xn_tLgC531v5UjD61nEPrmksVdMQuhzNWAGH4V5viB_GDSCYljWX48N6DjeVmmyB35qVILJyrGrjIxDNbILWX1_k5_KY/s1600-h/image%5B42%5D.png"><img alt="nvu-portable" border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkVahbSICgG8l8FSZPw7sAXqRX8hP_r_eH8XXgSppM7P-wjjMEq8BqWmOTBig-qBjEmQzEjIf1wbRQUpflx9FM92EBCV3AMAqOuIQEOW8L54Yx72huDmHgHkiRNRlS0Sbl2Udnfm9NhijK/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Escolhendo as cores" width="257" /></a></td></tr>
</tbody></table>
Escreva os ítens dentro das células e formate o texto a seu gosto. 
Para inserir um link, escreva o texto, passe o mouse sobre ele e clique no ícone “link” 
Irá abrir uma nova janela. Digite o endereço do link no local indicado.<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg12VVCwXAxYAa3AL2II9va1hG-pfWh8QJS-1AV3QrpU_cwH0ia-gpspVp1ojW_i0YgNTm7hO5zIuhpE2YXpNTC8zyMP8qgvGowyysSpPRan8n8BJ0hEoT7mIwFT8YTR-goxCAzWsRqJ5BF/s1600-h/link%5B1%5D.jpg"><img alt="link" border="0" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjIS2Tr7ofT0Ly27lcmF02GVK9fBIoC26ogR6w3PL318RWqJVrm_GP_vYCUTGzX6UPNPJjG_wY8Q1Hd0BCAxIBPoQ2STfm17slMvqxhFEGU2RjIP5pZC22qagvtbf7qZbFWG5mrjjgPkSq/?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Formatando ítens na tabela" width="502" /></a> Depois que estiver tudo pronto, clique em “código-fonte”, copie o código que está entre <body> e </body> e cole em “editar HTML” no editor de posts do Blogger. 
<table border="0" cellpadding="2" cellspacing="4" style="width: 555px;"> <tbody>
<tr> <td valign="top" width="277"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_k0RzuCyXjN3RolmJYc69-iLXDTIJypIsQeJkJqut_Amg5xoAztFAH_yJPnSRjozGIg0Ur_nfa82Tbof41kqeb04E9qnPRQj8kNTfAARFcRMvcoRZEAxhQvKvQs4QcKXHZjltxO9Pn-lj/s1600-h/image%5B43%5D.png"><img alt="nvu-code" border="0" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrO21AzRvJ6YA97WNNK31OmSaAddZ2jwA0nFzwcKQRKqLe-Ut9sG4loflOV0WwiN99ovLCqWkqrGMmCGdC774Pr0UkNPRQHwvKczdvxWU4phChumejyqmKx9VCsEYAYIF5hyphenhyphenk9omVBcdWl/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Código-fonte da tabela" width="264" /></a></td> <td valign="top" width="277"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioyEun09VTE_KOnou756pfnt0ylYl4feGwO9Ii7to8AOgeDpjm8sQ07jcJ9e7KiLMB0bMKHXPfgjeKR9WQgu14qaq63mUE9qtoZ_0TbFDdVHX7BRQIl6m4WTI1Vt8ekKdlA0OZlQIQWAc5/s1600-h/image%5B44%5D.png"><img alt="blogger-posts" border="0" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF4KWgmIDJUzAafVmaGi1rKku_bB3ep64zkzBIzt9tsdz0B6yVP7VDhW_yXzLAFrMA47dvn0Gz39VzqdI4tT0COutxqCnlrWXt-YugrUf-fyY9oTKZDW8qQUYq9fo2IxqZOcxC5SY_rmqS/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Editor do Blogger" width="259" /></a></td></tr>
</tbody></table>
Este método não funciona no Windows Live Writer e nem no antigo editor do Blogger. 
Se você usa o WLW, cole o código abaixo no HTML do template, antes de </b:skin> 
<blockquote>
table.bordasimples {border-collapse: collapse;} table.bordasimples tr td {border:1px solid #ccc; padding-left: 5px;}</blockquote>
No NVU Portable, utilize o seguinte código para formatar sua tabela: 
<blockquote>
<table style="width: 550px;" class="bordasimples" border="1" bordercolor="#cccccc"> <tbody><tr><td style="background-color: rgb(238, 238, 238); font-weight: bold;">T&iacute;tulo</td> <td style="background-color: rgb(238, 238, 238); font-weight: bold;">T&iacute;tulo</td> <td style="background-color: rgb(238, 238, 238); font-weight: bold;">T&iacute;tulo</td> </tr><tr> <td>item 1</td> <td>item 1</td> <td>item 1</td> </tr><tr> <td>item 2</td> <td>item 2</td> <td>item 2</td> </tr></tbody></table> </blockquote>
Depois que a tabela estiver pronta, cole o código no “código-fonte” do Live Writer. 
A princípio pode parecer um pouco confuso, mas nada que praticar não resolva ;)

CSS - Tabela com bordas e linhas visíveis

A tabela é um recurso fantástico do HTML, já que possui a capacidade de nos dar muitas informações uando pouco espaço. Antigamente – antes ...

Continue Lendo >>

18:39