25/06/2013

MDT #3: Efeito deslizante transparente (Data + Título dos Gadgets)

"Esqueça os que te odeiam porque alguém ama você!" - Miley Cyrus / We Can't Stop.
Boa noite pessoinhas, como vão? Dando continuidade a nossa Maratona, hoje vou atender a um pedido na Ask, feito pela Megan (WWW). Vamos aprender a aplicar esse efeito deslizante transparente que eu uso atualmente na Data das Postagens e no Título dos Gadgets (porém, podem usar a criatividade e aplicar em outras partes do Blog).
O tutorial é super fácil, vamos aprender primeiro a aplicá-lo nas Datas das Postagens, e em seguida no Título dos Gadgets. Vamos lá?

Data das Postagens



No Painel do Blogger, clique no nome do seu Blog - Modelo - Editar HTML e pesquise por: .main-inner h2.date-header {
Quando achar, troque todo o código que encontrar, pelo que segue:
.main-inner h2.date-header {
font-family: Arial; /* tipo de letra */
color:#fff;
margin-left: 0px; /* coloque uma margem que a deixe do lado do posicionamento */
margin-top: 0px; /* regule se precisar */
background: #COR; /* cor do fundo */
float: left; /* posicionamento /*
font-size: 10px; /* tamanho da fonte */
padding: 4px;
box-shadow: inset 0 0 3px #eeeeee; /*sombra, se não quiser retire essa parte do código */
-webkit-transition-duration: 1.00s;
border-radius: 10px 10px 0px 0px; /* bordas arredondadas, se não quiser retire */
}
.main-inner h2.date-header:hover {
margin-left: 0px; /* coloque o número que faça a data ir para o outro lado, o oposto do anterior */
color: transparent; /* não mexa */
background: transparent; /*não mexa */
box-shadow: inset 0 0 0px #1C1C1C; /* Se não usou sombra, retire essa parte, se usou não mexa */
}
OBS: Você deve regular todas as partes que se pede para que ele funcione, certo?

Título dos Gadgets



No Painel do Blogger, clique no nome do seu Blog - Modelo - Editar HTML e pesquise por: 
.sidebar .widget h2 {
Quando achar, troque todo o código pelo que segue:
.sidebar .widget h2 {
padding-bottom: .5em;
font-family: Arial; /* tipo de letra */
color:#fff;
margin-left: 0px; /* coloque uma margem que a deixe do lado do posicionamento */
margin-top: 0px; /* regule se precisar */
background: #COR; /* cor do fundo */
float: left; /* posicionamento /*
font-size: 10px; /* tamanho da fonte */
padding: 4px;
box-shadow: inset 0 0 3px #eeeeee; /*sombra, se não quiser retire essa parte do código */
-webkit-transition-duration: 1.00s;
border-radius: 10px 10px 0px 0px; /* bordas arredondadas, se não quiser retire */
width: 55px; /* tamanho da largura */
}
.sidebar .widget h2:hover {
margin-left: 0px; /* coloque o número que faça a data ir para o outro lado, o oposto do anterior */
color: transparent; /* não mexa */
background: transparent; /*não mexa */
box-shadow: inset 0 0 0px #1C1C1C; /* Se não usou sombra, retire essa parte, se usou não mexa */
}
OBS: Não esqueça de fazer todas as alterações no código para que ele funcione, certo?

E ai, gostaram do tutorial? Espero que sim! Infelizmente não pude postar mais cedo e também não tive tempo para responder os comentários, mão não se preocupem porque todos serão respondidos amanhã mesmo, certo? Bom, por hoje é isso ai! Até amanhã :)

21 comentários:

  1. Até que esse novo painel do blogger não é tão difícil de mexer, já até me acostumei! Adorei os tutoriais!

    PEQUENA JULIETA
    pequena-julieta.blogspot.com.br

    ResponderExcluir
  2. Amei o post! Muito bem explicadinho e o blog cada dia mais lindo!

    Pequena Oficial

    ResponderExcluir
  3. Muito bom o tutorial, só que eu não consigo fazer layouts com os gadgets tipo o seu, prefiro tudo coladinho u3u

    undercover-html.blogspot.com

    ResponderExcluir
  4. Adorei o tutorial *oo*
    Fica legal mesmo.
    pequeena-princesa.blogspot.com.br/

    ResponderExcluir
  5. Que lindo efeito ♥

    #Dark_Paradise.

    ResponderExcluir
  6. Nossa, que perfeito. Amei esse tutorial, eu via nos blogs mas nem fazia ideia do nome, rs. Tô encantada com o layout daqui, não da vontade de sair mais! e_e eheheh
    bjs
    http://ninexcebolitos.blogspot.com.br/ ♥

    ResponderExcluir
  7. Cara, que efeito perfeito. *ww*
    Sempre gosto de coisas que deslizam, menus, títulos, imagens... Enfim.
    Você é smiler? Acabei de ver a frase da "Miles" na ilustração. -q

    XOXO, Josh.
    darkflameoficial.blogspot.com (new url)

    ResponderExcluir
    Respostas
    1. HAHA, Sou Smiler sim, Smiler e Arianator <3 Obrigado Josh :)

      Excluir
  8. Eu xonei pelo tuto , vou usar no meu próximo design achei fofo Xoxo,

    Chero da uma passadinha lá ? pink-campbel.blogspot.com.br/

    ResponderExcluir
  9. Acho tão fofo!
    Sempre que venho aqui fico brincando com a data! *__*
    AHAUSHA'
    ótimo tutorial, quem sabe no próx. lay acho uma utilidade pra ele né??

    Kisses <3
    Meu jardim Secreto (ou clique no perfil)

    ResponderExcluir
  10. Adorei o tutorial, até favoritei aqui... É algo mais profissional, na minha opinião, além de ser empolgante, rs'
    Pequena Garota

    ResponderExcluir
    Respostas
    1. Que nada, é facinho, só requer um pouquinho mais de atenção :)

      Excluir
  11. Acho muito perfeito seus posts, mas morro de medo de mexer em html, já fiz cada coisa que você nem imagina... Beijos :*

    maniasdelicadas.blogspot.com

    ResponderExcluir
    Respostas
    1. Que medo que nada, cria um blog de testes e mete a cara mesmo Julia KKKK Beijo :*

      Excluir