Dicas para Blogs e Sites: novembro 2009

Proteger os textos do blog contra copias

Com tantas pessoas copiando textos e imagens encontramos um site bem interessante que coloca automaticamente um link junto com o texto copiado, estamos falando do Tynt Insight. Basta entrar no site, e fazer um cadastro simples inserindo o endereço do seu blog, sem o http://, seu endereço de email e escolher uma senha após isso clique em Get Started.

Selecione a linguagem correta ou seja portuguese (Brazil), se quiser pode adicionar um link do Creative Commons nos textos copiados do seu blog. Veja que conforme faz as alterações o link que está no exemplo ao lado(preview) se modifica, quando estiver pronto copie o código.

Agora entre na pagina layout do seu blogger, clique em adicionar gadget, html/javascript, cole o código e clique para salvar. Quando visualizar o seu blog não notará diferença alguma, esse código é invisivel no blog, mas copie algum trecho do texto e cole no bloco de notas e verá a diferença: além do texto aparecerá um link da pagina do seu blog de onde copiou o texto.

Concordo que isso não impedirá a ação dos plagiadores, mas achei que é um recurso bem interessante para colocar no blog e talvez possa servir para algumas pessoas colocarem o link do blog se forem usar essa copia para publicar em outro lugar como comunidades do orkut ou alguma outra rede social ou foruns de discussão. Depois de um dia que instalou o código você pode voltar no site Tynt Insight e fazer login e ver alguns estatisticas sobre as cópias feitas do seu blog.

Marcadores: Segurança, Sites Úteis

Opções de postagem no blog

Atualmente existem 3 modos de fazer as postagens do seu blog, ou melhor, dizendo três maneiras de exibir a pagina para criar e editar as postagens do blog são elas: editor atualizado, editor antigo e ocultar modo escrever.

O modo atualizado mostra a opção resumo da postagem (inserir jump break) a ultimo botão da barra de ferramentas, além disso, é permite publicar códigos HTML para fazer isso clique em opções abaixo de onde digita a postagem e selecione a opção Mostrar HTML literalmente, infelizmente nem tudo é perfeito nesta versão não aparece mais a ferramenta para postar vídeo que no editor antigo permite publicar seus vídeos diretamente pelo blog, mas isso pode ser facilmente resolvido usando o colocando os vídeos no Youtube.

A ultima opção é igual ao editor antigo apenas sem mostrar a opção editar HTML. Nos 3 casos é muito fácil usar basta editar (escolher as cores, tamanhos e tipo de letras como num editor de texto qualquer que tenha no seu computador), mas lembramos que é mais recomendável fazer uma edição geral das postagens pela pagina editar HTML assim se quiser modificar alguma coisa nas postagens todas elas ficaram iguais o que não acontece se formatar seu texto na hora de publicar. Por exemplo, se quando publicar o texto escolher a cor da letra como azul escuro e depois de algum tempo resolver mudar a cor de fundo do seu blog para um cor escura precisará editar essas postagens com letras escuras uma por vez.

Por esse motivo sugerimos entrar na pagina editar html e procurar por .post{....} e se não encontrar adicionar esse estilo junto com os demais estilos CSS(#main, #sidebar, body, ...) que já tem no seu blog, e assim fazer a formatação de todos seus textos de uma vez só deste modo facilitando futuras alterações. Onde colocamos os pontinhos dentro das chaves veja aqui como formatar o texto do blog usando CSS. Isto é muito mais fácil e útil do que parece.

Marcadores: Iniciantes, Personalizar

Configurações, layout e editar html no Blogspot

Um das coisas mais importante para começar a entender o blog é saber como achar o que procuramos. Basicamente o Blogger se divide em configurações, layout, editar html, bem que as duas ultimas estão muito relacionadas, apenas as citei separadamente porque o html é basicamente códigos e um pouco mais difícil de alterar. Quando entramos (fazer login, colocar email e senha) no site do Blogger vemos essa imagem:

Aqui mostra o nome do blog, nova postagem, editar postagens, configurações, layout e gerar receita. Os itens nova postagem e editar postagens se explicam sozinhos, no link para as configurações vamos entrar em uma pagina com muitas guias e cada uma delas tem uma utilidade diferente para não ficar um tutorial muito extenso vamos falar apenas das principais funções. Veja abaixo o que podemos alterar em algumas das guias das configurações:

Básico: Titulo e descrição do blog, Permitir que mecanismos de pesquisa localizem seu blog, mostrar ferramenta de edição rápida (aquela imagem de ferramentas que aparece no blog quando você está logado), selecionar editor de postagem (existem dois modelos de editor de postagem atualmente)

Publicação: aqui você pode trocar o endereço do seu blogspot ou registrar um domínio como fizemos para nosso blog usar o endereço http://www.dicasparablogs.com.br

Formatação: numero de postagens na pagina inicial, formato da data, fuso horário (se a hora que aparece nas suas postagens estiver errada é aqui que você deve corrigir), idioma.

Comentários: exibir ou não os comentários, forma como é exibido (pop up, na pagina da postagem ou uma pagina inteira), quem pode comentar o blog, formato da data e hora dos comentários, moderação de comentários, exibir uma confirmação de palavras para os comentários (aquela imagem com letras para digitar).

Arquivamento: você escolhe como classificará seus arquivos e se cada postagem do seu blog terá uma pagina própria (Ativar páginas de postagem)

Site Feed: configurações do feed, caso use o feedburner é aqui onde deve colocar o seu endereço. Também é possível inserir uma nota de rodapé no feed, ou seja, um texto no final de cada feed.

Permissões: quem pode escrever ou alterar o layout do seu blog. Aqui você pode convidar outras pessoas para participarem do seu blog.

Não falamos de todas as configurações apenas de mais utilizadas, agora vamos começar com o layout e editar html.

Quando clicamos em layout vamos para uma pagina onde é possível arrastar os gadgets para reorganizar nosso blog, além disso, podemos clicar para editar o cabeçalho do blog, a barra do blogspot (mudar de cor) ou editar as postagens (aqui mostra algumas das configurações e o que é ou não exibido no blog.

Temos também a guia editar html quando algum site manda inserir algum código na pagina html é nesta pagina, mas cuidado ao mexer aqui faça sempre um backup antes de começar para evitar estragar o seu modelo. Repare que sobre a caixa onde aparece o código tem expandir modelos de widgets dependendo do tipo de alteração que for fazer no blog é necessário marcar ou não essa opção.

O item gerar receita é como inserir anúncios do adsense no seu blog, mas já falamos sobre como gerar receita em outra postagem.

Marcadores: Iniciantes

Botão para as redes sociais - AddThis

Um ótimo serviço gratuito para ajudar na divulgação do seu blogspot é colocar um botão que permite adicionar sua pagina aos favoritos e também enviar para diversas redes sociais. Parece bastante coisa, mas o site AddThis faz tudo isso de forma muito simples para instalar no blogger.

Entre no site http://www.addthis.com, selecione a opção Blogger, depois escolha qual modelo de botão vai mostrar no seu blog, deixe marcado a opção No, just give me the button e clique em get your button

Na pagina seguinte verá um código logo depois de Blog Post Button Instructions, copie esse código, as instruções do site funcionam perfeitamente para instalar o botão no seu blog, é bem simples: Entre na pagina editar html, clique para expandir o modelo, procure por <div class='post-footer'> e cole o código do botão antes dele. Agora é só clicar para visualizar e depois salvar as alterações.

Quando for criar o botão pode escolher a opção Yes, track the performance of
my button. (requires registration), mas como deve ter notado será necessário fazer um cadastro, mas pode valer a pena se quiser explorar melhor os recursos e serviços do site. Dissemos para escolher a outra opção como uma forma mais simples de instalação, mas claro que é uma questão para cada um decidir qual o melhor jeito de fazer.

Marcadores: Ferramentas, Mais visitas, Redes Sociais, Sites Úteis

Marcadores: Sites Úteis

Opções dos marcadores do blogger

Recentemente me perguntaram ser era possível criar listas com somente alguns dos marcadores do blog, a principio achei que era impossível, mas o gadget dos marcadores tem uma nova função que permite escolher quais marcadores você vai mostrar na lista, ou seja, agora não é mais obrigatório mostrar a lista completa. Caso tenha duvidas sobre como Colocar Marcadores no blog clique neste link e poderá ver como fazer.

Entre na pagina layout e clique para editar os marcadores do blog

Veja que tem a opção marcadores selecionados, quando clicamos nela aparece embaixo escrito marcadores selecionados: 25 de 25 editar (esse é o exemplo deste blog no momento que fiz a postagem, portanto os números variam). Então só precisa clicar na palavra editar.

Agora selecione aqueles marcadores que deseja mostrar clique no botão concluído, depois em salvar e já está pronta sua lista de marcadores somente com aqueles que você escolheu.

Marcadores: Conteúdo

Mostrar Msn, Google Talk, Skype no blog

Um acessório legal para colocar no blog é um botão ou caixa de comunicador instantâneo (MSN, Skype, Google Talk), e o melhor para inserir isso no blog é bem simples. Isso pode ser interessante para pessoas que gostariam de mostrar quando estão conectados ou simplesmente incrementar o blog com um novo acessório. Veja nos links abaixo como fazer:

Colocar botão do Skype no blog, nesta pagina você coloca seu nome de usuário e seu status é exibido no seu blog.

Para exibir uma janela do Google Talk no blog usamos esse código:

<iframe width="234" frameborder="0" src="http://talkgadget.google.com/talkgadget/client?fid=gtalk0&relay=http%3A%2F%2Fwww.google.com%2Fig%2Fifpc_relay" height="350"></iframe>

Com ele não será exibida o seu Google Talk, mas o de quem estiver visitando seu blog e estiver logado, assim cada pessoa verá seus (de quem estiver visitando) contatos através do seu blog.

Em outra postagem já falamos sobre colocar um botão do MSN mostrando seu status e até permitindo enviar mensagens online, clique aqui e veja a pagina do MSN para configurar seu gadget.

Qualquer um deles que escolher para usar no blog o jeito de colocar é o mesmo: entre na pagina layout, adicionar gadget, html/javascript e cole o código que escolheu.

Marcadores: Acessórios, Ferramentas, Sites Úteis

Colocar mais uma coluna no blog

Para colocar mais uma colunas no blog, ou seja, fazer um blog com 3 colunas é um pouco complicado então antes de iniciar recomendamos salvar uma cópia do seu modelo como está antes das alterações. Para fazer isso entre na pagina editar html e clique no link baixar modelo completo, abrirá uma janela de download para você salvar seu modelo, veja aqui mais sobre backup do blog.
Usamos como exemplo o modelo Mínima, então na pagina editar html procure por: #header-wrapper, #outer-wrapper e #footer nestas três partes você encontrará width:660px; troque esse valor por 980px. Agora no trecho depois de #sidebar{........} coloque isso:

#newsidebar-wrapper {
width: 170px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Repare se no trecho já existente #sidebar a parte float:....; está com a palavra right, se não tiver altere pois dependendo disso as duas colunas podem ficar do mesmo lado do blog.

Até aqui colocar os estilos CSS que define a largura da nova coluna e aumentamos a largura total do blog. A seguir vamos colocar a coluna propriamente dita, localize:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

Logo depois dessa linha você verá os códigos dos gadgets que tem no seu blog, elas são mais ou menos assim:

<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'/>

Copie qualquer uma delas e coloque no código abaixo da mesma maneira que fizemos:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='novabarra' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
</div>

Agora coloque isso antes de:
<div id='main-wrapper'>
<b:section class='main'.....

Isso está poucas linhas acima de onde copiou o código. Preste atenção num detalhe muito importante, por exemplo, se copiou a linha <b:widget id='HTML2' locked='false' title='' type='HTML'/> para colocar no código da nova coluna deve apagar de onde estava ou seja na verdade vamos mudá-lo de lugar e não deixar 2 iguais, se deixar os dois na hora de salvar não vai conseguir pois o blog mostrará conteúdo duplicado.

Agora é só visualizar o blog e se estiver tudo certo clique em salvar. Depois disso é só ir a pagina layout e arrastar os gadgets para a coluna que desejar e assim acabar de organizar o blog do jeito que gostar mais. Caso uma das colunas apareça no final do blog em vez de uma ao lado da outra tente diminuir um pouco a largura da coluna (170px) ou aumentar a largura total do blog (980px).
Veja a mesma explicação na animação abaixo.

Marcadores: Html, Template, Video Aula

Começar a modificar o blog

Vamos começar uma serie de postagens para blogueiros iniciantes, nós sabemos que ao criar o primeiro blog as pessoas têm vontade de mudar tudo do seu novo blog no primeiro dia, mas certamente isso não é possível afinal é preciso aprender a dar os primeiros passos antes de começar a correr. Já publicamos algumas coisas para iniciantes até criamos um marcador para isso em nosso guia rápido, aqui estão algumas delas:

Programas grátis para editar imagens
Onde e como hospedar imagens
Formatar o texto das postagens ou colunas (sidebar)
Criar ou modificar bordas

Mas como já dissemos é preciso começar por algum lugar, então vamos falar sobre trocar a cor de fundo do blog. Quando entrar no painel do blog clique em layout e depois em fontes e cores.

Normalmente nesta pagina basta procurar no menu por cor do plano de fundo da pagina, clicar nele e depois clicar na cor desejada e pronto. Você visualizará a mudança no seu blog que aparece na parte inferior da tela. Esse texto plano de fundo pode variar um pouco pode ser fundo da pagina ou background. Outra coisa se você não gostar das cores que aparece pode colocar o código de outra cor na caixa Editar código de cor hexadecimal, onde na imagem acima aparece ffffff, veja aqui o código hexadecimal das cores.

Se por acaso no seu blog não funcionar entre na janela editar html e procure por body{...} está logo no começo do código, veja se tem algo parecido com isso lá:

body {background-color: #0000FF;
...
...

Caso não tenha pode colocar se já tiver background mais alguma coisa altere para ficar igual o exemplo acima e a cor no final novamente usando código hexadecimal das cores você pode colocar a cor que desejar. Para colocar uma imagem de fundo use esse código:

body {background-color: #0000FF;
background-image: url(endereço da imagem)

Mesmo usando uma imagem é bom colocar a cor, assim caso haja algum problema e a imagem de fundo não aparecer o blog ficará com um fundo numa cor próxima da imagem. Veja mais detalhes sobre imagens de fundo.

Talvez alguns achem essa postagem simples demais, mas devemos lembrar aos mais experientes como foi difícil começar e quantas perguntas simples sofremos tanto para descobrir a resposta.

Marcadores: Iniciantes, Personalizar

Dividir o rodapé do blog - Footer

Dividir o rodapé do blogspot (footer do blog) é mais fácil do que parece, basta trocar algumas linhas de códigos e pronto. Sugerimos que antes de começar entre na pagina layout e remova tudo que tiver no rodapé do blog, você não precisa excluir apenas arrasta para a coluna do blog ou embaixo das postagens, pois em poucos minutos vamos colocá-los no lugar novamente.

Mas para começar a divisão do footer em 3 partes o primeiro passo é entrar na pagina editar html (não clique para expandir o modelo), mas antes de começar é bom fazer um backup do blog para não perder nada no caso de imprevistos. Agora que não corremos mais o risco de estragar nada vamos começar.

Procure por esse trecho no html do seu blog (está quase no final):

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Quando achar apague, tome cuidado para não tirar ou deixar nenhum sinal no inicio ou fim do código e coloque esse no lugar:

<div id='footer-wrapper'>
<div id='footer-column-container'>
<div id='footer-column-left' style='float:left; width: 32%;margin: 2px;'>
<b:section class='footer-column' id='footer2' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div id='footer-column-center' style='float:left; width: 32%;margin: 2px'>
<b:section class='footer-column' id='footer3' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div id='footer-column-right' style='float:right; width: 32%;'>
<b:section class='footer-column' id='footer4' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<div id='footer-bottom'>
<b:section class='footer' id='footer-column-bottom' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div></div>
<div style='clear:both;'/>

E já está tudo pronto, agora é só entrar na pagina layout e arrastar os gadgets para cada uma das colunas do rodapé do seu blog e assim usar melhor o espaço disponível.

Se a parte do rodapé ficar sem cor de fundo podemos colocar esse código:

#footer-wrapper{background-color: #ffff66;border: 1px solid #0000FF}

junto com os outros estilos CSS do blog, isso fica no começo do html. É fácil de achar porque no blog tem muitos códigos parecidos com esse. Para trocar a cor é só mudar o final ffff66, veja aqui o código de outras cores. E as bordas você pode ver nosso tutorial sobre colocar e alterar bordas que tem explicações detalhadas.

Note que neste código que colocamos apareceu 3 vezes width: 32%; isso é a largura de cada uma das colunas no rodapé do blog, portanto altere os valores como desejar, mas claro que a soma das 3 chegar até 100% provalemente uma das colunas passará para linha debaixo, então se tiver esse problema é só reduzir um dos valores (sempre é bom deixar algum espaço sobrando).

Marcadores: Códigos, Template

Usar Feed como Acessórios

Já falamos sobre como usar os feeds em algumas postagens, mas faltou reunir varias informações num mesmo lugar, por exemplo: como mostrar quem linkou o blog ou mostrar os comentários recebidos recentemente no blog. Além disso, usar feed é uma ótima maneira de ter conteúdo sempre atualizado automaticamente no seu blog. Veja também como colocar últimas noticias, esportes no seu blog

Para colocar qualquer feed no seu blog entre na pagina layout, adicionar gadget, feed. Vamos usar como exemplo o feed do nosso blog: http://www.dicasparablogs.com.br/feeds/posts/default

Agora coloque o endereço do feed do site que deseja usar e clique em continuar

Escolha as opções e salve, agora já está pronto.

Isso é a maneira mais fácil de mostrar uma lista das suas postagens mais recentes no blog, mas não é só isso, para mostrar os últimos comentários recebidos use esse endereço:
http://www.dicasparablogs.com.br/feeds/comments/default

O feed para mostrar quais os últimos links recebidos (backlinks) pelo seu blog é:
http://search.blogger.com/blogsearch?q=link:www.dicasparablogs.com.br

Lembramos que colocamos nosso endereço no feed, portanto qualquer um deles precisa ser alterado antes de colocar no seu blog. Cuidado na hora de colocar o endereço, pois precisa ser exato, algumas pessoas colocam www no endereço blogspot, mas na verdade isso não faz parte do endereço, o link padrão do blog é http:///seublog.blogspot.com.

Esses feed ainda servem para mostrar as ultimas noticias, esportes, enfim o conteúdo atualizado de qualquer site que tenha o feed (RSS), por exemplo, se adicionar: http://rss.terra.com.br/0,,EI1,00.xml terá as ultimas noticias do site Terra no seu blog ou as novidades do esporte através da Gazeta Esportiva http://www.gazetaesportiva.net/rss/jogoRapido.xml. Então espero que gostem e aproveitem para colocar novos conteúdos no blog.

Marcadores: Acessórios, Conteúdo, Sites Úteis

Como colocar musica no blog

Um site que achamos muito fácil de usar para colocar musica no blog é o Goear, basta procurar pela musica que deseja depois copiar o código do player que está na caixinha This song in your site, e colocar no seu blog pela pagina layout, adicionar gadget, html/javascript.

Veja aqui outras maneiras de colocar musicas ou playlists no seu blog:
Colocar Várias Músicas no Blog - Como Criar Playlist
Fazer Podcast - Colocar MP3 no Blog
Fazer Playlist para Colocar no Blog
Sites com musicas para colocar no Blog

Além disso, se quiser pode fazer um cadastro clicando em Login / Register e depois hospedar (fazer upload) de suas próprias musicas ou qualquer arquivo de som. Isso pode servir até mesmo para colocar sua voz falando algo no seu blog. Tudo isso de maneira muito simples e rápida de fazer.

Marcadores: Acessórios, Sites Úteis