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:

➔ (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

June Damasceno

Sou do RJ e estudante de Design Gráfico e Web. Amo plantas, arte, música e tudo que é fofo! Meu hobbie favorito é blogar e personalizar tudo que ver pela frente. ο(^_^)ο♡彡

23 comentários

Imprevistos Musicais20 de agosto de 2019 14:58
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
Isabella Marques20 de agosto de 2019 17:25
Eu tenho uma dificuldade imensa com html, obrigada pelo post!
ResponderExcluir
Respostas
Isabella Marques20 de agosto de 2019 17:25
Eu tenho uma dificuldade imensa com html, obrigada pelo post!
ResponderExcluir
Respostas
Rafaela Silva20 de agosto de 2019 23:09
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
Lunna Guedes20 de agosto de 2019 23:58
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
Anne Ferreira21 de agosto de 2019 05:51
Que maravilha de tutorial ! Eu estava louca para aprender sobre isso.
Muito obrigada!
Beijos
www.anneferreirablog.com
ResponderExcluir
Respostas
Joana D'arc21 de agosto de 2019 08:46
oi!
Eu adoro estes tutoriais :) eu não intendo muito disso e sempre ajudam muito, fica lindo
ResponderExcluir
Respostas
Carol K.21 de agosto de 2019 18:09
Achei muito lindinho! To querendo mudar o meu layout e acho que vou usar o código, obrigadinha por isso :)
ResponderExcluir
Respostas
Malu Silva22 de agosto de 2019 10:33
Adorei a dica! Fica muito legal visualmente. Vou salvar o post aqui pra utilizar o tutorial no futuro <3
ResponderExcluir
Respostas
Carol19 de setembro de 2019 09:54
Este comentário foi removido pelo autor.
ResponderExcluir
Respostas
Lim Mest3 de janeiro de 2020 19:48
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
Beatriz Corbal13 de junho de 2020 21:06
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