Para por uma citação estilizada no seu site é só adicionar o código desejado na seção de CSS. Para por no blogger entre em layout, vá em editar HTML e procure (CTRL+F) por blockquote { com e sem esse espaço. Se você achar algo delete tudo, se não achar cole os códigos exemplos acima de ]]>: .
Citação Clássica
blockquote {
font: 14px/20px italic Times, serif;
padding: 8px;
background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px;
background-image: url(http://gadarf.googlepages.com/openquote1.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote span {
display: block;
background-image: url(http://gadarf.googlepages.com/closequote1.gif);
background-repeat: no-repeat;
background-position: bottom right;
}
font: 14px/20px italic Times, serif;
padding: 8px;
background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px;
background-image: url(http://gadarf.googlepages.com/openquote1.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote span {
display: block;
background-image: url(http://gadarf.googlepages.com/closequote1.gif);
background-repeat: no-repeat;
background-position: bottom right;
}
Citação Moderna
blockquote {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}
Citação Divertida
blockquote {
font: 18px/30px normal Tahoma, sans-serif;
padding-top: 22px;
margin: 5px;
background-image: url(http://gadarf.googlepages.com/openquote3.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 65px;
}
blockquote span {
display: block;
background-image: url(http://gadarf.googlepages.com/closequote3.gif);
background-repeat: no-repeat;
background-position: bottom right;
}
Citação Charmosa
blockquote.style4 {
font: 14px/20px italic Times, serif;
padding-left: 70px;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 10px;
background-color: #dadada;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(http://gadarf.googlepages.com/openquote4.gif);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}
Citação Código
blockquote.style5 {
font: 12px/18px normal "Courier New", sans-serif;
padding-left: 70px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #000;
color: white;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(http://gadarf.googlepages.com/openquote5.gif);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote.style5 div {
padding-right: 50px;
display: block;
background-image: url(http://gadarf.googlepages.com/closequote5.gif);
background-repeat: no-repeat;
background-position: bottom right;
}
Citação Balão
blockquote {
border-left: 0px solid #c0c0;
background: #eeeeee url(http://gadarf.googlepages.com/bgblockquoteht8ch6.gif) repeat-x;
background-position: bottom;
padding: 15px;
margin: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
padding-top: 5px;
margin-bottom: 10px;
line-height: 100%;
font: normal .9em verdana, helvetica, sans-serif;
color: #666666;
}
border-left: 0px solid #c0c0;
background: #eeeeee url(http://gadarf.googlepages.com/bgblockquoteht8ch6.gif) repeat-x;
background-position: bottom;
padding: 15px;
margin: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
padding-top: 5px;
margin-bottom: 10px;
line-height: 100%;
font: normal .9em verdana, helvetica, sans-serif;
color: #666666;
}
Citação Celestial
blockquote {
font: 12px/170% Verdana, Arial, Helvetica, sans-serif;
margin-top: 10px;
margin-left: 40px;
padding-left: 15px;
padding-right: 15px;
border-top: 5px solid red;
background: rgb(248,248,248);
}
Após escolher e configurar no seu layout; para usar no blogger basta selecionar o texto e clicar no botão em destaque abaixo. Para usar no seu site é só por o texto que deseja ser citado entre as tags
. É isso, se tiver duvidas basta dizer.
. É isso, se tiver duvidas basta dizer.
Olá, como faço para ver como são os modelos antes de instalar no meu blog?
Muito bom!