Fico feliz que bastante gente participou do joguinho. Pretendo fazer coisas assim mais vezes aqui no blog. É até mesmo um meio de descontrair e quebrar aquela hegemonia dos tutoriais e utilitários. Peço desculpas por não ter postado ontem, mas além de ficar tentando fazer o tutorial de hoje, me distraí com um jogo que a Kaorii postou lá no KW.
Sem mais enrolação, hoje eu trouxe um menuzinho com efeito wishlist que fiz. Ele é simples, mas acho que fica bom usando como status ou na página de tutoriais. Eu tentei fazer a Live Preview como costumo, em uma página própria, mas dessa vez não deu certo porque o menu ficava no tamanho da página toda, e muito esquisito. Assim, pus no blog de testes mesmo.
Preview
Vá no seu HTML e procure por ]]></b:skin> e acima dessa tag cole:
Está tudo explicado entre /* e */. Depois adicione um gadget de HTML/Javascript e cole:
Espero que tenha sido útil o tutorial. Beijos♥
Sem mais enrolação, hoje eu trouxe um menuzinho com efeito wishlist que fiz. Ele é simples, mas acho que fica bom usando como status ou na página de tutoriais. Eu tentei fazer a Live Preview como costumo, em uma página própria, mas dessa vez não deu certo porque o menu ficava no tamanho da página toda, e muito esquisito. Assim, pus no blog de testes mesmo.
Preview
Vá no seu HTML e procure por ]]></b:skin> e acima dessa tag cole:
.menuzinho {
height: 12px; /*altura*/
border-left: 8px solid #FF0040; /*borda*/
overflow: hidden;
display: block;
margin: 3px; /*espaçamento*/
border-radius: 5px;
background: #f2f2f2; /*cor do fundo*/
color: #909090; /*cor da letra*/
text-align: left; /* posição do texto*/
font-family: tahoma; /*fonte*/
font-size: 12px; /*tamanho da letra*/
padding:4px;
padding-left: 15px;
text-shadow: 1px -50px 1px #CACACA, 1px 50px 1px #CACACA, 1500px 1px 0px #CACACA, -900px 1px 0px #CACACA; /* sombra do texto*/
}
.menuzinho:hover {
border-left: 12px solid #FF0040; /*borda*/
background: #f2f2f2; /*cor do fundo quando passa o mouse*/
box-shadow: inset 2px 2px 2px #ddd; /*sombra interna quando passa o mouse*/
-webkit-transition-duration: 0.9s;
padding: 4px;
padding-left: 18px;
text-shadow: 1px 0px 1px #CACACA,1px 0px 0px #CACACA,1px 1px 0px #CACACA, 1px 1px 0px #CACACA; /*sombra do texto quando passa o mouse*/
}
Está tudo explicado entre /* e */. Depois adicione um gadget de HTML/Javascript e cole:
<div class="efeitozinho">Algo aqui</div>Cole isso no mesmo gadget quantas vezes você quiser que apareça.
Espero que tenha sido útil o tutorial. Beijos♥
Amei o menu *---*
ResponderExcluirhttp://confissoes-de-um-garoto.blogspot.com.br/
Já votei. E adorei esse menu *u*
ResponderExcluirTive que reinstalar meu chrome, dai perdi todos os favoritos... Vou salvar é tudo no pc mesmo agora >.< Talvez eu o use no futuro! Beijo.
Diva Pensante (perfil)
Não deu :(
ResponderExcluirAdorei esse menu Wishlist, muito fofo. :3
ResponderExcluirZombie World ~> PERFIL
Amei ele c:
ResponderExcluirVou usar em meu próximo layout hehe
Beijos >.< Good Lollipop
Legal o tuto flor *-*
ResponderExcluirhttp://perfeitateen.blogspot.com.br/
Oi *-* Aceita afiliação?
ResponderExcluirAguardo a resposta lá no blog.
http://beoneprincess.blogspot.com.br/
Adorei o menu, super lindo :3
ResponderExcluirAceita afiliação amore?
Beijos, Morangos Silvestres
Muito perfeito o menu, já guardei-o nos favoritos :3 Acho que usarei em algum layout, acho que ficaria lindo nos marcadores, né?
ResponderExcluirPlush Things ♥
Que lindo esse menu, amei *0*
ResponderExcluir#Beijos, bruna.
Garota da Lua
Amei o efeito, eu achei perfeito super elaborado *u*
ResponderExcluirVou salvar aqui nos favoritos pra usar algum dia!
Beijos
BANGTEEN.BLOGSPOT.COM
Ai que fofo :3 Eu estive procurando menu wishlist agora mesmo *3*
ResponderExcluirseguindo ♥ cafe-chaud.blogspot.com.br
Adorei o efeito! Com certeza fica ótimo para o status!
ResponderExcluirBeijos
http://blog-geekchic.blogspot.com.br/
Adorei o tutorial, o efeito fica lindo!
ResponderExcluirBeijos,
isaloy.blogspot.com.br
blog-pequenaprincesa.blogspot.com.br
Que bunitinho ^-^ adorei o tutorial! alias, vendo seu blog de testes, eu amei todos os efeitos que estão lá na sidebar D: Meudeus, vou procurar por eles... OLHA O CROSSED QUE LINDO! kkkkk
ResponderExcluirwww.tortademenina.com
Oi tudo bem? Espero que sim,estava procurando alguns blogs e amei o seu! Suas postagenes são maravilhosas,você escreve muito bem e tem um talento para ser blogueira! Eu adorei todo o seu layout,é muito organizado e suas postagens são bem explicadas! Se continuar assim vai muito longe! Você é talentosa e eu adorei tudo aqui,pessoas como você merecem ser reconhecidas! Adorei muito.
ResponderExcluirNão sei se você se lembra de mim,mas eu sempre vinha por aqui. Fiz outro blog,o Amiga que fashion! Eu já te seguia,caso queira retribuir eu iria adorar! Muito obrigada e parabéns!
Beijos,
Amigaquefashion.blogspot.com
Olá tem tag para você lá no blog
ResponderExcluirBeijos
http://blog-geekchic.blogspot.com.br/2013/01/tag-11-coisas.html
Que fofinho, gostei muito! Tuto muito bom ^^
ResponderExcluirSonhos de Mel
-M