28 janeiro 2012

Tutorial: Personalizar Blockquote




Tumblr_lyc38xkj8t1qm58blo1_400_large

Finalmenteeeeeeeeeeeeeeeeeeeeee!!!! Nosso tutorial de Blockquote está pronto!!!! Foi a pedido de umas leitoras que queriam saber como se personalizava os comentários com a blockquote.
Eu realmente realmente REALMENTE rEaLmEnTe REALMENte não sei como eu consegui deixar os comments na forma de blockquote, mas vou pesquisar e ensino pra vcs, JURO! 
Demorei um tempinho para achar o tuto que eu usei pra personalizar a minha blockquote.
Essa é a blockquote que você vai aprender a fazer, com as cores que vc quiser.
É super fácil! Achei no Cherry Bomb, okaaay? Clique em continuar lendo:
Aviso: Mexemos com HTML
Aviso2: Contém nota de personalização de comentários



Para as meninas que não leram a introdução acima, leiam essa nota que eu deixei explicando a personalização dos comments:
Oi flores, tudo bem? ^^ Fico muito feliz por terem gostado do estilo dos comments aqui do blog. Bom, antes de achar um tutorial sobre blockquotes, eu pesquisei como personalizar os comments. Achei num blog que não lembro qual é, mas fiz o tuto, com HTML. Primeiramente, não tinha funcionado mas eu nem mexi. Mas, do nada, os comentários viraram blockquotes!! (O modelo automático do blog). Acho que teve algo haver com aquele primeiro tuto de personalizar. Mas tb acho que tem haver com aquele treco que o Blogger fez de poder responder comentários. Bom, aí depois do meus coments virarem blockquotes, pesquisei um tutorial para personalizá-las. Acho que foi do Dicas Blogger, enfim, mas não gostei muito do design, apaguei e achei outro no Cherry Bomb que vou ensinar agora. Desculpa mesmo, nem eu entendi como consegui fazer aquilo com os comentários. Juro que pesquiso, e posto pra vcs. Beijinhos 。◕‿◕。  
Bom, vamos ao tuto. Demorei porque tive que achar onde eu tinha achado o tuto da minha blockquote. Eu acho bem fofa esse estilo, e tem várias cores, e você personaliza do jeito que quiser. 
P.s.: Créditos ao Cherry Bomb


Primeiro, O QUE É UMA BLOCKQUOTE VICKIE?
Blockquote, é um Bloco de Notas, tipo um post-it, sabe? É muito útil quando se tem algum código, ou um aviso importante. Para usá-lo, é só apertar esse botão quando estiver fazendo a postagem:
image
                      

Começando o tutorial!
Abra seu blog e clique em Desing>Modelo>Editar HTML>Prosseguir
Aperte Ctrl+F e procure por:
]]></b:skin>
 Achou? Acima desse código, coloque esse aqui:

.post blockquote { 
background:url(LINK DA IMAGEM DE FUNDO AQUI) ; /*Altere o fundo como preferir*/ 
border:2px dashed #2b2a59; /*Altere a cor da borda como preferir*/ 
padding: 5px; 
margin:10px 20px 10px 20px; 
}


Agora, preste atenção nessa parte, que é a de Personalização.
P.s.: Recomendo cores neutras. No fundo, cinza, e na borda, outra cor mais viva(azul, rosa, verde, amarelo...)


Você está vendo o código em vermelho? É a cor da bordinha da sua blockquote. A minha é rosa. Coloque a cor que você quiser consultando essa tabela aqui. Lembre-se de NÃO apagar a #(hashtag).


O código em verde (2px) é a espessura da borda. Se quiser mais grossa, aumente o número, se quiser mais fina, diminua.


O código em azul já é mais complicado. Ela representa a cor do fundo. Se você quiser um pattern (ou seja uma imagem de fundo) coloque o link da imagem onde está pedindo (entre parênteses). Mas se você quiser só uma cor básica mesmo, que nem a do Chiclete, substitua:


---->url(LINK DA IMAGEM DE FUNDO AQUI)
POR
--->#COR


Lembrando que você consegue as cores nessa tabela aqui.


Agora, é só Visualizar e Salvar. 
Bom, é só isso, meninas. espero que tenham gostado.


Volto depois com mais posts e mais tutoriais.
Beijinhos, Viiickie. 








8 comentários:

  1. Awwwn brigada flor mas eu consegui personalizar os comments do jeito que eu queria mas aposto que vai ajudar muuitas blogueiras (; e seu design ta um arraso!
    Beijos
    Duda

    ResponderExcluir
    Respostas
    1. Aaaii q legal! :D acabei de conferir ficou super fofo!
      Bgd! :3

      Excluir
  2. Amei o tuto!!

    Amei muito aqui, e olha que acabei de ver seu blog! Já virei uma fã. Amei muito o conteúdo e o design, que são muito bons.
    Já estou seguindo! Adoraria muito se você seguisse meu blog também. Ele é totalmente ligado com o mundo feminino. Se você tiver um tempo, passa lá, e comente dizendo o que achou!

    Querida, tem post novo no meu blog, você podia fazer o grande favorzinho de comentar no post? Adoro ver as opiniões das leitoras!

    Beijos!
    www.blogmodasdegarotas.blogspot.com

    ResponderExcluir
  3. Amei o tuto!

    Querida, tem post novo no meu blog, você podia fazer o grande favorzinho de comentar no post? Adoro ver as opiniões das leitoras!

    Beijos!
    www.blogmodasdegarotas.blogspot.com

    ResponderExcluir
  4. AUSHUASHU eu fui sua seguidora número 50 \o/ meta concluída

    ResponderExcluir
    Respostas
    1. AHHAHAHAAHHA VALEEEEEEEEEUUUUU CANDYY!!!!

      Excluir
  5. Adorei o tuto, ja conheçia fica lindo Vickie.
    Seguindo.
    Retribui??
    Princesa Imperfeita.
    Bjs

    ResponderExcluir