27 fevereiro 2013

Estilos de Wishlists

| |
Prometo que vou parar de usar imagens dela... daqui a uns três posts ;P
Boa noite, gente.
É sério, fiquei muito feliz quando vi que vocês gostaram do meu último post. Eu achava que ninguém gostaria tanto assim, mas eu estava errada, e por isso farei mais posts sobre edições de imagens no PhotoShop.

Mas vamos ao principal: os estilos de Wishlists. Como todo mundo deve saber, wishlist são listas desejos. Não são muito usadas aqui no blogger, mas são muito usadas em tumblr pessoais ou como menus para tutoriais em páginas de F.A.Q./Goodies.

Para ver os três os três estilos que eu fiz, já sabe, né?


Gostou? Então já sabe, né?


1ª Wishlist
Para aprender a 1ª wish {e a que eu mais gostei}, no HTML do seu blog aperte F3 e procure por ]]></b:skin> , acima cole:

.wish-um-isa {
color: #COR DA LETRA;
letter-spacing: 1px;
border-radius: 5px;
background: #COR DO FUNDO;
display: block;
margin-bottom: 3px;
padding:4px;
font-size: 12px;
line-height: 13px;
-webkit-transition-duration: .80s;
-moz-transition-duration: .80s;
-o-transition-duration: .80s;
vertical-align: middle;
padding-left: 10px;}
.wish-um-isa:hover {
text-shadow: 1px 1px 1px #SOMBRA DA LETRA;
-moz-box-shadow:inset 0px 25px 5px #COR DA SOMBRA QUE DESCE;
-webkit-box-shadow:inset 0px 25px 5px #COR DA SOMBRA QUE DESCE;
-o-box-shadow:inset 0px 25px 5px #COR DA SOMBRA QUE DESCE;
-ie-box-shadow:inset 0px 25px 5px #COR DA SOMBRA QUE DESCE;
-webkit-transition-duration: .80s;
-moz-transition-duration: .80s;
-o-transition-duration: .80s;vertical-align: middle;
}
Visualize para ver se o blog continua normal e se estiver salve.

••••••••••

Layout • Adicionar Gadget • HTML/JavaScript • cole:

{Sem Link}

<div class="wish-um-isa">Nome</div>
<div class="wish-um-isa">Nome</div>
<div class="wish-um-isa">Nome</div>
<div class="wish-um-isa">Nome</div>
<div class="wish-um-isa">Nome</div>
<div class="wish-um-isa">Nome</div>
<div class="wish-um-isa">Nome</div>
<div class="wish-um-isa">Nome</div>
<div class="wish-um-isa">Nome</div>
<div class="wish-um-isa">Nome</div>
{Com Link}
<a href="Link"><div class="wish-um-isa">Nome</div></a>
<a href="Link"><div class="wish-um-isa">Nome</div></a>
<a href="Link"><div class="wish-um-isa">Nome</div></a>
<a href="Link"><div class="wish-um-isa">Nome</div></a>
<a href="Link"><div class="wish-um-isa">Nome</div></a>
<a href="Link"><div class="wish-um-isa">Nome</div></a>
<a href="Link"><div class="wish-um-isa">Nome</div></a>
<a href="Link"><div class="wish-um-isa">Nome</div></a>
<a href="Link"><div class="wish-um-isa">Nome</div></a>v
<a href="Link"><div class="wish-um-isa">Nome</div></a>

2ª Wishlists
Aperte F3 e procure por ]]></b:skin> e acima cole:
.wish-dois-isa {
color: #COR DA LETRA;
letter-spacing: 1px;
border-radius: 5px;
background: #COR DO FUNDO;
display: block;
margin-bottom: 3px;
padding:4px;
font-size: 12px;
line-height: 13px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
vertical-align: middle;
padding-left: 10px;}
.wish-dois-isa:hover {
text-shadow: 1px 1px 1px #COR DA SOMBRA;
-moz-box-shadow:inset 400px 0px 0px #COR DO FUNDO HOVER;
-webkit-box-shadow:inset 400px 0px 0px #COR DO FUNDO HOVER;
-o-box-shadow:inset 400px 0px 0px #COR DO FUNDO HOVER;
-ie-box-shadow:inset 400px 0px 0px #COR DO FUNDO HOVER;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;vertical-align: middle;
padding-left: 25px;}
 Visualize para ver se o blog continua normal e se estiver salve.

••••••••••

Layout • Adicionar Gadget • HTML/JavaScript • cole:

{Sem Link}
<div class="wish-dois-isa">NOME</div>
<div class="wish-dois-isa">NOME</div>
<div class="wish-dois-isa">NOME</div>
<div class="wish-dois-isa">NOME</div>
<div class="wish-dois-isa">NOME</div>
<div class="wish-dois-isa">NOME</div>
<div class="wish-dois-isa">NOME</div>
<div class="wish-dois-isa">NOME</div>
<div class="wish-dois-isa">NOME</div>
<div class="wish-dois-isa">NOME</div>
{Com Link}
<a href="Link"><div class="wish-dois-isa">NOME</div></a>
<a href="Link"><div class="wish-dois-isa">NOME</div></a>
<a href="Link"><div class="wish-dois-isa">NOME</div></a>
<a href="Link"><div class="wish-dois-isa">NOME</div></a>
<a href="Link"><div class="wish-dois-isa">NOME</div></a>
<a href="Link"><div class="wish-dois-isa">NOME</div></a>
<a href="Link"><div class="wish-dois-isa">NOME</div></a>
<a href="Link"><div class="wish-dois-isa">NOME</div></a>
<a href="Link"><div class="wish-dois-isa">NOME</div></a>
<a href="Link"><div class="wish-dois-isa">NOME</div></a>
Depois é só salvar e pronto ^-^


3ª Wishlist
No HTML do seu blog, aperte F3 e procure por ]]></b:skin> e acima cole:

.wish-tres-isa {
color: #COR DA LETRA; 
text-align: left;
letter-spacing: 1px;
border-radius: 5px;
background: #COR DO FUNDO; 
display: block;
margin-bottom: 3px;
padding:4px;
font-size: 12px;
line-height: 13px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
vertical-align: middle;
padding-left: 10px;}
.wish-tres-isa:hover {
text-shadow: 1px 1px 1px #COR DA SOMBRA DO TEXTO;
background: #FUNDO HOVER;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;vertical-align: middle;
padding-left: 25px;}
Personalize como quiser depois visualize e salve.

••••••••••


Layout • Adicionar Gadget • HTML/JavaScript • cole:

{Sem Link}

<div class="wish-tres-isa">NOME</div>
<div class="wish-tres-isa">NOME</div><div class="wish-tres-isa">NOME</div><div class="wish-tres-isa">NOME</div><div class="wish-tres-isa">NOME</div><div class="wish-tres-isa">NOME</div><div class="wish-tres-isa">NOME</div><div class="wish-tres-isa">NOME</div><div class="wish-tres-isa">NOME</div><div class="wish-tres-isa">NOME</div>
{Com Link}
<a href="Link"><div class="wish-tres-isa">NOME</div></a><a href="Link"><div class="wish-tres-isa">NOME</div></a><a href="Link"><div class="wish-tres-isa">NOME</div></a><a href="Link"><div class="wish-tres-isa">NOME</div></a><a href="Link"><div class="wish-tres-isa">NOME</div></a><a href="Link"><div class="wish-tres-isa">NOME</div></a><a href="Link"><div class="wish-tres-isa">NOME</div></a><a href="Link"><div class="wish-tres-isa">NOME</div></a><a href="Link"><div class="wish-tres-isa">NOME</div></a><a href="Link"><div class="wish-tres-isa">NOME</div></a>
É só mudar como se pede e pronto ^-^


Espero que tenham gostado, amores! O post ficou enorme e, consequentemente, desorganizado. Prometo que não cometerei este erro de novo. Vou passar a hospedar os códigos para deixar mais organizado e também, assim, vão entender melhor os tutoriais.

Usem e abusem, mas creditem {se usar ou repassar}. 
Eu vou parecer má nesse trecho abaixo, mas leiam (e se concorda comigo comente)
Caso eu veja um sem créditos, então eu avisar e não colocar, ou pior: dizer que foi você que fez, eu vou denunciar seu blog e ele será excluído.
Não querendo ser chata, mas é o que deve ser feito. Não vou criar uma página de Shame para humilhar {sem ofensa para quem tem uma}, pois isso não resolve. Se não for por bem, vai por mal.
Desculpa pelo pequeno ataque, mas eu gamei muito nessas wishes são meus xodós, tenho ciúmes deles. Então já vou avisando, se repassar sem creditar....
Beijos ;*


8 comentários:

  1. Que lindo esse Wishlists, tão fofo *OOOO*

    Nyah Kawaii

    ResponderExcluir
  2. Adorei as wishlists, pena que não sou eu que estou fazendo o layout do meu bloguito, se não iria usar a primeira :)
    Kisses ~

    ResponderExcluir
  3. haha' você tá certa em usar imagens dela, ela é linda! e claro que gostamos do tutorial anterior, ótimo demais!

    Meu Deus! amei irei usar no próximo layout, achei muito interessante porque em quase todos os tutoriais de wishlist que vejo são sempre sem links, esse tem link, facilita muito né, porque sempre tenho que ficar caçando por aí, agora já sei, vou salvar nos favoritos, que depois é só usar ;D

    Adolescente Nerd

    ResponderExcluir
  4. Ain, que fofos! amei! no meu próximo layout, com certeza irei usar em meu blog *u* Aqui é tão fofo, amo azul, é uma das cores que eu mais gosto :3

    Se não for pedir muito, teria como passar no meu bloguinho e segui-lo? Desculpa a minha cara de pau, eu sei que é chato receber esses tipos de comentários, mais é que eu estou querendo bater a meta de 200 seguidores, por isso, peço a sua ajudinha *w* Mas se não quiser, não tem problema, eu vou entender ;3

    Agradeço dês de já e desculpa pelo o incomodo >..<"
    http://reinadodasotomeskawaiis.blogspot.com.br/

    ResponderExcluir
  5. Super lindas, amei a primeira! *--* Já favoritei o post, para usar em um próximo layout! <3
    Beijos
    I'll Help You

    ResponderExcluir
  6. Lindas Wishlists, amei os estilos, seu blog é tão delirante e babante, kkkk, amei demais a preview, que blog lindo, OMG. Você explica super bem, gosto dessas wishlists, mas odeio o fato de não terem link, aí eu coloco link nelas, kkk, ai ai...amei mesmo o tutorial :)

    Adolescente Nerd

    ResponderExcluir
  7. Adorei aqui viu, lindissimo *-* To seguindo, to começando no mundo blogueiro e espero seguir os tutoriais para deixar meu cantinho lindo como aqui. Beijos!

    ResponderExcluir

« »