Mostrando postagens com marcador tutorial. Mostrar todas as postagens
Mostrando postagens com marcador tutorial. Mostrar todas as postagens

3 de ago. de 2012

Tutorial: Como colocar efeito hover nas imagens do blog

Oi oi gatos e gatas ~
Bom, primeiro me desculpem pela falta de post aqui, é porque eu estou sem tempo e a Renata foi viajar. Mas enfim ... hoje trouxe um tutorial que achei legal e estamos usando aqui no blog. É o efeito hover nas imagens do blog =)
Vamos conferir ?
 Vá em design ~> Editar html ~> Aperte CTRL + F e procure por :
]]></b:skin>
 Quando achar, cole acima dele o código :
.post img{ filter:alpha(opacity=60); -moz-opacity:0.60; opacity:0.60;- border-radius: 40px 40px 40px 40px;-moz-border-radius: 40px 40px 40px 40px;-webkit-border-radius: 40px 40px 40px 40px;-transition-duration: 1.90s;-webkit-transition-duration: 1.90s;-moz-transition-duration: 1.90s; }  .post a:hover img{ filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0;-border-radius: 0px 0px 0px 0px;-moz-border-radius: 0px 0px  0px 0px;-webkit-border-radius: 0px 0px 0px 0px;-transition-duration: 1.90s;-webkit-transition-duration: 1.90s;-moz-transition-duration: 1.90s; } 
Visualize, e se as imagens estiverem um pouco clarinhas é porque deu certo, salve. Se não, tente novamente !
Prontinho! Mais um efeito lindo para seu blog :)
Beijos :*
Obs.: Se usar ou reblogar de os créditos!

28 de jul. de 2012

Pedido de Tutorial: Imagem no lugar dos links de navegação

~ Yoo
A pedido da Anah Pine, leitora aqui do blog, trouxe um tutorial de como colocar imagens no lugar dos links de navegação, ou seja, colocar imagens no lugar de Postagens mais recentes, Início e Postagens mais antigas. Eu achei o tuto no blog Cherry Bomb, mas criei o meu. Vamos conferir ?
 Vá em design e clique em Editar HTML
 Marque a opção "Expandir modelos de widgets"
Substituindo o Link Início
 Aperte Ctrl + F e procure por: <data:homeMsg/> Esse código irá aparecer em dois lugares, mas você vai usar apenas o primeiro.
 Substitua esse código pelo código abaixo:
<img src="url_da_imagem"/>
Substituindo o link Postagens mais Antigas
 Aperte Ctrl + F e procure por: <data:olderPageTitle/> 
 Substitua esse código pelo código abaixo:
<img src="url_da_imagem"/>
Substituindo o link Postagens mais Recentes
 Aperte Ctrl + F e procure: <data:newerPageTitle/>
 Substitua esse código pelo código abaixo:
<img src="url_da_imagem"/>
Agora substitua a "url_da_imagem" pela URL da imagem que você fez ou pegou. Abaixo trouxe algumas:
    
  
Créditos Cherry Bomb !
   

   
   
Créditos One Curious



Créditos: The Kawaii
Espero que tenham gostado! Se usar credite
XOXO :*

27 de jul. de 2012

Tutorial: Colocando avatar nos comentários anônimos

Oi galera, tudo bem ? Quem ta aqui é a Camila :) e trouxe um tutorial que procurei muuuuuito até achar. E peguei ele no Pink Berry. Espero que gostem, e continuem vindo aqui no blog que terá muitos outros tutoriais !
Procure por ]]></b:skin> e acima cole:

div.avatar-image-container {background:url(URL_DA_IMAGEM) no-repeat center center; }div.avatar-image-container img {display:none;}div.avatar-image-container img.delayLoad {display:block; }

Lembrando que a imagem tem que ser desse tamanho:

    
Gostaram ? Estamos usando aqui no MD , é bem útil para não deixar o comentário anônimo feio né ?! hahaha

Layout by Nathália Helena MR. ~ Morangos também falam | No copy