
Escolhi esse tutorial principalmente porque é super-fácil, e deixa o blog com uma "cara" mais atraente... Como eu disse no Tutorial anterior, é sempre bom você ler até o final para saber todas as formas de realizar esse tutorial.
Ah, é bom você ter um blog de testes para testar o tutorial antes de fazer no seu blog. Assim, qualquer dano que você fizer não vai prejudicar seu Template atual.
1º Passo - Escolher a imagem:
A imagem vai à gosto, é claro, mais vale lembrar algumas dicas básicas para você não errar na hora de escolher a imagem.Escolha sempre imagens pequenas, de no máximo 60px. Eu recomendo uns 46px, por aí. Se a imagem for muito grande, o espaço entre o título e o Gadget ficará muito grande.
Se seu template for branco, pode usar imagens com fundo branco. Se for colorido, prefira imagens com o fundo da mesma cor ou com fundo transparente. O melhor formato para transparência é o ".pgn".
Um bom site para encontrar imagens já prontas é o "Findicons", dê uma passadinha lá!!!
2º Passo - Hospedar a imagem:
Para saber como hospedar uma imagem clique aqui. Caso a imagem já esteja em algum lugar na net, é só você copiar o endereço dela (clique com botão direito, no Firefox, e clique em "Copiar endereço da imagem". No Explorer, se eu não me engano, clique com o botão direito, depois "propriedades" e ache o endereço na tela que abrir (não tenho muita certeza, não uso o IE há muito tempo)).4ºPasso - Colocar o código:
1ª Forma - Adicionar CSS:
Antes de começar, vou avisando que o código vai mexer também no cabeçalho da data. Daqui a pouco eu explico como fazer para que não fiquem iguais.
Vá no Designer do Modelo, que fica na guia Modelo> Personalizar (o botãozinho laranja abaixo do seu template atual). Ao abrir completamente o Designer do Modelo (tem que aparecer uma visualização do seu template atual abaixo), clique na guia Avançado (última guia)> Adicionar CSS (última opção da lista), vai abrir uma caixa branca onde está escrito em cinza: "Adicionar o CSS aqui para substituir estilos existentes". Aqui nós vamos colar o seguinte código:
h2 {
width: 140px;
height:46px;
padding-left:47px;
text-align: left;
line-height: 1.4em;
padding-top: 10px;
color: #000000;
background: url(URL_DA_IMAGEM) no-repeat left center;
}
No lugar de URL_DA_IMAGEM, cole o endereço da sua imagem já hospedada. É importante que seja entre os parênteses e que tenha o http://
Os trechos em vermelho precisam ser adaptados de acordo com seu template. Veja abaixo o que você deve fazer:
widht: largura do h2. Vá aumentando ou diminuindo o número de acordo com a largura da sua coluna;
height: altura do h2. Deve ser a mesma altura da sua imagem;
padding-left: deve ser a mesma largura da sua imagem. Esse número posiciona o texto depois da imagem;
color: cor da letra nesse código, #000000 é a cor preta. Para saber alguns códigos das cores clique aqui.
Como eu disse, esse código vai mudar tanto o H2 quanto o cabeçalho de data. Caso você não queira a data do jeito que ficou, adicione o seguinte código abaixo do primeiro:
h2.date-header { background: tranparent; text-align: left; width: 400px; margin: 3px;}
Widht é a largura do cabeçalho da data. Diminua ou aumente o número de acordo com o template.
Por último, clique em "Aplicar ao Blog", quando tudo estiver OK.
2ª Forma - Editar HTML:
Primeiro, vá na guia Modelo > HTML. Aparecerá uma grande caixa cheia de códigos. Clique em qualquer lugar do código e aperte Ctrl+F no seu teclado, na caixa que apareceu (Search), cole o seguinte código: ]]></b:skin> e aperte a tecla "Enter".Esse trecho do template ficará em destaque, antes desse código, cole o mesmo código da forma anterior. Clique em Visualizar para ver se está tudo OK e quando tudo estiver pronto, clique em Salvar Modelo.
Mil Sweetkisses,

Flor, uma ótima semana pra vc!!! Um lindo dia, que Deus te proteja sempre, bjusss
ResponderExcluirhttp://angelmartinss.blogspot.com/
Ahhhhhhh... quanta coisa... me confundi toda... mais era isso que queria aprender e li e reli e nada... não entendi nada... kkkkkkkk... vou respirar, tomar folego e voltar aqui quando estiver sozinha em casa!! Ahhh... uma dica boa e vc dizer que seria bom as pessoas fazerem um Blog de teste, assim antes de fazer algo faz no Blog de teste e se tudo der certo vc aplica no seu Blog!! EU AMEI... AMEI MESMO O TUTORIAL!! se eu fizer e der certo, com certeza coloco os creditos para seu Blog!! rsrsrsrs... Bjs e bom inicio de semana!!
ResponderExcluiroii, muito lindo o post adorei!!
ResponderExcluirAdorei seu selinho viu...obrigada
bjss *-*
http://territoriodascompradorasdelivro.blogspot.com/
OIE AMEIIII O SEU BLOG ! TÁ MUITO FOFO !
ResponderExcluirVISITA LÁ O MEU http://mnteen.blogspot.com/
Ehhhhhhhhhh... consegui no meu Bog de teste, li com calma e prestei bem atenção, o que tava pegando pra mim e que eu não sabia a largura do meu layout, mais daí eu lembrei que no ajuste da largura tem o numero exato, essa tbm é uma boa dica!! Bjs e amei, assim que sobrar um tempinho vou fazer no meu BLOG!! Bjks
ResponderExcluiroie flor... sou louca pra aprender mas nao consigo.. ja li um montao de coisa e nada... queria deixar meu blog assim bem gracinha... mas nao consigo :/
ResponderExcluirde qualquer forma... passei pra deixar um abraço
http://quemerouboudemim.blogspot.com/
oiii..so queria uma ajudinha, como vc fez o menu lateral? estou apanhando mto pra saber, todo organizadinho...obgada...
ResponderExcluirolá garota, ameii o blog e já usei algumas dicas no meu mais recente blos
ResponderExcluirBjussss
e querendo me visitar e ver o resultado acesse:
http://falandoemesmaltes.blogspot.com.br/
amei as dicas, e já estou seguindo este blog, se quiser conferir o resultado das tuas dicas no mu mais recente blog é só acessar:
ResponderExcluirhttp://falandoemesmaltes.blogspot.com.br/