21/11/2014

Imagem no título do post com Hover

   E aí meus flocos de mel, como estão? Espero que bem. Estava pensando um pouco sobre o blog, e percebi que ele está querendo ir ao mundinho de muitos blogs, o chamado: "Blog sem criatividade, que pega posts de outros blogs mesmo dando os créditos". Aí me dei conta que eu não quero que esse blog seja mais um, e comecei a pensar em vários posts, que nenhum blog faz, como esse tutorial de como colocar uma imagem ao lado do título do post quando se passa o mouse, assim como no GNMH, mas vou mostrar um preview.

 Para aplicá-lo vá em Modelo >> Editar HTML e procure por <head>, achou? Agora abaixo dele cole o seguinte código:
<link href='URL DA SUA IMAGEM' rel='stylesheet' type='text/css'/>
  Onde está "URL DA SUA IMAGEM", você irá colocar o URL da imagem que vai aparecer ao lado do título do post ok?

  Vamos para a segunda parte:

 Agora procure pela tag h3.post-title a:hover {, abaixo da mesma cole este outro código:
background-repeat: no-repeat;
background-image: url(URL DA SUA IMAGEM);
background-position: right;
padding-right: 30px;
-webkit-transition-duration: .80s;
  De novo  em "URL DA SUA IMAGEM" você irá colocar o url da imagem que ficará ao lado do título do post. Já em "right"é a posição dela, no caso o direito, se quiser colocar no esquerdo, troque por "left" e depois salve.
  Eu recomendo imagens em tamanho de favicons, porque senão ela é cortada e se for gif, que seja do tamanho de um favicon. Vou disponibilizar algumas ok?

                                                      

  Tem mais imagens aqui nesse post >>&<<

Espero que tenham gostado ^.^

Kissus e bye.

14 comentários:

  1. Olá, eu estou bem >3<
    Gostei bastante da iniciativa, pois torna-se cansativo para os leitores relerem o mesmo tutorial em blogs diferentes. Assim você diferencia. Gostei bastante do tutorial, mas, infelizmente, não poderei aplicá-lo no meu layout pois é do modelo clássico. Mas tenho a certeza de que será útil para outras pessoas pois fica maravilhoso *^*

    fume,
    Sleepy Deer

    ResponderExcluir
    Respostas
    1. Oii ^.^
      Obrigada, pq até eu ñ gosto desse tipo de blog ><
      Ah q pena :/
      É msmo ^^

      Kissus

      Excluir
  2. Que efeito legal! Fica muito lindinho *u*
    Esse tutorial é bem útil, e eu nunca vi sendo postado em outro blog. É realmente bem chato quando as pessoas postam tutorias repetitivos. Enfim, adorei ♥

    Até mais! || ♡ miki candy。

    ResponderExcluir
  3. Oii Jamylle!!
    Peço perdão por ter ficado muito ausente aqui ;--;
    Eu adoro favicons. Sabe o que é ver um site próprio para favicons e você ficar eufórica? Não? Pois é... sou eu '-' Adorei a tuto. Lembro que para eu conseguir aplicar um quebrava a cabeça, mas com seu tuto está tudo muito simples e fácil! Parabéns! Adorei a tuto e os favicons, muito fofos *u*
    Kissus~

    ResponderExcluir
    Respostas
    1. Tá desculpada mocinha, mas q isso não volte a acontecer! Kkkkkkk
      Obrigada ^^
      Eu tbm amo favicons, por isso sempre arrumo um jeito de postar algo relacionado à eles ^^

      Kissus

      Excluir
  4. Olá! Leitora nova :D
    Realmente, já vi muitos tutoriais repetidos... É um pouco cansativo... Mas que bom que você não vai seguir por este caminho.
    Amei o tuto. Super fofo! Não sei se vou usar no meu porque não combina muito com o layout, mas, sem dúvida, é adorável e bem fácil de aplicar :D
    Abraços~

    ~ Nankin Dust

    ResponderExcluir
    Respostas
    1. Oii ^.^
      Psé, e tbm acho super acho comentar: "Já tinha visto, mas é sempre bom rever ^^" ¬¬

      Kissus

      Excluir
  5. Olá! Eu vou bem >3<
    Esse tutorial é muito fofo! Dá um efeito lindo!

    ~XoXo

    ResponderExcluir
  6. Ótimo tuto. Eu acho que você deixa tudo tão bem explicado. Adoro isso *o*

    sugar-purry.blogspot.com

    ResponderExcluir
  7. Estou bem, obrigada por perguntar amora ^^
    Ah, que fofa, assim mesmo que devemos pensar, blogs originais estão difíceis de se achar ultimamente. O seu é muito lindo e o layout não é como os outros que estão na 'atualidade', sabe, aqueles layouts todos clarinhos, pressionados e com duas colunas, são lindos, mas muito clichês vamos combinar ;) E o seu foge disso, ele é escuro, e bonito mesmo sem ser igual ao que estou acostumada a ver, ele é original e diferente ^--^ Amo conhecer blogs, assim, por isso acho aqui especial.

    Esse tutorial é um amor, e você soube explicar direitinho. Gostei, ainda não havia visto. A criatividade nos posts dos blogs é uma coisa que poucos reconhecem, admiro muito :3

    Amei os favicons, meu preferido foi o do coração preto, porque é mais discreto. UHAUAHUk'

    Adolescente Nerd // Oficial {}

    ResponderExcluir
    Respostas
    1. Oii ^.^ d nada
      Obrigada, vindo da vossa senhoria é uma honra ^3^
      Acho q amo preto, e em outras ocasiões nunca podia fazer um lay assim, pois o blog não era só meu ^^'
      Já aki faço de tudo q dá na cachola kkkkkk

      Kissus

      Excluir