Me ajudem + borda padding hover nas imagens

Oi gente :3
Eu estou feliz porque estou me saindo bem em português,  tirei 10 em quatro provas seguidas *u* só estou falando isso só porque não tenho o que falar, tenho apenas um pedido de ajuda q. Eu queria que vocês tirassem print do Blog pra eu ver como está o cabeçalho, porque estão falando que o Gadget do cabeçalho tá muito pra esquerda. Quem puder tirar, agradeço muito! Se quiser posso fazer algo em troca. o//

Hoje, como eu não via o que postar, fiz um tuto em 2 minutos ( sim, é muito fácil ) de como deixar as imagens em geral do Blog com borda Padding, e ao mesmo tempo hover. Preview aqui (rele na ilustração). Esse tutorial é muito simples e fácil, como eu já disse, mas só pra avisar, a bordinha ficará em todas as imagens do Blog. Vamos ver? ^_^

Vá em seu HTML, tecle Ctrl + F e procure por: ]]></b:skin>. Acima dessa tag, cole esse código:

/* TUTORIAL FEITO PELO BLOG RESOURCES 4YOU, SE FOR PASSAR PARA ALGUÉM CREDITE POR FAVOR */
.main img {
padding:2px;
border:1px solid #FFBABA;
box-shadow: 0 0 10px #EEE9E9;
-webkit-transition-duration: .80s;
}
.main img:hover {
padding:2px;
border:1px solid #BFEFFF;
-webkit-transition-duration: .80s;
}
Edite como quiser o que está em negrito.
Entendendo: 
................................................................................................................................................
border: 1px solid = Tamanho da borda colorida, solid é o tipo da borda, que seria a reta.
Tem vários tipos de borda, como dashed (traçadinha), dotted (pontilhada), etc.
................................................................................................................................................
Padding: Espaço dentro da borda/que fica 'dentro da bordinha colorida'.
Ele separa a borda solid da imagem.
................................................................................................................................................
box-shadow: 0 0 10px #EEE9E9; = Tamanho da sombra e cor.
10px = Tamanho. #EEE9E9 = Cor
................................................................................................................................................
Espero que tenham gostado :3

39 comentários:

  1. Amei a borda o tuto ;)
    Print (http://2.bp.blogspot.com/-Z1kGj6XniYM/UmrtVjq7-EI/AAAAAAAABcA/RysT4YYBY58/s1600/R4Y.jpg)
    Ficou um pouco escuro...
    Kisses
    lovely-monsters.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada *u*
      Nossa, aí tá estranho também :c muito obrigada pelo print!

      Excluir
  2. O print: http://i.imgur.com/zlqnEKZ.png aqui seu blog ta assim ^^

    (uma macete pra saber como é seu blog em outros tamanhos de monitores: diminua e aumente o zoom do navegador).

    Adorei o tuto da borda, simples e bonito ^^

    ResponderExcluir
    Respostas
    1. Ox :c Obrigada pelo print *uu*
      Verdade né ><

      Obrigada *uu*

      Excluir
  3. aki o gadget no cabeçalho esta tudo normal........: )....amei o tuto acho q vou usar no meu proximo lay........ate breve!!!boa noit....

    ResponderExcluir
    Respostas
    1. Ai que bom *u*. Que bom que gostou e obrigada s2

      Excluir
  4. Eu fiz o print, não cortei do lado esquerdo nem muito do direito.
    http://4.bp.blogspot.com/-kdpZQXdPZAk/UmsIslAAjsI/AAAAAAAAAZA/LsoUXNsLT0s/s1600/Printkf.png

    :)

    ResponderExcluir
    Respostas
    1. O de todo mundo está assim, então vou dar zoom no navegador e ajustar. Vai ficar estranho aqui mas vai ficar bom pra vocês *u*
      Obrigada pelo print !

      Excluir
  5. O cabeçalho ta normal, não tirei print porque muitos já tiraram então acho que seria desnecessário eu tirar, adorei o tutorial, kisses

    Collected flowers ♡

    ResponderExcluir
    Respostas
    1. Eu tive que tirar o gadget :/
      Hehe, obrigada *u*

      Excluir
  6. Amei o efeito, é muiito lindo. Esses dias eu estava querendo saber como é que deixava as imagens com esse efeito, agora já sei <3

    http://maiira-t.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada! Awn que bom que te ajudou, sério <3

      Excluir
  7. oiiiiii helo,,,q dia vc vai fazer o tuto q eu t pedi......estou aguardando anciosamente pois preciso muito dele para começar a fazer meu layout novo!!!!!!!

    ResponderExcluir
  8. Nuss qe lay hein, ta liindo.
    http://princesa-que-adora.blogspot.com.br/

    ResponderExcluir
  9. Aqui o gadget do cabeçalho ta normal .

    Adorei o tutorial , super cute *w*

    Kisses <3
    x Senhorita Liberdade

    ResponderExcluir
  10. Sobre o print, agora a imagem tá normal aqui, só que sem efeito, o3o Eu gosto deste tutorial, não precisa trabalhar tanto a imagem do post, já que a bordinha fica automaticamente, ^^

    ResponderExcluir
    Respostas
    1. Eu tive que tirar o gadget :/
      Asaush obrigada <3

      Excluir
  11. Gostei do tutorial, Hello o Empire Mochi mudou de nome agora é : http://caramel-wae.blogspot.com.br/

    Atualize sua elitee obrigado.

    ResponderExcluir
  12. Pra mim seu cab tá ótimo :3 Amei o tuto, suuper útil!

    Senhorita Frescurite ()

    ResponderExcluir
    Respostas
    1. Obrigada!! Eu tive que remover o cabeçalho. Obrigada flor *u*

      Excluir
  13. A imagem aqui está normal, depende do tamanho da tela do computador mesmo. Já conhecia essa borda, mais não gosto porque pena em todas as imagens do blog, inclusive nas paginações, beijocas.

    Eloísa do Having Cherry || Aguardo sua visita

    ResponderExcluir
  14. Já conhecia <33 acho super linda mas não uso kk'
    Eu não vou tirar o print pois não estou no pc' mas digo que o cabeçalho tá pela metade '-'

    World Of Thel ♥

    ResponderExcluir
    Respostas
    1. Ahsuashauh eu uso porém estou pensando em parar devido a paginação como a Eloísa disse. E outras coisas também.
      Diminuindo o zoom do navegador 2 vzs aqui fica também D: depende da tela. Obrigada pela informação!

      Excluir
  15. Adorei.. Não vou tirar print porque está normal aqui uhashsa
    rockncherry.blogspot.com

    ResponderExcluir
  16. Agora eu entendi o que é borda padding u-u eu não sabia o que era u-u -p
    amei o tutorial, novo aqui o//

    breaking-r.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Asaushaushaussah. Obrigada, e seja bem-vindo *u* kk

      Excluir
  17. Ameeeei o tuto, fica super lindo ! No proximo lay eu coloco !
    Já estou seguindo aqui, seu blog é muito divo e.e
    Kisses for you || TTH

    ResponderExcluir
  18. Aqui tá normal haushuahsua deve ser o seu navegador ç3ç experimentar diminuir e aumentar o zoom >3<
    Adorei a borda, uso muito e fica lindo <3
    Kiss
    With You

    ResponderExcluir
    Respostas
    1. Ahsuahs eu tive que excluir o gadget triste vida..
      Obrigada *u*

      Excluir
  19. Aqui tá tudo normal, -q
    Muito legal o tuto, Talvez eu use, -u-

    ResponderExcluir
    Respostas
    1. Eu tirei o gadget D: pelo menos o cabeçalho está normal.

      Obrigada! *uu*

      Excluir

Regras:
-Aceito críticas, porém, comentários ofensivos/maldosos serão apagados.
-Não aceito mais: Seguindo, segue de volta?
-Coloque o link de seu Blog no fim do comentário, é garantido que irei visita-lo e dependendo do conteúdo, até posso segui-lo :3
-Comente a vontade!