Miniaturas com Hover e Link: Blogroll ou Menu de Categorias!

agosto 19, 2019


[ #18 | B E D A ] Konnichiwaa fadinhas e elfos! Como estão? Eu fiz esse estilo de link com imagem e hover para adicionar no blog. Adaptei ele faz um tempo mas vou compartilhar agora o html e css com vocês! Ele é lindo e tem um efeito muito moderno e profissional! Então chega de colocar links aleatórios adicione esse modelo e deixe tudo mais agradável para os olhos! Let's go?


Esse é o efeito:
sample47
sample47

June

Visite



➔ (O H3 se adapta a própria configuração do seu blog, caso não goste mude no código na parte .snip1356 h3)
Caso não consiga ver nessa postagem, veja no [preview aqui].
O blog de preview também tem uma área de pedidos, pode ficar a vontade e pedir um tutorial também!

Agora vamos colocar no blog! Vá em Tema, Editar HTML, aperte Alt+F  e procure por </head> , ACIMA dele cole o seguinte código:

<style type='text/css'>
@import url(https://fonts.googleapis.com/css?family=Raleway:500,700);
.snip1356 {
  font-family: &#39;Raleway&#39;, Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 130px;
  max-width: 115px;
  width: 100%;
  background: #2980b9;
  text-align: left;
  color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  font-size: 16px;
}
.snip1356 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.snip1356 &gt; img,
.snip1356 .image img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  max-width: 100%;
}
.snip1356 &gt; img {
  vertical-align: top;
  position: relative;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  opacity: 0.7;
}
.snip1356 .image {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.snip1356 .image img {
  position: absolute;
  top: 0;
}
.snip1356 figcaption {
  opacity: 0;
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  border-bottom: 2px solid #ffffff;
  padding-bottom: 15px;
  z-index: 1;
}
.snip1356 h3,
.snip1356 p {
  margin: 0;
}
.snip1356 h3 {
  font-weight: 700;
  margin-bottom: 5px;
  color: white;
  text-transform: uppercase;
}
.snip1356 p {
  font-size: 0.9em;
  letter-spacing: 1px;
  font-weight: 400;
}
.snip1356 .read-more {
  display: block;
  opacity: 0;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  line-height: 48px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 20px;
  color: #ffffff;
  right: 0;
  bottom: 0;
  font-weight: 500;
  position: absolute;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.snip1356 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
.snip1356:hover .read-more,
.snip1356.hover .read-more,
.snip1356:hover figcaption,
.snip1356.hover figcaption {
  opacity: 1;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.snip1356:hover .image,
.snip1356.hover .image {
  bottom: 100%;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

</style>


Pode fazer suas alterações, como por exemplo a cor do hover, procure por #2980b9 e altere na cor que quiser. Salve e vá para Layout e Adicionar um Gadget de HTML/Javascript, cole o seguinte código:

<figure class="snip1356">
  <img alt="sample47" src="https://imgur.com/156wyhx.jpg" />
  <div class="image">
<img alt="sample47" src="https://imgur.com/156wyhx.jpg" /></div>
<figcaption>
    <h3>
Sweet Magic</h3>
</figcaption><span class="read-more">
    Visite <i class="ion-android-arrow-forward"></i></span>
  <a href="https://www.blogger.com/blogger.g?blogID=6638799300028000921#"></a>
</figure>

<figure class="snip1356">
  <img alt="sample47" src="https://imgur.com/156wyhx.jpg" />
  <div class="image">
<img alt="sample47" src="https://imgur.com/156wyhx.jpg" /></div>
<figcaption>
    <h3>
June </h3>
</figcaption><span class="read-more">
    Visite <i class="ion-android-arrow-forward"></i></span>
  <a href="https://www.blogger.com/blogger.g?blogID=6638799300028000921#"></a>
</figure>

<figure class="snip1356">
  <img alt="sample47" src="https://imgur.com/156wyhx.jpg" />
  <div class="image">
<img alt="sample47" src="https://imgur.com/156wyhx.jpg" /></div>
<figcaption>
    <h3>
Sweet Magic</h3>
</figcaption><span class="read-more">
    Visite <i class="ion-android-arrow-forward"></i></span>
  <a href="https://www.blogger.com/blogger.g?blogID=6638799300028000921#"></a>
</figure>

<figure class="snip1356">
  <img alt="sample47" src="https://imgur.com/156wyhx.jpg" />
  <div class="image">
<img alt="sample47" src="https://imgur.com/156wyhx.jpg" /></div>
<figcaption>
    <h3>
Sala de Star</h3>
</figcaption><span class="read-more">
    Visite <i class="ion-android-arrow-forward"></i></span>
  <a href="https://www.blogger.com/blogger.g?blogID=6638799300028000921#"></a>
</figure>

Você vai precisar utilizar imagens com o mesmo tamanho, e imagens no tamanho de 128 x 128 pixels, hospede as imagens e cole a url delas onde ficam os links em jpeg, substitua pelas suas imagens! 

Altere também os nomes e os links ''blogger''. Salve! Prontinho!

Qual quer dúvida é só perguntar nos comentários e caso queira uma atenção especial para o seu blog, mande um e-mail! Amanhã terá mais postagens, então fique atento! Até mais! Siga o bloguinho e visite sempre! Redes Sociais do Sweet Magic: Facebook | Twitter | We heart It | Bloglovin | Pinterest 

Leia também:

23 comentários

  1. Amei o tutorial!! Realmente, fica muito bonito visualmente. To pensando em colocar uma área de blogroll no meu blog, e já vou salvar seu post pra usar futuramente.

    ResponderExcluir
    Respostas
    1. Que bom que vai usar, obrigada mesmo <3
      Quando colocar me avise, vou adorar ver o seu blog ! Kissus

      Excluir
  2. Eu tenho uma dificuldade imensa com html, obrigada pelo post!

    ResponderExcluir
    Respostas
    1. Boa sorte! Tente sempre, uma hora você vai ver que não é tão difícil! Kissus

      Excluir
  3. Eu tenho uma dificuldade imensa com html, obrigada pelo post!

    ResponderExcluir
  4. Ah que post legal.. nunca achei um post que explicasse bem como fazer, e agora eu aprendi. Irei testar no meu site pra ver se fica legal.
    Adorei a dica.

    ResponderExcluir
    Respostas
    1. Obrigadaa, fico feliz em saber que conseguiu entender pela postagem e que vai utilizar, vou adorar visitar e ver no seu blog, kissus!

      Excluir
  5. Legal o seu post, mas o meu blogue é básico e até houve um tempo em que eu fazia mil coisas, mas isso foi lá no começo. Agora eu uso apenas o que o layout me fornece e nada de html.

    bacio

    ResponderExcluir
    Respostas
    1. Entendo, carregar o blog realmente não é bom, pois fica mais devagar. Mas super encorajo dar pelo menos alguns detalhes que mostre mais profissionalismo! Quando quiser é só passar aqui <3 Kissus!

      Excluir
  6. Que maravilha de tutorial ! Eu estava louca para aprender sobre isso.
    Muito obrigada!
    Beijos
    www.anneferreirablog.com

    ResponderExcluir
  7. oi!
    Eu adoro estes tutoriais :) eu não intendo muito disso e sempre ajudam muito, fica lindo

    ResponderExcluir
    Respostas
    1. Que bom que gosta, obrigada!
      Tente adicionar no seu blog, qualquer dúvida é só falar! Kissus

      Excluir
  8. Achei muito lindinho! To querendo mudar o meu layout e acho que vou usar o código, obrigadinha por isso :)

    ResponderExcluir
    Respostas
    1. Nada! Que bom que gostou! Vai ficar lindo no seu blog, mude para uma cor que combine e prontinho <3 Eu também faço layouts caso se interesse, me chame aqui: https://web.facebook.com/jucianeddesigner/

      Excluir
  9. Adorei a dica! Fica muito legal visualmente. Vou salvar o post aqui pra utilizar o tutorial no futuro <3

    ResponderExcluir
    Respostas
    1. Obrigada, vou adorar visitar o seu blog e ver lá
      Qualquer dúvida é só falar!

      Excluir
  10. Este comentário foi removido pelo autor.

    ResponderExcluir
  11. Fiquei muito feliz por ter encontrado esse tutorial, passei alguns dias atrás de algo assim e, até então, eu não havia encontrado o que estava procurando. Adaptei as miniaturas para o topo do template (abaixo do cabeçalho) e deu tudo certinho ❤ Obrigada por disponibilizar!

    ResponderExcluir
    Respostas
    1. Fico muito feliz em saber que conseguiu e ficou certinho no seu blog!
      As vezes realmente é difícil achar um tutorial com esses assuntos!
      Obrigada pela visita e por comentar!

      Excluir
  12. Eu queria saber como faz para hospedar imagens, não entendi como eu faço. Tenho as imagens editadas já no tamanho 128x128 como sugeriu mas no computador. Não na internet. Daí queria saber uma forma de pegar do próprio pc a imagem ou como faz mesmo o processo

    ResponderExcluir
    Respostas
    1. Oláa, eu hospedo as minhas imagens no site https://imgur.com/
      Ele é mais prático e confiável, ele dá um link da imagem e você consegue utilizar em qualquer código! As vezes precisa adicionar .jpeg ou .png no final do link

      Excluir