Marcadores Personalizados
É muuuuuuuuito simples, deve ser por isso que eu não vi nenhum tutorial explicando... Bom, mas vamos lá:
1. Antes de tudo você vai precisar de imagens. Pensando nisso, criei algumas pra vocês, podem usar à vontade (não precisa dar créditos se não quiser).
2. Agora é só montar o código:
NOME DO MARCADOR">URL DA IMAGEM" />
Substitua as partes destacadas em vermelho:
- Seu blog: Coloque o seu endereço antes .blogspot (no caso do IO seria Intensamente Otaku).
- Nome do Marcador: coloque exatamente o mesmo nome que você coloca na hora da postagem (calma, já vou explicar isso!). Caso tenha espaços, coloque-os! Exemplo: http://intensamenteotaku.blogspot.com/search/label/chat do blog
- URL da imagem: Para usar as imagens que eu criei, pegue o URL delas clicando do lado direito do mouse, e depois em "Copiar URL da imagem". Caso não tenha isso, abra a imagem em outra guia, ou arraste até a barra de endereços e copie o novo endereço.
3. Agora é só ir em Design, Elementos da Página, e clicar em "Adicionar um Gadget", escolha o gadget "HTML/JavaScript" e cole o código. Pronto! Agora é só salvar!
Observação: Não se esqueça de colocar o "Nome do Marcador" IGUAL ao que você usou na hora da postagem:
- Seu blog: Coloque o seu endereço antes .blogspot (no caso do IO seria Intensamente Otaku).
- Nome do Marcador: coloque exatamente o mesmo nome que você coloca na hora da postagem (calma, já vou explicar isso!). Caso tenha espaços, coloque-os! Exemplo: http://intensamenteotaku.blogspot.com/search/label/chat do blog
- URL da imagem: Para usar as imagens que eu criei, pegue o URL delas clicando do lado direito do mouse, e depois em "Copiar URL da imagem". Caso não tenha isso, abra a imagem em outra guia, ou arraste até a barra de endereços e copie o novo endereço.
3. Agora é só ir em Design, Elementos da Página, e clicar em "Adicionar um Gadget", escolha o gadget "HTML/JavaScript" e cole o código. Pronto! Agora é só salvar!
Observação: Não se esqueça de colocar o "Nome do Marcador" IGUAL ao que você usou na hora da postagem:
Dúvidas? (:
Poste elas...
_________________________________________________________________________
Oi, gente! Trago hoje um tutorial tão simples, mas tão simples que pode até parecer bobo. É o seguinte: sabe quando a gente participa de algum concurso/sorteio que tem como regra colocar uma imagem de divulgação? Então! Às vezes essas imagens podem ficar maiores que a sidebar e deixar o seu blog, no mínimo, desorganizado.
Como exemplo peguei a imagem do concurso Blog vs Blog II e coloquei no Girly and Cute |
Eu, a rainha da preguiça, não iriar querer ter que salvar essa imagem, depois carregá-la no PhotoFiltre, ajustar a largura ehospedá-la no Imageshack para então resolver esse problema. Tem um jeito muito mais fácil, confira:
1. Ao colar o código da imagem no gadget, adicione:
width="180"
exatamente antes de /> , desse jeito:
E pronto! Para aumentar ou diminuir a imagem é só modificar o número (no caso, o 180). A única desvantagem nesse truque, é que a imagem diminuída perde um pouco da sua qualidade. Mas isso também acontece quando diminuímos em um editor, então... acaba dando no mesmo.
O que acharam? Beijos.
_________________________________________________________________________
Hey! selecionei alguns backgrounds que encontrei na net, espero que gostem.
É isso, créditos ao I Love HTML e ao All For You. Beijos.
_________________________________________________________________________
Mapear uma imagem sempre foi a maior dor de cabeça, pelo menos pra mim. Mas recentemente conheci um site muito bom, o Image Maps. A ferramenta perfeita! Tá a fim de aprender a usar?
Suponhamos que você queira mapear esse menu:
1º Passo: vá até o site: http://www.image-maps.com/;
2º Passo: faça o upload da imagem;
3º Passo: espere o link que vem depois do timer regressivo;
4º Passo: Clique em "Rectangle" e comece o mapeamento;
Para mapear o próximo link, clique em "Rectangle" de novo.
4º Passo: depois de mapear tudo, desmarque as opções à direita;
5º Passo: pegue seu código.
Agora é só copiar o código enooorme que aparece, depois ir em "Design", clicar em "Adicionar um Gadget" de "HTML/JavaScript" e colar o código.
Ah, e você também colocar direto no HTML do seu blog, mas para isso copie o código que está na aba "CSS code".
Dúvidas? Qualquer coisa é só comentar. Beijos.
_________________________________________________________________________
1. Vá em Design, depois em Editar HTML, dê Ctrl+F e procure por:
]]>
2. E ANTES dele, cole:
.post img, table.tr-caption-container {
padding:4px;
max-width:480px; }
padding:4px;
max-width:480px; }
Aí você só precisa editar o número destacado em vermelho de acordo com a largura da área dos posts do seu blog. Recomendo que você coloque 40px menor.
É isso, gente. Tava sem ideia pra post e pensei que esse tutorial pudesse ser útil. Espero que seja mesmo! Beijos.
______________________________________________________________________________________________
Personalize os títulos dos gadgets
A maioria dos blogueiros edita uma imagem para cada título de gadget, embora fazendo assim você tenha a vantagem de colocar qualquer fonte e usar uma infinidade de efeitos, imagino que isso dê muito trabalho. Preguiçosa do jeito que sou, uso no IO uma imagem base, que aparece toda vez que eu crio um gadget, bem mais fácil, né?
Pensando nisso, resolvi criar esse tutorial pra vocês, vamos lá:
1. Vá em Design, Editar HTML, dê Ctrl+F e procure por:
]]>
e ANTES dele cole:
.sidebar h2 {
text-align:center;
background-image: url("URL DA SUA IMAGEM") no-repeat;
width: 180px;
height: 30px; }
2. Edite uma imagem;
Você vai precisar editar uma imagem de acordo com a largura da sua coluna, recomendo que ela seja uns 20px menor (se ela for de 200px, a imagem deve ser de 180px), editei algumas de tamanho 180x30 para que vocês possam usar:
E por último uma base também de 180x30 para que vocês mesmos possam editar:
Lembrando que pelo designer do modelo dá pra usar fontes diferentes e lindas! Além de ajustar a cor e o tamanho. Dúvidas?
Detalhe: se você deixa os títulos dos seus gadgets em branco, lembre-se de deixar ao menos um com algum título antes de testar esse tutorial.
Duvidas? (: Poste...
_________________________________________________________________________
Coloque Duas colunas com fundo Colorido.Bom, começando a temporada de só tutoriais, vou postar o tão pedido tutorial das duas colunas de um lado, com fundo colorido (duas cores). Mas como a maioria aqui usa os novos templates do Blogger, a coisa complica um pouco (como sempre, né? Logo logo vou fazer um post desabafando e ao mesmo tempo implorando pra que vocês larguem esses modelos!). As colunas só podem ser do mesmo tamanho, para colocar o fundo vai ser necessário editar uma imagem. Vamos lá:
1. Vá em "Design", depois em "Designer do Modelo" e clique em "Layout":
Salve clicando em "Aplicar ao Blog".
2. Agora vá em "Ajustar larguras":
Salve novamente clicando em "Aplicar ao Blog".
3. Agora é preciso editar uma imagem para usar como fundo:
Fiz essa imagem para você usar como base na sua edição (lembrando que ela tem 400px, ou seja, 200px pra cada cor), se quiser usá-la sem editar, fique à vontade! Se desejar colocar 500px, você terá que editar uma imagem de 500px avá com 250px para cada cor, e assim por diante.
Depois de editar, hospede a imagem no Imageshack, ou em qualquer outro site de hospedagem de imagens e guarde o link.
4. Por fim, vá novamente em "Design", depois em "Editar HTML", dê Ctrl+f e;
se você escolheu as colunas do lado direito, procure por:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
se você escolheu as colunas do lado esquerdo, procure por:
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
Vai aparecer assim:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
margin-right: $(content.padding);
background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}
margin-right: $(content.padding);
background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}
Substitua a parte destacada em vermelho por:
background: url("URL DA IMAGEM") repeat;
Obs.: Não retire as aspas. Url da imagem é o link da imagem que você hospedou, ok?
Agora visualize, se estiver tudo certo, salve. Qualquer dúvida é só comentar aqui. Beijos.
_________________________________________________________________________
Brushes II
Oi, gente! Ultimamente ando toda atrapalhada com os meus blogs e tal, que nem tô tendo tempo para elaborar um tutorial bem divo pra vocês (ando sem assunto também, se quiser deixar alguma sugestão por comentário... agradeço!). Mas para tentar compensá-los, vou postar mais alguns brushes (imagens com fundo transparente) que eu tenho aqui, espero que gostem! xD
Créditos: Revallsay e Rockstar Productions.
Se quiser repostar, fique à vontade, mas dê os créditos, ok?
Obs: E eu sei que essas imagens são na verdade "PNGs", mas coloquei "brushes" pra dar continuação...
_________________________________________________________________________
Colocar duas imagens de fundo no blog. Não entendeu? Veja como um senhor exemplo o site Evelyn's Place:
O primeiro passo vocês já sabem, né?
1º Vá em Design, depois em Editar HTML, dê Ctrl + F e procure por:
body {
apague ele e todo o conteúdo que o acompanhe.
Por exemplo: no código do IO aparece assim:
body {
background: url("http://www.backgroundlabs.com/backgrounds/202.gif") repeat;
margin:0;
color:#333333;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Pra colocar os dois bgs, eu precisaria apagar tudo isso.
2º Cole no lugar que você apagou o seguinte código:
body, html {
height: 300px;
margin: 0;
padding: 0; }
body {
background: url("URL do 1º background") repeat; }
html {
background: url("URL do 2º background") repeat; }
Agora é só colocar as URLs das imagens, visualizar e, se estiver tudo certo, salvar! Detalhe: para aumentar ou diminuir o espaço do primeiro background, mude o valor que eu destaquei em vermelho.
_________________________________________________________________________
Hoje vou postar um tutorial que aprendi noMundo Blogger - pra variar. É bem facinho e o efeito é bem legal. Vamos lá:
1. Vá em Design, depois em Editar HTML, dê Ctrl + F e procure por:
]]>
2. E cole ACIMA dele o seguinte código:
*::-moz-selection {
background:#B22222;
color:#ffffff;
}
*::selection {
background:#B22222;
color:#ffffff;
}
background:#B22222;
color:#ffffff;
}
*::selection {
background:#B22222;
color:#ffffff;
}
As partes destacadas em azul são a cor de fundo e as de verde, a cor da fonte. Se quiser mudá-las substitua essas partes pelo código da cor que desejar. Essa tabela tem várias cores.
P.S.: Não funciona no navegador Internet Explorer.
P.S.: Não funciona no navegador Internet Explorer.
_________________________________________________________________________
Gostaram?? Comente ! =)