Pullquote

DESTACAR TEXTO EN POST
"Un pullquote es un elemento, normalmente de texto, que se destaca dentro de una entrada".




Recuerden descargar su plantilla antes de realizar algún cambio en la misma.

Generalmente este estilo sirve para resaltar una frase de un texto, enfatizar un concepto. Lo ocupan en Diarios, revistas, etc.

En esta entrada podrán encontrar un ejemplo de Pullquote y los pasos para adaptarlo a su Blog.

PASOS:

1. Abrir su administrador de Blogger: www.blogger.com
2. Ir a la pestaña Diseño/Edición HTML
3. Buscar con CTRL + F, la siguiente parte del código: ]]></b:skin>
4. Pegar el siguiente código antes de ]]></b:skin>

.pullquote {
width: 150px;
float: right;
padding:20px 10px 10px 30px;
margin:10px auto auto 10px;
background-color:transparent;
background-image: url(http://img47.imageshack.us/img47/457/comillasil6.gif);
background-repeat: no-repeat;
background-position: 2px 15px;
color:#990000;
border:0px solid #cccccc;
text-align:left;
font-weight:normal;
font-size:24px;
font-style:none;
font-family:impact;
line-height:24px;
}
.pullquote:first-letter {
color:#300C06;
display:block;
font-size:50px;
font-family:arial;
font-weight:bold;
}

5. Guardar la Plantilla
6. Creen una entrada con texto y al iniciar este pegar el siguiente código:
<span class="pullquote">Colocar aquí el texto que desean resaltar</span>


Fuente: Pullquote. Entradas con Estilo

Recuerden que cada miércoles antes de la clase los trabajos prácticos son calificados y los que no los tengan en su Blog van aminorando su nota...

OTRA OPCIÓN:

Esta es otra opción para definir un pullquote. El siguiente código fue tomado de Mandarin Design.

CSS Magazine Style Pullquotes in Orange

Los PASOS a seguir son sencillos y el código se incluye directamente en Creación de Entradas.

Por lo tanto:


1. Ir a Creación de Entradas y pegar el siguiente código:
<div style="float: right; width: 250px; margin-top: 10px; margin-bottom: 15px; margin-left: 10px; padding-bottom: 10px; line-height: 24px; color: rgb(255, 102, 0); text-align: right;font-family:Arial,Helvetica,Georgia;font-size:28px;"><span style="color:gold;">...Colocar</span> en este espacio <b>el texto</b> el texto<span style="color:orange;"> a resaltar...</span>
</div>

2. Cambiar en donde dice texto, con las frases que desan colocar en el Pullquote.
3. Publicar la entrada.

 
ir arriba