16 de abr. de 2013

Tutorial - Borda Hover na Área da postagem e Sidebar

Konnichiwa Minna \(-. -)/
Como vão?Espero que bem. Bom, quero muito fazer um novo lay pro blog, mas ta dificil, a ultima vez que coloquei altas paradas no cabeçalho ficava diferente a resolução para várias pessoas ¬¬' triste.
Mas vou ver no que vai dar, então hoje eu decidi postar um tuto que ensina colocar bordas hover na area de posts e na sidebar.

Na área de posts faça o seguinte :
no seu html clique dentro da caixa do código e tecle Ctrl+F e procure por .main-inner .column-center-outer {
você ira encontrar o seguinte
.main-inner .column-center-outer {

  background: $(post.background.color) $(post.background.url) repeat scroll top left;
  _background-image: none;
}
Você irá substituir este código por?

.post-outer {

background: #fff;
font-family: calibri; /*FONTE*/
color: #fff;
padding: 10px; /*Não modifique aqui*/
border-top: 5px solid #SUACOR;
border-bottom: 5px solid #SUACOR;
box-shadow: inset 0 0 15px #E3E3E6, 0 0 3px #ccc;
-webkit-transition-duration:  1.50s;
}
.post-outer:hover {
background:#fff;
border-top: 5px solid #SUACOR;
border-bottom: 5px solid #SUACOR;
box-shadow: inset 0 0 15px #D2D2D2, 0 0 3px #ccc;
}

 Agora na sidebar:
Procure por /* Widgets 
abaixo desta tag você irá encontrar .sidebar .widget { apague esta primeira tag até a chave e cole:
.sidebar .widget {

background: #fff;
font-family: calibri; /*FONTE*/
color: #fff;
padding: 10px; /*Não modifique aqui*/
border-top: 5px solid #Cor da borda de cima normal;
border-bottom: 5px solid #Cor da borda debaixo normal;
box-shadow: inset 0 0 15px #E3E3E6, 0 0 3px #ccc;
-webkit-transition-duration: 1.50s; /*duração da transição*/ 
}
.sidebar .widget:hover {
background:#fff;
border-top: 5px solid #Cor da borda de cima hover;
border-bottom: 5px solid #Cor da borda debaixo hover;
box-shadow: inset 0 0 15px #D2D2D2, 0 0 3px #ccc;
}


Este tuto eu encontrei no Bunny Crazy, então os devidos creditos ^.^
Chu♥~

33 comentários:

  1. quer postadora? se a resposta for não eu te pergunto 'quer postar na minha? se não, pode achar 2 postadora pra mim? pf/

    ResponderExcluir
    Respostas
    1. Sim, era o que eu estava procurando....
      Sory, mas por enquanto vou ficar só aqui no PE

      Excluir
  2. Uh~ Amo bordas, amo coisas em hover rsrs'
    Gostei do tutorial. Vou usar no próximos layout. Favoritei.
    - Liga não, sou estranha.
    Thing HTML

    ResponderExcluir
  3. Legal o Tutorial,eu vou usar quando fizer meu próximo layout ^^

    ResponderExcluir
  4. Eu gosto muito destas bordas em hover, deixa tão fofo >.<

    Nyah Kawaii

    ResponderExcluir
  5. Já conhecia o tuto, é muito fofo o efeito que dá *--*

    ResponderExcluir
  6. Hooy ~
    Ameii o tutu .. resultado e lindo e super facil .

    E me add no meu perfil fake ... isso e uma forma de
    eu fica mais perto das blogueiras ... e meus leitores
    Sorry !! ◕‿◕

    http://blog-meninasmalucas.blogspot.com.br/

    Espero sua 1º Visita okky "

    ResponderExcluir
  7. Amo esse tuto, deixa o lay bem mais personalizado, mais tem que ter várias cores pra isso. ><'

    http://catch-html.blogspot.com.br/

    ResponderExcluir
  8. Fica bem kawaii, lindo!
    Beijo, Lili
    Princesa Teen / O blog.
    Eu no youtube / Maquiagem, dicas, DIY... Se inscreva e ganha um post exlusivo (informações no blog).

    ResponderExcluir
  9. Já sabia mais fica bem bonito!Acho que fica perfeito na areá das postagens quanto na das sidebar!Gosto de usar isso!E bem maneiro,seria melhor lê a postagem se minha net não estaria travando!Eu escrevo e depois aparece!Aff que bosta de internet!
    Aqui minha amiga quer saber se você quer se afiliada blog irmão!Se não quiser irmão normal,responde lá no blog!
    http://lovee-k-pop.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Manda o link do Blog dela pra mim...eu seria sim afiliada ^^,É realmente fica melhor na area de postagens, deixa mais cute

      Excluir
  10. Gente *---------* Fazia um tempo que eu precisava desse tuto
    É bem fácil ele, sem contar que fica um efeito lindo...

    Lost November

    ResponderExcluir
  11. Muito boom , já conhecia 0-0
    Mais tenho certeza que vai ajudar muita gente
    http://srta-kawaii.blogspot.com.br/

    ResponderExcluir
  12. ótimo tuto >.<
    estou seguindo seu blog, segue de volta ? Beijos
    novajuventudexxi.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Arigato... 。◕‿◕。
      Sigo sim se eu gostar do Blog ^^

      Excluir
  13. Eu tava procurando esse tuto
    você leu minha mente ><

    Time HTML

    ResponderExcluir
    Respostas
    1. *O* Sério? hihih erá que li mesmo? espero que sja muito util :3

      Excluir
  14. Adorei! Era tudo o que eu queria!
    Você sabe como eu faço para por essa borda hover no último gadget? Nunca consigo...

    ResponderExcluir
  15. Eu nunca consigo achar... o que acha que está acontecendo? Não tem nenhum outro código?

    ResponderExcluir
  16. boa noite
    mto bom o seu blog.
    Eu estou aoenas comecando o meu qdo possivel de uma olhada la.
    rm2comunicacao.blogspot.com.br

    ResponderExcluir
  17. boa noite
    mto bom o seu blog.
    Eu estou aoenas comecando o meu qdo possivel de uma olhada la.
    rm2comunicacao.blogspot.com.br

    ResponderExcluir
  18. boa noite
    mto bom o seu blog.
    Eu estou aoenas comecando o meu qdo possivel de uma olhada la.
    rm2comunicacao.blogspot.com.br

    ResponderExcluir

-Yoo!!

Sem comentários Ofensivos.
Pedidos na ask
Elogios são sempre bem vindos
-Responderei a todo mundo...

(◕‿◕✿)  。◕‿◕。 ⊱✿◕‿◕✿⊰ (◡‿◡✿) (◕〝◕)


◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐