Postagens populares em caixas



3 de setembro de 2015



Hey pessoal! vocês estão bem? espero que sim! o post demorou um pouquinho porque estava com alguns problemas de conexão, felizmente já está tudo resolvido..Esse tutorial me pedem desde a pré- história exagero/hipérbole que é essas caixinhas com posts populares (uso nesse layout atual) que ficaram famosas depois de estarem no layout da Bru, do blog Depois do Quinze.





Pergunta respondida na minhas ask, porém não foi apenas uma pessoa que pediu esse tutorial, espero que ajudem a todos que pedirem!

É um tutorial fácil, rápido e vou explicar certinho, então vem conferir.





Veja as caixinhas funcionando aqui

Antes de começar o tutorial recomendo que você faça um backup do seu layout/template aprenda a fazer aqui


Primeiramente você deve saber, essas caixas não são automáticas, ou seja você tem que fazer a imagem no tamanho da sua caixa e linkar manualmente ok?


Vamos usar somente o CSS, então no HTML do seu blog (Modelo>>Editar HTML) tecle ctrl + F e na barra de pesquisa procure por <head> e ACIMA dessa linha cole o código abaixo


  <link href='http://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'/>

Salve. Usando o mesmo método procure na barra de pesquisa por }]]></b:skin> ou }]]> e ACIMA dessa linha cole o código alterando onde for necessário e se você quiser claro.


.populares a, .populares a img {display: inline-block;width: 100%;}.populares a {width: 368px; height: 248px; /**Largura e altura das caixas**/position: relative; padding:0px; background: #f6f6f6;margin-left:0px;margin-right:5px;margin-top:60px;   border-radius: 150px;}.populares a span {position: absolute; width: 368px; height: 248px; top: 0px; left: 0px; text-align: center; line-height: 220px; color: #833789; text-shadow: 0px 1px 1px rgba(255,255,255,0.6);  font-family: 'Grand Hotel', cursive; font-weight: bold; font-size:240%; color:#000;/**Fonte, tamanho da fonte e cor **/ opacity: 0; filter: alpha(opacity=0); background: rgba(255,255,255,0.8); transition-duration: 2s; -webkit-transition-duration: 2s; -moz-transition-duration: 2s;  border-radius: 0px;}.populares a:hover span{opacity: 1; filter: alpha(opacity=99);}}

Salve e estamos no final, agora vamos colocar as caixas no layout


Em layout acima da area das suas postagens adicione um gadget de HTML/Javascript como no print




E nele cole o código abaixo alterando onde é indicado

<center><div class="populares"><a href="LINK-DA-SUA-POSTAGEM"><img src="LINK-DA-SUA-IMAGEM" /><span>TÍTULO QUE FICARÁ QUANDO PASSAR O MOUSE NA XAIXA</span></a></div></center>

Repita o código quantas vezes achar necessário, no caso aqui do blog são três vezes ou seja três caixas e assim por diante.

Faça a miniatura com o tamanho exato da sua caixa, você pode usar qualquer programa de edição básico para isso, o famoso photoscape ou até mesmo o paint, também pode fazer isso em plataformas online. Faça o uploud da imagem aqui no proprio blogger ou no imgur


Mas Gleicy, minhas caixinhas não ficaram na posição que eu quero, por exemplo mais para esquerda,direita,para cima ou para baixo o que eu faço? 

Na verdade é bem simples resolver isso. Você vai precisar só de mais uma linha de código básico, serve para qualquer gadget de HTML que você queira "mover".


É só você fazer a alteração nesse código, alterando onde necessário, margin-top é número de pixels para subir o gadget pode ir alterando até ficar ao seu gosto. E left é o quanto o gadget é para o lado esquerdo, aumente e diminua o número conforme achar necessário. E onde onde diz "Código das caixinhas" Você cola o código que você acabou de alterar.

<div style="position: absolute; margin-top: -100px; left: -200px;">CÓDIGO DAS CAIXINHAS FICA AQUI</div>

Uma dica, altere e vá visualizando até ficar como você quer.  Salve e está feito.


Espero que tenha gostado do tutorial, qualquer dúvida podem deixar nos comentários ou na ask . E lembrem-se se usar esse tutorial de dar os créditos ao blog.



55 comentários:

  1. Muito legal esse tutorial! Pena que meu blog não é no blogger!

    Beijinhos :)
    Bru Santos ♥
    www.queseame.com

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado do tutorial! Uma pena usar outra plataforma!

      Excluir
  2. Amei o tutorial. Era um igual que eu estava precisando. Obrigada. Bjs

    mythings2.blogspot.com

    ResponderExcluir
    Respostas
    1. Fico feliz por ter ajudado! Obrigada pela visita!

      Excluir
  3. seeeempre procurei esse tuto, mas nunca tinha achado de um jeito bom que explicasse direitinho, tanto que até desisti sahushuahuh e logo depois que desisto me vem você <3 sério, você tipo, é mt foda <3
    obrigaaaada amor <3

    amei

    ResponderExcluir
    Respostas
    1. Eu antes procurava também, mas nunca tinha achado, então testei um monte vezes códigos até dar certo, fico super feliz em saber que ajudei <3 Obrigada pela visita!

      Excluir
  4. Anônimo20:43

    hipérbole***

    ResponderExcluir
    Respostas
    1. Eu apenas esqueci de colocar o acento agudo anônimo :D Obrigada pela correção.

      Excluir
  5. Bem legal o tutorial e super fácil de fazer, adorei!

    Beijos,
    www.quemvepensa.com

    ResponderExcluir
    Respostas
    1. É bem simples e eu acho que fica legal no blog! Obrigada pela visita!

      Excluir
  6. Adorei o tutorial <3
    Vou usar no meu próximo design *-*
    http://mahkemmely.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado. Obrigada pela visita!

      Excluir
  7. Ótimo tutorial, ajudou bastante.

    Beijos
    http://pimentasdeacucar.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado. Obrigada pela visita!

      Excluir
  8. Eu confesso que entendo pouquíssimo de CSS e Html, mas do jeito que vc explicou, pareceu muito facinho!! *_*
    Parabéns pelo post!! Adoro post no estilo tutorial!! <3
    http://deepluv.com

    ResponderExcluir
    Respostas
    1. HTML e CSS não são difíceis, só exigem atenção e paciência. É super fácil, Obrigada pela visita!

      Excluir
  9. Gostei do tutorial! Com certeza vou fazer, no meu próximo layout . (:
    BEIJOS.
    http://gleycikellyfranco.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado. Obrigada pela visita!

      Excluir
  10. Amei flor..sou louca para fazer isso, mas morro de medo de mexer no HTML ahahaha
    vou fazer um blog teste pra tentar :)
    obrigada pelas dicas!
    beijos

    Blog: www.tatycamposblog.com

    ResponderExcluir
    Respostas
    1. Não tenha medo, é só fazer um backup do sue layout antes! Boa sorte com tutorial haha e Obrigada pela visita!

      Excluir
  11. Amei o tutorial, amore ♥
    Já salvei aqui pra colocar no meu próximo lay haha
    Obrigada pela dica, mesmo *-*
    Beijos
    http://cinderelaporacaso.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado. Obrigada pela visita!

      Excluir
  12. Nossa muito legal o tutorial, bem fácil e simples. Com certeza vai ajudar muitas outras blogueiras :D Amei o post parabéns pelo trabalho :*

    www.lacinhorosa.com

    ResponderExcluir
    Respostas
    1. É super simples, fico muito feliz que tenha gostado! Obrigada pela visita.

      Excluir
  13. Respostas
    1. Fico feliz que tenha gostado. Obrigada pela visita!

      Excluir
  14. Ótimo esse tutorial! Eu não mexo mais com layout há muito tempo porque acabei ficando sem tempo e paciência pra isso, mas esse parece ser bem simples.
    Beijos
    Bluebell Bee

    ResponderExcluir
    Respostas
    1. Obrigada! Eu adoro mexer com HTML admito que ás vezes falta paciência, mas depois da certo rs Obrigada pela visita!

      Excluir
  15. Amei o tutorial, sempre quis aprender como fazer isso. Assim que tiver um tempo eu vou tentar fazer no meu blog. Beijão flor :*
    http://wave-over-wave.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado. Obrigada pela visita!

      Excluir
  16. Oh minha querida!!! Muito obrigado <3 Que feliz eu fico por teres gostado :D

    Cada vez que venho aqui ao teu blog fico mais fascinado. As tuas dicas são sempre fabulosas! Juro.

    NEW REVIEW POST | Parfois Online Shopping: My Opinion
    InstagramFacebook Oficial PageMiguel Gouveia / Blog Pieces Of Me :D

    ResponderExcluir
    Respostas
    1. Obrigada querido! Fico muito feliz que goste das minhas dicas! Obrigada pela visita.

      Excluir
  17. Ola , eu preciso muito da sua ajuda. Você pode colocar esse layout aqui:http://layoutfree-cuteheart.blogspot.com.br/?m=0
    No meu blog? Eu te coloco como adm e você instala por que eu não to conseguindo! Por favorrrrrr!!!!!!!!!

    ResponderExcluir
  18. Anônimo21:39

    Muito util! Talvez eu use para fazer meu proximo layout, quem sabe :)

    http://geekcoolture.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado. Obrigada pela visita!

      Excluir
  19. Oi Gleicy!
    Adorei o tutorial, acho esse estilo de gadget muito fofinho. >33<
    beijos ♥
    nuclear--story.blogspot.com

    ResponderExcluir
    Respostas
    1. Oi Dani! Eu também adoro esse estilo de gadget <3 Acho uma fofura. Obrigada pela visita

      Excluir
  20. amei o tutorial, e parabéns pela sua atitude assim você esta ajudando quem não sabe muito e precisa beijos <3 http://www.blogdaxavier.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada querida, é um prazer para mim poder ajudar alguém que precise de ajuda!

      Excluir
  21. Otima dica, amei o tutoria. Gosto de posts como esse sempre aprendemos algo novo!
    Beijos

    http://heeysah.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado. Obrigada pela visita!

      Excluir
  22. Gostei do tutorial, bem util


    Beeijos, te espero lá no meu blog ♥

    http://www.paaradateen.com
    http://www.facebook.com/PAARADATEEN

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado. Obrigada pela visita!

      Excluir
  23. Adorei o tutorial! Planejando em colocar no meu hihihi
    http://1001rolesemsp.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado. Obrigada pela visita!

      Excluir
  24. Gostei desse tuto. queria colocar no meu mas to em dúvida haushushs

    bjs
    http://colecionandoimperfeicoes.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado. Obrigada pela visita!

      Excluir
  25. Amei o tutorial *--*

    Beijos ♥
    http://intoxicadosporlivros.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado. Obrigada pela visita!

      Excluir
  26. Oiie, eu to bem e vc?
    Adorei o tutorial , a verdade adoro todos os seus tutoriais, usei um deles no meu blog e já creditei ehehehe, eu ja vi essas postagens assim em varios blogs, fica super bonito dependendo do blog.
    Beijos Isa // Uma Madrugada <3

    ResponderExcluir
    Respostas
    1. Obrigada querida! Fico feliz em que você do goste de verdade.Obrigada pela visita.

      Excluir
  27. Anônimo19:30

    Ótima dica!
    Irá nos ajudar muito!

    http://palomamirandav.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado. Obrigada pela visita!

      Excluir
  28. Eu acho que mesmo em adultos iremos sonhar com isso :P

    Mais uma dica fabulosa! Obrigado <3

    NEW PERSONAL POST | Hair Care Routine | What’s yours?
    InstagramFacebook Oficial PageMiguel Gouveia / Blog Pieces Of Me :D

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado. Obrigada pela visita!

      Excluir

Fã page | Twitter | Instagram

Críticas construtivas são sempre bem vindas.
Deixe o link do seu blog no final do comentário e retribuiremos a visita
Aceitamos TAG's, se não a respondermos, provavelmente nós já devemos ter respondido anteriormente por outra indicação.
Lembre-se, tudo aqui é feito para você, então fique a vontade para pesquisar,ler,comentar e pedir postagens.

© BELEZA NERD 2013 - 2018. Todos os direitos reservados.
Layout e codificação: GLEICY HANER - DESIGNS E FOTOGRAFIA .
Tecnologia do Blogger.
imagem-logo