Blockquote personalizado: Aprenda como personalizar seu Blockquote

Hey estou de Volta, primeiramente quero pedir desculpa por passar tanto tempo sem postar, é que estou trabalhando muito, e to meio sem tempo pra net.

Mas cá estou eu, vim trazer mais um tutorial pra vocês usarem em seus blogs.

Estão vamos ao que interessa,

Vá em Design>  Editar HTML > precione CTRL+F e pesquise por:

.post blockquote {

Agora vamos adicionar o código, copie o seguinte código e cole abaixo de .post blockquote {

Assim:

.post blockquote {

        border: 1px solid #E4CAFF;

        color: #00000;

        background: #f6f7fd url( 'URL-DA-IMAGEM' ) repeat-y top left;

        padding: 10px 40px 10px 10px;

        font-size: 12px;

        text-align: justify;

        width: 80%;

}

Bom, caso você não ache .post blockquote {

É so pesquisar por:

/* Posts

----------------------------------------------- */

E colocar o seguinte código

.post blockquote {

        border: 1px solid #E4CAFF;

        color: #00000;

       background: #f6f7fd url( 'URL-DA-IMAGEM' ) repeat-y top left;

        padding: 10px 40px 10px 10px;

        font-size: 12px;

        text-align: justify;

        width: 80%;

}

Ficará assim:

/* Posts

----------------------------------------------- */

.post blockquote {

        border: 1px solid #E4CAFF;

        color: #00000;

        background: #f6f7fd url( 'URL-DA-IMAGEM' ) repeat-y top left;

        padding: 10px 40px 10px 10px;

        font-size: 12px;

        text-align: justify;

        width: 80%;

}

Pronto agora vamos as modificações:

Em Azul>Temos a Borda: você pode alterar a cor o tamanho e o tipo de Borda

Em Laranja> Temos a cor e o Tamanho da Fonte que ficara dento do Blockquote

Em Roxo> Temos a cor do Background, Caso você não queira usar imagem

Em Verde> Temos o Background:imagem que você criou em programas de edição, tipo Photofiltre, Photoshop ou Photoscape, depois de criada Hospede-a e copie e cole o link onde está escrito URL-DA-IMAGEM.

Em Vermelho> Temos Padding que representa as margens de cima de baixo e dos lados da caixa Blockquote

E por ultimo

Em Marrom> Temos width que representa o tamanho total da caixa Blockquote

Caso queiram usar essa mesma imagen que usei, é so pegar o código abaixo e colar onde esta pedindo URL-DA-IMAGEM

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6P224opyssQk-yoiAz6LrwjgFa23f_NoY1lgoHQ2WcXNy6KUbMnXL4-ANhdhEMnLz0foQmYMKTuwux_6zeSLOlTfLw46MP6pGfP8EEQOC-esU0eaqX4JzkmeECRoN7CVSgKK_1FnQSOE/s1600/fundo+blockquot4.png

Depois de ter feito as modificações visualize se estiver certinho salve seu Template!

Espero que tenham entendido, caso tenham alguma duvida é só comentar.

Bejos e ate a Proxima!