9 de julho de 2013

Tutorial - Modelos para FAQ


Olá pessoal!

Demorei para postar pois estava cheias de provas e trabalhos, ainda preciso organizar meu caderno de matemática, o que me deixa muito exausta. Ainda estou muito aborrecida, já que o WHI não funciona aqui à um tempão, o que dificulta muito quando quero postar ilustrações ou coisas relacionadas à imagens aqui no blog. Preciso urgentemente levar meu computador ao conserto, ele anda muito lerdo para certas coisas. Fora isso, estou muito contente, já que meu aniversário foi na quinta passada (04/07) e, como presente, espero ganhar um longboard.

Enfim, hoje estava com muita vontade de postar algum tutorial, então resolvi criar alguns modelos para FAQ personalizados, como temos aqui. O tutorial é muito simples, basta seguir os passos indicados corretamente. Espero que gostem bastante! Enjoy o3o

Modelo 1
Cole esse código acima da tag ]]></b:skin>
.question1 {
  background: #7a6b85;
  border-radius: 10px 10px 0px 0px;
  padding: 5px;
  color: #3f3249;
  text-align: center;
  border: solid 1px #3f3249;
  margin-top: 1px;
}
.reply1 {
  background: #e8dede;
  border-radius: 0px 0px 10px 10px;
  padding: 5px;
  color: #807676;
  border: solid 1px #807676;
  text-align: center;
}
 Negrito: URL do background. | Em roxo: cor do texto. | Em vermelho: cor das bordas.

Agora, escolha a opção HTML da página e cole o código a seguir lá. Lembrando que para cada pergunta, repita o código abaixo.
<div class="question1">Pergunta aqui</div>
<div class="reply1">Resposta aqui</div>
<br />
Em roxo: pergunta. | Em vermelho: resposta.

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Modelo 2
Cole esse código acima da tag ]]></b:skin>
.question2 {
  background: url(http://static.tumblr.com/dlelfro/OsJmpkiu1/1045.png) repeat;
  border-radius: 10px 0px 0px 0px;
  padding: 5px;
  color: #e75f77;
  text-align: center;
  border: solid 1px #e75f77;
  text-transform: uppercase;
  font: bold 12px trebuchet MS;
}
.reply2 {
  background: url(http://static.tumblr.com/dlelfro/xpzmpkivr/1046.png) repeat;
  border-radius: 0px 0px 10px 0px;
  padding: 5px;
  color: #4f6f81;
  text-align: center;
  margin-top: -1px;
  border: solid 1px #4f6f81;
  text-transform: uppercase;
  font: bold 12px trebuchet MS;
}
Negrito: URL do background. | Em roxo: cor do texto. | Em vermelho: cor das bordas.

Agora, escolha a opção HTML da página e cole o código a seguir lá. Para cada pergunta, repita o código abaixo.
<div class="question2">Pergunta aqui</div>
<div class="reply2">Resposta aqui</div>
<br />
Em roxo: pergunta. | Em vermelho: resposta.

Por enquanto é isso, se quiserem trago mais modelos. Até a próxima postagem.

28 comentários:

  1. Gostei das duas, principalmente da primeira *u*

    Connectadus

    ResponderExcluir
  2. Gostei bastante dos dois modelos, são lindos!! Só que mais lindo ainda é o seu Blog, amei ele *O*

    xoxo♥

    Crazy Girl ~

    ResponderExcluir
  3. Que lindos modelos. *--*
    Ei, anjo. Eu recebi tua ASK e eu aceito a afiliação sim, só me colocar na elite e avisar que eu coloco de volta. u3u

    XOXO, Josh.
    darkflameoficial.blogspot.com

    ResponderExcluir
  4. Enfim, parabéns 11 dias atrasado u.u, adorei esse modelinhos e-e

    ~ Ugly Thing
    ~ Leite com Chocolate

    ResponderExcluir
  5. Parabéns, atrasado mas ta ai *-*
    Emfim, adorei os modelos muito linds ^^

    XOXO :D
    jovenclube.blogspot.com.br

    ResponderExcluir
  6. Gostei da segundaa, supeer fofo'# Ahh e Parabééns atrasadinho praa você hehe
    -Acabando de conhecer, seguindoo_
    -Segue??

    http://amor-teen.blogspot.com

    ResponderExcluir
  7. Lindos os Modelos, *---* fiquei babando no primeiro u_u
    http://themoon-matt.blogspot.com.br/

    ResponderExcluir
  8. Muito lindos *u*

    #Dark_Paradise.

    ResponderExcluir
  9. Lindos os modelos!

    e--mpire.blogspot.com

    ResponderExcluir
  10. Nossa que lindo, Muito original e diferente :3

    http://helpindesiign.blogspot.com.br/

    ResponderExcluir
  11. adorei* é sério super diferente
    bjos
    merriemafia.blogspot.com.br

    ResponderExcluir
  12. Que bonitinho essas personalizações! Nunca tinha visto nada desse tipo :)
    Beijo :*
    http://blog-part-of-me.blogspot.com/

    ResponderExcluir
  13. Nossa, que legal! Adorei os modelinhos *u*
    Beijos
    http://www.blog-purplestar.blogspot.com.br/

    ResponderExcluir
  14. Os modelos são bem fofinhos!
    segue?
    Ainda Into You

    ResponderExcluir
  15. Nha *-* Que perfeição, não vi modelos assim e digo usarei em breve com certeza *0* E mais que reconheci os back's do TMR e é legal ver que alguém usa :33

    Conheci seu blog agora e que layout perfeito, estou seguindo-a agora >uu<
    Meu WHI também fica assim, concordo que é horrível ://

    The Moon Reverse

    ResponderExcluir
  16. Nãaaao HAUHAUHA'
    Aquele back nem é meu HAU'
    Eu me enganei com um que fiz, céus que lerda 'o'
    Só para não passar vergonha depois, desculpe...

    ResponderExcluir
  17. Que fofos os modelinhos, gostei do segundo, muito fofo *u*
    Pequena Garota

    ResponderExcluir
  18. Completamente amei os dois modelos. Confesso que não sabia que havia modelos para a FAQ
    querosabertudo-k.blogspot.com

    ResponderExcluir
  19. *O* que lindas, fiquei totalmente indecisa sobre as duas, elas são tão bonitinhas >3<

    Beijos c: || mygoodies1.blogspot.com

    ResponderExcluir