Se anuncia en el blog de Blogger in Draft que están disponibles 40 fuentes más para utilizar en nuestro blog, siempre que estemos utilizando una plantilla del Diseñador de Blogger.
Para poder utilizar las nuevas fuentes, hemos de acceder a nuestro escritorio de Blogger desde Blogger in Draft, pues aún están en periodo de pruebas.
Una vez en nuestro escritorio, desde Diseño vamos al Diseñador de plantillas escogemos la opción Avanzado y allí veremos las nuevas fuentes disponibles, así como usarlas en la parte de nuestro blog que nos interese (Título de entradas, título del blog, pestañas, etc...).
[+/-] |
Nuevas fuentes disponibles en el Diseñador de Blogger |
[+/-] |
Señalizar el código que añadimos en la plantilla |
La solución sería señalizar ese código en la plantilla para poder localizarlo posteriormente sin problemas.
También he visto a menudo emplear esta señalización en las plantillas de forma incorrecta. Muchos cometen un error que si bien Blogger a veces admite (guarda los cambios sin aparente problema) en ocasiones puede provocar que ciertas cosas en el blog dejen de funcionar correctamente.
Hay dos formas de marcar cualquier cosa que añadamos en la plantilla para reconocerla después, una que se emplea solamente en la parte del CSS y otra que se usa en la parte de HTML.
¿Como distingo el CSS del HTML en la plantilla?
El CSS de nuestra plantilla es todo el código de la misma que está incluido entre las etiquetas <b:skin><![CDATA[/* y ]]></b:skin>.
Desde esta última etiqueta (]]></b:skin>) hasta el final del código de la plantilla podríamos decir que eso es el código HTML.
Señalizar lo que añadimos en el CSS
Supongamos que voy a añadir unas líneas de código en la parte del CSS, si nos fijamos en una plantilla original de Blogger vemos que, por ejemplo, cuando comienza la parte de comentarios hay algo así:
/* Comments
------------------------------------------------------- */
Esto es una señal que nos indica que ahí es donde está incluido todo el código CSS que necesitamos manejar para el diseño de los comentarios.
Si estamos siguiendo una entrada para incluir cualquier cambio en el blog y se nos indica "colocar en la parte del CSS", localizaríamos entonces la etiqueta ]]></b:skin> y colocaríamos ese código antes de la misma, de esta manera estaremos seguros de que va en el lugar correcto.
Si además es un código eventual o sencillamente nos gusta tener todo controlado, lo marcamos de la forma que antes indicaba.
Supongamos, por ejemplo, que es algo para controlar el gadget de "últimos comentarios", podríamos poner a comienzo de ese código algo así:
/* Gadget de últimos comentarios
------------------------------------------------------- */
E incluso algo menos complicado que servirá igualmente a nuestros propósitos:
/* Gadget de ultimos comentarios */
Señalizar lo que añadimos en el HTML
Como ya dijimos antes, desde la etiqueta ]]></b:skin> hasta el final del código de la plantilla podríamos decir que eso es el código HTML, aunque con la única precaución de no incluir nada entre las etiquetas </head> y <body>.
Para señalizar cualquier cosa que queramos incluir en la parte del HTML, lo haríamos de esta manera:
<!-- Script de últimos comentarios -->
Y para asegurarnos aún más de tenerlo bien controlado, incluso podrías marcar el código a comienzo y principio de este:
<!-- Inicio del script de últimos comentarios -->
AQUI IRIA EL CODIGO QUE AÑADIMOS NUEVO
<!-- Final del script de últimos comentarios -->
Lo hacemos así porque los navegadores no interpretarán lo que esté incluido dentro de esas etiquetas, es decir, no se mostrará en la "vista real" del blog.
Esto podría sernos también muy útil si, por ejemplo, queremos trasladar algo de sitio en la plantilla de forma que después podamos recuperar la posición original.
Imaginemos que quiero colocar el enlace a "comentarios" debajo del título de mis entradas, pero no quiero perderlo al pie de las mismas por si algún día me interesa volver a mostrarlo ahí de nuevo.
Tendríamos entonces que localizar el código que corresponde al enlace y copiarlo para pegarlo donde nos interesa, pero antes marcamos el código original de esta manera:
<!-- Inicio de enlace de comentarios a pie de entrada
AQUI IRIA EL CODIGO ORIGINAL DEL ENLACE A COMENTARIOS
Final del enlace de comentarios a pie de entradas -->
De esta forma si alguna vez queremos recuperar el enlace a comentarios a pie de entradas solo tendríamos que eliminar lo añadido para que este se volviera a mostrar en su sitio, ya que lo único que habríamos hecho sería evitar que el navegador lo interprete y lo muestre en el blog.
Publicado por Anónimo a las 12:49 h. Etiquetas: Datos utiles, Navegadores
[+/-] |
Dividir la cabecera del blog en las plantillas de Diseño |
Habíamos visto hace algún tiempo como dividir el header (cabecera) del blog para las plantillas anteriores a las del Nuevo Diseñador de Blogger.
En esta entrada veremos como hacer lo mismo para las plantillas del Nuevo Diseñador, lo que nos permitirá conservar el header del blog y al mismo tiempo, disponer de un espacio para añadir un gadget a su izquierda, que servirá para incluir un buscador, un banner de publicidad, enlaces a redes sociales, etc.
[1] Colocamos unas líneas en el CSS de la plantilla, siempre antes de ]]></b:skin>, y en este caso estaría bien localizar esto:
/* Header
----------------------------------------------- */
Y justo debajo colocar el CSS necesario:
.header {width:50%;
float: left;
margin:0 auto 2% ;
}
.header2 {width:50%;
float: right;
margin:0 auto 2%;
}
[2] Vamos entonces bastante más abajo en el código de la plantilla y localizamos esta parte del código:
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>
</b:section>
</div>
Añadimos ahí lo que muestro destacado en negrita:
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>
</b:section>
<b:section class='header2' id='header2' showaddelement='yes'/>
<div style='clear: both;'/>
</div>
[3] Guardamos cambios y comprobamos la vista en Diseño, donde ya deberíamos ver la cabecera dividida en dos partes:
[4] Una vez añadimos un nuevo gadget al lado del header, veremos algo como esto en la vista del blog:
[5] Como vemos en esta imagen de ejemplo, el título del blog al tener un tamaño de texto muy grande, se ve en dos líneas. Corregimos esto desde el Diseñador de Blogger, donde pinchando en "Avanzado" - "Titulo del blog" podemos ajustar el tamaño del título:
El resultado sería entonces algo así:
Esto sucede porque lo que pretendemos es que los dos gadget, cabecera y el nuevo añadido, sean iguales en sus proporciones.
También podríamos necesitar que uno de los dos tuviese mayor tamaño que el otro, según lo que vamos a colocar ahí, si por ejemplo el gadget header va a ser mayor que el gadget header2, quizá no necesitemos reducir el tamaño del texto desde el Diseñador.
En caso de querer modificar las medidas de cualquiera de los dos gadget, lo haríamos en el CSS añadido en el paso [1] cambiando el valor de width:50%; y teniendo en cuenta las proporciones, es decir, si al header le damos un width mayor, reducimos en header2 el mismo porcentaje que hemos añadido en header o viceversa.
Publicado por Anónimo a las 23:11 h. Etiquetas: Plantillas, Trucos Blog
[+/-] |
Apture Toolbar |
Se llama Apture y en esta entrada veremos algunas de sus características y las instrucciones para incluirla en el blog.
La barra se mostrará en la parte superior de la pantalla y permanecerá oculta hasta que no se utilice la barra de desplazamiento (scroll), con lo que puede usarse sin problemas aún estando utilizando la Nabvar de Blogger.
Desde el botón correspondiente podremos compartir la página en la que estamos en FaceBook, Twitter y enviarla por correo.
Incluye un buscador con jQuery, que facilita que nuestros visitantes no tengan que salir de la página cuando buscan otro contenido.
Cuando el visitante selecciona con el ratón una palabra o una parte del texto de la entrada, aparecerá un pequeño botón que dice "Search" (Buscar), cuando pinche ahí los resultados se mostrarán en la ventana del buscador de la barra.
Se puede personalizar con nuestro propio logotipo (no más ancho de 35 pixeles) o incluir un texto con el título o lo que queramos de nuestro blog.
Veamos antes de nada un ejemplo de como funciona: Ver ejemplo online
Configuración e instalación
[1] Iremos a la página de www.apture.com.
[2] Introducimos la url del blog y hacemos click en el botón en "Start now".
[3] En la página siguiente tendremos que añadir algunos datos, escoger el color de la barra y subir el logo desde nuestro PC si vamos a añadirlo.
[4] Los cambios los iremos viendo en una "vista previa".
Una vez estemos conformes con el resultado, pinchamos en "Get My Bar" y copiamos el código obtenido.
[5] En nuestro panel de Blogger vamos a Edición HTML y sin expandir artilugios localizamos la etiqueta </body>.
Pegamos el código obtenido sobre esa etiqueta.
Consejo:
Publicado por Rosa a las 11:53 h. Etiquetas: Gadget, Utilidades Online