Como inserir, editar e excluir marcadores no Blogger

O marcador ou etiqueta, que em inglês é nomeado como label, funciona como uma classificação de assuntos nos artigos do blog. Assim, por mais específico que um blog seja, sempre será possível tratar de determinadas áreas com mais atenção. É por isso que os marcadores são itens muitos importantes na estrutura de um blog, já que ajudam o leitor a identificar facilmente o assunto que mais tem interesse de conhecer. Neste artigo, o<a href="http://www.dicasblogger.com.br/" target="_blank"> Dicas Blogger</a> irá ensinar como inserir, editar e excluir os marcadores, tanto para um quanto para vários posts ao mesmo tempo.<div> <br /></div> <h3> <span style="color: red;">Como inserir marcadores</span></h3> <div> Existem duas maneiras de inserir um marcador.</div> <div> 1) Você poderá adicioná-lo diretamente na postagem, no <b>editor de textos do Blogger</b>: Acesse: Nova postagem > Marcadores > <b>digite o nome do marcador</b> ou <b>clique em uma das opções</b> que aparecerem. Em seguida, clique em concluído.</div> <div> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAvdmSFK1JXAFh2Mx7xy5i_j8zRjtM9ID8YPWeE04MXcA0q5Y3NKkFTchV-siNkFC8qjjV6hPHaSgkf0WRu5jynfrbsWbaxmiE7p2r_ONs7vWDOTInArIYR-LcMY-3SzO5oi6VWirAljJG/s1600/Editar+marcadores+blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAvdmSFK1JXAFh2Mx7xy5i_j8zRjtM9ID8YPWeE04MXcA0q5Y3NKkFTchV-siNkFC8qjjV6hPHaSgkf0WRu5jynfrbsWbaxmiE7p2r_ONs7vWDOTInArIYR-LcMY-3SzO5oi6VWirAljJG/s1600/Editar+marcadores+blogger.jpg" /></a></div> <div> <br /></div> <div> 2) Na área geral de postagens, selecione os artigos, clique em <b>novo marcador</b>, digite o nome na janela que irá abrir e clique em ok. Assim, o marcador será adicionado às postagens selecionadas ao mesmo tempo, sem a necessidade de configurar um a um.</div> <div> <br /></div> <h3> <span style="color: red;">Como excluir marcadores</span></h3> <div> <span style="color: red;"><br /></span></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQBbL5lmRwxhKUC3RVRhd_lsrtzkeh3sBcJjH4wTjrZXKxd0Mw9ge8rysvWayDeqAT3ezyqIgG0mdldL0qTyQpE-VONwpa7iZYOGyuhpwkQFKLvp29DImB0KieSkSV9ujtQsrxVmlRY0M8/s1600/Editar+marcadores+blogger+excluir.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQBbL5lmRwxhKUC3RVRhd_lsrtzkeh3sBcJjH4wTjrZXKxd0Mw9ge8rysvWayDeqAT3ezyqIgG0mdldL0qTyQpE-VONwpa7iZYOGyuhpwkQFKLvp29DImB0KieSkSV9ujtQsrxVmlRY0M8/s1600/Editar+marcadores+blogger+excluir.jpg" /></a></div> <div> <br /></div> <div> Na área de geral de postagens, clique em <b>todos os marcadores</b>, no canto direito da tela. Em seguida, clique sobre o marcador que deseja excluir (Exemplo: arroz). Ele listará todas as postagens que possuem o marcador, em seguida, selecione as postagens (algumas ou todas, conforme preferir) e clique no ícone do marcador para que todos sejam listados. Agora, é só clicar novamente sobre o marcador que deseja excluir (Exemplo: arroz) e pronto. Observe que, rapidamente, aparecerá a mensagem: O marcador arroz foi removido das 2 postagens selecionadas.</div> <div> <div> <br /></div> <h3> <span style="color: red;">Como editar os marcadores</span></h3> <div> <br /></div> <div> Digamos que você <b>escreveu o nome do marcador errado</b> e quer corrigir. Bom, não tem como editar diretamente o marcador. Para corrigir, será necessário inserir um novo marcador (com a palavra correta) e excluir o que está com problema.</div> <div> <br /></div> <div> Ou então, digamos que alguns marcadores não sejam mais atrativos e precisem ser substituídos. É muito comum, alguns blogs, no início da jornada, criarem um monte de etiquetas. Com o tempo, é necessário fazer uma limpezinha, inserindo novos e excluindo os que não são mais relevantes. Então, qual é o passo a passo para fazer isso? Siga as duas primeiras dicas, sempre inserindo o novo antes de excluir o antigo.</div> <div> <br /></div> <div> Para evitar algum erro durante a edição, opte sempre em inserir o novo marcador primeiro. Além disso, escolha artigos com poucos marcadores, para testar e ver como fica.</div> <div> <br /></div> <div> E atenção galera! Pelo amor de Deus, <b>não cliquem na lixeirinha</b>, por que assim vocês iram excluir os posts e não tem como corrigir isso. Só <a href="http://www.dicasblogger.com.br/2012/05/como-fazer-backup-no-novo-blogger.html" target="_blank">um backup atualizado pra salvar</a>.</div> <div> <br /></div> <h3> <b><span style="color: red;">Como instalar o gadget marcadores</span></b></h3> <div> <b><span style="color: red;"><br /></span></b></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM7MWH2exh1_apnJ_4oxq7SjuTg5hTJ0O7drZqhq-PP3nH_wjkvP0qEbhlFEZzyljHWQQVIgBLyCoRbyJuQypX7SNLPQHahOyO2R_19HA5Nb6ujTlzBTR2p8zqYYbkyoXkqrnPIJBOOZm5/s1600/novoblogger-adicionargadget.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM7MWH2exh1_apnJ_4oxq7SjuTg5hTJ0O7drZqhq-PP3nH_wjkvP0qEbhlFEZzyljHWQQVIgBLyCoRbyJuQypX7SNLPQHahOyO2R_19HA5Nb6ujTlzBTR2p8zqYYbkyoXkqrnPIJBOOZm5/s320/novoblogger-adicionargadget.png" width="320" /></a></div> <div> <div> Na aba <a href="http://www.dicasblogger.com.br/2012/05/como-mudar-o-layout-no-novo-blogger.html" target="_blank"><b>Layout</b>, clique em <b>adicionar gadget</b></a>. Escolha a opção marcadores e selecione as configurações de acordo com a sua preferência. Por exemplo, você poderá:</div> </div> <div> <br /></div> <div> <ul> <li>Mostrar todos ou selecionar alguns marcadores;</li> <li>Listá-los em ordem alfabética ou por frequência;</li> <li>Exibir em lista ou em modo cloud;</li> <li>Além de poder mostrar o número de postagens por marcador. </li> </ul> </div> <div> <br /></div> <div> Após selecionar as configurações, clique em salvar.</div> </div> <div> <br /></div> <div> É isso aí galera! Não quero ver mais ninguém com dificuldade para inserir ou excluir marcadores ;)</div>

Como inserir, editar e excluir marcadores no Blogger

O marcador ou etiqueta, que em inglês é nomeado como label, funciona como uma classificação de assuntos nos artigos do blog. Assim, por mais...

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs9xSuUapPOj-x2gOgzRMUwJt-w7MYcHq-N7T7vsDvqiTgrh3tlatGDiEEhzgdAw9G9nJNb2_djfClqF4OPUW-IyWr9Szs3PW5RvJUe-5OVKdFhghy6EjLYB1mD9bmq4VttaIB3jaz0PWM/s1600/autor.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs9xSuUapPOj-x2gOgzRMUwJt-w7MYcHq-N7T7vsDvqiTgrh3tlatGDiEEhzgdAw9G9nJNb2_djfClqF4OPUW-IyWr9Szs3PW5RvJUe-5OVKdFhghy6EjLYB1mD9bmq4VttaIB3jaz0PWM/s1600/autor.png" 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://www.dicasblogger.com.br/2012/10/como-editar-html-na-nova-interface.html" 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://www.dicasblogger.com.br/2010/07/como-hospedar-imagens-no-picasa.html" 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTi-FEaM9Y14Bjm0yP0C5VwpBS0tZ9XzNByGVXc7SUX9EJUj7-ca-gz8dPn4airZKMU9CGhtCgJ82GEJLQZFnY8w2WPEZgGL_PI_IryAf7eg9a0DEuT9_fgBsdeMr7YuqJCcg_dbkt1iKh/s1600/descri%C3%A7%C3%A3o.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTi-FEaM9Y14Bjm0yP0C5VwpBS0tZ9XzNByGVXc7SUX9EJUj7-ca-gz8dPn4airZKMU9CGhtCgJ82GEJLQZFnY8w2WPEZgGL_PI_IryAf7eg9a0DEuT9_fgBsdeMr7YuqJCcg_dbkt1iKh/s1600/descri%C3%A7%C3%A3o.png" title=" " /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;"><a href="http://www.priscilafago.com/" 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 >>

Personalizando o gadget Postagens Populares

<img align="left" alt="" border="0" height="119" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiraSCm0LmYF3QL7-AyjxSZNC67A66yZLqn0lQ4b_3Y7Yj7-PE_Q8q1gii0_TK-_qquqtWUFyDHmwhmIvm7GqZaIJupZovSMfw3oAOqHB7sSWItI_unMWWguOP56aYpfibGOkKIHcptEJn2/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: left; margin: 0px 7px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="107" />Um dos vários recursos recém lançados pelo Blogger, foi o gadget <strong>Postagens Populares</strong>, que exibe os posts mais acessados, baseando-se no serviço de estatísticas nativo. <br /> No post <a href="http://www.dicasblogger.com.br/2010/08/gadget-postagens-populares.html">Novo gadget – Postagens populares,</a> ensinei como colocar o gadget na barra lateral (sidebar) do blog.<br /> O problema é que em alguns templates – e os nosso estão incluídos – o gadget aparece desconfigurado. Vejam um exemplo na imagem abaixo:<br /> <img alt="postagens-populares" border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM8fOYpLy2xyHiWF8PA7CVPJSqdJmF2SEdMxpj5xMCAH5PCefibpe5qQMUxS53ddBG36_qR0b-kutUcFFywntb1Fw2LC7xt3i8JRWonmAc8DF4aWKmG1bwPCGvJzvNGnaegLlck9lmGzRY/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="452" /><br /> Perceberam que as setinhas aparecem em cima do texto? Para consertar isso, segui este tutorial do Mundo Blogger -  <a href="http://www.mundoblogger.com.br/2010/10/instalar-e-personalizar-o-gadget-de.html">Instalar e personalizar o Gadget de Postagens Mais Populares do Blogger</a> e fiz as alterações necessárias para o meu template.<br /> Acredito que o código deve variar de template para template, mas vamos lá.<br /> Entrem em design>editar HTML. Antes de <strong>]]></b:skin>,</strong> colem o código abaixo:<br /> <blockquote> #PopularPosts1 li{ <br />padding-left: 15px; <br />padding-top: 3px; <br />}</blockquote> A parte <strong>padding-left,</strong> se refere à distância que deve existir entre a imagem e o texto. Já <strong>padding-top</strong>, se refere à altura da imagem. Façam os ajustes nesses dois elementos e vá visualizando até ficar do modo correto e daí salve o template.<br /> <img alt="" border="0" height="229" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL-ZrrflYUTy-6QuLGDEJyd7S0GOR0KTK3CuGYIsWHrEhZTWuxChBgYIEJVIAykcazid31_Io1kZu5TjjjXAKwp4TJGcrqT_vpT-X0W3X5IIRMGNS_aEvlEarZ-mhH2E_Ow0a40QV17tHs/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="452" /><br /> Além de acertar  a distância entre o texto e a imagem,  podemos aplicar estilos, usando  CSS. Para exemplificar, colocarei borda e plano de fundo no gadget:<br /> <blockquote> #PopularPosts1 li{ <br />padding-left: 15px; <br />padding-top: 3px; <br />} <br />#PopularPosts1 .widget-content{ <br />border: 1px solid #ccc; <br />background: #efefef; <br />}</blockquote> <img alt="" border="0" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2UUbe648dqwKOro2-hOTzQP6NGlL-IFeNGVPdoaw9kGuSeNryxZfISJCpSis-YQgnYShud3YtxmPeQIs0ZY3Bv2KRSwehj1ZL7mJlC4UNDoqxw3YxvQyeEJNX98vU4geqTwNJ0J8D-aHy/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="452" /><br /> Para mudar a cor do resumo dos posts, acrescente este trecho:<br /> <blockquote> .item-content{ <br />color: #1d85dd; <br />}</blockquote> <img alt="" border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRd7haDEGllGmiIrLoLMK5BrXtyCm8hyphenhyphenVS6PQBa_2aolHEMbq0ll9pXe0eMI0CAdhSfGrxvZefpC65OR2xCOHp0psu4sC-kavmE1g405pLrDtsBnhBLAtc6YntdeOAz8Tr8d0MiLtWfndS/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="452" /><br /> Mude as cores a seu gosto. Se não sabe os códigos , acesse uma <a href="http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm">tabela de cores</a><br /> O CSS final seria este, com as devidas modificações de acordo com cada template:<br /> <blockquote> #PopularPosts1 li{ /*Estilo para acertar a imagem*/ <br />padding-left: 15px; <br />padding-top: 3px; <br />} <br />#PopularPosts1 .widget-content{ /*Estilo para o conteúdo*/ <br />border: 1px solid #ccc; <br />background: #efefef; <br />} <br />.item-content{ /*Estilo para o resumo dos posts*/ <br />color: #1d85dd; <br />}</blockquote> <strong>ATUALIZAÇÃO:</strong> Para retirar o ícone que vem antes do texto, substitua:<br /> <blockquote> #PopularPosts1 li{ /*Estilo para acertar a imagem*/ <br />padding-left: 15px; <br />padding-top: 3px; <br />} </blockquote> por este outro código:<br /> <blockquote> #PopularPosts1 li{ /*Estilo para retirar o ícone*/ <br />background-image:none; <br />}</blockquote> Este post foi criado à pedido de querida leitora <a href="http://amorepazsemfronteiras.blogspot.com/">Lucy – Amor e Paz Sem Fronteiras</a><br /> Créditos de parte do código CSS ao <a href="http://www.mundoblogger.com.br/2010/10/instalar-e-personalizar-o-gadget-de.html">Mundo Blogger</a>, um dos meus blogs favoritos <img alt="Smiley piscando" class="wlEmoticon wlEmoticon-winkingsmile" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi76R-Sd7CV0d2B3_ZpfHSdWK5TG76kw6DLQkj-2B4GJZ67TWivVQbqxPzjkqO-wEbbmh1Pewd51bV6LZ8pV0tj9sEthkJoqlTBCWHxavBY_9YKaI5fEzVfD4ehinK_C8k0ec1hnPwk5Fxf/?imgmax=800" style="border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none;" />

Personalizando o gadget Postagens Populares

Um dos vários recursos recém lançados pelo Blogger, foi o gadget Postagens Populares , que exibe os posts mais acessados, baseando-se no ser...

Continue Lendo >>

Personalizando os links de navegação do Blogger

<img align="left" alt="image" border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnRLkVpVHNbdj9rw0HtOIBrSoaq-IX8GlLRQr3oVh4MEuObJyIGTEdSC4jX4gNLDKnSTnFLo7Gr_sPARhK-Pnj562OVYtYB8yWEzhZWhJ6r3yX_SOoc1OH7miAggHK6ZgNJnqSCDJur3fr/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: left; margin: 0px 6px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="130" /> <br /> Os links de navegação, são aqueles 3 links que aparecem no final de cada página dos blogs do Blogger. Eles servem para auxiliar o visitante a “navegar” pelo arquivo do blog, avançando e retrocedendo as postagens do arquivo. <br /> <br /> <img alt="blog-pager-blogger" border="0" height="52" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXoyUHmmdl_c0v-mUPEpkgVzTsRP8GMxohHflBBApTGqXNwFiA1iruil3o3Rbqdg1RK_ExZj9t18bH8ztNb6P0dettdr7z1iVCVG_pAQQs-lHeD1S0ZUcZ1o7bcTYjepHvSYqt0gG0_P3P/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Links de navegação" width="491" /> <br /> Considero obrigatório, o uso dos links de navegação, já que sem eles ficaria muito complicado ter acesso a todos os posts que não se encontram na página inicial. <br /> <ul> <li><a href="http://www.dicasblogger.com.br/2009/03/recuperar-links-de-navegacao-do-blogger.html">Como recuperar os links de navegação do Blogger</a> </li> </ul> Muito bem. Com um pouco de CSS e com algumas mudanças no código original do Blogger, podemos fazer maravilhas com os links de navegação. <br /> <br /> Primeiramente, irei ensinar como mudar o código original. Antes de começar, faça um <a href="http://www.dicasblogger.com.br/2008/05/backup-template-widgets-blogger.html">backup completo do template</a> ou use um blog de testes. <br /> <br /> Entre em design>editar HTML, marque a caixa<b> expandir modelos de widgets</b>  e, usando o comando Crtl+F do teclado, procure por: <br /> <blockquote> <br /> <b:includable id='nextprev'> <br /> <div class='blog-pager' id='blog-pager'> <br /> <b:if cond='data:newerPageUrl'> <br /> <span id='blog-pager-newer-link'> <br /> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> <br /> </span> <br /> </b:if> <br /> <b:if cond='data:olderPageUrl'> <br /> <span id='blog-pager-older-link'> <br /> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> <br /> </span> <br /> </b:if> <br /> <b:if cond='data:blog.homepageUrl != data:blog.url'> <br /> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> <br /> <b:else/> <br /> <b:if cond='data:newerPageUrl'> <br /> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> <br /> </b:if> <br /> </b:if> <br /> </div> <br /> <div class='clear'/> <br /> </b:includable> </blockquote> <br /> Substitua tudo por: <br /> <blockquote> <b:includable id='nextprev'> <br /><div class='blog-pager' id='blog-pager'> <br /><b:if cond='data:newerPageUrl'> <br /><span id='blog-pager-newer-link'> <br /><a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='posts mais recentes'>&#171; página anterior</a> <br /></span> <br /></b:if> <br /><b:if cond='data:olderPageUrl'> <br /><span id='blog-pager-older-link'> <br /><a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='posts mais antigos'>próxima página &#187;</a> <br /></span> <br /></b:if> <br /></div> <br /><div class='clear'/> <br /></b:includable></blockquote> <br />Salve o template. <br /> Agora iremos aplicar o CSS.  Procure por este trecho: <br /> <blockquote> #blog-pager-newer-link {   <br /> float: $startSide; <br />} <br /> <br />#blog-pager-older-link { <br />  float: $endSide; <br />} <br /> <br />#blog-pager { <br />  text-align: center; <br />}</blockquote> **Para blogs com template do <strong><span style="color: #ff8000;">Designer do modelo</span></strong>, o trecho é este:<br /> <blockquote> <br />.blog-pager {  <br />background: $(paging.background); <br />}<br /> .blog-pager-older-link, .home-link, <br />.blog-pager-newer-link { <br />  background-color: $(content.background.color); <br />  padding: 5px; <br />}</blockquote> Substitua tudo por:<br /> <blockquote> #blog-pager a { <br />font-family: Arial; <br />color: #333; <span style="color: red;">/*Cor da letra*/ </span>font-size: 13px; <span style="color: red;">/*tamanho da letra*/</span> <br />padding: 5px; <br />text-decoration: none; <br />background: #e6e6e6;<span style="color: red;"> /* cor do fundo*/ </span>border: solid #ccc 1px; <span style="color: red;">/*cor da borda*/ </span>}<br /> #blog-pager a:hover { <br />color:#fff;  <span style="color: red;">/*Cor da letra ao passar o mouse*/ </span>background-color:#0071bb;  <span style="color: red;">/*Cor da fundo ao passar o mouse*/ </span>}<br /> .blog-pager-older-link { <br />float: right; <br />}<br /> .blog-pager-newer-link { <br />float: right; <br />}</blockquote> <img alt="image" border="0" height="93" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhncEvhcYfkmsiLIEoepqnNawBr2ylitPTlIUF_GaVORBnF0eQL22vMR-5QeU2caLh9PeqmbSH0QUJ8FphbFar-5gsWD_bgjAE9Funi9jwFIXrVAvYy5TNnk-eo7o4a7KkYYbAvkH2uJCw2/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="resultado" width="547" /><br /> Os ítens em vermelho, podem ser modificados livremente. Veja a <a href="http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm">tabela de cores</a>.<br /> Para colocar numeração nos links, vá até o Mundo Blogger: <a href="http://www.mundoblogger.com.br/2010/01/numerar-paginas-no-blog-corrigido.html">Numerar Páginas no Blog</a>

Personalizando os links de navegação do Blogger

Os links de navegação, são aqueles 3 links que aparecem no final de cada página dos blogs do Blogger. Eles servem para auxiliar o visita...

Continue Lendo >>

Slideshow em cima dos posts do Blogger

Ontem eu publiquei um tutorial, ensinando como colocar um slideshow nos templates personalizados para Blogger/Blogspot -  <a href="http://www.dicasblogger.com.br/2010/10/slide-show-no-blogger.html">Slideshow no Blogger</a> <br /> No tutorial em questão, o slide tem 980px de largura e as imagens ficam dispostas lado a lado, abrindo-se a medida em que passamos o mouse sobre elas. <br /> <a href="http://demo-animal.blogspot.com/"><img alt="image" border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis8tSZtC96WIrf-Lp7xaI4e9cPZxUJLgKXcZprzVNOMM8rqdpJ1exzhWP6vRMncy0ngzuqk1jskXzvMPK3oiJlFx62FZuRg7Ov-1s5_S8bzO8nhrTbW47XQOgXSMHT9NTnC02KqB2dFSVp/?imgmax=800" style="background-image: none; border-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="image" width="532" /></a> <br /> Hoje irei mostrar dois outros modelos, que ficam muito bonitos quando colocados em cima da área de postagem ou mesmo no topo da sidebar <br /> <b>IMPORTANTE!</b> Vale lembrar que a largura dos elementos de página do Blogger, variam de template para template e que é necessário que vocês façam os ajustes no CSS de acordo com as suas necessidades. Os dois modelos que irei apresentar foram testados nos <a href="http://www.templates.dicasblogger.com.br/">Templates do Dicas Blogger</a>, com sidebar à direita. <br /> <b><span style="font-size: large;">Modelo 1 – largura 500px</span></b> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhku6KPPvcmI2Q8sZAAtJlZP56omdiM6ZPvKVcL0Zppo3cqGo8unFKCBHxbc_0V35Sm5Uf_L3tRJPmwurPip-k2_p8TVf39zaNCsxQ99jBS-cPePu4oZFhUy3PE9zST-AzLXMv84PbEfb0m/s1600/slider.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhku6KPPvcmI2Q8sZAAtJlZP56omdiM6ZPvKVcL0Zppo3cqGo8unFKCBHxbc_0V35Sm5Uf_L3tRJPmwurPip-k2_p8TVf39zaNCsxQ99jBS-cPePu4oZFhUy3PE9zST-AzLXMv84PbEfb0m/s1600/slider.png" /></a></div> Neste modelo, deve-se usar imagens de 500 x 280px. <br /> <b>Passo 1- </b>entre no HTML do template e procure por <b>]]></b:skin></b> <br /> Cole <b>ANTES </b>dessa tag o seguinte código <br /> <pre><code> /* Image Slideshow */ #s3slider{margin:15px; width:100%; height:250px; position:relative; word-wrap:break-word; overflow:hidden;} #s3sliderContent{width:100%; position:absolute; bottom: 0; margin:0px; padding-left:0px; } .s3sliderImage{float:left; position:relative;display:none; } .s3sliderImage span{position:absolute; left:0; font:normal 12px 'Arial',Helvetica,sans-serif; padding:0px; width:100%; text-align:center; padding-left:0px; background-color:#000; filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7; color:#fff; display:none;bottom: 0; }</code></pre> <br /> <b>Passo 2-</b> procure pela tag </head> e cole ACIMA dela: <br /> <br /> <pre><code><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/> <script type='text/javascript'><!--//--><![CDATA[//><!-- /* ------------------------------------------------------------------------ s3Slider Developped By: Boban KariÅ¡ik -> http://www.serie3.info/ CSS Help: Mészáros Róbert -> http://www.perspectived.com/ Version: 1.0 Copyright: Feel free to redistribute the script/modify it, as long as you leave my infos at the top. ------------------------------------------------------------------------- */ (function($){ $.fn.s3Slider = function(vars) { var element = this; var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000; var current = null; var timeOutFn = null; var faderStat = true; var mOver = false; var items = $("#" + element[0].id + "Content ." + element[0].id + "Image"); var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span"); items.each(function(i) { $(items[i]).mouseover(function() { mOver = true; }); $(items[i]).mouseout(function() { mOver = false; fadeElement(true); }); }); var fadeElement = function(isMouseOut) { var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut; thisTimeOut = (faderStat) ? 10 : thisTimeOut; if(items.length > 0) { timeOutFn = setTimeout(makeSlider, thisTimeOut); } else { console.log("Poof.."); } } var makeSlider = function() { current = (current != null) ? current : items[(items.length-1)]; var currNo = jQuery.inArray(current, items) + 1 currNo = (currNo == items.length) ? 0 : (currNo - 1); var newMargin = $(element).width() * currNo; if(faderStat == true) { if(!mOver) { $(items[currNo]).fadeIn((timeOut/6), function() { if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideUp((timeOut/6), function() { faderStat = false; current = items[currNo]; if(!mOver) { fadeElement(false); } }); } else { $(itemsSpan[currNo]).slideDown((timeOut/6), function() { faderStat = false; current = items[currNo]; if(!mOver) { fadeElement(false); } }); } }); } } else { if(!mOver) { if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideDown((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() { faderStat = true; current = items[(currNo+1)]; if(!mOver) { fadeElement(false); } }); }); } else { $(itemsSpan[currNo]).slideUp((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() { faderStat = true; current = items[(currNo+1)]; if(!mOver) { fadeElement(false); } }); }); } } } } makeSlider(); }; })(jQuery); //--><!]]></script> <script type='text/javascript'> $(document).ready(function() { $(&#39;#s3slider&#39;).s3Slider({ timeOut: 4000 }); }); </script></code></pre> <br /> <b>Passo3 -</b>  procure por <div id='main-wrapper'> e cole este código logo embaixo:<br /> <br /> <pre><code> <span style="color: #38761d;"><b:if cond='data:blog.pageType != &quot;item&quot;'> </span>                 <div id='s3slider'>                 <ul id='s3sliderContent'>                     <li class='s3sliderImage'>                     <a href='url do link'>                     <img src='url da imagem'/>                     <span>DESCRIÇÃO</span></a></li>                     <li class='s3sliderImage'>                     <a href='url do link'>                     <img src='url da imagem'/>                     <span>DESCRIÇÃO.</span></a></li>                     <li class='s3sliderImage'>                     <a href='url do link'>                     <img src='url da imagem'/>                     <span>DESCRIÇÃO.</span></a></li>                     <li class='s3sliderImage'>                     <a href='url do link'>                     <img src='url da imagem'/>                     <span>DESCRIÇÃO.</span></a></li>                     <li class='s3sliderImage'>                     <a href='url do link'>                     <img src='url da imagem'/>                     <span>DESCRIÇÃO.</span></a></li>                     <div class='clear s3sliderImage'/>                 </ul>                 </div>             <span style="color: #38761d;"></b:if></span></code></pre> <br /> Substitua “url do link” pelo endereço do post, "url da imagem", pelo endereço da imagem e em DESCRIÇÃO, escreva algo sobre aquela imagem. <br /> <br /> Apague as partes que estão em verde, se quiser que os slides apareçam em todas as páginas e não somente na home. <br /> <br /> <span style="font-size: large;">Modelo 2 -largura 610px</span><br /> <div class="separator" style="clear: both; text-align: center;"> </div> <br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPmm7E7vZBOtFxh3xRQ_mu-su2_bMm7C8qqsjjl924b3aridjCdD_hbKxGeBTYqNUwQ1LY3SQr4Ffbvqk7fLhtlZaou2ZPr4bfY6yNc2kiBSEltkX5IH7L5iv_4Aq1k1icY8Pzj9wGbvo5/s1600/img1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPmm7E7vZBOtFxh3xRQ_mu-su2_bMm7C8qqsjjl924b3aridjCdD_hbKxGeBTYqNUwQ1LY3SQr4Ffbvqk7fLhtlZaou2ZPr4bfY6yNc2kiBSEltkX5IH7L5iv_4Aq1k1icY8Pzj9wGbvo5/s1600/img1.png" /></a></div> <br /> Utlize imagens de 610 x 320 px ou de acordo com sua necessidade <br /> <br /> Entre no HTML do template e cole este código antes da tag <b>]]></b:skin></b> <br /> <br /> <pre><code> #slider-holder{width: 610px;height: 320px;overflow: hidden; margin-bottom:-10px; margin-left:17px; margin-top:-20px;padding: 15px 0 0 0;} #s3slider { width: 610px; /* largura da imagem */ height: 320px; /* altura da imagem */position: relative; /* important */overflow: hidden; /* important */} #s3sliderContent {width: 610px; /* largura */ position: absolute; /* important */top: 0; /* important */margin-left: 0; /* important */} .s3sliderImage {float: left; /* important */ position: relative; /* important */ display: none; /* important */} .s3sliderImage span { position: absolute; /* important */ left: 0; font-weight: 700; font-size: 0.834em; color: #ffffff; padding: 20px 15px 50px 13px; height: 73px; width: 600px; background-color: #4e4d3c; filter: alpha(opacity=70); /* opacidade do box */ -moz-opacity: 0.7; /* opacidade do box */ -khtml-opacity: 0.7; /* opacidade do box */ opacity: 0.7; display: none; bottom: 0; } .s3sliderImage span a.featured-title:link, .s3sliderImage span a.featured-title:visited{color: #fff;padding: 0px 0px 2px 0px;font-size: 1.167em;} .s3sliderImage span a.featured-title:hover{color: #999;} .s3sliderImage span a:link, .s3sliderImage span a:visited{color: #888;} .s3sliderImage span a:hover{color: #555;} </code></pre> <br /> Siga o passo 2 do modelo1. <br /> <br /> Siga o passo 3 do modelo 1, mas use este código: <br /> <br /> <pre><code> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <div class='black-bg' id='slider-holder'> <div id='s3slider'> <ul id='s3sliderContent'> <span style="color: red;"><li class='s3sliderImage' style='display: list-item;'></span> <span style="color: red;"><a href='LINKS'><img alt='Imagen 1' src='URL DA IMAGEM' style='width: 610px; height: 320px;'/></a> <span style='display: block;'> <a class='featured-title block' href='#LINK' rel='bookmark' title='TÍTULO DO POST'>TÍTULO</a><br/> DESCRIÇÃO </span></span> <span style="color: red;"></li></span> <li class='clear s3sliderImage'/> </ul> </div> </div> </b:if></b:if></code></pre> <br /> <br /> <ul> <li>A parte em vermelho deve se repetir para cada nova imagem. </li> <li>Em <b>Link</b>, coloque a url que será associada à imagem. </li> <li>Em <b>url da imagem</b>, cole o endereço da imagem. </li> <li>De um <b>título </b>e uma <b>descrição</b> às imagens. </li> </ul> <br /> Nos dois modelos, foram utilizados javascript. O endereço do arquivo é: <br /> <br /> <ul> <li><a href="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js">http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js</a> </li> </ul> <br /> Recomendo salvar o arquivo .js, hospedar em algum site de sua preferência e substituir a url nesta parte do código:<br /> <br /> <blockquote> <br /> <script src='<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js%27">http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'</a> type='text/javascript'/> </blockquote> <br /> <b>O script pode ser colocado diretamente no template. Preste muita atenção! </b><br /> <br /> Abra o arquivo .js no bloco de notas. No código do passo 2, apague esta linha:<br /> <br /> <blockquote> <script src='<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js%27">http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'</a> type='text/javascript'/> </blockquote> Agora, copie este código, colando todo o script (JS) no local indicado. <br /> <blockquote> <script type='text/javascript'> <br /> //<![CDATA[ <br /> <b>COLE AQUI O SCRIPT</b><br /> //]]><br /> </script></blockquote>

Slideshow em cima dos posts do Blogger

Ontem eu publiquei um tutorial, ensinando como colocar um slideshow nos templates personalizados para Blogger/Blogspot -  Slideshow no Blogg...

Continue Lendo >>

Slideshow no Blogger

A última moda em matéria templates personalizados para o Blogger, é o uso de um slideshow no alto dos posts ou embaixo do cabeçalho.<br /> <br /> Já existiam várias formas de se colocar um slideshow no Blogger, mas a maioria delas dependia de  hospedar externamente um arquivo do tipo .js (javascript).<br /> <br /> Por que isso era ruim? Porque no Blogger não existe um serviço de hospedagem de arquivos; dos serviços gratuitos, muitos mudam as regras sem aviso prévio, apagando os arquivos ou mudando as URLs (endereços) dos mesmos.<br /> <br /> Hoje eu vi no excelente metablog espanhol <a href="http://gemablog-.blogspot.com/">Gema Blog</a>, uma forma de usar um slideshow sem precisar de hospedagem externa do arquivo em javascript.<br /> <br /> Vejam um exemplo neste lindo template da <b>Mamanunes</b> – <a href="http://demo-animal.blogspot.com/">Template Animal</a><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://demo-animal.blogspot.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWn7mqXu1SnfIiEsCdJXscKzGoXKN6AKXwuJBIvu-7Hc4xXMQtOA0nuYJxLVWAwxdRapYMa-qvYQ0LCKUXTbjTXJ2yrieYyJKb8Nij4c910ac_tFl1sR9BJEcADPXIZZD-TV58H-AkIAey/?imgmax=800" /></a></div>   <br /> <div align="center"> <a href="http://demo-animal.blogspot.com/">Demo</a> – <a href="http://blogger-dicasmamanunes.blogspot.com/2010/10/template-animal-blogger-templates.html">Download e Instruções</a> </div> Para colocar um slideshow em seu blog, antes de mais nada é preciso encontrar as imagens que farão parte do conjunto de slides. No tutorial da amiga Gema, foram utilizadas imagens no tamanho 750 x 250 px. Edite as imagens de sua preferência, usando um site ou programa apropriado e hospede-as no Picasa.<br /> <ul> <li><a href="http://www.dicasblogger.com.br/2010/07/como-hospedar-imagens-no-picasa.html">Como hospedar imagens no Picasa</a> <br /> </li> <li><a href="http://www.dicasblogger.com.br/2010/07/imagem-para-o-cabecalho-do-blogger.html">Imagem para o cabeçalho do Blogger com Photoshop</a> <br /> </li> <li><a href="http://www.google.com.br/url?sa=t&source=web&cd=1&ved=0CBkQFjAA&url=http%3A%2F%2Fpixlr.com%2F&ei=9GHNTNCbII-q8Ab8h7CdAQ&usg=AFQjCNFXHCnqgSKhbFb5IdckiuqHXI8c6g&sig2=UiLyr6HL8AG4u9asV0sw2A">Photo editor online - Pixlr.com edit image</a> </li> </ul> Faça um <a href="http://www.dicasblogger.com.br/2008/05/backup-template-widgets-blogger.html">backup do template</a>. Vá em design>editar HTML e, usando o comando Crtl+F do teclado,  procure pela tag <b></head>.</b> Cole <b>antes</b> dela o seguinte código:<br /> <br /> <pre><code> <style> #slidearea{ height: 250px; overflow: hidden; position: relative; width:980px; background:#fff; border:5px solid #fff; margin:20px 0px 20px 0px; box-shadow: 0 0 10px #aaa; -moz-box-shadow: 0 0 10px #aaa; -webkit-box-shadow: 0 0 10px #aaa; } ul.kwicks{ margin:0px; padding:0px 10px; list-style:none; } .kwicks li { float: left; width: 196px; height: 250px; position:relative; } .kwikmet{ position:absolute; bottom:10px; left:10px; right:10px; display:none; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisyXd7XhKfVra9GMEfICujKFGbZ86JWtw5l7g4cSRysuPQTynCt41m8YUSk59KxNqXj_y2v5PvzLFgu5b95J0lQ1w4ydTWcJvMFs98On1cJcHwj28RTh1iVC4mxk0lZVsWjR92hH7hwVM/s1600/trans.png); padding:10px; width:710px; color:#888; } .kwikmet h2 a{ color:#fff; font-size:16px; font-family:georgia; font-weight:normal; padding-bottom:10px; } .slidimg{ width:750px; height:250px; } .rounded{ border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } </style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/> <script type='text/javascript'><!--//--><![CDATA[//><!-- /** * hoverIntent r5 // 2007.03.27 // jQuery 1.1.2+ * <http://cherne.net/brian/resources/jquery.hoverIntent.html> * * @param f onMouseOver function || An object with configuration options * @param g onMouseOut function || Nothing (use configuration options object) * @author Brian Cherne <brian@cherne.net> */ (function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev]);}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev]);};var handleHover=function(e){var p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(p&&p!=this){try{p=p.parentNode;}catch(e){p=this;}}if(p==this){return false;}var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);}if(e.type=="mouseover"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob);},cfg.timeout);}}};return this.mouseover(handleHover).mouseout(handleHover);};})(jQuery); //--><!]]></script> <script type='text/javascript'><!--//--><![CDATA[//><!-- /* Kwicks for jQuery (version 1.5.1) Copyright (c) 2008 Jeremy Martin http://www.jeremymartin.name/projects.php?project=kwicks Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php Any and all use of this script must be accompanied by this copyright/license notice in its present form. */ (function($){$.fn.kwicks=function(n){var p={isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500};var o=$.extend(p,n);var q=(o.isVertical?'height':'width');var r=(o.isVertical?'top':'left');return this.each(function(){container=$(this);var k=container.children('li');var l=k.eq(0).css(q).replace(/px/,'');if(!o.max){o.max=(l*k.size())-(o.min*(k.size()-1))}else{o.min=((l*k.size())-o.max)/(k.size()-1)}if(o.isVertical){container.css({width:k.eq(0).css('width'),height:(l*k.size())+(o.spacing*(k.size()-1))+'px'})}else{container.css({width:(l*k.size())+(o.spacing*(k.size()-1))+'px',height:k.eq(0).css('height')})}var m=[];for(i=0;i<k.size();i++){m[i]=[];for(j=1;j<k.size()-1;j++){if(i==j){m[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}else{m[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}}}k.each(function(i){var h=$(this);if(i===0){h.css(r,'0px')}else if(i==k.size()-1){h.css(o.isVertical?'bottom':'right','0px')}else{if(o.sticky){h.css(r,m[o.defaultKwick][i])}else{h.css(r,(i*l)+(i*o.spacing))}}if(o.sticky){if(o.defaultKwick==i){h.css(q,o.max+'px');h.addClass('active')}else{h.css(q,o.min+'px')}}h.css({margin:0,position:'absolute'});h.bind(o.event,function(){var c=[];var d=[];k.stop().removeClass('active');for(j=0;j<k.size();j++){c[j]=k.eq(j).css(q).replace(/px/,'');d[j]=k.eq(j).css(r).replace(/px/,'')}var e={};e[q]=o.max;var f=o.max-c[i];var g=c[i]/f;h.addClass('active').animate(e,{step:function(a){var b=f!=0?a/f-g:1;k.each(function(j){if(j!=i){k.eq(j).css(q,c[j]-((c[j]-o.min)*b)+'px')}if(j>0&&j<k.size()-1){k.eq(j).css(r,d[j]-((d[j]-m[i][j])*b)+'px')}})},duration:o.duration,easing:o.easing})})});if(!o.sticky){container.bind("mouseleave",function(){var c=[];var d=[];k.removeClass('active').stop();for(i=0;i<k.size();i++){c[i]=k.eq(i).css(q).replace(/px/,'');d[i]=k.eq(i).css(r).replace(/px/,'')}var e={};e[q]=l;var f=l-c[0];k.eq(0).animate(e,{step:function(a){var b=f!=0?(a-c[0])/f:1;for(i=1;i<k.size();i++){k.eq(i).css(q,c[i]-((c[i]-l)*b)+'px');if(i<k.size()-1){k.eq(i).css(r,d[i]-((d[i]-((i*l)+(i*o.spacing)))*b)+'px')}}},duration:o.duration,easing:o.easing})})}})}})(jQuery); //--><!]]></script> <script type='text/javascript'> jQuery().ready(function() { jQuery(&#39;.kwicks&#39;).kwicks({ max: 750, duration: 1000 }); jQuery(&quot;.kwik&quot;).hoverIntent(function() { jQuery(this).children(&quot;.kwikmet&quot;).fadeIn(&quot;slow&quot;) ; }, function() { jQuery(this).children(&quot;.kwikmet&quot;).fadeOut(&quot;3000&quot;); }); }); </script></code></pre> <br /> Visualize o template para verificar se está tudo bem e salve.<br /> <br /> Agora, vá em design>elementos de página e clique em <b>adicionar gadget</b>.<br /> <br /> Escolha o <b>gadget HTML/javascript</b> e cole o seguinte código:<br /> <br /> <pre><code> <div id='slidearea'> <ul class='kwicks'> <li class='kwik'> <a href='#'> <img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" /> </a> <div class='kwikmet rounded'> <h2><a href='#' rel='bookmark' title=''>Título</a></h2> <p>Conteúdo</p> </div> </li> <li class='kwik'> <a href='#'> <img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" /> </a> <div class='kwikmet rounded'> <h2><a href='#' rel='bookmark' title=''>Título</a></h2> <p>Conteúdo</p> </div> </li> <li class='kwik'> <a href='#'> <img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" /> </a> <div class='kwikmet rounded'> <h2><a href='#' rel='bookmark' title=''>Título</a></h2> <p>Conteúdo</p> </div> </li> <li class='kwik'> <a href='#'> <img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" /> </a> <div class='kwikmet rounded'> <h2><a href='#' rel='bookmark' title=''>Título</a></h2> <p>Conteúdo</p> </div> </li> <li class='kwik'> <a href='#'> <img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" /> </a> <div class='kwikmet rounded'> <h2><a href='#' rel='bookmark' title=''>Título</a></h2> <p>Conteúdo</p> </div> </li> </ul> <div class='clear'/> </div></div> </code></pre> <br /> A cada slide que você for incluir, faça as seguintes substituições:<br /> <br /> <blockquote> <a href='<b>#</b>'> <b>(coloque o link que será associado à imagem)</b> <br /> <img alt="" class="slidimg" src="<b>URL da imagem</b>" style="width: 750px; height: 250px;" /> <br /> </a> <b>(cole a URL e o tamanho da da imagem)</b><br /> <div class='kwikmet rounded'> <br /> <h2><a href='#' rel='bookmark' title=''><b>Título</b></a></h2> <b>(dê um título à imagem)</b> <br /> <p><b>Conteúdo</b></p> <b>(escreva uma descrição)</b></blockquote> <br /> Vejam um exemplo, usando o template Style:<br /> <br /> <blockquote> <a href='<a href="http://www.templates.dicasblogger.com.br/2010/09/template-style.html" title="http://www.templates.dicasblogger.com.br/2010/09/template-style.html">http://www.templates.dicasblogger.com.br/2010/09/template-style.html</a>'> <b>(link que será associado à imagem)</b> <br /> <img alt="" class="slidimg" src="<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkkwqqzRCShmUmcBuia39_3FwMdOafxKw7C6EW_GMc36gdS7Tofc3bCQIHE6tVGCNRDNemL4BGzNa75bSMP_Y7LOWu4GhONbv53LhCu-87bgGlafMI-QMNcyxk1a-sdHqSIIwmIGxzONEI/?imgmax=800" title="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkkwqqzRCShmUmcBuia39_3FwMdOafxKw7C6EW_GMc36gdS7Tofc3bCQIHE6tVGCNRDNemL4BGzNa75bSMP_Y7LOWu4GhONbv53LhCu-87bgGlafMI-QMNcyxk1a-sdHqSIIwmIGxzONEI/?imgmax=800">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkkwqqzRCShmUmcBuia39_3FwMdOafxKw7C6EW_GMc36gdS7Tofc3bCQIHE6tVGCNRDNemL4BGzNa75bSMP_Y7LOWu4GhONbv53LhCu-87bgGlafMI-QMNcyxk1a-sdHqSIIwmIGxzONEI/?imgmax=800</a>" style="width: 750px; height: 250px;" /> <br /> </a> <b>( URL e tamanho da imagem)</b><br /> <div class='kwikmet rounded'> <br /> <h2><a href='#' rel='bookmark' title=''>Template Style</a></h2> <b>(título)</b> <br /> <p>O template Style possui  1 coluna de cada lado etc…</p> <b>(descrição)</b></blockquote> <blockquote> </blockquote> <br /> Gostou da caixinha de códigos?Aprendi a fazer lá no Mundo Blogger ;) <br /> <ul> <li><a href="http://www.mundoblogger.com.br/2010/10/caixa-de-codigos-personalizada-com.html">CAIXA DE CÓDIGOS PERSONALIZADA COM IMAGEM NO TOPO</a> </li> </ul> <br /> <b>Fonte do tutorial:</b> Gema Blog – <a href="http://gemablog-.blogspot.com/2010/10/otro-slider-de-jquery.html">Otro slider de JQuery</a>

Slideshow no Blogger

A última moda em matéria templates personalizados para o Blogger, é o uso de um slideshow no alto dos posts ou embaixo do cabeçalho. Já ex...

Continue Lendo >>

Como colocar o botão do Facebook no Blogger

Com a popularização de aplicativos como o Farmiville e outros jogos online, o Facebook obteve um crescimento explosivo no Brasil. Ficar de fora do Facebook é perder a oportunidade de receber milhares de visitas no seu blog ou site. Vou iniciar uma série de artigos ensinando como integrar um blog ao Facebook, e o primeiro é <strong>como colocar um botão do Facebook no Blogger:</strong><br /> <div class="separator" style="clear: both; text-align: center;"> <a alt="como colocar botão facebook blog" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFNH-_2n09-KzbvijaLidXI0Jx9zYmgFhiAjkmEqiKXgrwlcVPQi4r4rRvaEteevbt0R1tdLWNb8vdGmNqWy-W-_25L_YxTqwHtZMv9KFdmCHd6R4M0S0F2WUY2DZHe-y5nPvjzs8erwQ/s1600/bot%C3%A3o+facebook.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFNH-_2n09-KzbvijaLidXI0Jx9zYmgFhiAjkmEqiKXgrwlcVPQi4r4rRvaEteevbt0R1tdLWNb8vdGmNqWy-W-_25L_YxTqwHtZMv9KFdmCHd6R4M0S0F2WUY2DZHe-y5nPvjzs8erwQ/s1600/bot%C3%A3o+facebook.png" /></a></div> A vantagem de utilizar o botão "Gosto" (ou "Like", em inglês e "Curtir", em português de Portugal) é que sempre que alguém clica no botão será feita uma atualização do status no mural do perfil no Facebook com o link do post em questão. Os amigos deste perfil também irão receber esta atualização. Para colocar este botão, tal como o <a href="http://www.dicasblogger.com.br/2010/02/tweetmeme-botao-de-retweet-blogger.html" target="_blank">botão do Twitter</a>, não é necessário ter conta no Facebook.<br /> <br /> <strong>Integrando o botão do Facebook no Blogger:</strong><br /> O botão "Gosto" pode ser inserido em qualquer parte. Recomendo que seja colocado no final do post, é o local onde o leitor irá realizar a próxima ação após a leitura, mas isto não é uma regra. Antes de fazer esta alteração, faça um backup completo do template do blog.<br /> <br /> Entre no painel do Blogger, clique em <strong>design</strong> e, depois, em <strong>editar HTML</strong>. Marque a caixa <strong>expandir modelos de widgets</strong> e procure por:<br /> <blockquote> <data:post.body/> </blockquote> Copie e cole logo abaixo do código anterior: <br /> <blockquote> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/> </blockquote> Se deseja que o botão do Facebook apareça na parte superior do post, ao lado do título, coloque o código logo abaixo desta linha:<br /> <blockquote> <div class='post-header-line-1'/></blockquote> <strong>Otimizar o botão do Facebook:</strong><br /> Para que o botão não apareça na página inicial, somente nos posts, deve inserir o código em verde:<br /> <blockquote> <span style="color: green;"><strong><b:if cond='data:blog.pageType == &quot;item&quot;'></strong></span> <br /> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/> <br /> <span style="color: green;"><strong></b:if></strong></span></blockquote> Para que <strong>apareça as fotos dos utilizadores</strong> que <em>gostaram</em>, deve alterar o <em>false</em> para <em>true</em>, e o tamanho do widget de 40px para 80px:<br /> <blockquote> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=<strong><span style="color: green;">true</span></strong>&amp;width=100&amp;action=<strong><span style="color: red;">like</span></strong>&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; <strong><span style="color: green;">height:80px</span></strong>;'/></blockquote> Outra coisa que pode ser feita é alteração de "Gosto" para "Recomendar", bastando para isto alterar o<em> </em>like (em vermelho, no código acima), por recommend.<br /> <br /> A fonte das letras também pode ser alterada, por default vem em Arial, mas é possível utilizar outras fontes.<br /> <br /> Salve e veja se ficou tudo correto. <br /> <br /> Gostou? Seja fã do <a href="http://www.facebook.com/pages/Dicas-Blogger/138629696182870" target="_blank">Dicas Blogger no Facebook</a>!

Como colocar o botão do Facebook no Blogger

Com a popularização de aplicativos como o Farmiville e outros jogos online, o Facebook obteve um crescimento explosivo no Brasil. Ficar de f...

Continue Lendo >>

Hack “Leia mais” automático e com imagens

Fui procurar este hack, à pedido de uma cliente do <a href="http://www.projetos.dicasblogger.com.br/" target="_blank">DB-produtos e serviços</a> e encontrei no <a href="http://templatesparavoce.blogspot.com/" target="_blank">Templates para você</a>, blog da querida e sumida amiga Áurea.<br /> Trata-se de um hack que resume os posts da página inicial (home) automaticamente e ainda mostra uma pequena imagem (<a href="http://pt.wikipedia.org/wiki/Thumbnail" target="_blank">thumbnail</a>) do lado esquerdo da postagem.<br /> Antes de mais nada, recomendo que você instale este hack em um blog de testes ou, se quiser instalar diretamente no blog, faça antes um <a href="http://www.dicasblogger.com.br/2008/05/backup-template-widgets-blogger.html" target="_blank">backup do template</a>.<br /> <b><span style="font-size: 100%;">Como colocar o hack Leia Mais com imagens</span></b><br /> Entre no painel do Blogger, clique em <b>design</b> e, depois, em <b>editar HTML</b>.<br /> Marque a caixa <b>expandir modelos de widgets</b> e procure por:<br /> <blockquote><div class='post-body entry-content'> <br /> <data:post.body/></blockquote>Substitua a linha <b><data:post.body/></b> por:<br /> <blockquote><b:if cond='data:blog.pageType != "item"'><br /> <b:if cond='data:blog.pageType != &quot;static_page&quot;'><br /> <div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div><br /> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><br /> <div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>Leia mais »»</a></div><br /> </b:if></b:if><br /> <b:if cond='data:blog.pageType == &quot;item&quot;'><br /> <data:post.body/></b:if><br /> <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/><br /> </b:if></blockquote><b><span style="color: red;">ATENÇÃO!</span></b> Para quem usa os meus templates, que já vêm com um outro hack “leia mais” e/ ou com o jump break do Blogger, o caminho é outro. Procure por:<br /> <blockquote><b:if cond='data:blog.pageType == &quot;item&quot;'><br /> <style>#fullpost{display:inline;}</style><br /> <p><data:post.body/></p><br /> <b:else/><br /> <style>#fullpost{display:none;}</style><br /> <p><data:post.body/></p><br /> <b:if cond='data:post.hasJumpLink'><br /> <div class='jump-link'><br /> <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a><br /> </div><br /> </b:if><br /> <span id='showlink'><br /> <a expr:href='data:post.url'>Continue lendo &gt;&gt;</a><br /> </span><br /> <script type='text/javascript'><br /> checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);<br /> </script><br /> </b:if><br /> <div style='clear: both;'/> <!-- clear for photos floats --></blockquote>Substitua tudo por:<br /> <blockquote><b:if cond='data:blog.pageType != "item"'><br /> <b:if cond='data:blog.pageType != &quot;static_page&quot;'><br /> <div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div><br /> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><br /> <div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>Leia mais »»</a></div><br /> </b:if></b:if><br /> <b:if cond='data:blog.pageType == &quot;item&quot;'><br /> <data:post.body/></b:if><br /> <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/><br /> </b:if><br /> <div style='clear: both;'/> <!-- clear for photos floats --></blockquote>Agora vá no CSS do template e <b><span style="color: red;">antes </span></b>da tag <b>]]></b:skin></b> cole este código:<br /> <blockquote>.rmlink {<br /> font-size: 100%;<br /> float: right;<br /> margin-right: 30px;<br /> margin-top: 10px;<br /> font-weight: bold;}<br /> .rmlink a {<br /> font-style: normal;<br /> font-weight: bold;<br /> font-variant: small-caps;<br /> font-family: Arial,Sans-Serif;<br /> color: #24618e; /*Cor do Link*/}<br /> .rmlink a:visited { color: #649dc7;}/*Cor do link depois de clicado*/<br /> .rmlink a:hover { color: red;} /*Cor do link ao passar o mouse em cima*/</blockquote>Procure então pela tag <b></head></b> e cole este outro código em cima dela:<br /> <iframe src="https://docs.google.com/document/pub?id=13TCWaUOu64B2dLW2fc0Awudh0RCf_X6wVuPum2JtPRs&embedded=true" style="height: 168px; width: 549px;"></iframe> <br /> <b>Fontes de referência</b><br /> <ul><li>Templates para Você - <a href="http://www.templatesparavoce.com/2009/08/hack-leia-mais-com-imagens-reduzidas.html" target="_blank">Hack Leia Mais com imagens reduzidas</a> </li> <li>Mundo Blogger - <a href="http://www.mundoblogger.com.br/2009/08/hack-mais-resumo-de-postagem-automatico.html" target="_blank">Hack Leia mais com imagens na página inicial</a></li> </ul><b><span style="font-size: 100%;">Escondendo o rodapé dos post na página inicial</span></b><br /> Para esconder a data e o rodapé dos posts na página inicial, procure por:<br /> <blockquote>]]></b:skin></blockquote>e cole o seguinte código <b>depois</b> dessa tag: <br /> <blockquote><b:if cond='data:blog.pageType == "index"'> <br /> <style type='text/css'> .post-footer { display: none; } </style> <br /> </b:if> <br /> <b:if cond='data:blog.pageType == "index"'> <br /> <style type='text/css'> h2.date-header { display: none; } </style> <br /> </b:if></blockquote>Para entender melhor as condicionais do Blogger, acesse:<br /> <ul><li><a href="http://www.bloggersphera.com.br/2009/03/bif-belse-blogger-condicionais.html" target="_blank">O Blogger e as Condicionais</a> – BloggerSphera </li> <li><a href="http://www.mundoblogger.com.br/2010/08/aplicar-estilos-pagina-inicial-do-blog.html" target="_blank">Aplicar estilos a página inicial do Blogger</a> – Mundo Blogger </li> </ul>Esta última dica funcionou no Template Mínima e nos meus templates, mas talvez não funcione em outros, já que o nome dos seletores ( .post-footer e h2.date-header ), pode variar de um modelo para outro.<br /> <b><span style="font-size: 100%;">Exibindo apenas o texto</span></b><br /> Se você quiser mostrar apenas o texto na home e não as imagens, procure por:<br /> <blockquote><style type="text/css"><br /> .thumbnailimg IMG {<br /> max-width:150px;<br /> width: expression(this.width > 150 ? 150: true);<br /> max-height:120px;<br /> height: expression(this.height > 120 ? 120: true);<br /> }<br /> .thumbnailimg {<br /> float:left;<br /> padding:0px 10px 5px 0px;<br /> }</blockquote>Substitua todo o trecho acima por este: <br /> <blockquote><style type="text/css"><br /> .thumbnailimg IMG {<br /> max-width:150px;<br /> width: expression(this.width > 150 ? 150: true);<br /> max-height:120px;<br /> height: expression(this.height > 120 ? 120: true);<br /> <span style="color: red;"><b>display: none:</b></span><br /> }<br /> .thumbnailimg {<br /> float:left;<br /> padding:0px 10px <b>0px</b> 0px;<br /> }</blockquote>

Hack “Leia mais” automático e com imagens

Fui procurar este hack, à pedido de uma cliente do DB-produtos e serviços e encontrei no Templates para você , blog da querida e sumida ami...

Continue Lendo >>

Designer do modelo – como retirar navbar

<div align="justify"> Se você já está usando um dos novos modelos do Blogger, através da página <a href="http://draft.blogger.com/" target="_blank">Blogger in Draft</a>, saiba que retirar a navbar ficou ainda mais fácil. </div> <div align="justify"> Eu já expliquei neste post <a href="http://www.dicasblogger.com.br/2010/03/como-criar-um-template-para-blogger.html">Como criar um template para Blogger / Blogspot</a>, mas me parece que nem todo mundo conseguiu entender. Sendo assim, vou explicar detalhadamente.</div> <div align="justify"> Acesse o <strong>designer do modelo</strong>, clique em <strong>avançado</strong> (1) e depois em <strong>adicionar CSS</strong> (2).<strong> </strong>Cole o código abaixo, dentro da parte em branco (3) e aperte a <strong>tecla enter</strong> do seu teclado. </div> <span id="fullpost"> </span><br /> <blockquote> <div align="center"> <span id="fullpost">#navbar-iframe { height: 0px; visibility: transparent; display: transparent; }</span></div> </blockquote> <span id="fullpost"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ45xY-scgg-m7Il_SxBnuc2fnjlV0MKykYsvYUcYlUlo_fZiD-mBT_Rc7cDMuuGejjLUbpJyQxs2E2vaZnyJyA_w9rIvErtIWWVuZ7Gnv33YQljRAfus21puwMpmb93dODt26tWf0Cv-n/s1600-h/retirar_navbar%5B9%5D.jpg"><img alt="retirar_navbar" border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAdR_VR3OaWB3Be5auhQsdB8Sgy7fu4LnX5CWwpaOLLWYo5WmqJPa2NDcYKUFbTRfXfF4iCinsaAYegWqrni98yHvauLyFYDdkZuOsidzOzCz6VPVoG7TmP6tlzrDNih1LARzqc8r-M-09/?imgmax=800" style="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;" title="retirar_navbar" width="450" /></a><br /> <center>Clique sobre a imagem para ampliar</center> Assim que você colar o código e apertar a tecla enter, a navbar irá ficar invisível.<br /> Que eu saiba, não há nenhuma restrição por parte do Blogger quanto à retirada da navbar:<br /> <blockquote> <div align="center"> <a href="http://www.compulsivo.com.br/2008/11/confirmado-navbar-do-blogger-e-opcional.html"><span style="font-size: x-small;"><strong>Confirmado: NavBar do Blogger é opcional</strong></span></a><span style="font-size: x-small;"><strong> – blog Usuário Compulsivo</strong></span></div> While we don't recommend or support the removal of the Blogger navbar, there is nothing in our Terms of Service that explicitly mandate its use. Fonte: <a href="http://groups.google.com/group/blogger-help-customizing/tree/browse_frm/thread/c7e3226fe35da11e/6c152c5d4b46b622?rnum=1&_done=%2Fgroup%2Fblogger-help-customizing%2Fbrowse_frm%2Fthread%2Fc7e3226fe35da11e%2F71be91f560889098%3F&pli=1" target="_blank">fórum do Blogger em inglês</a></blockquote> <div align="justify"> <strong>ATUALIZAÇÃO –</strong> Este método já não está funcionando tão bem, visto que a Equipe do Blogger vem fazendo alterações no Designer do Modelo. O <a href="http://twitter.com/VelosoManel" target="_blank">@velosomanel</a>, postou em seu blog <strong>Rascunhos Blogger</strong>, uma forma de retirar a navbar completamente e que pode ser adaptada aos novos modelos. Entre no html e procure por <body class='loading'></div> <div align="justify"> Cole logo antes o seguinte código:</div> <blockquote> <!-- Navbar--> <br /><script type='text/javascript'> <br /><![CDATA[ <br /><!-- <br />/*<body>*/ <br />--> <br />]]> <br /></script> <br /><!-- Navbar--> </blockquote> Aceite a exclusão do widget navbar e salve.<br /> Fontes: <a href="http://www.bloggerplugins.org/2010/04/remove-blogger-nav-bar-completely.html" target="_blank">Blogger Plugins</a> e <a href="http://rascunhos-blogger.blogspot.com/2010/04/remover-completamente-o-navbar-do.html" target="_blank">Blogger Rascunhos</a></span>

Designer do modelo – como retirar navbar

Se você já está usando um dos novos modelos do Blogger, através da página Blogger in Draft , saiba que retirar a navbar ficou ainda mais fá...

Continue Lendo >>

Mapa do site para Blogger/Blogspot

<div align="justify"> Que tal ter uma página no seu blog, onde estão todas as suas postagens organizadas por data? Poderíamos chamar essa página de Mapa do Site ou Arquivo do blog e ela pode ser bastante útil quando um visitante não consegue encontrar algum post específico no seu blog usando a pesquisa ou mesmo se este visitante quiser ler tudo o que você já publicou. </div> <div align="justify"> Se quiser ver como é uma página assim, dê uma olhada na que eu criei no meu blog <a href="http://www.wbra.in/p/arquivo-do-blog.html">neste link</a>. Se quiser uma página igual para o seu blog, siga o tutorial abaixo. </div> <span id="fullpost"> </span><br /> <div align="justify"> <span id="fullpost">Primeiramente crie uma nova página no seu blog (1)  e entre no <strong>modo de edição HTML</strong> (2). Copie o código abaixo, alterando a parte em <span style="color: red;">vermelho</span> pelo endereço completo do seu blog. Cole o código no html da página (3) e clique em <strong>publicar agora. </strong></span></div> <span id="fullpost"> <blockquote> <div align="left"> <script style="text/javascript" src="http://100rede.com/mapablogger.js"></script><br /><script src="http://<span style="color: red;">NOME_DO_SEU_BLOG</span>/feeds/posts/default?max-results=1000&alt=json-in-script&callback=loadtoc"></script> </div> </blockquote> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS3Ft_PXpyBL1a_6Ee6Uzf-8_p1mQujvgR6zFejVqR_MrFsTMBkeNXI_AvmOtaCUPl-PY6Bs3Q5qRLnZJQB9a9XGWvJumGROpO4rbHVa_siaGGh9CUijS2zLo9wBdPIYRy8t2SAdUI0yjL/s1600-h/sitemap_blogger%5B10%5D.jpg"><img alt="sitemap_blogger" border="0" height="281" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq4uGWqgbuJUhqAOJDCgN9bnnYzlOc_pxarO9tqzRjDo0_KdKTWJRhU2i9Xtbna0Iq-Z42AK4hXx0RGnRBoq26ETcvzaSvXElIFM3GalkUXcj6roGBreNgPwyQ5k3vBNOkrZbC2AYGr6ex/?imgmax=800" style="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;" title="sitemap_blogger" width="446" /></a> <br /> Veja o resultado do arquivo do Dicas Blogger, na imagem abaixo: <br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPhE2HWoax1hdMDt_MhYHiYpz_sEXV_-Tu4ArNIBX5VZPInax1zfQifUzadWB2KgWj_qdik48yGrqIszowPjn48oRdGOQ1W4l1b7-LN5DE4AUF5pQX_2JIeaADkKoIfBeYVhZZw9LjNTJk/s1600-h/image%5B11%5D.png"><img alt="Arquivo ou mapa" border="0" height="245" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0RbY_ZLtJhLzQjhM-T8pNniCOLCCzo2QeifhyxK9olXclNwbkmfLj8k6Pk21zWT-7e_4t8wzpvM5__850UHPw2v1D4KF9kqv4y6hxJ7wmd6g4GAGaxpYSkB7-qWcNIifgTtbsoNjEjyfA/?imgmax=800" style="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;" title="Arquivo ou mapa" width="446" /></a> <br /> <strong>Observações:</strong> <br /> <div align="justify"> Eu peguei essa dica no blog do <a href="http://www.abu-farhan.com/">Abu Farhan</a>, os créditos do script foram mantidos, sendo que eu apenas traduzi os nomes dos meses para o português. </div> <div align="justify"> Não sei como os robôs do Google podem interpretar essa nova página do seu blog cheia de links internos, acredito que isso não renderia nenhuma punição nos resultados de pesquisa do Google, mas não posso afirmar tal coisa com certeza.<br />Percebam que existe um valor neste URL que indica o número de posts a serem exibidos; no exemplo acima este valor está definido como 1000, pois eu queria mostrar todas as postagens do meu blog no mapa. Altere o valor conforme a quantidade de posts do seu blog, colocar sempre um valor bem acima do número de postagens do seu blog vai garantir que todas sejam mostradas. </div> <br /><span style="font-size: xx-small;"><strong>Teilor</strong> (</span><a href="http://twitter.com/Teilor"><span style="font-size: xx-small;">@Teilor</span></a><span style="font-size: xx-small;">) é um dos principais colaboradores do </span><a href="http://www.google.pl/support/forum/p/blogger/user?userid=14781072449702723125&hl=pt-BR"><span style="font-size: xx-small;">fórum oficial do Blogger</span></a><span style="font-size: xx-small;"> e autor do blog </span><a href="http://withoutbrain.blogspot.com/"><span style="font-size: xx-small;">Without Brain</span></a><span style="font-size: xx-small;">.</span></span>

Mapa do site para Blogger/Blogspot

Que tal ter uma página no seu blog, onde estão todas as suas postagens organizadas por data? Poderíamos chamar essa página de Mapa do Site ...

Continue Lendo >>

Páginas estáticas com CSS

<div align="justify"> No final do mês passado, o Blogger lançou um recurso há muito tempo esperado por seus usuários – as <a href="http://www.dicasblogger.com.br/2010/01/paginas-estaticas-no-bloggerblogspot.html" target="_blank">páginas estáticas</a>. Muita gente comemorou o lançamento, tal como aconteceu quando disponibilizaram o <a href="http://www.dicasblogger.com.br/2009/09/jump-break-o-leia-mais-do-blogger.html" target="_blank">Jump Break</a>. Até então, nós nos virávamos utilizando os hacks, também chamados de gambiarras, alterando os códigos html e css dos templates para obter essas e outras funções que não eram nativas do Blogger.</div> <div align="justify"> O problema é que tanto o Jump Break quanto as páginas estáticas, se mostraram incompatíveis com os templates que são criados pelos próprios usuários, sendo necessário a inclusão de mais códigos no html. Mesmo assim, muitos ainda se queixam que a sidebar foi parar embaixo do posts (no caso do jump break) ou que algum dos hacks para colocar o resumo das postagens não funcionam com as páginas estáticas.</div> <span id="fullpost"> </span><br /> <div align="justify"> <span id="fullpost">Eu, particularmente, jamais deixaria de usar um template personalizado por causa das deficiências do Blogger; afinal, os templates padronizados são…digamos…simples demais. O jeito é continuarmos com nossas gambiarras, já que não existe suporte para templates personalizados – o que é altamente compreensível, pois seria impossível auxiliar cada um que aparece lá no fórum do Blogger para pedir ajuda para um determinado modelo.</span></div> <span id="fullpost"> <div align="justify"> Eu não uso o Jump Break e não vou usar as páginas estáticas; prefiro os hacks. Para colocar resumo de postagens, já ensinei dois tipos de hacks neste post - <a href="http://www.dicasblogger.com.br/2009/11/como-colocar-o-leia-mais-no-blogger.html">Como colocar o hack “Leia Mais” no Blogger</a> – e hoje vou explicar como criar páginas estáticas usando CSS.</div> <blockquote> <div align="justify"> <strong>CSS</strong> é a abreviatura para Cascading Style Sheets. — Folha de Estilos em Cascata. CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. <strong>HTML</strong> pode ser (in)devidamente usado para definir o layout de websites. Contudo CSS proporciona mais opções e é mais preciso e sofisticado. CSS é suportado por todos os navegadores atuais. <strong>Fonte:</strong> <a href="http://pt-br.html.net/tutorials/CSS/lesson1.asp" target="_blank">HTML.net</a></div> </blockquote> <div align="justify"> Não sou  <em>expert</em> no assunto.Confesso que tenho dificuldades para usar CSS e que demorei para fazer este post justamente porquê sei que  irão surgir muitas dúvidas e que eu não saberei responder à todas elas, mas, por outro lado,  não seria correto da minha parte privá-los de algo tão interessante e funcional. Portanto, tenham calma :)</div> <div align="justify"> Bem, o que não deve aparecer em uma página estática? Data, hora, comentários, nome do autor, anúncios publicitários, convites para assinar os feeds e etc. Na página estática deve aparecer somente o título e o texto do post. Vejam estes exemplos: </div> <blockquote> <div align="center"> <a href="http://www.dicasblogger.com.br/2008/01/diretrizes-para-os-usuarios-do-dicas.html"><strong><span style="font-size: x-small;">Termos de Uso</span></strong></a><strong><span style="font-size: x-small;"> I </span></strong><a href="http://www.dicasblogger.com.br/2008/06/licenca.html"><strong><span style="font-size: x-small;">Licença</span></strong></a><strong><span style="font-size: x-small;"> I </span></strong><a href="http://www.dicasblogger.com.br/2007/08/sobre.html"><strong><span style="font-size: x-small;">Sobre nós</span></strong></a><strong><span style="font-size: x-small;"> I </span></strong><a href="http://www.dicasblogger.com.br/2009/10/midia-kit.html"><strong><span style="font-size: x-small;">Midia Kit</span></strong></a><strong><span style="font-size: x-small;"> I </span></strong><a href="http://www.dicasblogger.com.br/2008/01/assine-os-feeds-do-dicas-blogger.html"><strong><span style="font-size: x-small;">Rss/Feed</span></strong></a></div> </blockquote> <div align="justify"> Podemos também retirar a sidebar ou colocar só meia sidebar. Eu faço isso quando o post é menor do que o comprimento da sidebar, para ficar esteticamente mais adequado.</div> Chega de conversa e vamos logo para o tutorial, pois o post já está ficando enooooorme.<br /> <blockquote> <span style="font-family: 'Arial Narrow'; font-size: small;"><strong>ATENÇÃO:</strong>  Os códigos abaixo  funcionam perfeitamente nos </span><a href="http://www.dicasblogger.com.br/2008/09/templates-do-dicas-blogger.html" target="_blank"><span style="font-family: 'Arial Narrow'; font-size: small;">templates do Dicas Blogger</span></a><span style="font-family: 'Arial Narrow'; font-size: small;">, mas não posso garantir que funcionarão em outros modelos.</span></blockquote> <div align="justify"> Por que tal advertência? Porque os códigos de cada template variam muito então sugiro que vocês façam testes para adaptar este tutorial ao template de vocês.</div> <div align="justify"> Antes de mais nada, apliquem o hack fornecido neste post - <a href="http://www.dicasblogger.com.br/2009/01/paginas-estaticas-no-blogger-sem-data.html">Páginas estáticas no Blogger sem data</a> - para retirar a data da futura página estática e lembrem-se de desabilitar os comentários também, para que tudo funcione satisfatoriamente.</div> Criei o post (1) que dará origem à página estática, desabilite os comentários (2), escolha uma data mais antiga (3), clique em “editar html” e ao final  cole um dos códigos abaixo (4).<br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2m0m1Nr59YCeCfIdCshRe6QRsmKEYuGaTG24v9VbQeo6hUyGrjT5519IfoDmbQY53w2BKe9JVYuRLQ77UwAVQP6tVhWEGynGCf2NR_Cy67fSfWFRU8XQg4ufYjOew2_rlUJwWcxtpe9lM/s1600-h/Sem%20T%C3%ADtulo-1%5B17%5D.jpg"><img alt="" border="0" height="311" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFl-Zeg5jf8OgLMqC5cRN80tuhS__xhbYu9m1w5c_UUp-PEQ124XltSm6X7yuFT8M94cMjJ1A5VcIqzIvCPjI-QvFiZyHPNTaVb_U4iGxgCze2nSHZvNE1SLlXqApjKVCFozaUS0_mqNVA/?imgmax=800" style="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;" title="" width="450" /></a> <br /> <strong>Páginas estáticas com sidebar</strong> <br /> <blockquote> <style type="text/css">.blog-pager{display: none;}#blog-pager{display: none;}.post-footer-line{display: none;}.post-footer{display: none;} #comments {display:none} .post-header{display: none;}</style> </blockquote> <strong>Páginas estáticas sem sidebar</strong><br /> <blockquote> <style type="text/css">.blog-pager{display: none;}#blog-pager{display: none;}.post-footer-line{display: none;}.post-footer{display: none;}#side-wrapper{display: none;}.post-footer {display:none}  #comments {display:none} .post-header{display: none;} </style></blockquote> <strong>Páginas estáticas com meia sidebar</strong><br /> <blockquote> <style type="text/css">.blog-pager{display: none;}#blog-pager{display: none;}.post-footer-line{display: none;}.post-footer{display: none;}#sidebar-wrapper{display: none;}  #comments {display:none} .post-header{display: none;}</style></blockquote> Se você usa <a href="http://www.dicasblogger.com.br/2008/05/anuncios-nas-postagens-do-blogger.html" target="_blank">anúncios dentro dos posts</a> ou <a href="http://www.dicasblogger.com.br/2010/01/mensagens-no-rodape-dos-posts.html" target="_blank">um convite para assinar os feeds</a>, basta criar uma div para eles e depois colocar no código da página estática. Por exemplo:<br /> <blockquote> <div align="center"> <strong>Esta parte vai no html do template =></strong> <div id='anuncio'> (código do anúncio) </div></div> </blockquote> <blockquote> <strong>Esta parte vai na página estática =></strong> <style type="text/css">.blog-pager{display: none;}#blog-pager{display: none;}.post-footer-line{display: none;}.post-footer{display: none;}#side-wrapper{display: none;}.post-footer {display:none}  #comments {display:none} .post-header{display: none;} <strong><span style="color: red;">#anuncios{display:none}</span></strong> </style></blockquote> <div align="justify"> Cada parte do código CSS se refere à parte correspondente que não deve aparecer na página estática. Então temos: #comments = comentários / .post-footer = rodapé do post / #side-wrapper = sidebar/ .post-header = cabeçalho do post e assim por diante. </div> <div align="justify"> Acredito que irá aparecer algum aspirante a metablogger dizendo “ah eu faço diferente” Ótimo. Publique lá no seu blog, mande o link pro meu Twitter e darei RT :D</div> <div align="justify"> Pessoal, é isso. Espero que vocês tenham conseguido entender. Não consegui fazer um post menor, já que é um assunto novo aqui no DB e foi necessário uma boa introdução.</div> </span>

Páginas estáticas com CSS

No final do mês passado, o Blogger lançou um recurso há muito tempo esperado por seus usuários – as páginas estáticas . Muita gente comemor...

Continue Lendo >>

TweetMeme- Inserindo botão de Retweet no Blogger

<p align="justify">A nova febre é o botão de RT do site <a href="http://tweetmeme.com/" target="_blank">TweetMeme</a>. Muitos bloggers já adotaram esse recurso, que mostra todos os retweets de um determinado post. Por insistência do <a href="http://www.twitter.com/luanfr" target="_blank">@luanfr</a>, acabei aderindo também e não é que ficou bonitinho? Além de mostrar os Rts, o botão ainda possibilita que os leitores enviem nossos posts diretamente para a página do Twitter. E é simples de instalar.</p> <p><strong>Para colocar o botão embaixo dos posts:</strong></p> <p>Entre no html do template (layout>editar html), marque a caixa “expandir modelos de widgets” e procure (Ctrl+F) por:</p> <span id="fullpost"> <blockquote> <p><div class='post-footer'> </p> </blockquote> <p>Cole logo <strong>acima</strong> o seguinte código:</p> <blockquote> <p><span style="color:#008000;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span></p> <p><span style="color:#ff0000;"><script type="text/javascript"> <br />tweetmeme_source = <strong>'NOME NO TWITTER'</strong>; <br /></script> <br /><script type="text/javascript" src="</span><a href="http://tweetmeme.com/i/scripts/button.js%22"><span style="color:#ff0000;">http://tweetmeme.com/i/scripts/button.js"</span></a><span style="color:#ff0000;">></script></span></p> <p><span style="color:#008000;"></b:if></span></p> </blockquote> <p>Substitua NOME NO TWITTER pelo seu nome de usuário e salve. </p> <p>A parte em <span style="color:#ff0000;">vermelho</span> é referente ao <strong>código do TweetMeme</strong> e a parte em <span style="color:#008000;">verde</span> é referente às condicionais para que o botão só apareça nos posts e não na página inicial do blog.</p> <p><strong>Para colocar o botão entre o título e o post</strong>, encontre:</p> <blockquote> <p><div class='post-header-line-1'/></p> </blockquote> <p>Cole o código anterior <strong>embaixo</strong> dessa linha e salve. </p> <p align="justify">Você pode integrar o botão de RT com um anúncio, do tipo banner ou meio banner (Isso vai depender do tamanho da área de postagem do seu blog). Basta usar o seguinte código:</p> <blockquote> <p><b:if cond='data:blog.pageType == &quot;item&quot;'></p> <p><table </p> <p>style="border: 1px solid rgb(255, 255, 255); background:rgb(255, 255, 255);text-align: left; width: 100%;" cellpadding="2" cellspacing="2 "> </p> <p><tbody> </p> <p><tr> </p> <p><td valign="undefined" align="left"><strong>CÓDIGO DO TWEET MEME </strong></td> </p> <p><td valign="undefined" align="undefined"> <strong>CÓDIGO DO ANÚNCIO </strong></td> </p> <p></tr> </p> <p></tbody> </p> <p></table> </b:if> </p> </blockquote> <p>Aí está o resultado que eu obtive no meu blog de testes, usando um banner:</p> <p align="justify"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy_YshA_Xohen2DlUqGpATiMD8Q7VdWbIfs9y_wGce8nBFVub4xBeZMNpjyZNPlMs_uPhWcZBVCwzE3cbPVHiKCjIrLfKb58VzJ3W6nb1VTpB3pEnALa3ae7I3jkYyLYK_CLRcWS7WaT54/s1600-h/image%5B15%5D.png"><img alt="image" border="0" height="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpvEfI4sT7Hx0k2MFu0rhsftKcWmkyHqgDVrJG7eskuEtytjZQcUv9T7qToZ_ze7FhaXBAdy0b0UpKTXSISDC1rPrMHwvEfrM_eB3M7d6-D9XmlZiJNQ6kEq2SKlONhhFrPqbf-rXG1-U8/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="image" width="450" /></a></p> <p align="justify">Lembrando que o código do AdSense tem que ser convertido. Use o site <a href="http://blogcrowds.com/resources/parse_html.php" target="_blank">Blogcrowd</a>.</p> <ul> <li><a href="http://www.dicasblogger.com.br/2008/05/anuncios-nas-postagens-do-blogger.html">Anúncios nas postagens do Blogger</a> </li> </ul> <p align="justify">Caso você não use publicidade no seu blog, coloque um mensagem para os seus leitores. E se quiser ir mais além, use o programa NVU portable para construir o seu próprio código:</p> <ul> <li> <div align="justify"><a href="http://www.dicasblogger.com.br/2010/01/mensagens-no-rodape-dos-posts.html">Mensagens no rodapé dos posts</a></div> </li> <li> <div align="justify"><a href="http://www.dicasblogger.com.br/2009/07/aprendendo-criar-tabelas-em-html.html">Aprendendo a criar tabelas em HTML</a></div> </li> </ul> <p align="justify">Exemplo de uma mensagem legal:</p> <blockquote> <p><b:if cond='data:blog.pageType == &quot;item&quot;'></p> <p><table </p> <p>style="border: 1px solid rgb(255, 255, 255); background:rgb(255, 255, 255);text-align: left; width: 100%;" cellpadding="2" cellspacing="2 "> </p> <p><tbody> </p> <p><tr> </p> <p><td valign="undefined" align="left"><strong>CÓDIGO DO TWEET MEME</strong> </td> </p> <p><td valign="undefined" align="undefined"> </p> <p><b>Siga este blog no <a href='<strong>http://LINK DO SEU TWITTER</strong>'>Twitter </a> e fique por dentro das novidades!</b> </p> <p></td> </p> <p></tr> </p> <p></tbody> </p> <p></table> </b:if></p> </blockquote> <p align="justify">Recomendo que essas alterações sejam feitas, primeiramente, em um blog de testes.</p> <p align="justify"></p> <p><strong>ATUALIZAÇÃO EM 27/08/2010</strong></p> <p>Para que o botão fique à direita do anúncio, inverta os códigos:</p> <blockquote> <p><b:if cond='data:blog.pageType == &quot;item&quot;'></p> <p><table </p> <p>style="border: 1px solid rgb(255, 255, 255); background:rgb(255, 255, 255);text-align: left; width: 100%;" cellpadding="2" cellspacing="2 "> </p> <p><tbody> </p> <p><tr> </p> <p><td valign="undefined" align="left"><strong>CÓDIGO DO ANÚNCIO</strong></td> </p> <p><td valign="undefined" align="undefined"> <strong>CÓDIGO DO TWEETMEME </strong></td> </p> <p></tr> </p> <p></tbody> </p> <p></table> </b:if> </p> </blockquote> <p>Caso você não use anúncios, siga esta dica do <a href="http://www.ferramentasblog.com/2010/08/widget-tweet-button-oficial-do-twitter.html" target="_blank">Ferramentas Blog</a>:</p> <blockquote> <p><b:if cond='data:blog.pageType == &quot;item&quot;'> <br /><p style='display: inline; float: right; margin-left: 5px'></p> <p>Adicione aqui o código do botão </p> <p></p> <br /></b:if></p> </blockquote> <p></p> </span>

TweetMeme- Inserindo botão de Retweet no Blogger

A nova febre é o botão de RT do site TweetMeme . Muitos bloggers já adotaram esse recurso, que mostra todos os retweets de um determinado po...

Continue Lendo >>

Mensagens no rodapé dos posts

<div align="justify"> Que tal colocar um convite, no rodapé de todos os seus posts, convidando seus leitores para que assinem os feeds do seu blog ou para te seguir no Twitter ? Ou mesmo qualquer mensagem que seja importante para o seu ´público? Eu já havia feito um tutorial em 2008, que acabou ficando desatualizado, então hoje iremos rever como implantar essa função.</div> <div align="justify"> Antes de começar, faça um <a href="http://www.dicasblogger.com.br/2008/05/backup-template-widgets-blogger.html">backup do seu template</a>. Como se trata de um tutorial avançado, <strong>NÃO PROSSIGA</strong>, caso não se sinta apto (a) para fazer alterações no html do seu template.</div> <div align="justify"> Eu vou usar 2 modelos com imagem -  assine os feeds e siga no Twitter e um só com texto.</div> <span id="fullpost"> </span><br /> <div align="justify"> <span id="fullpost"><strong>Convite para assinar os feeds</strong></span></div> <span id="fullpost"> <table cellpadding="4" cellspacing="4" style="background-color: #efefef; border-bottom: rgb(204,204,204) 2px solid; border-left: rgb(204,204,204) 2px solid; border-right: rgb(204,204,204) 2px solid; border-top: rgb(204,204,204) 2px solid; height: 40px; margin-left: auto; margin-right: auto; text-align: left; width: 100%;"> <tbody> <tr> <td align="undefined" valign="undefined"><img align="middle" alt="" src="http://lh6.ggpht.com/_mcq01yDJ2uY/S2Q_LD7R-sI/AAAAAAAABRs/f9faJxbZPBs/feed-32x32.png" style="height: 32px; width: 32px;" /></td> <td style="text-align: left;"><span style="font-weight: bold;"></span><b>Assine o <a href="http://feeds.feedburner.com/dicasblogger">feed </a>deste blog ou receba todos os artigos por <a href="http://feedburner.google.com/fb/a/mailverify?uri=dicasblogger&amp;loc=pt_BR">email</a></b>.</td></tr> </tbody></table> <div align="justify"> Encontre uma imagem de 32 x 32 px. Hospede-a na sua conta do Picasa ou no serviço de hospedagem de sua preferência. Copie a url da imagem. Cole no bloco de notas.</div> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIyigonOdYL5A7C5FyB3KFIRotRtP43npCeHzs1wSAhF7el1B50oHehSoCm815GO3zUJdV_o5cMPYLxzHo2k-7NkR9umJMMJxlzFDXsqUbcYK27rCMt8_P5xrKwuilbS9ytU745dIIABDI/s1600-h/image%5B30%5D.png"><img alt="" border="0" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1LBU-A0gXAg2ZRObYzklQGCSv7YbzNTBWVP5ksbg-WbN-6rsAkafIm3KyXaDMJyyAvxmjkeSPvFz4DU71n8oTOhWSdaue1f14xenbzcoOOJimsk2P88NHypya8VKLddOF3Ca2E1pCHFF0/?imgmax=800" style="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;" title="" width="452" /></a> <br /> Entre no FeedBurner, procure pela <strong>aba publicize</strong> e pelo link (fica na coluna da esquerda)  <strong>email subscription</strong>. Copie o código que fica em <strong>Preview subscription link</strong>:<br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiySh0chHeGHGUCTjkNLrOBiYuKE1n1OiC_nVyA2nXcXrlio1DnaxPNZUjEOFrRxhmUByM6JmbLHikSf8W7_XdLFBvgNmCX_IjHI3vVH6Z5876Gw03CsGSmHogPUesFtWX2D087_CNh6jvd/s1600-h/image%5B32%5D.png"><img alt="" border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMUNe62cXyZVGVKFq8qYF0CQ8Tm7EVooJLZDAH5gSSVLbn9uGAiozQqKBYWQoKcgJxA2B_HIU2fmq-SmUELa0S2yeC5IlCQ_U1v9Y0fGZUIDd9JsVffSeElZTNcLSsBzzeRfXfx5u4vuPt/?imgmax=800" style="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;" title="" width="452" /></a><br />Agora, copie o código abaixo e substitua <strong>URL DA IMAGEM</strong>  pela url da imagem que você hospedou no Picasa. Em <strong>URL DO FEED DO SEU BLOG</strong>, coloque a url do feed do seu blog (rs) e em <strong>URL DO FEED POR EMAIL</strong>, coloque a url que você copiou do Feed Burner.<br /> <blockquote> <b:if cond='data:blog.pageType == &quot;item&quot;'> <br /> <table<br />style="border: 2px solid rgb(204, 204, 204); background-color: rgb(239, 239, 239); width: 100%; height: 40px; text-align: left; margin-left: auto; margin-right: auto;"<br />cellpadding="4" cellspacing="4"><br />  <tbody><br />    <tr><br />      <td align="undefined" valign="undefined"><img<br />alt=""<br />src="<strong>URL DA IMAGEM</strong>"<br />style="width: 32px; height: 32px;" align="middle" /></td><br />      <td style="text-align: left;"><span<br />style="font-weight: bold;"></span><b><span style="color: red;">Assine o</span> <a<br />href="<strong>URL DO FEED DO BLOG</strong>"><span style="color: red;">feed </span></a> <span style="color: red;">deste blog ou receba todos os artigos<br />por</span> <a href="<strong>URL DO FEED POR EMAIL</strong>"><span style="color: red;">email</span></a></b>.<br /><br />      </td><br />    </tr><br />  </tbody><br /></table><br /></b:if></blockquote> Vá em layout>editar HTML, clique em <strong>expandir modelos de widgets</strong> e procure por: <br /> <blockquote> <strong><div class='post-footer'> </strong></blockquote> Cole o código já modificado em cima dessa linha:<br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVpSdswq0RWhOS_jPdBvIbxz2phCMxycZYGhKlR3FpjPbI1pr5Jmb1G2BAZ7iHvz81xzM2LSlmdnaYXhHZwD8q79MBqgYdnS_69vtdCSRH-hsznjKOKkMHqOWl3intBa8lLRNpdG3Rw2Hf/s1600-h/image%5B33%5D.png"><img alt="" border="0" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfR8BnWhPFxaZsUp-uXfJkujQHU2mhqpqZl1bK0eWXsrRJ2JOl8b42plVR6SYh4uSOZiavFabDXfOt0ZF8rOTT4l1ma-QkIfqhk8W3eQwmc643zNLoD_OCKsbvPtPzUtMTDVIn6wpELilU/?imgmax=800" style="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;" title="" width="452" /></a> <br /> Você pode adaptar o texto (em vermelho) conforme suas necessidades, bem como as cores da borda e do background (plano de fundo). Veja <a href="http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm" target="_blank">aqui uma tabela de cores</a>.<br /> Para mudar a cor da borda, altere os números (em verde) deste trecho do código:<br /> <blockquote> <strong>border: 2px solid rgb(<span style="color: green;">204, 204, 204</span>);</strong> </blockquote> <div align="justify"> E para mudar a cor do plano de fundo, altere:</div> <blockquote> <div align="justify"> <strong>background-color: rgb(<span style="color: green;">239, 239, 239</span>);</strong> </div> </blockquote> <div align="justify"> Posts anteriores que irão te ajudar a implementar esse recurso:</div> <ul> <li><a href="http://www.dicasblogger.com.br/2008/09/hospedagem-gratuita-de-arquivos.html">Hospedagem gratuita de arquivos</a> </li> <li><a href="http://www.dicasblogger.com.br/2009/11/15-sites-para-busca-de-icones-web.html">15 sites para busca de ícones web</a> </li> <li><a href="http://www.dicasblogger.com.br/2008/09/backup-no-picasa-de-imagens-contidas.html">Backup no Picasa de imagens contidas nos templates</a></li> </ul> <div align="justify"> <strong>Convite para seguir no Twitter</strong></div> <table cellpadding="4" cellspacing="4" style="background-color: #efefef; border-bottom: rgb(204,204,204) 2px solid; border-left: rgb(204,204,204) 2px solid; border-right: rgb(204,204,204) 2px solid; border-top: rgb(204,204,204) 2px solid; height: 40px; margin-left: auto; margin-right: auto; text-align: left; width: 100%;"> <tbody> <tr> <td align="undefined" valign="undefined"><img align="middle" alt="" src="http://lh6.ggpht.com/_mcq01yDJ2uY/S2RVxWzkEbI/AAAAAAAABSE/uT16McxNjlI/twitter-32x32.png" style="height: 32px; width: 32px;" /></td> <td style="text-align: left;"><span style="font-weight: bold;"></span><b>Siga-nos no <a href="http://feeds.feedburner.com/dicasblogger">Twitter </a>e fique por dentro de muitas novidades!</b></td></tr> </tbody></table> <blockquote> <b:if cond='data:blog.pageType == &quot;item&quot;'> <br /><table<br />style="border: 2px solid rgb(204, 204, 204); background-color: rgb(239, 239, 239); width: 100%; height: 40px; text-align: left; margin-left: auto; margin-right: auto;"<br />cellpadding="4" cellspacing="4"><br />  <tbody><br />    <tr><br />      <td align="undefined" valign="undefined"><img<br />alt=""<br />src="<a href="http://lh6.ggpht.com/_mcq01yDJ2uY/S2RVxWzkEbI/AAAAAAAABSE/uT16McxNjlI/twitter-32x32.png" title="http://lh6.ggpht.com/_mcq01yDJ2uY/S2RVxWzkEbI/AAAAAAAABSE/uT16McxNjlI/twitter-32x32.png">http://lh6.ggpht.com/_mcq01yDJ2uY/S2RVxWzkEbI/AAAAAAAABSE/uT16McxNjlI/twitter-32x32.png</a><a href="http://lh6.ggpht.com/_mcq01yDJ2uY/S2Q_LD7R-sI/AAAAAAAABRs/f9faJxbZPBs/feed-32x32.png%22">"</a><br />style="width: 32px; height: 32px;" align="middle" /></td><br />      <td style="text-align: left;"><span<br />style="font-weight: bold;"></span><b><span style="color: red;">Siga-nos no</span> <a<br />href="<strong>URL DA CONTA DO TWITTER</strong>"><span style="color: red;">Twitter </span></a> <span style="color: red;">e fique por dentro de muitas novidades!</span></b><br /><br />      </td><br />    </tr><br />  </tbody><br /></table><br /></b:if>   </blockquote> <strong>Mensagem sem imagem</strong><br /> <table cellpadding="4" cellspacing="4" style="background-color: #efefef; border-bottom: rgb(204,204,204) 2px solid; border-left: rgb(204,204,204) 2px solid; border-right: rgb(204,204,204) 2px solid; border-top: rgb(204,204,204) 2px solid; height: 40px; margin-left: auto; margin-right: auto; text-align: left; width: 100%;"> <tbody> <tr> <td style="text-align: left;"><span style="font-weight: bold;">Assine o </span><a href="http://feeds.feedburner.com/dicasblogger" style="font-weight: bold;">feed </a><span style="font-weight: bold;">ou receba os artigos por </span><a href="http://feedburner.google.com/fb/a/mailverify?uri=dicasblogger&amp;loc=pt_BR" style="font-weight: bold;">email</a><span style="font-weight: bold;">. E siga o blog no </span><a href="https://twitter.com/dicas_blogger" style="font-weight: bold;">Twitter</a><span style="font-weight: bold;">!</span></td></tr> </tbody></table> <blockquote> <b:if cond='data:blog.pageType == &quot;item&quot;'> <br /> <table<br />style="border: 2px solid rgb(204, 204, 204); background-color: rgb(239, 239, 239); width: 100%; height: 40px; text-align: left; margin-left: auto; margin-right: auto;"<br />cellpadding="4" cellspacing="4"><br />  <tbody><br />    <tr><br />      <td style="text-align: left;"><span<br />style="font-weight: bold;">Assine o </span><a<br />style="font-weight: bold;"<br />href="<strong>URL DO FEED</strong>">feed </a><span<br />style="font-weight: bold;">ou receba os artigos por </span><a<br />style="font-weight: bold;"<br />href="<strong>URL DO FEED POR EMAIL</strong>">email</a><span<br />style="font-weight: bold;">. Siga o blog no </span><a<br />style="font-weight: bold;"<br />href="<strong>URL DA CONTA NO TWITTER</strong>">Twitter</a><span<br />style="font-weight: bold;">!</span><br /><br />      </td><br />    </tr><br />  </tbody><br /></table> <br /> </b:if>   </blockquote> <div align="justify"> Este truque funciona perfeitamente nos <a href="http://www.dicasblogger.com.br/2008/09/templates-do-dicas-blogger.html">template do Dicas Blogger</a>, mas não tenho como garantir que irá funcionar nos demais modelos disponibilizados na web.</div> <div align="justify"> Ah, sejam criativos e não copiem o modelo usado aqui no Dicas Blogger O.o :P</div> </span>

Mensagens no rodapé dos posts

Que tal colocar um convite, no rodapé de todos os seus posts, convidando seus leitores para que assinem os feeds do seu blog ou para te seg...

Continue Lendo >>