Image Map

06/08/2012

Personalizando a Bloquote

 Créditos ao Just Debee.
 krk mlk, olha lá uma coisa!!11!!onze!
 Bom dia cupcakes com morango 
 Tudo bem com vocês? Espero que sim. Hoje vim trazer um tutorial bem legal, que personaliza o blog e te ajuda á colocar aqueles recadinhos pras leitoras.
 O tutorial é de como personalizar a bloquote. Não sabe o que é bloquote? Bloquote é...
...isso aqui. 
 Agora vamos ao post?

 Vá em Design Editar HTML Tecle Ctrl+F e procure por ]]></b:skin>
 Aí é só você escolher o modelo de bloquote que quer e colar o código dela acima da tag encontrada. Os modelos eu editei segundo os que eu achei lá no Just Debee, colocando sombra no 2º e 3º modelos. 

blockquote {
border: 1px solid #c9c9c9; /* cor da borda */
background-color: #efefef; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #333333; /* cor da fonte */
text-align: justify;
-moz-box-shadow:5px 4px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #ccc;
-khtml-box-shadow: 5px 4px 10px #ccc;
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=4)";filter:progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=4);
}

blockquote {
border: 1px solid #c9c9c9; /* cor da borda */
background-color: #efefef; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #333333; /* cor da fonte */
text-align: justify;
-moz-border-radius: 10px; /* Para Firefox */-webkit-border-radius: 10px; /*Para Safari e Chrome */border-radius: 10px; /* Para Opera 10.5+*/
box-shadow: -2px 4px 15px #ADD8E6; /*Sombra do blockquote/ coloque os quatro igual ou não irá conseguir fazer o efeito*/
-moz-box-shadow: -2px 2px 5px #ADD8E6; /*Sombra do blockquote/ coloque os quatro igual ou não irá conseguir fazer o efeito*/
-webkit-box-shadow: -2px 2px 5px #ADD8E6; /*Sombra do blockquote/ coloque os quatro igual ou não irá conseguir fazer o efeito*/
-khtml-box-shadow: -2px 2px 5px #ADD8E6; /*Sombra do blockquote/ coloque os quatro igual ou não irá conseguir fazer o efeito*/
 

blockquote {
border: 1px solid #c9c9c9; /* cor da borda */
background-color: #efefef; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #333333; /* cor da fonte */
text-align: justify;
-moz-border-radius:20px 0;
-webkit-border-radius:20px 0;
border-radius:20px 0;
box-shadow: -2px 4px 15px #ADD8E6; /*Sombra do blockquote/ coloque os quatro igual ou não irá conseguir fazer o efeito*/
-moz-box-shadow: -2px 2px 5px #ADD8E6; /*Sombra do blockquote/ coloque os quatro igual ou não irá conseguir fazer o efeito*/
-webkit-box-shadow: -2px 2px 5px #ADD8E6; /*Sombra do blockquote/ coloque os quatro igual ou não irá conseguir fazer o efeito*/
-khtml-box-shadow: -2px 2px 5px #ADD8E6; /*Sombra do blockquote/ coloque os quatro igual ou não irá conseguir fazer o efeito*/
}
 Mas e aí você não sabe usar a bloquote. Deixa que eu te ajudo! É só você clicar nesse ícone:
 Que fica naquele ~menuzinho~ das postagens, no qual você adiciona o Leia Mais, as imagens, os vídeos entre outros.
 E aí, gostaram? Espero que sim. O post de hoje é um que eu estava querendo fazer há muito tempo, até porque eu acho que a bloquote fica linda quando personalizada!
 É isso. Beijinhos com glitter :*

31 comentários:

  1. Nossa, eu tava precisando MUITO desse tuto, tá mega explicado !
    Valeu, Paulinha *__*
    Kisses :*
    http://garotasatrevidas-s2.blogspot.com.br/

    ResponderExcluir
  2. Agora eu posso ver isso no P.C *u*
    Nanda <3

    delicatepinkties.blogspot.com
    P.S.:o favicon do P.C no Mozilla Firefox se mexe *O*

    ResponderExcluir
    Respostas
    1. (vi isso agorinha! na casa dos meus primos a internet é mozila, muito fofo)

      Excluir
    2. Nhaaawn, eu já sabia *-*

      Excluir
  3. Ajudo bastante eu amo quando você posta HTML pois você explica super bem ;D
    Tem como postar como fazer as faixinhas para design no inkscape ? Por favor,obrigada ;3
    AAA não é bloquote é blockquote !!
    Beijos ;*
    cupcakeedicoes.blogspot.com

    ResponderExcluir
    Respostas
    1. Aaawn, que bom fofa *-*
      Tem sim, pode deixar que semana que vem tem post ;)

      Excluir
  4. Adorooo esse tutorial!
    É muito prático. Mas muitas vezes não sei como se personaliza e deixa ele diwo, então, você me ajudou!
    Beijinhos!

    ResponderExcluir
  5. OMG! Adorei! Estava procurando um para o GA,obrigada Paulinha ^^
    Tá rolando o primeiro concurso no Garota Amargurada! Se quiser participar,é só ver a nossa nova postagem! Te espero lá Paulinha! Espero que participe,estou contando com sua ajuda! (:
    Beijinhos :*
    http://garota-amargurada.blogspot.com

    ResponderExcluir
  6. Amei muito os blockquote! Post muito bem explicado!!

    http://garotavertigem.blogspot.com.br/

    ResponderExcluir
  7. Amei os blockquotes! O tuto está muito bem explicado. Eu só não consegui é mudar as cores e deixa-lo do "estilo" do meu blog.
    Beijos
    http://universoteengirl-porlarissa.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Aaah, é que tem que mudar os códigos das cores :3

      Excluir
  8. Meu Deus, hoje tava que nem louca procurando um tutorial ensinando fazer isso! Se você tivesse postado um pouco antes kkkkkkkkkkkkkk

    Beijos,
    Caroline, do http//criticandoporai.blogspot.com

    ResponderExcluir
  9. ola minha flor amei seu blog e s super divã achei super fofo,lindo e cuti estou seguindo e pesso que vc possa da uma passadinha no meu cantinho meu blog beijocas e espero que vc possa gostar!!

    http://menina-fashion-girl.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Claro, meu blog é super divã (divã= tipo de sofá) '-'

      Excluir
  10. Yeeýy, tem um selinho pra vocês lá no meu blog!! Clica aqui!!♥

    Kisses com gloss de laranja(??)!!

    ResponderExcluir
  11. Ameii o tutorial super legal
    bjss
    http://coiisinhasdegarotass.blogspot.com.br/

    ResponderExcluir
  12. Fica muito fofo*.*
    bjs
    http://blogbondmais.blogspot.com.br/

    ResponderExcluir
  13. aah q legal, é aql quadradinho? é isso?
    bjão
    lamourmonage.blogspot.com

    ResponderExcluir
  14. Ah eu já sei como fazer isso na vdd >< iudsudhnasold

    ResponderExcluir
  15. VALEU , MUITO EXPLICADO *-*
    BEIJÃO O/
    # http://garotek.blogsport.com.br

    ResponderExcluir
  16. usei um deles estão lindos :3
    seguindo se pude-se dar uma visita no Heart Attack agradecia flor :3

    ResponderExcluir