TUTORIAL
Como Colocar uma imagem de Identificação (cabeça) no código SAMSARA
O código é um HACK. Ele não é meu, seu ou de ninguém. Ele existe por si só. Por favor, o promovam, distribuam e espalhem. Ele é feito de forma colaborativa e só peço que, caso você descubra algo novo para melhorá-lo, favor dividir a informação com a comunidade.
- OBJETIVO: Inserir uma imagem de cabeçalho, com recortes se preferir, na parte de identificação do blog, entre o background e o skin do site.
Pesquisei o tema ‘promover imagem na internet’ no Google, e uma das imagens que saiu foi a Vênus de Botticelli, estava em
http://www.ping.blog.br/wp-content/uploads/2011/02/o_nascimento_de_venus.jpg
Linda imagem. Baixei para meu computador.
1. Preparando a imagem
1.1. Dei um Print Screen, tecla
1.2. Em seguida, abri a imagem que salvei do Google, e a puxei sobre a imagem do blog,
1.3. Preparei a imagem sobre o blog com recortes, aumentei, diminui,... Salvei no formato .PNG, com o fundo desativado,
2. Colocando a imagem no Blog
2.1. Insira a imagem padrão que você acabou de criar, através de postagem, pelo Blogger, deixe-a com tamanho original
Após a inseção dê um clique direito, e copie a URL da imagem
Ainda no Blogger, procure a partição design e vá a Editar HTML.
2.2. Substituição do wrap.
Vá no código html do blog, que fica em blogger
#wrapper {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuqQ9SR17zhhY4AaLnHoVQtYJeGFMUYzJJHSKHc-d6YuFZqatZ5EvFQfaQjyN4L0ozd9qbdm_Awkk-ILWlkvCldvhcHQC_Rzfz8JtMONaw_4qRzcEwhqSgesUiJDAponwtwWkAll_QguFc/s0/wrapper.png") repeat-x scroll 0 0 transparent;
Substitua por:
#wrapper {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM2ADqjRTAABOPSzE_hB0es2BghPzxQ7vCZkpBv0GG1bccndQw3Lh8jApty9LpZnvNT036P5iAKgwBYvF-Suex9TJdb6n-EOtD6BB_JvhMWK8Dcq8q-OYc7SsjPoX38BO-Uo5vxQCdV_z2/s1600/wrapper+AJUSTADA.png") repeat-x scroll 0 0 transparent;
Obs.: Com esta ação, você substituiu o wrap default por um com a parte superior transparente. Como essa operação é meio mecânica, só inseri o comando e a imagem já estando hospedada no Blogspot não há quebra de vínculo.
3. Inserção da imagem cabeça do Blog.
No mesmo códiga HTML do Blogger, busque body {, pegue a primeira opção, que será:
body {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGwFEnXRVU44O5XRS1PkweI60h3UqU_YxEXsDsIWZe6pMC68SevKQOjxQGs1A42gUu529xFgk14AhHTCBtaKiRDhUWEhdFWUHHmqO3MNoGweNKP0NqRGGMNPZUGVazcE93hBssEJn6a94f/s0/body.png") repeat scroll 0 0 transparent;
e substitua por:
body {
background: #a0a7a8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr9IuF7UigFwhQPv3S74sCgL9EtvlADpLLMwFNjzNLGysyKTJsR8dumV4obf4UaUSkStZOL-RZyMFYO8N-Kz2m7MmTajlSzfQIhT66IA8hWuyr0kGum3xak5xOuCa6QUs4DVI1iU-tPyfu/s1600/imagem_cabeca.png
) no-repeat top center;
Onde o endereço da imagem já está inserida e inclui o comando Center na sintaxe de posição do HTML,
imagem: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr9IuF7UigFwhQPv3S74sCgL9EtvlADpLLMwFNjzNLGysyKTJsR8dumV4obf4UaUSkStZOL-RZyMFYO8N-Kz2m7MmTajlSzfQIhT66IA8hWuyr0kGum3xak5xOuCa6QUs4DVI1iU-tPyfu/s1600/imagem_cabeca.png
Não esqueçam de salvar o modelo, vá no blog, de F5 para ver o resultado.
Esse material tbém foi produzido com imagens e está disponível no Google Groups, Promover Cultura na Internet,
https://groups.google.com/group/promover-cultura-na-internet?hl=pt-BR
Ivan Meneses em 09/07/2011
wiki
