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 fim. Hoje notei que o hack “Páginas Numeradas” 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 Google Sites. 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.

Clique no site e na página seguinte, no alto à direita, clique em “nova página”

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”

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.

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:

https://sites.google.com/site/arquivosdicasblogger/javascripts/page-nav.js?attredirects=0&d=1

Cole no html a parte que está em amarelo, ou seja, até a extensão .js

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

<b:include data='post' name='post'/>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:include data='post' name='comments'/>

Substitua tudo por:

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

Visualize e salve. Veja como ficou no Dicas Blogger:

Fonte: Mundo Blogger

Onde hospedar javascript

Frequentemente nos deparamos com a necessidade de usarmos javascript, a fim de fazer melhorias em nossos blogs. Para quem não possui um serviço de hospedagem paga – o que é caso da maioria dos usuários do Blogger – encontrar um serviço gratuito que hospede esses arquivos em javascript torna-se bastante complicado.

SkyDrive, Google Sites, DropBox, entre outros, fazem a hospedagem, mas o link obtido – geralmente – não funciona no Blogger (não sei ainda porque). Aqui no DB, o único script que uso é para as páginas numeradas, código que pode ser obtido neste post do Mundo Blogger - Código para Páginas numeradas no Blog. Os demais scripts eu hospedo no próprio Blogger - Como hospedar javascript no Blogger

Um site que resolveu o problema foi o Free Javascript Hosting.


Clique em “selecionar arquivo” e procure o javascript dentro do seu PC. Forneça um email e clique em “upload”. Em poucos minutos, chegará a URL em sua caixa postal.

Destacar mensagens nos posts

Eu já expliquei uma vez como colocar uma mensagem no rodapé dos posts, convidando os leitores a assinarem os feeds -  Widget "Assine o Feed" no rodapé dos posts
Agora que fiquei mais espertinha em CSS e abandonei as tabelas (né, Cidão?), fiz um código novo que pode ser usado para destacar qualquer mensagem dentro dos posts.
Vejam um exemplo, na imagem abaixo. É um convite pra assinar os feeds:

O código é simples, mas requer que vocês façam algumas substituições:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align: left; color: #7b7c7d; font-size: 110%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'>
<img alt='' src='URL DA IMAGEM' style='width: 32px; height: 32px;float:left;'/>
<b>TÍTULO:</b> TEXTO 1<br/>
      <a href='LINK'>Clique
aqui </a>TEXTO 2.
</div>
</b:if>

Escolha uma imagem de 32 x 32px, faça o upload para o Picasa ou outro site de sua preferência e copie a ULR. Abra o código acima no bloco de notas e substitua URL DA IMAGEM pela URL da imagem que você vai usar; em TÍTULO, coloque um título pra mensagem; em TEXTO 1, escreva o primeiro paráfrafo e em TEXTO 2, o segundo.
Você ainda pode alterar a cores de fundo em “background” , a borda em “border” e a cor da fonte em “color”. Se necessário, ajuste o tamanho da fonte em “font-size: 110%”, a largura em “width” e a margem superior em “margin-top”.
Para usar imagens maiores, altere: width: 32px; height: 32px
Vejam estes exemplos:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align: left; color: #7b7c7d; font-size: 110%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'>
<img alt='' src='http://lh6.ggpht.com/_mcq01yDJ2uY/TOP-Je99_AI/AAAAAAAAD98/s24k47t_TmU/rss_file.png' style='width: 32px; height: 32px;float:left;'/>
<b>RSS/Feed:</b> Receba automaticamente todas os artigos deste blog!<br/>
      <a href='LINK DO FEED'>Clique
aqui </a> para assinar nosso feed. O serviço é totalmente gratuito
</div>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align: left; color: #7b7c7d; font-size: 90%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'>
<img alt='' src='http://png-4.findicons.com/files/icons/2152/snowish/32/dialog_warning.png' style='width: 32px; height: 32px;float:left;'/>
<b>Alerta!</b> É terminantemente proibido copiar os artigos deste blog.<br/>
      <a href='LINK'>Clique
aqui </a> e veja nossa licença. Plágio é crime previsto no Código Penal.
</div>
</b:if>

Use sua imaginação! As opções são várias: feed, plágio, twitter, facebook e etc.
Locais para inserir a mensagem
Embaixo do título do post
Para encontrar os trechos que citarei, use o comando Ctrl+F do teclado.
Entre em design>editar HTML. Marque a caixa “expandir modelos de widgets” e cole o código antes da linha  <div class='post-body'>
No final do post
Entre em design>editar HTML. Marque a caixa “expandir modelos de widgets” e cole o código antes da linha <div class='post-footer'>
No rodapé dos posts
Entre em design>editar HTML. Marque a caixa “expandir modelos de widgets” e cole o código antes da linha <p class='post-footer-line post-footer-line-3'> 

Para que a mensagem apareça também na home, apague o que está em vermelho:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align: left; color: #7b7c7d; font-size: 110%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'>
<img alt='' src='URL DA IMAGEM' style='width: 32px; height: 32px;float:left;'/>
<b>TÍTULO:</b> TEXTO 1<br/>
      <a href='LINK'>Clique
aqui </a>TEXTO 2.
</div>
</b:if>

Como colocar data atual no Blogger

Quer colocar em seu blog uma mensagem de boas-vindas, mostrando a data atual ( dia, dia da semana, mês e ano)? Então basta copiar o código abaixo e colar no gadget html/javascript do Blogger ( elementos de página>adicionar gadget/html/javascript).

Para mudar a frase de boas-vindas, altere a parte que está em vermelho no código. A data será atualizada automaticamente e aparecerá da seguinte forma:

<div style="font-weight: bold; font-size: 13 px; font-family:verdana;">Seja bem-vindo. Hoje é <script language="JavaScript">
hoje = new Date()
dia = hoje.getDate()
dias = hoje.getDay()
mes = hoje.getMonth()
ano = hoje.getYear()
if (dia < 10)
dia = "0" + dia
if (ano < 2000)
ano = 1900 + ano
function NArray (n)
{
this.length = n
}
NomeDiaWMOnline = new NArray(7)
NomeDiaWMOnline[0] = "Domingo"
NomeDiaWMOnline[1] = "Segunda-feira"
NomeDiaWMOnline[2] = "Terça-feira"
NomeDiaWMOnline[3] = "Quarta-feira"
NomeDiaWMOnline[4] = "Quinta-feira"
NomeDiaWMOnline[5] = "Sexta-feira"
NomeDiaWMOnline[6] = "Sábado"
NomeMesWMOnline = new NArray(12)
NomeMesWMOnline[0] = "janeiro"
NomeMesWMOnline[1] = "fevereiro"
NomeMesWMOnline[2] = "março"
NomeMesWMOnline[3] = "abril"
NomeMesWMOnline[4] = "maio"
NomeMesWMOnline[5] = "junho"
NomeMesWMOnline[6] = "julho"
NomeMesWMOnline[7] = "agosto"
NomeMesWMOnline[8] = "setembro"
NomeMesWMOnline[9] = "outubro"
NomeMesWMOnline[10] = "novembro"
NomeMesWMOnline[11] = "dezembro"
document.write (NomeDiaWMOnline[dias] + ", " + dia + " de " + NomeMesWMOnline[mes] + " de " + ano)
</script></div>

Infelizmente não me recordo onde peguei essa dica, que já uso há um bom tempo em um dos vários blogs que administro. Tentei encontrar no Google e acredito que tenha sido no blog LeandroRicardo.com, a quem deixo os créditos pelo código original.

Saiba como usar scripts dentro dos posts

Bem, tudo começou quando decidi ganhar dinheiro com este blog. Conforme contei pra vocês, eu não levava muito a sério o tema monetização, mas de um tempo pra cá me vi obrigada a decidir o rumo da minha vida como blogueira. Estou estudando bastante e os resultados têm sido muito bons, superando as minhas expectativas.

Uma coisa que me deixava encucada era o fato do Blogger não saber o que fazer com os códigos em javascript, quando colocados dentro dos posts ( na sidebar funciona que é uma beleza!) Ou ele não interpretava o código e o espaço ficava em branco ou havia um conflito com outros códigos da sidebar, provocando um aspecto, no mínimo, estranho.

Pensando em ampliar o meu futuro financeiro e seguindo as dicas dos próprios programas de afiliados, eu queria colocar anúncios dentro dos artigos mais acessados do blog - não aqueles anúncios que aparecem em todas as páginas individuais e que é inserido via html do template; o que eu queria era escolher a posição e em quais posts colocá-los.

Ontem eu passei horas criando um FAQ-Perguntas Frequentes para facilitar (ainda mais) a vida nos novatos e a minha também, pois por mais que eu deixe claro que eu não respondo dúvidas por email, o povo continua insistindo. Isso me lembra o Cidão dizendo no Twitter que “regras ninguém lê”, mas eu sou brasileira e não desisto nunca :P

Enquanto eu criava o FAQ, a idéia de colocar alguns anúncios no referido post, ressurgiu com força total. Resolvi então, usar a segunda melhor ferramenta que existe no mundo da informática (a primeira é o Google): fuçar,fuçar e fuçar. Acabei descobrindo a solução!

Pode ser que pra alguns isto nem seja novidade, mas eu jamais tinha lido em nenhum dos metablogs que acompanho e nem o mestre Compulsivo sabia desta função – claro que ele foi o primeiro a ser informado ;). Usando o editor de textos do Blogger in Draft, é possível inserir qualquer tipo de script dentro dos posts, contanto que “ele” seja informado que desejamos que o código seja interpretado (convertido).

Lembrem-se de verificar se este procedimento é permitido pelo programa de monetização que vocês estão usando em seus blogs; caso seja o AdSense, leiam os regulamentos do programa e assistam o vídeo Seminário do Adsense sobre monetização de blogs.

O script poderá ser inserido tanto em posts antigos, quanto nos novos. Para a primeira opção, entrem no Blogger in Draft e no painel de controle, cliquem em editar postagens. Escolham o post a ser editado, coloquem o script e cliquem em  opções de postagens. Em configurações de criação de mensagem, marquem a caixa Interpretar HTML digitado. Para um post novo, cliquem em nova postagem e sigam as demais instruções.

Vejam o resultado na página do FAQ e na página dos nossos templates. Ficou legal :D

Lembrando que esta função não serve somente para colocar anúncios dentro dos posts. Com ela, podemos inserir qualquer tipo de script, tais como os usados em formulários de contato, slides do Google Docs e etc. É mais um caminho para nós usuários do Blogger.

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

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

O Patrick me pediu para publicar o script aqui no Dicas Blogger, a fim de compartilhá-lo com um maior número de usuários. Como achei a idéia interessante, principalmente para quem  utiliza o sistema de parcerias com banners, resolvi escrever o post.  Com este script, os blogs parceiros irão aparecer de forma aleatória, a cada nova exibição de página.

Não entendeu? Então vamos para um exemplo: quero exibir na minha sidebar os banners de 10 blogs diferentes; o primeiro é o blog 1, o segundo é o 2, o terceiro é o 3 e assim sucessivamente. O blog 10 vai ficar lá no final da fila, certo? Errado. Com o script do Patrick, ele irá aparecer em uma nova posição toda vez que a página for atualizada.

O procedimento para inserir o script no blog é bem simples. Copie o código abaixo, cole no bloco de notas e substitua as partes em vermelho pelo código de cada banner a ser exibido. Depois, copie o código editado e cole na sidebar em html/javascript.

<script type="text/javascript">
function randOrd()
{
return (Math.round(Math.random())-0.5);
}
function randBan(){
var parceiros = new Array();

parceiros[0]='CÓDIGO DO BANNER';

parceiros[1]='CÓDIGO DO BANNER';

parceiros.sort( randOrd );

for(i=0;i<=parceiros.length-1;i++) document.write(parceiros[i] + '<br>');
return;
}
randBan();
</script>

Vou dar um exemplo, usando os banners do Dicas Blogger e do blog Boas Promoções:

<script type="text/javascript">
/* Esta função irá fazer o randômico dos banners */
function randOrd()
{
return (Math.round(Math.random())-0.5);
}
/* Função que irá escrever os banners na tela*/
function randBan(){
var parceiros = new Array();

/* Aqui colocamos a quantidade de banners para rotacionar. Você pode criar de parceiros[0] até parceiros[N] */

parceiros[0]='<a href="http://www.boaspromocoes.com.br" target="_blank"><img border="0" src="http://img34.imageshack.us/img34/9468/56072301.gif" title="As melhores promoções da internet"/></a>';

parceiros[1]='<a target="_blank" href="http://dicasblogger.blogspot.com/" title="Dicas Blogger"alt="Dicas Blogger"><img src="http://lh6.ggpht.com/ekosterapia/SJQh02kmhBI/AAAAAAAABnE/Bxr3ACrLRoo/s144/banner.png" style="border: 1px solid #000000" /></a>';

//Aqui iremos randomizar a posição dos banners
parceiros.sort( randOrd );

//Aqui iremos escrever os banners em sua ordem aleatória
for(i=0;i<=parceiros.length-1;i++) document.write(parceiros[i] + '<br>');
return;
}
randBan();
</script>

O código também pode ser visualizado aqui.

Eu testei e funciona! Qualquer dúvida referente à instalação do script, deve ser encaminhada ao seu desenvolvedor. Os elogios podem ser encaminhados pra nós dois ( lol )