15 setembro 2011

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!

5 comentários:

Nayara Felix disse... [Responder]

Oiiie jessica silva meu template esta pronto..
entra hoje umas 16:00 pra nois conversar ok ?
seeh vc nao puder no proximo sabado nois conversa ok ?
beijos
nayara

Bruna disse... [Responder]

Eu fiz assim... Mas como faço a borda rosa?

Trashy Splash

Julia Araujo disse... [Responder]

eu nao achei nenhum dos dois códigos :(

Poty Padalecki disse... [Responder]

Amei Amei Amei seu blog!!
Passa la no meu
http://whoslaughingnow-potypadalecki.blogspot.com/

awn disse... [Responder]

Muito obrigada! Ah,e peguei a imagem que você disponibilizou no post

Se Plagiar Vai Dançar!
myfreecopyright.com registered & protectedProtected by Copyscape Online Plagiarism Checker