MT: Colocar faixa na sidebar

Olá leitores! Finalmente, os meus testes e trabalhos acabaram! Mais uma semana de aulas e estou de férias :).  O tutorial de hoje é sobre como colocar uma faixa no título do gadget, espero que gostem...

1º- Para colocar, vai ao html e pesquisa por:

 .footer-inner .widget h2, 

2º- Abaixo, o código vai estar assim:

.sidebar .widget h2 {
padding-bottom: .5em;

} 

3º- Apaga esse código e cola este:

.footer-inner .widget h2,
.sidebar .widget h2 {
padding-bottom: 1.1em; 

background:url('URL DA IMAGEM')no-repeat; 

margin-left:-20px; 

text-align:center;

} 

4º- Escolhe uma das faixas abaixo, copia a url e cola onde diz "url da imagem". Edita onde diz "margin-left", para a imagem ficar boa.

Encontrei todas as ribbons no google.

Beijos :*

MT: Colocar gadget de posts relacionados personalizado

Olá! Fiquei quase uma semana sem postar, desculpem! Tive uma semana muito ocupada. Na próxima semana ainda devo de postar menos, porque vou ter testes todos os dias e muitos trabalhos.

O tutorial de hoje é sobre como colocar o gadget de postagens relacionadas e personalizá-lo. 

Normalmente aparece no fim do post, mas pode aparecer noutros sítios. 

1- Para colocares, basta ires a este site e preencheres a caixinha que está no lado direito. Depois clica em "Get Widget".

2- Irás ter a uma página onde explica como colocar o gadget. Clica em "Install Widget".

3- Depois é só arrastar o gadget para baixo das área de posts.

4- Voilá! Para personalizar basta ir ao html, procurar por ]]></b:skin> e colar acima este código.

.linkwithin_posts {width: 700px !important;}

.linkwithin_posts a {border: none !important;padding-right: 15px !important;background-color: #FF0;background-image: none;height: 200px;}

.linkwithin_posts a:hover{background-color: #FC3 !important;}

.linkwithin_title:hover {color: #F00 !important;text-decoration: none !important;}

A vermelho é a largura do gadget. A laranja é a cor do fundo do gadget sem ter o rato por cima, a amarelo é a cor do fundo gadget com o rato por cima. A verde é a cor das letras com o rato por cima.

Espero que tenham gostado, beijos!

Créditos ao Jackie Dream e Spazio DM.

MT: Imagem desfocada ao passar o mouse

Olá! Eu gostava de ter postado mais cedo, mas não consegui. Tenho muitos trabalhos para fazer, esta semana tenho 3 testes, e para a próxima 5 (ou seja, todos os dias). Se eu não postar com muita frequência, desculpem-me!

O tutorial de hoje é o efeito de imagem desfocada ao passar o mouse. Vamos aprender!

1- Para deixar a imagem normal e no hover ficar desfocada, é só colocares o código abaixo acima de ]]></b:skin>.

.desfoque {

-webkit-filter: blur(1px);

 -moz-filter: blur(1px);

filter: blur(1px);

 -webkit-transition-duration: .9s;

}

.desfoque:hover {

-webkit-filter: blur(0px);

 -moz-filter: blur(0px);

filter: blur(0px);

 -webkit-transition-duration: .9s;

}

Para a imagem ficar desfocada e no hover ficar normal, é só trocar os (1px) por (0px) e os (0px) por (1px).

2- Depois é só salvar e usar o código abaixo num gadget, post...

<img src="Url da Imagem" class="desfoque">

Também é possível usar este efeito em todas as imagens do blog, se quiserem saber como eu digo! 

Espero que tenham gostado.