Mostrando entradas con la etiqueta Trucos Texto. Mostrar todas las entradas
Mostrando entradas con la etiqueta Trucos Texto. Mostrar todas las entradas
Para que Blogger muestre el código en una entrada sin necesidad de usar textarea hemos de sustituir los carácteres de apertura y cierre < > por sus entidades equivalentes, para la apertura usamos & lt ; y para el cierre & gt ; escrito sin espacios (he tenido que ponerlo separado para que Blogger no lo interprete). Yo suelo hacerlo siempre a mano, copiando y pegando, pero si os resulta más fácil podéis usar un convertidor de cadenas como este de Aulambra o el de Chuano que es el que yo uso habitualmente.
¿Verdad que no es difícil?
Rosa in memoriam
Acabo de encontrarme con este "truquillo" en Beautiful Beta,
dado mi escaso conocimiento del inglés hube de usar el traductor de
google para la página, ya sabemos todos como traduce el "invento" así
que esto demuestra que el "truquillo" es muy fácil de entender y
aplicar.
Supongo que habéis visto en este post que la primera letra es más grande y que queda el "efecto tipo revista" pues esto es lo que vamos a conseguir aplicando este código:
Tenéis que colocarlo en vuestra plantilla - Html- justo antes de ]]></b:skin>
Cada vez que empezáis un post nuevo si queréis que tenga este efecto hay que colocar <span class="dropcaps"></span> e incluir la primera letra entre <span class="dropcaps"> y </span>
Por supuesto eso sería un poco engorroso, para no tener que hacerlo cada vez que publicamos podemos ir a: "editar plantilla - opciones - formato -plantilla de entrada", y en la cajita de "plantilla de entrada" pegamos el ultimo código (<span class="dropcaps"></span>) esto aparecerá cada vez que publiquemos una nueva entrada, sino queremos el "efecto revista" en una de las entradas, borramos ese código y editamos con normalidad.
Nota: En vista previa no funciona.
Espero os sea útil, si surge algún problemilla me lo comentáis por si puedo ayudaros.
AÑADIDO:
Os dejo otro código donde la letra se verá un poco más pequeña (como la quetengo tenía en el blog) pero que también queda guapo.
Colocar esto dentro del CSS de la plantilla, como antes os dije, por ejemplo, antes de]]></b:skin>
Cuando escribas tus post añades <span class="firstcap">PRIMERA LETRA AQUI</span> y como antes expliqué podéis pegarlo o no en la caja de "plantilla de entrada"
Supongo que habéis visto en este post que la primera letra es más grande y que queda el "efecto tipo revista" pues esto es lo que vamos a conseguir aplicando este código:
.dropcaps { float:left;
color: #ddd;
font-size:100px; line-height:80px;
padding-top:1px;
padding-right:5px; }
Tenéis que colocarlo en vuestra plantilla - Html- justo antes de ]]></b:skin>
Cada vez que empezáis un post nuevo si queréis que tenga este efecto hay que colocar <span class="dropcaps"></span> e incluir la primera letra entre <span class="dropcaps"> y </span>
Por supuesto eso sería un poco engorroso, para no tener que hacerlo cada vez que publicamos podemos ir a: "editar plantilla - opciones - formato -plantilla de entrada", y en la cajita de "plantilla de entrada" pegamos el ultimo código (<span class="dropcaps"></span>) esto aparecerá cada vez que publiquemos una nueva entrada, sino queremos el "efecto revista" en una de las entradas, borramos ese código y editamos con normalidad.
Nota: En vista previa no funciona.
Espero os sea útil, si surge algún problemilla me lo comentáis por si puedo ayudaros.
AÑADIDO:
Os dejo otro código donde la letra se verá un poco más pequeña (como la que
Colocar esto dentro del CSS de la plantilla, como antes os dije, por ejemplo, antes de]]></b:skin>
SPAN.firstcap {
font-size:250%;
font-weight:bold;
color:#000000;
float:left;
line-height:30px;
width:0.75em;
}
Cuando escribas tus post añades <span class="firstcap">PRIMERA LETRA AQUI</span> y como antes expliqué podéis pegarlo o no en la caja de "plantilla de entrada"
Un pullquote es una especie de cita o nota que se añaden a los post para
resaltar alguna idea o algo que queramos destacar dentro del texto.
Para lograr este efecto tan bonito hemos de andar con el CSS de la plantilla.
Localizamos esta parte en el HTML de nuestra plantilla:
Para lograr este efecto tan bonito hemos de andar con el CSS de la plantilla.
Localizamos esta parte en el HTML de nuestra plantilla:
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
Y la sustituimos por esta otra:
.pullquote {
float: right;
width: 150px;
margin: 5px 5px 5px 10px;
padding: 3px 0;
font: Verdana, sans-serif;
color: #555;
text-align: center;
font-size: 1.4em;
border-top: 3px double #ccc;
border-bottom: 3px double #ccc;
}
.pullquote p {
padding: 0;
margin: 0;
}
Se puede cambiar el color del borde y del texto, modificando la parte que está destacada de otro color en el código.
Hay que colocar este otro código en cada entrada que se publique, para que sea más fácil y cómodo podemos copiarlo y pegarlo en Opciones - Formato - Caja de Plantilla de entrada, así saldrá automáticamente en cada creación de entrada, sino queremos usarlo en alguna de ellas, eliminamos el código y listo.
Hay que colocar este otro código en cada entrada que se publique, para que sea más fácil y cómodo podemos copiarlo y pegarlo en Opciones - Formato - Caja de Plantilla de entrada, así saldrá automáticamente en cada creación de entrada, sino queremos usarlo en alguna de ellas, eliminamos el código y listo.
<blockquote class="pullquote"><p>...Texto que va dentro del pullquote...</p></blockquote>
<p>Texto del post...
Si no te gusta para nada el efecto subrayado de tus links, puedes hacer que desaparezca fácilmente.
Sitúate en tu plantilla HTML y localiza esta parte (está casi al principio antes de Header), cambias "underline" por "none" y ya tienes tus link sin subrayar.
Sitúate en tu plantilla HTML y localiza esta parte (está casi al principio antes de Header), cambias "underline" por "none" y ya tienes tus link sin subrayar.
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}
/* Header
-----------------------------------------------
Con este código puedes hacer aparecer un texto añadido por ti, cuando
pones el cursor sobre un enlace de texto.Es sencillo de realizar y
puedes aportar alguna información adicional sobre dicho enlace.
Al enlace le agregamos la propiedad "title" y la propiedad "alt", para que el texto adicional sea visible en IE y Firefox, seguido del texto que queremos que aparezca en el cuadro de texto, en este caso será (Un blog con muchos trucos).
El código sería este:
<a href=elescaparatederosa.blogspot.com"target="_blank"/javascript/" title="Un blog con muchos trucos" alt="Un blog con muchos trucos">El escaparate</a>
Y así quedaría (fijaros en el cuadradito de texto que sale):
El escaparate
Al enlace le agregamos la propiedad "title" y la propiedad "alt", para que el texto adicional sea visible en IE y Firefox, seguido del texto que queremos que aparezca en el cuadro de texto, en este caso será (Un blog con muchos trucos).
El código sería este:
<a href=elescaparatederosa.blogspot.com"target="_blank"/javascript/" title="Un blog con muchos trucos" alt="Un blog con muchos trucos">El escaparate</a>
Y así quedaría (fijaros en el cuadradito de texto que sale):
El escaparate
Suscribirse a:
Entradas (Atom)

