Blockquote em listras numeradas


Olá meus pandthenhas de alface com alcaçuz   
Trouxe um estilo de blockquote para vocês. O resultado é esse:

Sou o que quero ser, porque possuo apenas uma vida e nela só tenho uma chance de fazer o que quero.
Tenho felicidade o bastante para fazê-la doce dificuldades para fazê-la forte,
Tristeza para fazê-la humana e esperança suficiente para fazê-la feliz.
As pessoas mais felizes não tem as melhores coisas,
elas sabem fazer o melhor das oportunidades que aparecem em seus caminhos. Clarice Lispector
Vamos ao tutorial?
No Blogger, vá em Design> Editar HTML. Tecle Ctrl F e procure por:

]]></b:skin>
Logo acima dessa tag, cole o código abaixo:
.post blockquote{
-webkit-background-clip:initial;
-webkit-background-origin:initial;
background-attachment:initial;
background-color:#FFF;
background-image:url(http://static.tumblr.com/8l2gpxb/Sgelougi5/codeimage.png); /* Background */
background-position:0 0;
background-repeat:no-repeat;
color:#666; /* Cor do texto */
display:block;
font-size:12px;
font:normal normal normal 1em/normal 'verdana', Fixed, monospace;
line-height:17px;
overflow-x:auto;
overflow-y:auto;
text-align:left;
border:1 px solid #ece9df; /* Bordas */
border-width:1px;
margin:1em 0;
padding:0 20px 0 30px;
}
Tenho backgrounds prontos aqui. Copie o URL de algum e coloque-o no lugar do URL em itálico:


Salve.
-----

(sweetpoison)

9 comentários:

  1. ai q lindo o result juuh, dorei :3 ~çdksa

    Bjs,
    bnascimentooo.tk

    ResponderExcluir
  2. Super indica para quem tem blog de tutoriais né?! rs
    Ficou mt fofo *-* Otima dica!

    http://garotasederivados.blogspot.com/

    ResponderExcluir
  3. Juhs obg amei o mini gif!!!!!!!!!! <3
    Adorei o blockqoute sempre quis saber fazer!!!!

    Bjus linda!

    http://hello-camera.blogspot.com

    ResponderExcluir
  4. Beem leegal o tutorial, liindo seeu blog, e ja tô seeguiindo, obrigado pela visita lá no Soul Teen, volte seempre, seu design ée incrivel,*o*
    beeijãao
    http://sooulteen.blogspot.com

    ResponderExcluir
  5. Hooy flor :)
    Amei o tutorial ,super util !
    Olha,não quero não encomenda vlw quando precisar msm entro em contato com voce :D
    Bjs Semmy
    http://blog-aprovada.blogspot.com

    ResponderExcluir
  6. Que legal adorei vou tentar fazer bem que vc podia mostrar como faz esse seu modelo de comentaios no blog né, se fizer me avisa que quero vêr.
    Vou esperar sua linda visita em meu blog.
    Te espero por lá viu.
    http://plantaodabeleza.blogspot.com/
    Beijossssssssss……..Simara ♡ ♡ ♡ ♡ ♡ ♡ ♡

    ResponderExcluir
  7. Fica lindo. Estava doida para aprender fazer esse menuzinho. Amei seu blog, não sei como tive a honra de conhece-lo. Gostaria de te ver lá no meu, Fique sabendo que sempre estarei aqui, futucando as novidades.
    Tutti-Frutti de Ideias

    ResponderExcluir
  8. Seu blog é muito fofo *o*
    Estou seguindo linda!
    ótima tutorial!
    Beijos;* Visita?
    http://girlonlline.blogspot.com

    ResponderExcluir
  9. Eu tinha seguido pelo painel do blog, mas n tinha ido!
    Agora sim seguindo, mas o google friend conect vai acabar para quem tem dominio :/

    Beijos;*

    ResponderExcluir

Comente ...
Se não um Panda vai roubar seu Cupcake a noite !