Mini Blockquote alternativo sem mexer no HTML do blog? Saiba como!

Hoje: Ilustra.: KW | Tutorial baseado em: CB
Olá pessoal, como vão? Aqui é a Isabella C. Sim, faz séculos que eu não posto, peço desculpas... Minhas aulas voltaram algumas semanas atrás e está sendo tudo muito corrido, farei o máximo para tentar atualizar aqui... Enquanto isso, fiquem com esse tutorial, créditos de inspiração na legenda ^^

Se você for no HTML do blog, pode criar mais de um estilo de blockquote para as suas postagens: é simples! Pegue um código de personalização de blockquote, que estará mais ou menos assim:

blockquote {
código
código

Cole acima de ]]></b:skin>. Aí é só alterar o seletor (blockquote {) para blockquote2 {, blockquote3 {, ou como você quiser. Quando for fazer a postagem, mude para a ala HTML e digite: <blockquote2> SEU TEXTO </blockquote2>. Altere o blockquote2 para o nome do blockquote alternativo e SEU TEXTO, para o texto que você quiser, obviamente.


Mas isso é diferente do que eu vim ensinar. Nele nós não iremos mexer com o HTML do blog. Eu trouxe alguns modelos prontos inspirados nos do Cherry Bomb, mas primeiro, sigam esses passos:

"Para funcionar, mude para a ala da postagem em HTML e cole o código do blockquote [os que eu vou disponibilizar]. Substitua a parte que diz "TEXTO" pelo texto do seu blockquote."
Esses modelos ficam melhor para códigos de tutoriais, já que tem scrollbar quando é texto extenso.

Modelo 1
 
<div style="background-color: #eeeeee; box-shadow: 1px 1px 2px #666; color: black; font-family: verdana; font-size: 11px; height: 80px; overflow: auto; width: 500px;">
TEXTO</div>


Modelo 2
 
<div style="background-color: #d391a7; border-left: solid 4px #bd5a7b; border-right: solid 4px #bd5a7b; box-shadow: 1px 1px 2px #666; color: #eee; font-family: verdana; font-size: 11px; height: 80px; overflow: auto; width: 500px;">
TEXTO</div>


Modelo 3

<div style="background-color: #70697e; border: solid 5px rgb(212,210,217); box-shadow: 1px 1px 2px #666; color: #eeeeee; font-family: verdana; font-size: 11px; height: 80px; overflow: auto; width: 500px;">
TEXTO</div>


Altere a cor de fundo em: background-color: ...; trocando a cor (que é #número ou rgb (números)) pela de sua preferência. Baseando-se nisso, troque a cor das bordas, que são as propriedades que se iniciam-se com border e a cor do texto, em color.

É isso ^^ Criem seus modelos, usem e personalizem! SE UTILIZAR OU REBLOGAR, CREDITE O ALL LOVELY AND FLUFFY. Espero que tenham gostado :) Beijos.

2 comentários:

  1. Que tutorial útil, amei! Super bem explicado *3*

    ♥ Abraços |  www.h-oneypie.com

    ResponderExcluir
    Respostas
    1. Obrigada, fico feliz que tenha gostado *3333*
      Beijos ♥

      Excluir

-Segue,Retribui? Retribuo se eu gostar do blog.
-Não Ofender ninguém.
-Não falar palavrões .
-Sempre deixar o link do seu blog para retribuir.
-Leia o post antes de comentar!
-Comentários sem conteúdo serão ignorados.
-Leio todos os comentários e respondo
♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
❝❞✥ ✦ ✧ ✩ ✫ ✬ ✭ ✮ ✯ ✰ ✱ ✲ ✳ ❃ ❂ ❁ ❀ ✿✼ ✻ ✺ ✹ ✸ ✷ ₪ ❃ ❂ ❁ ❀ ✿ ✾ ✽ ✼ ✻ ✺ ✹ ✸ ✷
✶ ✵ ✴ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❖(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙