• Fotografia
    Como tirar fotos legais com o celular
    16 set 2015
  • Decoração
    Os 5 melhores diys de decoração (vídeos)
    24 fev 2015
  • Feminice
    Meus produtos favoritos da Dresslily
    28 jan 2016
  • 30 julho 2016

    Tutorial de fotos dos posts destaque com título para blogger ou wordpress


    Quanto tempo não faço um tutorial pra vocês, nossa mãe! Recebi alguns comentários em um post antigo sobre posts destaque pedindo um no estilo do meu. E cá estou eu pra fazer a vontade de vocês e compartilhar um código de posts destaque bem bonitão pro blog de vocês ficar ainda mais bonito e estiloso. 

    O código já está pronto, basta você colocar e alterar apenas o que eu disser (se você entende do assunto, pode alterar o que quiser, é claro). As imagens destaque ficarão assim:


    Coloque o código HTML abaixo onde deseja que apareça as fotos destaque (pode ser no seu código-fonte ou no gadget HTML/JavaScript):



    A tag a href é onde você vai colocar o link do seu post. A tag img src é onde fica o link da sua imagem. E, por fim, a tag span é onde você altera para o título do post. Não se esqueça que é para colocar os links SEMPRE dentro das aspas. 

    Você também vai ter que ajustar o tamanho da imagem. Width é largura e height é a altura. Sabendo disso, altere até achar um tamanho ideal que fica alinhado com os outros elementos da página.



    Essa parte requer atenção, ok? Não é difícil, só precisa que você tenha atenção para ajustar de acordo com a largura que você colocou na primeira parte.

    Você vai ter que mudar a largura do .destaque span para uma largura (width) um pouco menor que a largura que foi colocada na primeira etapa. Se quiser alterar o fundo do texto e a cor dele, altere em background (cor do fundo) e color (cor da fonte).

    Prontinho! Agora você vai poder mostrar aos seus leitores alguns posts que você mais gosta ou os que tem mais visitas; você quem sabe! Divirta-se com o html e css.

    Não sabe onde hospedar suas imagens? Opa, tenho a solução! Eu uso o site Imgur para hospedar algumas imagens. Ele é fácil de usar e tem várias ferramentas se você quiser editar as imagens por lá.

    É isso! Qualquer dúvida que vocês tenham, por favor, comente aqui embaixo para eu poder ajudar da forma que puder. Espero que eu tenha tão clara quanto eu acho que fui! hahaha

    Ah, e não retire os créditos e não venda este código ;)

    15 comentários:

    1. Eu queria agradecer pelo tutorial, e eu tenho uma dúvida, não estou conseguindo instalar no wordpress, você sabe em qual pasta coloco os dois códigos?


      Beijos!!

      ResponderExcluir
      Respostas
      1. Ei, Joyce! Coloque na pasta "header.php". Caso ainda não consiga, me envie um print do nome das suas pastas para a fanpage pra eu poder te ajudar melhor!

        Um beijo♥

        Excluir
      2. Oi Laíza consegui sim, obrigada pela ajuda!

        Ficou lindo!

        Beijos

        Excluir
      3. Oba, Joyce! Fico feliz. Não se esqueça de colocar o código CSS também pra estilizar o código!

        Abraços e bom domingo ♥

        Excluir
    2. Olá Laíza eu não consigo centralizar os Post destaque. Como faço para colocar 4 em vez de 3?

      ResponderExcluir
      Respostas
      1. Pra colocar 4 é só você copiar e colar aqueles trechos separados dentro da div.
        Pra centralizar tente colocar entre o código html (sem as aspas).

        Se ainda estiver com dúvidas, me chama na fanpage. Aqui não dá pra eu te enviar códigos e imagens.

        Abraços ♥

        Excluir
    3. Oi Laíza! Queria te dar um beijo por esse tutorial! Ameeei! Obrigada por disponibilizar pra gente, e que bom que voltou com tutoriais, você manda muito bem! Beijos.

      Blog Ei Carol!

      ResponderExcluir
    4. Um dia eu ainda vou entender um pouco mais sobre essas coisas, hahaha. Enquanto isso, vou fuçando seu blog. Essa sua caixa de destaques é linda! :)

      ResponderExcluir
    5. Tô amando meu blog demais com esse post destaque <3 ta com uma carinha mais profissional ♥♥♥♥♥♥♥

      ResponderExcluir
    6. Este comentário foi removido pelo autor.

      ResponderExcluir
    7. Olá, deu super certo, agora eu queria saber como faz pra colocar os marcadores em cima do nome das imagens???

      ResponderExcluir
      Respostas
      1. Olá Paola! Cria mais uma linha de código, tipo o e coloca sua categoria, depois personaliza.
        Deu pra entender mais ou menos? hahah
        Beijox ♥

        Excluir