Pessoal o que vocês acham do novo nome do blog ser 'Sweet Explosion' ?
Hoy meus amores, como vão? eu estou bem (:
Bom, hoje estou cheia de coisas para fazer, então só trouxe um tutorial de um efeito que eu acho muito criativo e bonito. Primeiramente os créditos vão ao maravilhoso Kawaii World.
Vá no seu HTML e clique em expandir modelos de widgets de cntrl+f ou F3 e procure por ]]></b:skin> acima cole o seguinte código. (É um código bem grandinho, mas vale apena fica bem bonito no blog)
.imagepluscontainer{ /* main image container */
position: relative;z-index: 1;}.imagepluscontainer img{ /* CSS for image within container */position: relative;z-index: 2;-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */-webkit-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);-moz-transform: scale(1.05, 1.05);-webkit-transform: scale(1.05, 1.05);-ms-transform: scale(1.05, 1.05);-o-transform: scale(1.05, 1.05);transform: scale(1.05, 1.05);}.imagepluscontainer div.desc{ /* CSS for desc div of each image. */position: absolute;width: 90%;z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */left: 5px;padding: 8px;background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */color: white;-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */-webkit-border-radius: 0 0 8px 8px;border-radius: 0 0 8px 8px;opacity: 0; /* Set initial opacity to 0 */-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */-webkit-transition: all 0.5s ease 0.5s;-o-transition: all 0.5s ease 0.5s;-ms-transition: all 0.5s ease 0.5s;transition: all 0.5s ease 0.5s;}.imagepluscontainer div.desc a{color: white;}.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */-moz-transform: translate(0, 100%);-webkit-transform: translate(0, 100%);-ms-transform: translate(0, 100%);-o-transform: translate(0, 100%);transform: translate(0, 100%);opacity:1; /* Reveal desc DIV fully */}
Vá em layout, adicionar um gadget HTML/JavaScript e cole:
Pronto, visualize se estiver tudo certo salve. Espero que tenham gostado meus pequeninos.<div class="imagepluscontainer" style="width:LARGURADAFOTOpx; height:ALTURA DA FOTOpx; z-index:2">
<img src="URLDAFOTO" /><div class="desc">ESCREVA ALGO AQUI, É ISSO AQUI QUE VAI APARECER QUANDO VOCÊ PASSAR O MOUSE NA IMAGEM.</div></div>
Beijos
Muito lindo o efeito,adoro seu blog e suas postagens <33
ResponderExcluirBeijos
Candy Dream
esse tuto é muito util, sem falar que fica lindo a descrição surpresa
ResponderExcluiracervo-de-livros.blogspot.com
Esse efeito é bem legal! <3
ResponderExcluirKissus
gotas-de-fofura.blogspot.com
O efeito é muito lindo, adoro!
ResponderExcluirlady---bug.blogspot.com
Esse efeito é lindo eu adoro !:)
ResponderExcluirBjs
Diário Capricho
Lindo o Efeito Adorei!
ResponderExcluirSeguindo
Beijos
Goten Akai (Link no Perfil)
Adoro esse efeito acho muito Lindo.
ResponderExcluirhttp://meucupcakedemorango.blogspot.com.br/
1º AMEI O BLOG É LINDO DEMAIS~TO SEGUINDO
ResponderExcluir2º Adoro esse efeito *--*
Bjinhos
http://chuvadesonhooficial.blogspot.com.br/
É muito lindo esse efeito! Eu vou colocar com certeza no meu próximo lay!
ResponderExcluirFlor, A-M-E-I seu blog! é muito fofo e delicado..
Seguindo
Estilo você - perfil
p.s. Obrigada por visitar meu blog e comentar!
bjos
Achei fofo o tuto,mais se me permite. Eu não acho legal você usar o nome '' Sweet'' porque de 1000 blog que já visitei 800 tem Sweet, você poderia colocar outro no lugar. Bom, não se ofenda com minha opinião.
ResponderExcluirBeijos <3
http://www.meujeitoimperfeito.blogspot.com.br/
Lindo o efeito,
ResponderExcluirque layout mais divo o seu
www.colecionandoborboletas.blogspot.com
O efeito é lindo demais Debby!E eu...primeira a saber do nome,adorei!
ResponderExcluirThe fluffy land
Acho super fofo esse tutô, o efeito é lindo!! E sobre o nome, eu achei lindinho Sweet Explosion, mas eu prefiro young world!! Beeijos!!
ResponderExcluirpqngarota.tk
Adoro esse tutorial, economiza espaço e é lindo! E eu prefiro que esse nome continue porque é mais criativo que Sweet Explosion
ResponderExcluirbeijinhos
blog-cereja.blogspot.com
Muito lindo esse efeito, tinha visto já e me apaixonei! Ah, e sobre o novo nome do seu blog, como acabei de conhecer, digo que preste muito bem atenção pra depois não se arrepender, acabei de mudar o nome do meu e estou satisfeita, pense bastante flor! Um beijo e estou seguindo o blog!
ResponderExcluirblogueiradepantufas.blogspot.com.br
Super fofo esse tutorial, todo tutorial do Kawaii World realmente arrasa! O nome ia ficar lindo Sweet Explosion e a url também! ;) Seguindo aqui já, se puder participa desse concurso http://pimentacupcake.blogspot.com.br/2012/12/concurso-meu-blog-e-top.html ? Please. Beijos flor
ResponderExcluirOi linda tudo bem? Achei otima a ideia, eu tbm to pensando em mudar o nome do meu blog, mas a dificil inspiração, se vc souber de algum me fala? Queria perguntar se você poderia dar uma passadinha no meu blog para me ajudar a me animar novamente, não tá fácil mas essa blogosfera né? As vezes fico desanimada e por esses últimos dias to assim, não sei como eu faço para se animar novamente.. Ps ja sigo seu blog, e além de tudo eu amo muito seu blog. É serio mesmo tá?
ResponderExcluirObrigada , e beijoos.
cupcakeofchocolate.blogspot
Oi fofa. Desculpa viu, eu estava em uma correria aqui que acabei nem percebendo.. Já to seguindo agora!
ResponderExcluirBeijos
PimentaCupcake
Não vou mudar de novo Debby,o TFL é um blog novo lembra?O nome é supresa (dica:é em português)..eu expliquei no post o por quê!
ResponderExcluirThe fluffy land
Acho super fofo esse efeito ^^
ResponderExcluirMeu Mundo, Meu Estilo