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ã :)