Videos no blog

Visualização

Seguidores

Blog Archive

Quem sou eu

Minha foto
Blogueira apaixonada que divide esse blog com uma pessoa especial. Alguém que mudou a sua vida! "Garota Rebelde" Eu sou a dona do blog.Mais quem escreve é ela!
Tecnologia do Blogger.

Arquivo do blog

26 de dezembro de 2011

Guia básico do Tumblr!Customização

omo muita gente me pergunta várias coisas sobre o Tumblr, resolvi escrever um post que talvez possa ajudar a tirar as dúvidas mais comuns. Esta postagem trata sobre a customização do seu tumblr e tenta dar uma ajuda a quem não tem prática com html ou simplesmente está meio perdido.
Para saber mais sobre o serviço, sobre como criar sua conta e alguns outros detalhes, peço que leia o “O que você precisa saber sobre o Tumblr”. Se você está procurando por um tema, visite “Maçã Verde – Template para Tumblr”.

Customização

Ok, você está na página de customização. No topo da pré-visualização, você encontra o menu principal com “Info”, “Theme”, “Appearance”, “Pages”, “Services”, “Community” e “Advanced”.
Apesar de falar de cada um destes links, o foco do post está nos três primeiros. Além disso, aqui você encontra como colocar no seu tumblr caixas de perguntas do Formspringnuvens de tags e os seus tweets (para saber como habilitar comentáriosleia este post).
Agora vamos ver um pouco mais sobre cada um dos submenus e suas opções.
Info
Em Info estão realmente as informações mais básicas. Muita gente vai preferir nem ir além destas configurações.
Title – Título do seu blog. Se você não tiver nenhuma imagem no cabeçalho, este texto aparecerá.
Description – Descrição. É geralmente o texto que irá aparecer na sidebar do seu tumblr na maioria dos templates. Você pode inserir aqui links, listas e até widgets (como o do formspring, por exemplo).
Html SUPER básico que você pode precisar:
  • Links: <a href=”Endereço do link” title=”Texto que aparecerá se a pessoa deixar o mouse em cima da imagem“>Texto a ser linkado</a>
  • Imagens: <img src=”Endereço da imagem” alt=”Texto que aparecerá no lugar da imagem se ela não abrir“  Title=”Texto que aparecerá se a pessoa deixar o mouse em cima da imagem” />
  • Imagens com links: É só colocar o código html da imagem ao invés do Texto a ser linkado.
  • Negrito: <b>Texto em negrito.</b>
  • Itálico: <i> Texto em itálico.</i>
  • Negrito e itálico: <b><i>Texto em negrito e em itálico.</b></i>
Mais dicas? Google! :)
Portrait Photo – A foto que é seu “avatar” no tumblr. A imagem que você upa aqui aparece na sua Dashboard e na de outros usuários quando você tem uma nova postagem, e também é usada como favicon (aquele ícone pequenininho que representa sua página ali na barra de navegação e nas pastas de Favoritos). Em alguns templates, essa imagem também aparece na sidebar.
URL - O endereço do seu tumblr. Você pode mudá-lo na hora que quiser.
Use a custom domain name - Pra quem quer um domínio .com.br. Exemplo: meutumblr.com.br. Você vai precisar registrar um domínio (normalmente custa uma média de R$30 por ano) e configurá-lo.
Theme
É aqui que toda a mágica acontece :) Em Theme você pode:
(1) escolher um dos temas disponíveis na lista (É só clicar para ter um preview de como vão ficar. Os primeiros são pagos.);
(2) clicar em “Browse more themes…” e procurar mais temas. O Tumblr tem um arquivo cheeeio de temas para você;
(3) clicar em “Use custom HTML” e usar um tema customizado que não está no banco de dados do site (o Maçã Verde, por exemplo), ou customizar o tema que você já selecionou anteriormente;
(4) clicar em “+ Contribute a theme” e contribuir com seu próprio tema para o banco de dados do sistema.
Use Custom HTML
Quando você escolhe editar o html do seu tema, é aberto o campo de customização do código. Pra mexer aí, você vai ter que ter um pouco de noção de html. :)
Para voltar aos temas, clique em “Disable Custom HTML“. Em “Theme Docs” estão as tags usadas pelo sistema. Quando você fizer alterações, clique em “Update preview” para checar.
Algumas dicas:
Como colocar uma caixa de perguntas do FORMSPRING?
Na página do Formspring, faça login, entre nas Configurações (Settings) e escolha a opção de Widgets no menu que aparece no canto direito. Uma caixa irá aparecer com o código que você usa para colocar o Formspring no seu blog. Encaixe esse código no seu Tumblr (você pode inserir na sua Descrição em Info se não souber onde colocá-lo!).
.
- Como colocar uma nuvem de TAGS?
Este site tem um script de tag clouds. Você só precisa colocar este código em algum lugar do seu Tumblr (você pode inserir na sua Descrição em Info se não souber onde colocá-lo!). O site também dá dicas de como customizar este código.
Para uma pré-visualização, coloque o endereço do seu tumblr no campo disponível à direita da página e clique em preview. Claro que você precisa usar tags no seu tumblr para que isto seja possível! :)
A nuvem de tags não aparece no modo de preview, você precisa salvar e checar no seu tumblr.
- Como colocar meus TWEETS?
É muito provável que seu tema já tenha essa opção. Se sim, você só precisa inserir seus dados em Services (que eu explico mais adiante). Se não, siga esses passos:
Antes de </body> coloque este código:
{block:Twitter}
<script type=”text/javascript” src=”/tweets.js”></script>
{/block:Twitter}
No lugar onde você quer que seus tweets apareçam, coloque o código a seguir. (Se depois de usar esse código você notar que algumas vezes os tweets não aparecem, não se importe muito. É normal. Além disso, os tweets também não aparecem na página de preview, você vai precisar salvar e checar no seu tumblr.)
{block:Twitter}
<div id=”twitter” style=”display:none;”>
<h3><a href=”http://twitter.com/{TwitterUsername}”>Tweets</a></h3>
<div id=”tweets”></div>
</div>
<script type=”text/javascript”>
function recent_tweets(data) {
for (i=0; i<data.length; i++) {
document.getElementById(“tweets”).innerHTML =
document.getElementById(“tweets”).innerHTML +
‘<a href=”http://twitter.com/{TwitterUsername}/status/’ +
data[i].id + ‘”><div>’ + data[i].text +
‘</div></a>’;
}
document.getElementById(“twitter”).style.display = ‘block’;
}
</script>
{/block:Twitter}
Appearance
Em Appearance você vai poder mudar as cores que seu template disponibiliza para alteração não manual e mais algumas coisas:
Geralmente você vai poder mudar a cor de fundo (Background Color), a cor dos links (Link Color), a cor dos títulos dos posts (Post Title Color) e alguns outros. Clique no quadro colorido e escolha a cor mexendo na ferramenta que irá aparecer. Depois de escolher, feche. O preview será atualizado automaticamente após alguns segundos.
Em Title font você escolhe a cor do título do seu blog, o que irá aparecer no cabeçalho.
Em Header image, ao clicar em Upload, você pode escolher uma imagem do seu computador que geralmente substituirá o título do seu blog no cabeçalho. (É assim que faço para os títulos dos meus tumblrs ficarem com aquelas fontes diferentes. Crio imagens e faço o upload.) Você pode usar pngs e gifs, assim dá pra ter o fundo transparente. Se não gostar do resultado, clique emClear e a imagem será apagada.
Em Background image, ao clicar em Upload, você também vai poder escolher uma imagem do seu computador para ser o fundo do seu tumblr. Se não gostar, clique em Clear e a imagem será substituída pela cor de fundo que você escolheu. (Não sabe onde achar backgrounds? Leia este post!)
Show People I Follow habilita ou desabilita que apareçam os ícones das pessoas que você segue no espaço reservado para isso do seu template.
Show TagCloud, que há no meu template, habilita ou desabilita a nuvem de tags.
Disqus Shortname é onde você insere o seu username do Disqus para habilitar comentários.
Se no fim das contas você não gostar das alterações que fez, clique em Reset defaults e ele volta ao padrão de cores e configurações do template que você está usando.
Pages
Aqui você pode adicionar páginas.  Ex.: Links, Sobre mim, Contato, etc. É só clicar emAdd a page e uma janela pop-up abrirá para você editar os dados e conteúdos dela. Confirme clicando em Create Page.
Quando quiser editar a página, é só voltar em Pages que ela estará listada lá. :)



Services
Facebook – posta as últimas atualizações do seu Tumblr no seu facebook.
Twitter – Logue com o seu twitter para que (1) os seus tweets apareçam se esta ferramenta estiver disponível no seu template (ou configure vendo o código que coloquei ali em Use Custom HTML) e (2) você possa escolher se todos os seus posts devem ser twittados automaticamente.
Feedburner - Para quem prefere que o feed do blog seja redirecionado para ofeedburner.
Automatically import my… - Como o nome diz, importa automaticamente os feeds que você escolher. Tudo que for atualizado nos feeds escolhidos será postado no tumblr (medo!).
Community
Replies - Permite que as pessoas respondam seus posts. Essa opção aparecerá abaixo dos seus posts na Dashboard.
Let people ask questions – As pessoas fazem perguntas para você. Também irá aparecer na Dashboard. :)
Let people submit posts - Permite que os outros enviem posts para o seu tumblr. Elas poderão enviar os posts através do link http://SEUTUMBLR.tumblr.com/submit.
Advanced
Language – Altera o idioma dos textos padrão do seu tumblr.
Timezone – Use o tempo referente ao seu horário local para que as datas e horas dos seus posts fiquem corretos.
Add custom CSS – Para quem não quer mexer no Use Custom HTML, pode inserir CSS e styles aqui.
Post count – Quantos posts aparecem por página.
Options - (1) Habilitar/Desabilitar fotos em alta resolução (quando a pessoa clicar na foto menor do post irá para a foto do tamanho orignal), (2) fazer com que os links abram todos em novas páginas, (3) permitir temas adaptados para leituras em dispositivos móveis, (4) resumir os posts no Feed, (5) usar urls descritivos, com pequenos títulos, (6) permitir que apareça o botão  “Follow” mesmo para quem não é usuário ou não está logado no Tumblr.
Directory - (1) Permite que seu blog seja listado em serviços de busca, (2) permite que seus posts apareçam em páginas de diretório, buscas e outros links dentro do Tumblr e (3) marca seu tumblr como contendo conteúdo impróprio para menores – que vai gerar um aviso aos seus visitantes antes de abrir sua página.
Chegou no final da customização ou simplesmente gostou do que tá fazendo e tal? Save + Close para salvar e voltar à dashboard; Save para salvar e continuar editando; Cancel para sair sem salvar.
Bom, é isso aí :) Espero que o post seja útil para alguém.
Dicas de temas
Está procurando por um tema bacana? Que tal o Maçã Verde ou Simplicidade, disponíveis aqui no blog para uso grátis?
Ou talvez você prefira ler esse post com várias outras dicas de temas legais?
Veja também:

Bom espero que tejam gostado!!

0 Recadinhos: