Photobucket

18 de jan. de 2008

Pradonizando Blockquote

Já imaginou se fosse possível destacar sempre de um mesmo jeito trechos do seu blog? Que sempre que você quisesse chamar a atenção para determinada coisa ela aparecesse em todos os posts da mesma forma?
Seu blog ficaria com um padrão o que o deixaria bem mais bonito, não seria aquela bagunça de "destaques".
Isso é possível e é bem simples, gente! Através do blockquote, que eu uso muito por aqui. Não sei se tem um tempo certo para ele, mas é a aspas que aparece na barra de ferramentas do editor de postagens do Blogger. Ou seja, isso:



Prazer, eu sou um blockquote!

Mexendo no html do código, como eu vou ensinar agora, vamos lá!

1º Passo

Vá até o Editor de Html do seu blog - não precisa expandir modelos widgets , e encontre esse trecho do blog:




/* Posts
-----------------------------------------------
*/
h2.date-header {
text-align: left;
margin: 10px 0 0 10px;
}
.post {
margin: 10px 10px 60px 20px;
padding-bottom:3.0em;
background: url(http://i257.photobucket.com/albums/hh226/criarecria/marcam1.jpg) no-repeat top left;
}
.post h3 {
background: url(http://i257.photobucket.com/albums/hh226/criarecria/marcam1.jpg) no-repeat top right;
margin: 5px 0 10px 10px;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:2.0em;
text-align: center;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;
}
.post p {
margin:0 0 .75em 5px;
line-height:1.6em;
}
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
background: url(http://i257.photobucket.com/albums/hh226/criarecria/divam1.jpg) no-repeat center bottom;
}
.comment-link {
margin-$startSide:.6em;
}
.post img {
padding:4px;
border:1px dotted $bgcolor;
}
.post blockquote {
margin:1em 20px;
}

.post blockquote p {
margin:.75em 0;
}

2º Passo

Substitua o que está em negrito pelo trecho abaixo:

.post blockquote {
background: #FFFFFF;
padding:0 5px 10px 10px;
margin:10px 5px 10px 10px;
font-size: 90%;
border: 1px dotted #000000;
}

3º Passo
Agora é hora de personalizar o seu blockquote.

Background: Aqui é o fundo do seu blockquote, você pode por uma cor, ou uma imagem. Se preferir pode também por uma cor e uma imagem. Para saber como você pode modificá-lo clique aqui.
Padding: distância entre os conteúdo do blockquote e as bordas.
Margin: distância entre o blockquote e as bordas da coluna de post.
Font-size: tamanho da fonte dentro do blockquote. (90% é o que está aqui)
Border: borda do blockquote. Para saber como você pode modificá-lo clique aqui.


ATENÇÃO: Lembre-se que para vizualizar antes de salvar é necessário que na página inicial do seu blog tenha um blockquote.


4º Passo

Quando estiver do jeito que você queira é só salvar, e prontinho!
Sempre que quiser que tenha esse destaque, selecione o trecho e clique na aspas do editor, ou use as tags
e para fechar
.

É isso, gente! Deu para entender, qualquer coisa já sabem, só perguntar!

1 Comment:

Anônimo said...

Genial fill someone in on and this enter helped me alot in my college assignement. Thank you as your information.