Dicas Blogger: Códigos/Scripts

Home » Categories: Códigos/Scripts

Mostrando postagens com marcador Códigos/Scripts. Mostrar todas as postagens

Plaay - como colocar playlists no blog

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

Plaay - como colocar playlists no blog

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

Continue Lendo >>

15:57

Como personalizar a caixa de pesquisa do Blogger

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

Como personalizar a caixa de pesquisa do Blogger

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

Continue Lendo >>

09:52

Exibir frases aleatórias no Blogger

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

Exibir frases aleatórias no Blogger

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

Continue Lendo >>

10:30

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. 
 
Na imagem abaixo, vemos a minha descrição em um post recente: 
 
<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;">Descrição do autor</td></tr>
</tbody></table>
Vou ensinar um modelo um pouco diferente do que estamos usando aqui. Vamos lá? 
 
Etapa 1: 
Entre no HTML do template, clique em "expandir modelos de widgets" e cole o código abaixo ANTES  da tag  ]]></b:skin> 
 
**Para encontrar a tag, dê um Crtl+F com seu teclado e cole ]]></b:skin> 
 
**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> 
<blockquote class="tr_bq">
/* Autores 
----------------------------------------------- */ 
 
#post-footer-autor { 
width: 100%; 
height: 77px; 
background: #e6e6e6; /*Cor do plano de fundo*/ 
border: #ccc; /*Cor da borda*/ 
margin: 8px 0px 8px 0px; 
font-family: Verdana, Arial, Helvetica, sans-serif; 
border: 2px solid #ccc; /*Espessura da borda*/ 
} 
 
#autor-img { 
width: 64px; /*largura da imagem*/ 
height: 64px; /*altura da imagem*/ 
background: #fff; /*plano de fundo da imagem*/ 
float: left; 
margin: 7px; 
 
} 
#autor-sobre { 
padding-right: 5px; 
margin: 0px; 
} 
 
#autor-sobre p{ 
font-size: 14px; 
padding: 10px; 
margin: 0; 
text-align: justify; 
text-transform: normal; 
color: #333; /*Cor do texto*/ 
} 
#autor-sobre a{ 
color: #3d85c6; /*Cor dos links*/ 
text-decoration:none; 
} 
#autor-sobre a:hover { 
color: #9A9A9A; /*Cor dos links ao passar o mouse*/ 
text-decoration:underline; 
}</blockquote>
Se você tiver conhecimentos em CSS, é possível mudar as cores de plano de fundo, bordas, links e texto, conforme assinalei em vermelho. 
 
Etapa 2: 
 
Depois, procure por  <div class='post-footer'> e cole ANTES dessa tag o seguinte código: 
<blockquote class="tr_bq">
 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:post.author == &quot;Nome do autor&quot;'> 
<div id='post-footer-autor'> 
<div id='autor-img'> 
 
<img src='URL DA IMAGEM' style='border: 0px solid #fab805; padding: 0; margin: 0;'/> 
</div> 
<div id='autor-sobre'> 
 
Sobre o autor: 
Faça uma breve descrição. <a href='link'> Nome do link</a> 
</div> 
</div> 
</b:if> 
</b:if> </blockquote>
Antes de salvar, faça as seguintes alterações: 
<ul>
<li>Em  Nome do autor, escreva o nome do autor que receberá a descrição exatamente como está nas postagens.</li>
<li>Em URL da imagem, coloque a url da foto do autor no tamanho 64 x 64. </li>
<li>Em Faça uma breve descrição, escreva algo sobre o autor.</li>
<li>Em link, coloque uma URL (pode ser de um outro blog, Twitter, Facebook e etc) e em Nome do Link escreva o nome da página que está sendo linkada.</li>
</ul>
Atenção! Se o seu blog tiver mais de 1 autor,  repita a etapa 2 para cada um deles. 
 
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> 
 
Clique em "visualizar" e se tudo estiver ok, clique em "salvar modelo" 
 
Vejam o resultado desse código no blog da Priscila: 
 
<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.

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 >>

10:30

Como hospedar arquivos no Google Sites

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyt0ZC9SxwdH6WPQgzbzAXV1y38BCYmKd0Db-CNGtUpBQkTRoYSd7MxLhIWtQGj88cAd6IE6Wv1szpdEgyFxQh7F5Na5gQbSlLaEHVS7D1_F9OACqhB98nE_iSQvCKOLIOe0eOF_aUsAvr/s1600-h/files-sharing%25255B6%25255D.png"><img align="left" alt="files-sharing" border="0" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqUiZDwuf9WVIoFu2QgUz9Rkq7ikZcW7GibEYMQWcDdQ0DgeLHebz8xx20j3szINkMee0l2DR_nSeKgBW4pjZBlOXE4rapaiVe6UyiFFug9xN42GtIXFQuT0smw74ig2psdWH8bxDsZL4L/?imgmax=800" style="background-image: none; border-right-width: 0px; margin: 0px 8px 0px 0px; padding-left: 0px; padding-right: 0px; display: inline; float: left; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="files-sharing" width="163" /></a>Como até hoje o Blogger não disponibilizou um serviço de hospedagem de arquivos, continuamos nos utilizando de serviços externos para esse fim. Hoje notei que o hack “<a href="http://www.mundoblogger.com.br/2010/01/numerar-paginas-no-blog-corrigido.html" target="_blank">Páginas Numeradas</a>” havia parado de funcionar, pois o site onde estava hospedado o javascript foi tirado do ar. Então lá fui eu tentar outra opção e consegui hospedá-lo no <a href="https://sites.google.com/" target="_blank">Google Sites</a>. E pelo que notei, é possível hospedar qualquer tipo de arquivo, incluindo templates, imagens, pdf, DOC e etc. Entre no Google Sites usando sua conta do Google. Provavelmente você já irá encontrar um site com o nome da sua conta. Se não enContrar, crie um site. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzUYNYGTg1_BLZrC_oceHdAuv3uwiRKRcdyUg6_mErSDvzb_JZ5XatLF_zte35oINalsKMwbvUQcdyP-IB6NVzByNIxIYCcnnoUdNZaFLaXZFirxUNVEsihdzS-v-aP19IxjIGbbl6BvWK/s1600-h/google-sites%25255B7%25255D.png"><img alt="google-sites" border="0" height="361" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6uE8BHFo8dJS87Y8-spYlig9EMVaeEhxjLjlTdbe1ECmYmWUq7KtkUEWV9Gxz8ncOp7FofaDTE7CYe56wFcUxSKy5EFeq_Bz_QJmryjXnggSU12iym8CFiFc_shVjzlK7D1iOeXQpIocn/?imgmax=800" style="background-image: none; border-right-width: 0px; margin: 0px auto; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="google-sites" width="552" /></a> Clique no site e na página seguinte, no alto à direita, clique em “nova página” <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidyIyLlfK26kqXeMLxedhN6vXXemLvr7snLH9TU_tDZYdLZb1CGW2zw4PPGBY3uSXHlQuIVnOsFXzNjYBUj89eyzmE5U1uScnVYgpUOpoewL3mJcZ5sgZhF_SQcr_jpAg_1BIP4VZtvmWP/s1600-h/image%25255B24%25255D.png"><img alt="google-sites" border="0" height="289" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrfxLq-e0LPgiA5ieBjEAGrGvMOrdVnW_IlNMmqEM3e9n0JqxZ5Hqp7W1CIGU3wlIWwYVbcHeJFX2kMuHu7SX5fj-268Eyg0U0pE8pww0b8q89VFOpj-5IBSx3vcksPnfBquMkCTSaOK52/?imgmax=800" style="background-image: none; border-right-width: 0px; margin: 0px auto; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="criar página" width="552" /></a> Dê um nome a essa página e, em modelo,  escolha “arquivo”. Em local, escolha “colocar página como nível superior”. Clique em “criar” <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6RIK11dMkd67if8AKIskwyoIcIm86sP2os-Mydl69zsi4MPbvp51hiQYik_4-spU9wKPiu-7c8aVG6hFWwmVq70XXVe-2mxBAi6582qV40_5TyqbTmnf0yyqHCkRkz21HrVdPt7JHkm-b/s1600-h/image%25255B26%25255D.png"><img alt="google-sites" border="0" height="333" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsW6TxgcEaZvP3pVFOlBdWQgkeXZxTJrLs9KBn1buseqsgCEeUWrxK5cSg4f0X21Q7dz26RBbVQqj-HMJXMPKYda4YIUeDGjxQTLVETdWGioYe_15SYPUkai4Wg3JLX070kMDBUnb-Fz25/?imgmax=800" style="background-image: none; border-right-width: 0px; margin: 0px auto; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="google-sites" width="552" /></a> Na página seguinte, clique em “adicionar arquivo”. Procure o arquivo e faça o upload. Seu arquivo irá aparecer numa espécie de pasta, com 1 link para download. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVNE4j33z7fNgOH9zhSosaT66YW5UZp2A89J4Z6mp5m8z_J3y4OfZkUx8lRGyselPAbUo0DoXNmps6gYbuASFwGUytatCathJe4eK20z59G0V4ST7RmlZZ8hzSg3LZd7rOzGG4scScQJRi/s1600-h/image%25255B28%25255D.png"><img alt="image" border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlZsA1io4TsS6YWv5GoE87FSr3AI5fh_GH2DaEQbxj4rW6mWHsLVTmyxr7qyyrpMHpjPbFfOzQFax3f_P6XdRBA-ON2ix1Re6CXqA6Xe4EGXi5BeesIYJF1x7IhR1bGEZuzzzCVyDEl3PA/?imgmax=800" style="background-image: none; border-right-width: 0px; margin: 0px auto; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="copiar link" width="552" /></a> No caso de hospedagem de javascript para usar no Blogger Clique com o botão direito do mouse e copie o link. Ele irá aparecer assim: <blockquote> <a href="https://sites.google.com/site/arquivosdicasblogger/javascripts/page-nav.js?attredirects=0&d=1">https://sites.google.com/site/arquivosdicasblogger/javascripts/page-nav.js</a>?attredirects=0&d=1 </blockquote> Cole no html a parte que está em amarelo, ou seja, até a extensão .js

Como hospedar arquivos no Google Sites

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

Continue Lendo >>

16:11

Ativar resposta aos comentários em nossos templates

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPAjfJEZBPHrPMduEgxX5Xyz2_B6Z-XdwZb0iMLfO3_nm9ZycsheGTcq3MB7qOhQzHuUGXLRH7_8uD68s1b4KVD25ASKb2LPNFuFwgkLopniiq8Wyp-3csiB8PIrtBMhgTNu59oH7zuhp1/s1600-h/recent-comments-application-logo%25255B4%25255D.jpg"><img align="left" alt="recent-comments-application-logo" border="0" height="91" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivpXulc5HUOMc-w9Ymn0neZOqqSpBEeIxq7Acms09Z0ZXcDXBOpXD3xppfC8vGVEJhqrhN5icLkZOJTyIdCRuhyAUAabVZ1w_ImpSLShx9ifS5aWk7yRn5kJ_nsQXWkIi0jDm_hZrt2DLl/?imgmax=800" style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: left; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="recent-comments-application-logo" width="96" /></a>O Teilor fez um post excelente sobre a novidade tão aguardada – <a href="http://www.dicasblogger.com.br/2012/01/novidade-respostas-nos-comentarios-do.html?showComment=1326893614496#c4494718488706905279" target="_blank">resposta aos comentário no Blogger</a>. Eu usei o tutorial do <a href="http://www.mundoblogger.com.br/2012/01/ativar-opcao-responder-comentario.html" target="_blank">Mundo Blogger</a> e deu certinho;  só que nos templates que eu faço,  o código a ser modificado é um pouco diferente. Tentei postar via comentário no próprio post do Teilor, mas não deu certo. Então, resolvi fazer este post, complementando o anterior. Para quem usa os templates by Dicas Blogger Entre em editar HTML e marque “expandir modelos de widgets” Dê um Crtl+F com o teclado e procure por: <blockquote> <b:include data='post' name='post'/>       <b:if cond='data:blog.pageType == &quot;item&quot;'>         <b:include data='post' name='comments'/> </blockquote> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjyM5zMKiJITgXEy58ls9PQbM76DkJm5CYicaMH5F0aZYj9N4qnU1VzVMeEYGozgD3zYAXSxYHyL_Q3xOMjtN00BTveryDk8hCx2Kdxbktsvh0hYypBnGlfyTSRrCes7SM4M6i-gCFpkRY/s1600-h/image%25255B4%25255D.png"><img alt="image" border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIEpdWBBX-06SRP1F7hut1sThjkLwEma5Hu8KElyxrrCGaXncv1aTX5nXvJ-OO4nACwigdzob5OyvkiPzZbn9_lUUfZL0-ljqTz1cob3GWYYm9Czdua4-YLqiu18ukFQpQSbHZ803ok2Up/?imgmax=800" style="background-image: none; border-right-width: 0px; margin: 0px auto; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="trecho a ser modificado" width="552" /></a> Substitua tudo por: <blockquote> <pre><b:include data='post' name='post'/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if></pre> </blockquote> Visualize e salve. Veja como ficou no Dicas Blogger: <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJPufAMDLPiH7YJQxtvKkeCC68W9cOqwWCqk9USAc31XW5LxODxpP4WuN6Tndt_KmDXAUNEFBvy9ZJHkapjanMXkzx4xdMA4S8VVI7SKj6Mb15iC8-9WHTd5b_0NjPN5xAyl1sxnU9oEnK/s1600-h/image%25255B9%25255D.png"><img alt="image" border="0" height="329" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJOvPFofTNKRqvZBKjcII_94TjHYwjBbEv7_Ax7Ow086sAn8YAkr3ja7Hn_6q5eM9lhpDN4VjUe7CrgFXImUYjHpB2lRrDNIEU9hm078ZYEJ4kTq1n6ND6NNZC1vZN32wbkTWFA6uGwB3S/?imgmax=800" style="background-image: none; border-right-width: 0px; margin: 0px auto; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="resultado" width="552" /></a> Fonte: <a href="http://www.mundoblogger.com.br/2012/01/ativar-opcao-responder-comentario.html" target="_blank">Mundo Blogger</a>

Ativar resposta aos comentários em nossos templates

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

Continue Lendo >>

16:35