Exemplos CSS de citação para blog e site

por: , em: Informática,
tags:

Citaçao No Blogger

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;
}

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;
}

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.

Citaçao No Blogger

! 2 comentários até o momento

Escreva O Seu Comentário!

Ficou com alguma dúvida?
Tem uma crítica construitiva ou uma sugestão maneira?
Escreva ai embaixo, mas não maltrate o português, por favor!

  1. Queli comentou: responder

    Olá, como faço para ver como são os modelos antes de instalar no meu blog?

  2. Jhon Ferreira. comentou: responder

    Muito bom!