Tutorial - Como usar o quote e código de Blockquote

Olá pessoal, como vão?

Como alguns entraram em contato pedindo e outros com dúvida de seu uso, hoje resolvi ensinar  como ter o BLOKQUOTE e como usa-lo ok?

Para quem não acompanhou passos 1, 2 e 3 clique AQUI.

O que seria afinal? Ele é aquela coisinha linda e fofa que destaca um quote de livro, um trecho que quer destacar ou como uso aqui para sinopses também, igual da imagem abaixo.

CLIQUE NAS IMAGENS PARA VISUALIZAR MELHOR
Sempre faça backup de sua layout


Primeiramente darei tutorial de como adicionar no blog esta caixinha de quote do seu jeito bem fofo, Vamos lá?

1 PASSO:
Vá em seu blog e clique em MODELO, depois clique em EDITAR HTML como mostra na imagem abaixo.
2 PASSO:
Agora expanda clicando em todas as setas pretas que fica na lateral, depois pressione CTRL+F que abrirá uma caixinha de pesquisa, nesta caixinha coloque a palavra abaixo:

]]></b:skin>

ESCOLHENDO COMO QUER O BLOKQUOTE:

Blokquote com bordas arredondadas:


blockquote {
border: 1px solid #FFFAFA; /* Cor da borda  do blockquote*/
background-color: #F5F5F5; /* Cor de fundo do blockquote*/
padding: 10px;
border-radius:30px 30px 30px 30px;
font-size: 13px; /* Tamanho da fonte */
color: #333333; /* Cor da fonte */
text-align: justify;
box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc;
-moz-box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc;
-khtml-box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc;
}



Blockquote sem bordas, com beirada sombreada - quadrado:


blockquote {
background: #F5F5F5 repeat; /* Cor do fundo */
text-shadow: 1px 1px 1px #FFF; /* Cor da fonte quando passa o mouse */
font-size: 14px; /* Tamanho da fonte */
color: #000; /* cor da fonte */
text-align: justify;
padding-left: 15px;
padding-bottom: 10px;
padding-right: 15px;
padding-top: 10px;
margin:10px 20px 10px 20px;
box-shadow: 1px 2px 2px #FFFAFA; /* Cor da borda */
}


Geralmente uso o COLOR - HEX para achar as cores que desejo, mas como iniciantes indico mais fácil para trocar as cores DE VERMELHO que deseja NESTA TABELA.

Depois de colocar o que deseja e fazer as alterações, clique em SALVAR MODELO.

COMO USAR O BLOCKQUOTE:

Digite o texto ou frase que deseja e clique em " ", como mostra a imagem abaixo:


COMO USAR BLOCKQUOTE COM CAPA E SINOPSE DE UM LIVRO
Muitas pessoas já me perguntaram como fazer isso e existem ainda as que tem dúvidas de como usar, vamos aos passos que podem ser seguidos abaixo:

1 PASSO:
Cole a capa do livro que deseja e deixe espaço para sinopse:

2 PASSO:
Cole a sinopse acima:

3 PASSO:
Leve a imagem até ficar do lado da sinopse como desejado (esquerda ou direita) e depois selecione tudo e clique em " ", como indicado na imagem abaixo:


OBS: Quando dão um CTRL+C e CTRL+V pode ser que dê errado (clique em VISUALIZAR antes de publicar para ver como ficou a sinopse, se estiver com fundo branco, use word), então eu uso o word, colo e depois copio para o blog e faço todo este processo.

Espero ter ajudado muita gente novamente, por favor, enviem um e-mail com o tutorial que desejam, vou amar ajudar e tirar dúvidas de vocês =D

Beijão e até mais!

OBS: Favor não copiar, dê sempre os créditos, este blog está sobre licença e você pode ser acusado de plágio.
Comentários
2 Comentários

2 comentários:

  1. Fiquei mó empolgado quando vi a capa e sinopse do meu livro de exemplo, kkkk.
    Dica bem útil para blogueiros, ótima ideia, Tamires!

    ResponderExcluir
  2. Nossa Tamires, que legal!
    Eu sofro há tempos para fazer isto no meu blog e nunca consigo...
    Vou tentar deste jeito e vê se vai.
    Bjus
    Lia Christo
    www.docesletras.com.br

    ResponderExcluir

Obrigada pela visita, seu comentário me deixa muito feliz e pode ter certeza, vou retribuir com muito carinho!