Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

14/02/2012

NOVO: Imagens diferentes no título de cada Gadget/Widget

Antes de começar o post de hoje, lá vou eu (como sempre) começar com um assunto nada a ver no blog.
Primeiro peço desculpas pois as enquetes que eu coloquei no blog não funcionavam (pelo menos comigo deu erro), troquei a de ontem e deixei a votação das "Músicas para o Sábado" em comentários mesmo. Peço desculpas por não ter percebido antes, fiquei off no FDS, pois no Sábado tive encontrão da Catequese (aquelas crianças me deixaram mortinha, aff!!!) e Domingo estava meio sem ânimo de entrar na net.
Ah, quero avisar que estou preparando já uma Homenagem de "Quinta" imperdível!!! Tô doida para mostrar pra vocês, pois sei que muita gente vai gostar!!!
Depois queria saber o que está acontecendo com vocês, minhas "manteigas voadoras"? Os comentários estão tão fraquinhos... Será que o problema é que eu tenho feito postagens com qualidade inferior???

Bom, mas vamos deixar de papo furado e começar o tuto de hoje. Eu ia fazer uma postagem falando sobre o que não se deve colocar num blog, mas recebi na página do Face uma solicitação de tutorial. Eu gosto quando vocês solicitam uma postagem, gosto de ajudar vocês!!!
Essa vai a pedido da Alynne do "Buteco para Garotas", ela gostaria de saber como colocar uma imagem diferente em cada gadget, assim como eu coloquei aqui no DSM, nesse template mais recente. É um código simples, mas exige bastante paciência... Lembrando que é importante que você salve antes uma cópia do seu template, faça um backup ou treine antes num blog de testes.

1. Fazendo e hospedando as imagens:

Você terá que fazer uma imagem diferente para cada título, do jeito que você quiser que cada uma seja. Não se esqueça de colocar o título de cada gadget já na imagem, pois nesse código só a imagem ficará no título, sem texto algum por cima.
Não se esqueça de que a imagem do título não pode ser maior que a coluna. Eu fiz minhas imagens no Photoscape da seguinte forma: tirei um PrintScreen da minha coluna, cortei o tamanho do título no próprio Print, apaguei tudo o que ficou escrito e fui montando a imagem. Se o seu blog for de fundo colorido, faça a imagem com fundo transparente ou na cor do seu blog.
Lembrando que pelo menos elas devem ter o mesmo tamanho. Depois você deve hospedar a sua imagem em qualquer lugar na net, para que você tenha o endereço dela. Nesse post, você irá encontrar algumas dicas de hospedagem de imagens. A minha eu hospedei no próprio Facebook, mas se a sua imagem for em transparência, terá que hospedar no Google Sites ou em qualquer outro site que suporte transparência. Cuidado ao hospedar a imagem no próprio Blogger, para não ultrapassar o limite de fotos do Picasa.

2. Apague a imagem do "h2" (se tiver):

É muito importante antes de colocar as imagens que você tire o código de imagem que você já tenha colocado no "h2", como vimos nessa postagem. Também retire os códigos de margin ou padding, pois eles poderão interferir na posição de seu novo título. Para quem não se lembra, o código do h2 com imagem é mais ou menos assim:

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;
}

Retire os códigos de imagem e de margem. Ele vai ficar mais ou menos assim:

 h2 {
width: 230px;
height:85px;

text-align: left;
line-height: 1.4em;
color: #000000;
}

Os códigos em vermelho serão alterados de acordo com o tamanho das novas imagens. Width é a largura da imagem e height é a altura. Depois de mudar as imagens, se ficarem muito grudadas no gadget, coloque um número maior em height.
Se você não colocou nenhuma imagem no h2, ignore esse passo.

3. Colocando o novo código:

O código das imagens nos títulos dos gadgets será feito em duas partes, uma mais fácil e outra mais trabalhosa. Siga os passos com bastante atenção, lembrando que é sempre bom se prevenir com uma cópia de seu template atual.

1. Entre no Blogger e vá em Modelo > HTML (caixinha branca abaixo da miniatura do seu template);

2. Copie o seguinte código: ]]></b:skin>
3. Clique em qualquer parte do HTML e aperte Ctrl+F no seu teclado;
4. Na caixinha que abriu (Search), cole o código que você acabou de copiar e aperte a tecla "Enter";
5. Copie e cole o código a seguir antes do ]]></b:skin> (que ficou em destaque): 

.widget .title img{
padding-bottom: 5px;
display: block;
text-align: center;
}

6. Clique em " Salvar modelo ". Não precisa visualizar, pois não terá nenhuma diferença visível no seu template.
7. Ainda no HTML, procure pelo nome do primeiro título que você irá mudar. Por exemplo, eu tenho um widget chamado "Blogs do Ano", então digitei Blogs do Ano na caixinha "Search". No seu caso, você irá digitar o título do seu gadget, seja lá qual for ele.
8. Vai aparecer um trecho parecido com esse:

<b:widget id='HTML3' locked='false' title='Blogs do Ano' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2><data:title/></h2>
  </b:if>

9. No lugar do código em vermelho (<data:title/>), cole o seguinte código: <img src='URL_DA_IMAGEM'/> e substitua URL_DA_IMAGEM pelo endereço da imagem correspondente ao gadget que você acabou de procurar (no meu caso, o do Blogs do Ano). Seu código vai ficar mais ou menos assim (só que com sua imagem):

<b:widget id='HTML3' locked='false' title='Blogs do Ano' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><img src='http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc7/420927_302118459841024_280570778662459_868189_58502546_n.jpg'/></h2>
  </b:if>


10. Visualize o template e veja se o título do gadget que você escolheu está com a nova imagem de título;
11. Se tudo estiver OK, repita os passos de 7 a 9 com todos os outros títulos que você deseja modificar, depois visualize para ver se está tudo OK;
12. Quando tudo estiver pronto, Clique em " Salvar modelo ".

Se as imagens dos títulos dos Gadgets ficarem muito próximas às suas postagens, cole esse código antes de ]]></b:skin>

#Blog1 {margin-left: 15px;}

E altere o número de acordo com a distância que você deseja. Se a nova imagem ficar muito grudada no Gadget, altere para mais o valor de height no código do h2 (como vimos lá em cima no item 2 (apague a imagem do h2).
Qualquer dúvida, deixe um comentário!!!

Título do Gadget Seguidores:

O gadget seguidores é o único que não vai por esse método. Para mudar o título, você terá que colocar o código a seguir acima de ]]></b:skin>

#Followers1 h2 { 
background: url(URL_DA_IMAGEM) no-repeat top center; 
text-indent: -570000px !important;
height: 50px !important;
margin: 0px auto;
display: block; 
overflow: hidden;
}

Em URL_DA_IMAGEM, coloque a imagem correspondente ao título dos seguidores. Onde eu coloquei em negrito 50px, coloque a altura exata da sua imagem. É importante que não apague nenhum dos códigos!!!

Mil Sweetkisses,
26 Comentários
Comentários

26 comentários:

  1. eeu ameei esse tutorial, acho isso demaais :)
    bjaao
    http://sooulteen.blogspot.com/

    ResponderExcluir
  2. Ahhhhhhhhhhh... não entendi!! ¬.¬... será que é por que estou tão exausta que meu cerebro anda lento? PUTZ!! Eu ia de perguntar isso mais fiquei com vergonha. ¨.¨... rsrsrsrs... eu parendi de outro jeito, mas a pagina fica pesada demais, vou deixar passar e depois volto aqui pra ler com cuidado!! Bjs amiga!! *-* ♥

    ResponderExcluir
  3. Realmente eu sempre tentei vota e não conseguia! o tutu é muito bom deixa mais bonito e organizado!♥
    http://kelly-club.blogspot.com/

    ResponderExcluir
  4. Muito obrigada lindona pelo carinho.
    http://Raymiga.blogspot.com

    ResponderExcluir
  5. Hahahahahaha... puxa orelha não, dóiiii...rsrsrsrs.
    Menina eu fiz o desenho e escaniei, corrigi alguns erros e pintei e faltou um lacinho que eu ia colocar em sua blusa e mais contorno e tal, mais eu como já tava meio estranha nem precebi e esqueci o lacinho, vc sabe por que fiquei molenga daquele jeito, menina eu levei um choque um dia antes que quase morri, fiquei agarrada na maquina de lavar roupa que foi DEUS que me salvou, meu marido disse que talvez eu tenha ficado mal por conta do choque eletrico, já eue estava com taquicardia e noleza no corpo, sei lá viu!!
    Mas OH!! O da Sammy ficou mai bonito sim, e sim sou eu e vc, andei olhando as poucas fotos que colocou por aqui e no face e tentei colocar algumas caracteristicas sua no desenho, mais prometo fazer um bonus e lhe enviar de presente!! Rsrsrsrs e vou ficar vigiando o face, quero ver o desenho *-*...ver...*-* já achei até lindu antes de ver!! Exageradaaa eu!!

    ResponderExcluir
  6. Ahhh e eu tbm quase não entro no msn, então somos duas, quando a gente quiser TC a gente combina antes, tá bom?
    E eu tbm não sou boa em inventar piadas e tal, por isso te convidei nessa onda de tirinha, acho que duas cabeças pensam melhor que uma, então eu posso te ajudar e vc pode me ajudar... ahhhh e os desenhos a gente combina, uma tirinha vc faz e outra eu faço e se tiver dificuldade de alguma coisa eu te ajudo, adoraria te passar o que eu sei!*-* então é isso, vou dar uma arrumada aqui em casa!! =P beijooooooooooooooos ♥

    ResponderExcluir
  7. Oi vim te incomodar rsrs vete em mim:http://perfeitinha-blog.blogspot.com/ Blog Raymiga, desde já obrigada
    http://Raymiga.blogspot.com

    ResponderExcluir
  8. Amo seus tutoriais, são tão completos!

    Tem post novo no meu blog! Confere lá?

    Bjonas e fique com Deus <3

    Camilla Martins - http://sugar-dance.org

    ResponderExcluir
  9. É sempre um prazer passear por aqui!

    Um beijo da Nita.
    De boa noite…:)

    ResponderExcluir
  10. Selinho para você:
    http://sooulteen.blogspot.com/2012/02/chuva-de-selinhos.html (éo terceiro)
    bjaao

    ResponderExcluir
  11. AAh eu não consegui fazer, fala que não deu certo.. Como faz??

    www.sweetdreamsforeverdreams.blogspot.com

    ResponderExcluir
  12. Até quem em fim achei um blog com os códigos que funcionam. Parabéns pelo seu trabalho. Estou recomendando o seu site no meu Twitter. Beijinhos.

    ResponderExcluir
  13. Simplesmente perfeito!!!
    Passei por 6 blogs, um deles me fez estragar meu layout (e não tem como voltar em nenhumas das postagens), mas o seu, de 1ª, consegui configurar tudo. Tudo bem explicado, meigo e muito amável!!!
    Parabéns de coração.
    Já salvei o seu blog, pois você muito merece!!!

    ResponderExcluir
  14. Pois é menina tirei o dia pra fazer os tutoriasi do DSM... nossa esse aqui é o que esta dando mais trabalho por causa dos tamanhos... mais acho q estou conseguindo... e nega adoro suas dicas fica a vontade pra olhar alguma coisa lá no meu blog e achar que devo mudar...kkkkk

    ResponderExcluir
  15. Ai amiga me ajuda... não consigo fazer com o gadget dos seguidores e agora????

    ResponderExcluir
  16. Ah não amiga o que será??? para seguidores é diferente essa configuração??? já estou quase doida e não consigooo fazer... em ajudaaaaaaaaa

    ResponderExcluir
  17. Meninaaa vou ficar esperando ANSIOSAMENTEEEEEEE

    ResponderExcluir
  18. aH SIM OLHA SE ESTA FICANDO LEGAL LA O MEU BLOG...KKKKK

    ResponderExcluir
  19. Pronto amiga terminei tudo agora só falta o dos seguidores... snif...
    Olha só depois de tanto te copiar e com certeza vou ter que comentar que colei de vc...kkk e como já é minha parceira mesmo coloquei vc como afiliada também tah???

    ResponderExcluir
  20. amigaaa quase deu certo... esta aparecendo só a metade da imagem....kkkkkkk

    ResponderExcluir
  21. Amiga realmente não deu certo, mais eu arrumei um jeitinho brasileiro depois confere como ficou... já que o codigo que vc mandou fez sumir o titulo do gadget eu peguei e coloquei um gadget com a imagem em cima....kkkkkkkkk
    Até descobrirmos o que fazer....

    ResponderExcluir
  22. Guriaaaaa eu te amooooooo só precisei alterar o valor que você tinha colocado 50 para 59 e deu certo.......

    ResponderExcluir
  23. agora quero aprender a mexer nos marcadores..kkkkkk estou realmente inspirada hoje....

    ResponderExcluir
  24. Deu certinho. Valeu pela dica.
    http://futureofgame.blogspot.com.br/

    ResponderExcluir
  25. adorei o tutorial...me ajudou de mais *_*

    ResponderExcluir
  26. Cara, estava apanhando pra tentar mudar a imagem do gadget dos Seguidores.
    Seu tutorial me salvou.
    Brigadão!

    http://ritelle.blogspot.com.br/

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...
Posts relacionados