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


http://2.bp.blogspot.com/-QqiL3blGpMc/TwdptbSSuVI/AAAAAAAAE-Y/ZJ-o2vQ3pjA/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 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 R. disse... [Responder]

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

Trashy Splash

Julia Vieira 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/

Luanda Blanco 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