Blogosfera: Personalizando seu blog #1 // Imagem no título do gadget
Hoje eu vim estrear um novo quadro/projeto aqui no LP, o "Personalizando seu blog". Semana sim, semana não, de sexta-feira, vou liberar os posts desse quadro aqui por aqui!
Eu já fiz alguns posts com dicas de layouts free, como personalizar fonte no photoshop... e como eu vivo fazendo mudanças por aqui, eu resolvi montar esse projeto para ajudar vocês que, assim como eu, adoram dar uma repaginada no blog, e muitas vezes a gente procura, procura, um tutorial e não acha nenhum que funcione, ou que seja mais simples... Então vamos lá.
Nesse primeiro post, eu trouxe uma dica de como vocês podem estar colocando uma imagem nos títulos da sidebar do seu blog. É bem simples:
HOSPEDANDO A IMAGEM
Antes de tudo, você vai ter que criar uma imagem, em png (transparente), para cada título da sua sidebar, com o que você quiser colocar e com a fonte que deseja. Eu vou deixar disponível para vocês algumas opções (no tamanho que eu uso aqui no blog) para vocês usarem se quiser, e aí é só vocês abrirem a imagem em algum editor como o PhotoScape ou Photoshop para digitar o título, ok? Ahh, mas lembre-se, a imagem não pode ser maior que a coluna do seu gadget, então se a imagem que eu disponibilizar não der o tanho, vocês podem aumentá-la até encaixar.
Um site muito bacana que eu hospedo minhas imagens é o Imgur. Ele é bem simples de usar e não precisa fazer loging. Basta entrar no site, clicar em > New Post > Browse. Depois de carregar a imagem, clique com o batão direito do mouse sobre ela e clique em > Copiar endereço da imagem.
COLOCANDO O CÓDIGO
Mexer com html no blog é coisa séria, um errinho e já era! Por isso é bom fazer o download dele, para garantir.
1. Entre no Blogger e vá em > Modelo > Fazer Backup > Fazer download do modelo;
CONFIRA OS OUTROS POSTS
2. Clique em > Editar HTML;
3. Clique no html (em qualquer parte) e aperte Ctrl+F no teclado;
4. Copie esse código: ]]></b:skin>
5. Na caixa que abriu quando você apertou Ctrl+F, cole o código que você copiou e aperte "Enter";
6. Copie o código abaixo e cole antes de ]]></b:skin>
.widget .title img{
padding-bottom: 5px;
display: block;
text-align: center;
}
padding-bottom: 5px;
display: block;
text-align: center;
}
7. Clique em > Salvar modelo. Mas calma, ainda não terá alterado nada.
8. Agora, ainda em HTML, digite lá na caixinha de pesquisa, o título, do seu gadget, que você irá mudar.
Ex. Meu gadget chama: "Curta a fanpage", então procurei por Curta a fanpage.
9. Vai aparecer um trecho parecido com esse, com <data:title/> : (os trechos podem variar um pouco de blog para blog, dependendo do templante que você está usando. Por isso não citei do trecho inteiro, e sim a parte que vocês vão precisar alterar. O importante é que esse <data:title/> seja refente ao título á ser alterado).
<h2 class='title'><data:title/></h2>
</b:if>
PS: Caso não esteja aparecendo direto o <data:title/> , assim que você pesquisou pelo seu título, ele pode estar "dentro" dos ... (assim como o meu). Então clica nele e vai aparecer uma nova linha com mais um ... , clica nele novamente e pronto, o trecho vai aparecer. Assim como o meu:
10. Na onde eu destacado (<data:title/>), substitua por: <img src='URL_DA_IMAGEM'/> e no lugar de URL_DA_IMAGEM, cole o link do endereço da imagem que você hospedou, que corresponde com o título que você pesquisou. E então deve ficar parecido com isso:
<h2 class='title'><img src='http://i.imgur.com/tTNSzkR.png'/></h2>
</b:if>
11. Visualize o blog e veja se sua imagem está de acordo com o título do gadget que você escolheu. Se estiver tudo certo, volte, repita os passos do 8 ao 10 com todos os outros títulos que você seja alterar. Visualize novamente e se ficou tudo ok, clique em > Salvar Modelo.
DICA Se as imagens ficarem muito coladas com o conteúdo do gadget, cole o código a seguir antes de ]]></b:skin>
#Blog1 {margin-left: 10px;}
O número marcado em amarelo, será a distância da imagem entre o conteúdo, altere até ficar como deseja.
Download modelo 1 (Aquarela) / Download modelo 2 (Heart)
Gostaram dos freebies? Preparei esses modelos com muito carinho para vocês 💖. E é isso pessoal, espero que tenha ajudado, e qualquer coisa, deixa aí nos comentários que eu vou fazer o possível para te ajudar! :D
2 comentários
Olá, adorei o post. =)
ResponderExcluirGostaria de saber qual o tema que vc usou.
Dá uma olhada se eu consigo colocar essas coisas nesse tema que eu escolhi:https://vannesmile8.blogspot.com/
Tô meio perdida. rsrsrs
Pessoal, para quem deseja baixar o photoscape https://baixarphotoscape.com/ confira o site para o editor gráfico gratis
ResponderExcluir