terça-feira

Blockquotes Personalizados


Olá dreamers... Percebi que o blog não está postando muitos tutoriais de personalização de blog, então resolvi criar uns modelos de blockquotes bem simples, mas lindinhos, pra passas para vocês... Eu fiz todos eles, são de minha autoria, então se usarem, por favor creditem o Prince Dreamer, ok?? Fiz 3 modelos, vamos conferir?


Para usar os modelos, basta ir no seu HTML e pesquisar por ]]></b:skin> , acima do código encontrado, cole um dos códigos dos modelos que gostar...

Modelo I
 normal
hover
blockquote {
border: 2px dashed #fdd4ea;/* cor da borda */
background-color: #ccff9f; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #000; /* cor da fonte */
text-align: center;
}
blockquote:hover {
border: 1px dashed #ccff9f;/* cor da borda */
background-color: #fdd4ea; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #000; /* cor da fonte */
text-align: center;
}
Modelo II
normal
 hover
blockquote {
border: 1px solid #8a9f85; /* cor da borda */
background-color: #379c80; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #fff; /* cor da fonte */
text-align: center;
border-radius:10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
box-shadow: inset 0 0 15px #006355, 0 0 5px #006355;
-webkit-transition-duration: .50s;
}
blockquote:hover {
border: 1px solid #379c80; /* cor da borda */
background-color: #8a9f85; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #fff; /* cor da fonte */
text-align: center;
border-radius:10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
box-shadow: inset 0 0 15px #006355, 0 0 5px #006355;
-webkit-transition-duration: .50s;
}
 Modelo III
normal 
 hover
 blockquote {
background: #bcb7d4;/* cor de fundo */
border: 2PX solid #a09fbd;/* cor da borda */
color:  #000; /* cor da fonte */
font-family:century gotgic;
font-size: 12px;
text-align: center;
padding: 5px;
}
blockquote:hover {
background: #fbdeed;/* cor de fundo */
border: 2PX solid #d7a7bf;/* cor da borda */
color:  #000; /* cor da fonte */
font-family:century gotgic;
font-size: 12px;
text-align: center;
padding: 5px;
}

Após ter colado acima de ]]></b:skin> , edite com as cores que desejar, visualize e salve... Não esqueça de creditar o PD, ok? Abraços e até!

20 comentários:

  1. Gostei de todos :).Eu acho que vou usar em um lay que eu vou fazer :)

    Tem post novo : http://nightsofwinteroficial.blogspot.com.br/

    ResponderExcluir
  2. O Modelo 1 é muito lindo, Ótimo post!

    http://fou-r.blogspot.com.br/ || Four Resources

    ResponderExcluir
  3. Vey o terceiro é muito massa, usei ele com cor diferente na loja do qmn, valleu, seguindo aqui, se puder retribuir! voltarei mais vezes (:
    Quase Meia Noite

    ResponderExcluir
  4. Um mais lindo que o outro, principalmente o terceiro <3
    Beijos

    http://imaginebelleblog.blogspot.com.br/
    https://www.facebook.com/blogimaginebelle

    ResponderExcluir
  5. Que legal,são muito fofos. *--*
    Eu até tenho que mudar as cores do meu por causa do lay. xd

    Bjs
    Hayanne Deise Lins
    *Profissão Adolescente*
    *Tokyo Doramas*

    ResponderExcluir
  6. Ficaram Fofos*

    worldofthel.blogspot.com.br

    ResponderExcluir