- ▲▼ 5 trucos Blogger para las listas con viñetas
Antes de entrar al detalle de estos 5 trucos para modificar el aspecto de las listas con viñetas de Blogger, hay que aclarar para los principiantes que nos referimos a los listados con puntos que puedes crear dentro de un post, que de normal van precedidos de puntos negros y los párrafos todos pegados. Con estos 5 trucos vamos a aprender a separar más el texto de la lista, a que los párrafos estén en una fuente itálica, a quitar los puntos negros y a cambiarlos por cuadrados o por círculos transparentes. En realidad todos estos "trucos" son la aplicación de diferentes propiedades del código CSS, un lenguaje informático con el cual podemos modificar el aspecto de nuestros contenidos.
Truco 1. Quitar las viñetas de todas las listas de todos los posts blog.
Tanto este truco como los siguientes que vamos a ver hacer se basan en la modificación de la plantilla, así que antes de nada vamos al editor de Blogger y abrimos nuestra plantillas (guarda una copia por si acaso). Una vez que guardes comprueba que todo ha quedado bien.
Ve a la parte de la plantilla que tiene el código CSS <b:skin>, expande esa zona.
Bajamas, pasando las zona de Variables Definitions, y entra a la parte donde está el código CSS normal.
Dentro del código CSS busca el apartado /* Widgets ------------------------------- */
Dentro del apartado de los "widgets" bus el siguiente código y guarda la plantilla.
ul li {list-style-type:none;}
Truco 2: Poner en cursiva todas las listas dentro de los posts.
Este es una continuación del anterior truco, lo único que cambia es el código que vamos a pegar que será. todas las listas Quitar las viñetas de algunas listas del blog.
ul li {font-style:italic;}
Truco 3: Cambiar el tipo de viñeta de la listas.
Aquí podemos elegir por añadir un círculo, un disco o un cuadrado, que son las tres posibilidades que hay para las listas ordenadas, aparte del punto. Tened en cuenta que esto se cambiará en principio en todas las listas del blog, las nuevas y las que ya hayas escrito en el pasado.
ul li {list-style-type:circle;}
ul li {list-style-type:disc;}
ul li {list-style-type:square;}
Truco 4. Separar el texto de las listas de viñetas.
Si queremos que queden el texto más separado que en el resto del documento podemos usar otra propiedad de CSS, en la que colocaremos el valor de separación deseado. 1.0 es una separación estrecha, un 1.5 da más amplitud y un 2.0 es una separación doble, pudiendo adaptar el valor tanto como quieras. Debes tener en cuenta que no está separándote los elementos, sino todas las líneas del texto.
ul li {line-height:1.8;}
Antes de pasar al cuarto y último truco vamos a intentar colocar todo lo que hemos aprendido junto, para que veas que las instrucciones que se colocan dentro de los mismos corchetes. Por ejemplo para la imagen que tienes al inicio del post el código usado es algo así.
ul li {list-style-type:square;
font-style:italic;
line-height:1.8;}
Truco 5. Vamos a explicar como usar todo lo que hemos hecho antes pero sólo en las listas que a nosotros nos interese y no en todas. Ahora tendremos que usar dos códigos uno CSS y uno HTML. El primero lo colocamos igual que antes dentro de la plantilla, en el código CSS, en la sección de los "posts". Sería el mismo código de antes pero cambiando ul por #lista (Sí, es como si fuera un hastag de Twitter, pero en este caso estamos usando una identidad de CSS).
#lista li {list-style-type:square;
font-style:italic;
line-height:1.8;}
¿Bien? El código HTML se aplica dentro del post. Es decir, con el cambio que hemos hecho antes no veras ningún cambio en el blog de Blogger, pero cuando escribas una lista, si le colocas el identificador entonces el aspecto de la lista cambiará.
Desde un post creamos una lista con viñetas, con su contenido.
Entras en el código HTML. normal y buscas la parte donde aparece <ul>.
Le añadimos la identidad, es decir que cambiamos el código <ul> por el siguiente.
<ul id="lista">
Antes de terminar, quiero aclarar que estos trucos son para principiantes para poder hacer las modificaciones ya que no requieren borrar nada de la plantilla. Para un desarrollo más profesional y que quede el código más limpio habría que buscar en cada plantilla el sitio exacto en el que se está codificando el formato de las listas. Por ejemplo en la plantilla Watermark de Blogger, creada por Joshn Peterson, el formato CSS de estas listas está en indicado en el apartado de Widgets, a través de los siguientes selectores:
.widget .post-body ul
.widget .post-body ul li
Para que quede un código más limpio los cambios es mejor realizarlos en esta parte de la plantilla eliminando las características que no queramos para las listas del blog. Espero que las indicaciones os resulten útiles, aunque modificando el código CSS se pueden realizar un montón de cambios en las listas, como por ejemplo añadirles un fondo de pantalla con una imagen, un marco, darles márgenes, hacer que el texto tenga color, cambie de tamaño al pasar o sea más grande.
- ▲▼ Activar las vistas dinámicas de Blogger y enlazarlas desde el menú
Muchos usuarios de Blogger tienen la idea de que las "Vistas dinámicas" son sólo una plantilla más que puedes elegir para el blog, que permite a los usuarios ordenar los resultados de varias formas, pero que a penas puedes personalizar. Pero no es así al 100%, de hecho un blog puede tener la plantilla que a ti te guste y al mismo tiempo las Vistas dinámicas activadas. Esto es muy fácil de hacer, así que aprovechando el artículo aprenderemos también como enlazar aquellas Vistas dinámicas que nos interesen y sólo aquellas que nos interesen.
1. Activar las vistas 7 dinámicas de Blogger.
Entra en el editor de Blogger y ve a Configuración, allí al apartado otros.
Activa el feed del blog en modo completo. Y guarda el cambio de la configuración.
Con esto es suficiente, ya se puede acceder a las vistas dinámicas colocando la URL en el navegador.
2. Enlazar las vistas dinámicas de Blogger desde el menú
Bien, ya sabemos que las vistas dinámicas están activadas, pero nuestro blog se sigue viendo igual porque no hemos cambiado la plantilla. ¿Cómo podemos acceder a esta presentación dinámica del blog? Pegando la dirección URL de la vista dinámica en el navegador, pero como nuestros lectores no van a recordar como se hace esto, lo lógico es crear un enlace para que puedan ir hasta las vistas dinámicas.
Como existen 7 vistas dinámicas diferentes cada una de ellas tendrá su propia URL y enlace.
nombredelblog.blogspot.com/view/classic
nombredelblog.blogspot.com/view/flipcard
nombredelblog.blogspot.com/view/magazine
nombredelblog.blogspot.com/view/mosaic
nombredelblog.blogspot.com/view/sidebar
nombredelblog.blogspot.com/view/snapsnot
nombredelblog.blogspot.com/view/timeslider
En el caso de haber comprado un dominio propio se hace igual, pero lo lógico es enlazarlo con el dominio, de forma que por ejemplo, para este blog y la vista classic quedaría así:
http://www.blogeninternet.com/view/classic
¿Y si tienen que enlazar todas? No, sólo las que te interese.
a) Ve al apartado de Página, dentro del editor de Blogger.
b) Crea una nueva página en el blog, del tipo Dirección Web, y copia sólo aquella dirección que te interese.
c) A partir de este momento tendrás un nuevo enlace en tu menú principal que va a la página dinàmica que quieras, y así puedes ver por ejemplo tu blog en formato Flipcard. Mosaico o Magazine.
3. Personalizar el menú de las Vistas Dinámicas de Blogger
El problema que tendrás es que cuando entres a la vista dinámica. Encontrarás que en el menú desplegable de la izquierda vienen todas las vistas dinámicas. Entonces para eliminar este acceso sencillo tienes dos opciones básicas.
- Quitar el menú desplegable de las Vistas Dinámicas. Al menú principal y a otros no les afectará para nada.
- Quitar del menú desplegable aquellas vistas dinámicas que no te gustan y dejar las que si te gustan.
Ambas opciones son sencillas de hacer, ya que sólo tienes que copiar unos códigos CSS en las opciones avanzadas del Editor de Plantillas de Blogger. Puedes ver la solución en este blog sobre Blogger, que es de donde he encontrado la información.Para ver a lo que me refiero en este articulo puedes ver ahora mismo como he añadido una vista de Flipcard del blog, una opción muy interesante para visualizar un blog que tenga imágenes y para realizar búsquedas. Es algo temporal, así que si has entrado a través de una búsqueda de Google es posible que cuando leas esto ya no este visible el enlace. Espero que os haya resultado útil.
- ▲▼ CSS: Variables Definitions en Blogger
En la estructura de la plantilla Blooger tenemos una parte dentro de la cabeza (head) que es especial de Blogger, llamada Variables Definition, que es un poco especial porque a una parte de ella la puedes cambiar sin entrar en la plantilla y otra parte no. Lo primero que hay que aclarar que las Variables Definitions de Blogger son una especie de alternativa al CSS. Lo que hacen es poder hacer cambios , y que está relacionado con las siguientes partes del head, el CSS Content y el CSS Mobile. Teniendo esto claro, vamos a ver como está estructurado el código y como modificar sus valores directamente sobre la plantilla para obtener cambios en el aspecto de nuestro blog.
Vamos a trabajar directamente sobre la plantilla Simple de Blogger para que puedas seguir todas las indicaciones una por una. Si observas cada uno de los códigos tiene los mismos elementos.
Variable name. Es el nombre que debemos buscar en el código CSS de la plantilla. Si por ejemplo el nombre es body.font, en cada sitio que aparezca se asignara el formato elegido.
Description. Es el nombre que lo describe y puede verse en el Editor de Plantillas.
Type. Explica el tipo de variable que se trata, por ejemplo "font" para fuentes de texto, o "color" para el color de una fuente.
Default. Es el valor por defecto de la plantilla, de forma que si no tocas la plantilla verás que Defalult y Value son el mismo valor, pero el Default no hay que tocarlo a no ser que quieras crear una plantilla nueva. Este es el valor que utiliza el Editor de Blogger si usas la opción de "volver a los valores predeterminados".
Value. Es el valor asignado a la variable y el que modificaremos si queremos cambiar la plantilla. Por ejemplo, en el caso de que sea una fuente, se puede poner el tamaño (12px) y el tipo de fuente (Arial, Times new roman, serif... ). Para el color hay varias formas de asignar el valor, el más frecuente es un valor con seis números como este: #123456. Hay que recordar que los valores se escriben siempre entre comillas.
/* Variable definitions
====================
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#66bbdd"/>
<Group description="Page Text" selector="body">
<Variable name="body.font" description="Font" type="font" default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#222222"/>
</Group>
Con esto podrás leer con claridad cada línea y como podrás imaginar para modificar el código CSS lo habitual es sólo cambiar la propiedad Value, que es la que por ejemplo define que color vamos a asignar. El siguiente punto es que saber que hay parte de las Variables Definition que están dentro de 13 grupos (en la plantillas Simple), que además son los valores que puedes ver y cambiar desde el editor de plantillas. Estos grupos los identificarás porque se inician por la etiqueta <Group description ... > y se cierra con </Group>.
13 Grupos, con sus variables y lo que codifican.
Page Text (texto general de la página)
body.font (fuente del texto general de la página)
body.text.color. (color del texto general de la página)
Background (fondos)
body.background.color (color del fondo del "cuerpo", de la página Web)
content.background.color (color del fondo del contendor)
header.background.color (color del fondo de la cabecera)
Links (enlaces)
link.color (color normal del enlace)
link.visited.color (color del enlace cuando se ha entrado)
link.hover.color (color del enlace al pasar por encima)
Blog Title (titulo principal)
header.font (fuente de la letra del título)
header.text.color (color de la letra del título)
Blog Description (descripción del blog)
description.text.color (color del texto)
Tabs Text (Texto del menú)
tabs.font (fuente del texto del menú)
tabs.text.color (color del texto del menú)
tabs.selected.text.color (color del texto seleccionado)
Tabs Background (Fondo del menú)
tabs.background.color (color del fondo del menú)
tabs.selected.background.color (color del fondo del menú)
Post Title (título de la entrada)
post.title.font (fuente del título de las fuentes)
Date Header. (fechas de la entrada)
date.header.color (color de la fecha del post)
date.header.background.color (color del fondo de la fecha)
Post Footer (pie de página de la entrada)
post.footer.text.color (color del texto del pie de la entrada)
post-footer.background.color (color del fondo)
post-footer.border.color (color del borde del pie de la entrada)
Gadgets (Los elementos laterales extra)
widget.title.font (fuente del texto)
widget.title.text.color (color del texto)
widget.alternate.text.color (color del texto alternativo)
Images (Formato de las imágenes)
image.background.color (color del fondo)
image.border.color (color del borde)
image.text.color (color de texto que hay bajo la imagen)
Accents (Detalles)
body.rule.color (color de la línea del separador)
tabs.border.color (color del borde de las tablas)
Si has observado el código en esta primera parte verás que todas las variables que se muestran en los grupos son de 2 tipos: colores y fuentes. Sólo se pueden definir estos dos aspectos, ya que estas dos variables son las que te permite modificar a través de la Edición Avanzada del editor de plantillas de Blogger. Cosas que no puedes hacer aquí es insertar gradientes, mover el título hacia la derecha, etc. Aparte, aun quedan un montón de Variables Definition que no están dentro de los grupos y sólo puedes modificarlas desde la plantilla de forma directa, que iremos explorando en otros artículos para no alargarnos demasiado.
Cambiar la plantilla de Blogger desde Variables Definitions. Hay muchas cosas que puedes hacer, vamos a ver por poner un ejemplo la personalización del texto que aparece debajo del Título describiendo nuestro blog.
1. Hacer que la descripción de la cabecera cambie de color. En este caso, como la variable description.color.text ya existe en la plantilla de Blogger Simple, sólo tenemos que modificar el código de color gris oscuro #777777 a negro #000000. Recuerda que tienes que cambiar Value y no Default, pues si lo haces de la forma incorrecta no verás ningún cambio en el blog.
Buscamos la línea siguiente.
<Variable name="description.text.color" description="Description Color" type="color"
default="#777777" value="#777777"/>
Y lo transformamos en:
<Variable name="description.text.color" description="Description Color" type="color"
default="#777777" value="#000000"/>
2. Hacer que la descripción de la cabecera tenga formato. Ahora es un poco más complejo porque tenemos que añadir el código que nos interesa y luego unirlo a la sección normal de CSS de Blogger.
El primer paso es crear el código.
<Variable name="description.text.font" description="Description Font" type="font"
default="normal normal 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 25px Cuprum, Tahoma, Arial, sans-serif"/>
El segundo paso es pegar el código dentro del grupo.
<Group description="Blog Description" selector=".header .description">
<Variable name="description.text.color" description="Description Color" type="color"
default="#777777" value="#000000"/>
<Variable name="description.text.font" description="Description Font" type="font"
default="normal normal 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 25px Cuprum, Tahoma, Arial, sans-serif"/>
</Group>
El tercer paso es modificar el código CSS de la plantilla para que "llame" al nuevo código que hemos añadido. Para ello Buscaremos en la plantilla Simple de Blogger este código o uno equivalente si trabajas con otro template.
Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
Lo cambiamos por
Header .description {
font-size: $(description.text.font);
color: $(description.text.color);
Para completar este segundo ejemplo y dejar el código libre de restos, quedaría hacer una cosa: buscar en las variables definition el de Blogger en el que está description.text.size y tras encontrarlo se elimina, ya que ahora ya no tiene ninguna función. Y aún nos queda una sorpresa, al añadir este código a las "Variables Definitions" esta nueva característica aparecerá en el Editor y desde allí podrás cambiar a partir de ahora el tipo de fuente de la descripción.
- ▲▼ Como cambiar el diseño CSS de las plantillas de Blogger
Existen nada menos que 3 formas de cambiar el diseño CSS de las plantillas de Blogger, una de ellas sencillas, usando las ayudas que nos aporta el editor de Blogger y dos de ellas entrando en el código de la plantilla para realizar los cambios a mano. Vamos a señalar sus ventajas y desventajas, para ver porque para personalizar a la medida y transformar el diseño de las plantillas blogspot es necesario aprender un poco de programación CSS, adaptada a Blogger. Antes de entrar en detalle hay que entender que el código CSS de las plantillas de Blogger está dentro de la plantilla (hoy en día se suele escribir fuera del código HTML) y que está formada por dos regiones: El código CSS normal, y las Variables Blogger, en estas últimas se dan valores CSS que se aplicarán a continuación sobre el código CSS normal. Es realmente algo complejo, ya que se podrían conseguir los mismos resultados sólo con el CSS normal.
1. Editor de Plantillas. La primera forma de modificar el aspecto de tu blog es entrar en este programa de ayuda donde te permite cambiar las Variables de Blogger como el color del fondo, la anchura del la columna lateral, el tipo de fuente para el título, para el texto de los blogs, etc. El primer método tiene la gran ventaja de que es muy intuitivo y eso está muy bien para principiantes, porque desde el primer día ya puedes elegir algo tan importante como el los colores del blog. También hay que tener en cuenta que el método tiene dos limitaciones.
Sólo puedes cambiar las Variables del diseño CSS definidas en la plantilla. Por ejemplo existen variables para el color de fondo de la pantalla, pero no existe la variable del fondo de los titulares. Si quisieras tener un blog con texto en negro, fondo en blanco, pero que los titulares de cada post fueran con letras blancas sobre un fondo oscuro, no podrías hacerlo.
Sólo puedes dar a las Variables los valores que te permite el Edito de Código CSS. Esto implica que por ejemplo para los colores del fondo el color se debe colocar en un formato en el que podemos añadir todos los colores y también que los fondos sean transparentes, pero el Editor no permite aplicar el sistema RGBA que tiene también colores translucidos, con un % de transparencia. Otro ejemplo, el tamaño de la plantilla se puede definir de forma variable con % para que varíe el contenido que se muestra en el blog si la pantalla es de menor tamaño, pero Blogger el editor de plantillas de Blogger sólo deja la opción de hacerlo con píxeles.
2. Cambiar la plantilla a mano respetando las Variables de Blogger. Esto consiste en entrar en el editor de la plantilla HTML y modifica a mano el código pero respetando el formato de las plantillas blogspot. Estos cambios requieren tener algún conocimiento de CSS y sobre como funcionan estas Variables. Esto permite que las plantilla que se crea aún se puede editar desde el Editor de Plantillas y es lo que hay que hacer si quieres crear un template de Blogger para difundirlo. La diferencia con la plantilla anterior es que puedes:
Añadir nuevas Variables CSS en el diseño y por lo tanto modificarlas. Esto te permite por ejemplo diferenciar los links de diferentes zonas del blog, aportándoles diferentes colores y efectos gráficos. Así podrías tener links en los títulos con un color diferente a los enlaces que hay dentro del texto y que al pasar el ratón sobre ellos se iluminaran o cambiaran de color, mientras que los otros links del blog fueran fijos.
Cambiar el CSS directamente sobre el código para añadir propiedades CSS3 como el degradado, bordes redondeados o transiciones.
Borrar Variables CSS que no uses. Esto es útil para hacer la páginas más sencilla y que cargue más rápido. A veces tenemos dos variables que hacen los mismo y se pueden reunir como la misma.
Cambiar el rango de acción de una Variable Blogger. Esto se realiza desde la parte del código CSS clásico, modificando las zonas a las que se aplica el diseño. Esto quiere decir que si por ejemplo tenemos una Variable que afecta al texto de todo el blog, podemos cambiarlo para que sólo se aplique a las columnas laterales.
3. Eliminar las Variables de Blogger y cambiar el código CSS de la forma clásica. Si has hecho algún curso de CSS3 algo que puedes hacer es directamente borrar la parte de las variables de Blogger y construir el código CSS de forma directa, tal y como se hace en cualquier página Web. Las ventajas que tiene este método es que eliminas de momento un montón de código, por lo que subirá de forma instantánea el ratio texto/HTML que es un punto importante en el posicionamiento SEO del blog. Otra ventaja es que el código será más sencillo de entender para un programador profesional ya que está escrito de la forma normal.
Otro punto importante es que al borrar las Variables de Blogger la plantilla no la puedes cambiar con los dos primeros métodos. En resumen, que si alguien se copia tu plantilla y es un principiante no podrá cambiarla, algo que en principio es bueno si quieres tener un diseño diferenciado y es inapropiado si lo que buscas es crear plantillas para difundirlas. Como podrás ver la forma en la que vamos a modificar las plantillas depende sobre todo del objetivo que tengas y de tu nivel de conocimientos de CSS.
- ▲▼ Como hacer un fondo de la cabecera transparente
Ahora que hemos empezado a ver como está estructurado el documento de una template de Blogger podemos aplicar algunos trucos para modificar el diseño de una parte de Blogger como la cabecera. Para ello es fundamental darse cuenta de que la apariencia del blog se crea a capas, que están unas delante de otras. Eso quiere decir que de normal sólo ves la capa que está arriba de todo y las demás quedan abajo ocultas, siendo la única excepción cuando una capa es transparente. La otra cosa que hay que tener en cuenta es que cada una de las plantillas básicas de Blogger en el editor muestra diferentes Variables, así que voy a modificar la plantilla Sencilla y usando la variante que tiene un fondo de color naranja.
Entra en el Editor de plantillas de Blogger para personalizarla, selecciona en el menú el apartado Avanzado y dentro de ellas ves al grupo "Fondos". Verás que puedes modificar tres fondos el de toda la página (body) el contenido (content) y el tercero de la cabecera donde puedes cambiar el color. Pero además de modificar el color usando la paleta, también tenemos la opción de añadir la opción "transparente" que se ve como un botón a cuadros blancos y grises. Si esto lo aplicas sobre el Header, el fondo de la cabecera se hará transparente y podrás ver el fondo del contenido que es blanco, ya que la cabecera en esta plantilla está dentro de Content. Así que a partir de aquí se abren varias posibilidades.
Sacar la cabecera del apartado de la caja "content".
Hacer que la caja "content" sea transparente y dar color sólo a los posts.
Hacer transparente a la caja "content" y crear otra caja blanca que incluya el resto del contenido.
Vamos a realizar la opción 2 que es en principio la más sencilla, así que ya puedes dar el paso de hacer que el contenido sea también transparente. A continuación guardamos la plantilla y tenemos que ir al Editor de HTML para añadir algunos códigos.
1. Buscamos dentro del código CSS Variables Definitions el grupo que determina los fondos de las páginas, que será algo así.
<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
<Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#eeaa00"/>
<Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="transparent"/>
<Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="transparent"/>
</Group>
2. Pegamos una nueva variable con el fondo blanco de los posts.
<Variable name="post.background.color" description="Post Background" type="color" default="#ffffff" value="#ffffff"/>
y quedará como
<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
<Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#eeaa00"/>
<Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="transparent"/>
<Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="transparent"/>
<Variable name="post.background.color" description="Post Background" type="color" default="#ffffff" value="#ffffff"/>
</Group>
3. Enlazamos la nueva variable con el código normal CSS, añadiendo allí ($post.background.color) y también le damos un poco de espacio interior (15 píxeles) para que cuando escribamos las entradas no queden las letras pegadas al margen.
Buscamos este código o similar...
.post {
margin: 0 0 $(post.margin.bottom) 0;
}
4. Y añadimos unas líneas para que quede así.
.post {
background-color: $(post.background.color);
margin: 0 0 $(post.margin.bottom) 0;
padding: 15px;
}
5. Guardamos la plantilla Sencilla y ya la tenemos con un fondo de la cabecera transparente y las entradas sobre un fondo blanco para que puedan ser leídas de forma sencilla.
- ▲▼ Compartir documentos online en Blogger con Scribd
- Scribd es una de las muchas formas de compartir documentos online para que tus amigos, conocidos o alumnos puedan descargarse un archivo de texto, una hoja de cálculo o una presentación, pero destaca porque nos facilita subir esos documentos en nuestro blog de Blogger. ¿Cómo? Una vez hayas creado tu cuenta de Scribd y subido los documentos, puedes insertarlos dentro de uno de los posts, algo que también puedes realizar en Wordpress y en páginas Web de otro tipo. Permite subir documentos en los formatos de texto más frecuentes como RTF, TXT, PDF, PS (postScript), además de imagenes TIF, y algunos documentos de Microsoft Office (en concreto de Word, Excel y Power Point), es decir con extensiones .XLS, .XLSX, .PPT, .PPS, .PPTX, .PPSX, .DOC y .DOCX. También se pueden colgar los documentos de Open Office (archivos con extensiones .ODT, .OPD, .OPS, .ODF y .ODG) para los que prefieren usar programas de ofimatica libres y gratis, por lo que es ideal para trabajar con alumnos de secundaria y bachillerato. Sólo tienes que copiar la etiqueta Embed, y pegarla en el editor de código HTML, es decir el mismo procedimiento que insertar un vídeo de YouTube u otros elementos similares. Para que podáis ver como queda en Blogger, os dejo después del salto de página un documento tipo Word que explica más detalles sobre como compartir documentos online gratis con este programa. Dentro del campo de la enseñanza esta herramienta y otras similares son muy útiles para generar nuevas actividades educativas online en la que se incluyan textos, imágenes, hojas de cálculo, etc.
- ▲▼ Perzonalizar el pie de navegación a entradas más nuevas o antiguas en Blogger
El nuevo Blogger incorpora tanto en la página principal, etiquetas y entradas idividuales un pie de navegación, es decir, enlaces a “Entrada más reciente”, “Entradas antiguas” y “Página principal” sin formato y sin estilo. En este artículo te mostraremos como personalizarlo.
1 Entra a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio y después a la opción “Edición de HTML”.
2 Activa la opción “Expandir plantillas de artilugios” y en el campo de texto busca el siguiente código:
<DIV class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<SPAN id='blog-pager-newer-link'>
<A class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></A>
</SPAN>
</b:if>
<b:if cond='data:olderPageUrl'>
<SPAN id='blog-pager-older-link'>
<A class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></A>
</SPAN>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<A class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></A>
<b:else/>
<b:if cond='data:newerPageUrl'>
<A class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></A>
</b:if>
</b:if>
</DIV>
Este es el código encargado de mostrar los enlaces de navegación. Sí te das cuenta corresponden aca uno de los links:
<data:newerPageTitle/> – Corresponde al texto “Entrada más reciente”
<data:olderPageTitle/> – “Entradas antiguas”
<data:homeMsg/> – “Página principal”
3 Personalización:Cambiar el texto por otro. Para remplazar el texto por otro de nuestro agrado sólo remplazamos la etiqueta correspondiente a cada enlace por nuestro texto, por ejemplo, para el link de entradas recientes sustituimos completamente “<data:newerPageTitle/>” por “Artílos más recientes” directamente.Cambiar texto por imagen. Para sustituir el texto por una imagen podemos seguir metodología anterior y remplazar cada etiqueta por su imagen correspondiente. A continuación te damos un ejemplo creado por Blogyweb y que puedes usar libremente con sólo remplazar el código inicial con este:
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'> <img alt='data:newerPageTitle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYTnsLAp6MbMsN8WGeWq6Kac-nVargoq2m-5Zx3Fj2U7510TkDyTwN5B2Kz7RGEZ92Mt9WoyOCqP7x3lTUK4qBgb4cQLQZ4Hr7fF1OmCvv0e37vHCavn61NGAJMNzEtqTH-ZYDb2BF9B0/s1600/botong_atras.gif' /></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'> <img alt='data:olderPageTitle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUsc8iWt3o5LvP7hq6cLlhurjUS-e6BuR-iRGvb04W4orJ26GC8gM3Pd0WD-519Lw3Hr_1N3_SyU1jT8yhcCPMwanTjwlgXGVgbax0M-ioraq7dO0dgKpgOvif9YWE-pyOPKQbTBPGTj8/s1600/botong_adelante.gif'/> </a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img alt='data:homeMsg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZCNLqp_GwEmW2i3sqtb33yBti9Ey9TRyWkwiltx7C3XDVb1CSHy9_Wf2bUrVuwQzc0LaGaxP5rJ9svw08tDg9ocLIMs5hzCRkXRwWuB528tQBglsXMgmErBM2BPEzEd3og7v9EJOufyY/s1600/botong_home.gif'/> </a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
Dar formato a los links. Si lo único que quieres es darles un mejor formato a estos enlaces modifica los atributos de las siguientes clases:
#blog-pager-newer-link – Para “Entrada más reciente”
#blog-pager-older-link – Para “Entradas antiguas”
#home-link – Para “Página principal”
- ▲▼ Poner separadores en los gadgets
Hace algún tiempo vimos cómo poner separadores en las entradas, y desde esa vez muchos han preguntado cómo poner separadores en los gadgets de la sidebar. La verdad es que es un procedimiento sumamente sencillo que no deberá quitarnos ni 3 minutos de tiempo.
Haremos algo similar como lo que hicimos para enmarcar entradas y gadgets sólo que aquí tendremos la opción de incluir una imagen como separador y así delimitar de forma estética el final de cada gadget.
Si usamos bordes tendremos un resultado como este.
Y si usamos imágenes podrá verse más o menos así.
Veremos cómo hacerlo para las plantillas antiguas de Blogger, y las hechas con el Diseñador de plantillas de Blogger. En cualquier de los dos casos entra en Diseño | Edición de HTML y luego...
Para plantillas hechas con el Diseñador de plantillas de Blogger
Si quieres que el separador sea un borde agrega antes de ]]></b:skin> lo siguiente:
.column-right-outer .widget, .column-left-outer .widget {
border-bottom:4px solid #000;
padding-bottom:20px;
}
Si quieres que el separador sea una imagen entonces en lugar de lo anterior agrega esto:
.column-right-outer .widget, .column-left-outer .widget {
background: url(URL de la imagen)no-repeat 50% 100%;
padding-bottom:70px;
border:0;
}
Para las Plantillas antiguas de Blogger
De igual manera agrega antes de ]]></b:skin> lo siguiente si quieres que el separador sea un borde:
.sidebar .widget {
border-bottom:4px solid #000;
padding-bottom:20px;
}
O bien, si quieres que el separador de los gadgets sea una imagen entonces lo que deberás agregar será esto:
.sidebar .widget {
background: url(URL de la imagen)no-repeat 50% 100%;
padding-bottom:70px;
border:0;
}
Agrega la URL de la imagen del separador donde se indica si es que te decidiste por el separador con imágenes. Si la imagen fuera muy alta cambia donde dice padding-bottom:70px; por una valor más grande hasta que la imagen se muestre por completo.
En el caso de los separadores con bordes puedes modificar el grosor, tipo y color del borde, eso se hace donde dice border-bottom:4px solid #000;
4px es el grosor, solid es el tipo de borde, puedes cambiarlo por dotted, dashed, double, groove, ridge, outset, o inset, y #000 es el color del borde.
En donde dice padding-bottom:20px; podemos controlar la distancia entre cada gadget.
Como dije antes, es un procedimiento bastante simple que quizá la parte más difícil será decidirnos por un estilo que nos guste.
- ▲▼ Los Símbolos y caracteres más utilizados en la red social Facebook
Desde hace unos dias he estado recopilando todos los simbolos y caracteres mas utilizados en la red social facebook ,estos mismos los pueden usar en twitter y en muchos lugares mas ,estos caracteres son muy populares por sus expreciones y muy facíl de implementar con solo copiar y pegarlo en donde quieras usarlo estos se obtienen mediante nuestro teclado si aprietas la tecla ALT numeros que quieras va a ver los simbolos todo depende de la variedad que hagas con los numeros ,pero yo se los voy a dejar aquí hoy si lo quieren mantener en su PC solo copien y pegenlo en el notepad lo guardan y cada ves que van a usarlos solo lo copian desde su computadora y pegan en donde lo quieran y es todo es muy facíl y le da un toque diferente a tu perfil .
A continuacion les dejo los caracteres y simbolos a su dispocicion.
█ ─ ─ ─ ─ █ ▀ ▀ █ ─ ▄ █ █ █ ▄ █ █ █ ▄ ─ █ ▀ ▀ ▀
█ ─ ─ ─ ─ █ ─ ─ █ ─ ▀ █ █ █ █ █ █ █ ▀ ─ █ ▄ ▄ ▄
█ ─ ─ ─ ─ █ ─ ─ █ ─ ─ ─ ▀ █ █ █ ▀ ─ ─ ─ █
▀ ▀ ▀ ▀ ─ ▀ ▀ ▀ ▀ ─ ─ ─ ─ ─ ▀ ─ ─ ─ ─ ─ ▀ ▀ ▀ ▀
(`'•.¸♥*♥ ¸.•'´) ¸.•'´)
(¸.•'´ (¸.•'´♥*♥ `'•.¸)
*♥*♥* Me Gusta *♥*♥*
☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
▀██▀───▀██▀─▀██──██─▀██▀▀ ─
██─────██───██▄█▀───██▄█─
▄██▄▄█─▄██▄─▄██──██─▄██▄▄
ღ☻ღ☻ღ☻ღ☻ღ☻ღ☻ღ☻ღ☻ღ☻ღ☻ღ☻ღ
๑•ิ.•ั๑ ๑۩۞۩๑ ♬✿.｡.:* ★ ☆ εїз℡❣·۰•●○●ōゃ ♥ ♡๑۩ﺴ ☜ ☞ ☎ ☏♡ ⊙◎ ☺ ☻✖╄ஐﻬ ► ◄ ▧ ▨ ♨ ◐ ◑ ↔ ↕ ▪ ▫ ☼ ♦ ▀ ▄ █▌ ▐░ ▒ ▬♦ ◊ ◦ ☼ ♠♣ ▣ ▤ ▥ ▦ ▩ ◘ ◙ ◈ ♫ ♬ ♪ ♩ ♭ ♪ の ☆ → あ ぃ ￡ ❤＃ ＠ ＆ ＊ ❁ ❀ ✿ ✾ ❃ ✺ ❇ ❈ ❊ ❉ ✱ ✲ ✩ ✫ ✬ ✭ ✮ ✰ ☆ ★ ✪ ¤ ☼ ☀ ☽ ☾ ❤ ♡ ღ☻ ☺ ❂ ◕ ⊕ ☉ Θ o O ♋ ☯ ㊝ ⊙ ◎◑ ◐ ۰ • ● ▪ ▫ ｡ ﾟ ๑ ☜ ☞ ☂ ♨ ☎ ☏ × ÷ ＝ ≠ ≒ ∞ ˇ ± √ ⊥▶ ▷ ◀ ◁ ☀ ☁ ☂ ☃ ☄ ★ ☆ ☇ ☈ ☉ ☊ ☋ ☌ ☍ ☑ ☒☢ ☸ ☹ ☺ ☻ ☼ ☽ ☾ ♠ ♡ ♢ ♣ ♤ ♥ ♦ ♧ ♨ ♩ ✙ ✈ ✉ ✌ ✁♝ ♞♯♩♪♫♬♭♮ ☎ ☏ ☪ ♈ ♨ ₪ ™ ♂✿ ♥ の ↑ ↓ ← → ↖ ↗ ↙ ↘ ㊣ ◎ ○ ● ⊕ ⊙ ○ △ ▲ ☆ ★ ◇ ◆ ■
□ ▽ ▼ § ￥ 〒 ￠ ￡ ※ ♀ ♂ &⁂ ℡ ↂ░ ▣ ▤ ▥ ▦ ▧ ✐✌✍✡✓✔✕✖ ♂ ♀ ♥ ♡ ☜ ☞ ☎ ☏ ⊙ ◎ ☺ ☻ ► ◄ ▧ ▨ ♨ ◐ ◑ ↔ ↕ ♥ ♡ ▪ ▫ ☼ ♦ ▀ ▄ █ ▌ ▐ ░ ▒ ▬ ♦ ◊ ◘ ◙ ◦ ☼ ♠ ♣ ▣ ▤ ▥ ▦ ▩ ◘ ◙ ◈ ♫ ♬ ♪ ♩ ♭ ♪ ✄☪☣☢☠░ ▒ ▬ ♦ ◊ ◦ ♠ ♣ ▣ ۰•● ❤ ●•۰► ◄ ▧ ▨ ♨ ◐ ◑ ↔ ↕ ▪ ▫ ☼ ♦♧♡♂♀♠♣♥❤☜☞☎☏⊙◎ ☺☻☼▧▨♨◐◑↔↕▪ ▒ ◊◦▣▤▥ ▦▩◘ ◈◇♬♪♩♭♪の★☆→あぃ￡Ю〓§♤♥▶¤๑⊹⊱⋛⋌⋚⊰⊹ ๑۩۩.. ..۩۩๑ ๑۩۞۩๑ ✲ ❈ ✿ ✲ ❈ ➹ ~.~ ◕‿- ❣ ✚ ✪ ✣ ✤ ✥ ✦❉ ❥ ❦ ❧ ❃ ❂ ❁ ❀ ✄ ☪ ☣ ☢ ☠ ☭ღღღ ▶ ▷ ◀ ◁ ☀ ☁ ☂ ☃ ☄ ★ ☆ ☇ ☈ ⊙ ☊ ☋ ☌ ☍ⓛⓞⓥⓔ๑•ิ.•ั๑ ๑۩۞۩๑ ♬✿ ☉♡ ♢ ♣ ♤ ♥ ♦ ♧ ♨ ♩ ✙✈ ✉ ✌ ✁ ✎ ✐ ❀ ✰ ❁ ❤ ❥ ❦❧ ➳ ➽ εїз℡❣·۰•●○●ゃōゃ♥
♡๑۩ﺴ ☜ ☞ ☎ ☏♡ ⊙◎ ☺ ☻✖╄ஐﻬ ► ◄ ▧ ▨ ♨ ◐ ◑ ↔ ↕ ▪ ▫ ☼ ♦ ▀ ▄ █▌ ▐░ ▒ ▬♦ ◊ ◦ ☼ ♠♣ ▣ ▤ ▥ ▦ ▩ ◘ ◙ ◈ ♫ ♬ ♪ ♩ ♭ ♪ の ☆ → あ ぃ ￡ ❤ ❁ ❀ ✿ ✾ ❃ ✺ ❇ ❈ ❊ ❉ ✱ ✲ ✩ ✫ ✬ ✭ ✮ ✰ ☆ ★ ✪ ¤ ☼ ☀ ☽ ☾ ❤ ♡ ღ☻ ☺ ❂ ◕ ⊕ ☉ Θ o O ♋ ☯ ㊝ ⊙ ◎ ◑ ◐ ۰ • ● ▪ ▫ ｡ ﾟ ๑ ☜ ☞ ☂ ♨ ☎ ☏▶ ▷ ◀ ◁ ☀ ☁ ☂ ☃ ☄ ★ ☆ ☇ ☈ ☉ ☊ ☋ ☌ ☍ ☑ ☒☢ ☸ ☹ ☺ ☻ ☼ ☽ ☾ ♠ ♝ ♞♯♩♪♫♬♭♮ ☎ ☏ ☪ ♈ ♨ ºº ₪ ¤ 큐 « »™ ♂✿ ♥ の ↑ ↓ ← → ↖ ↗ ↙ ↘ ㊣ ◎ ○ ● ⊕ ⊙ ○ △ ▲ ☆ ★ ◇ ◆ ■ □ ▽ ▼ § ￥〒 ￠ ￡ ※ ♀ ♂ © ® ⁂ ℡ ↂ░ ▣ ▤ ▥ ▦ ▧ ✐✌✍✡✓✔✕✖ ♂ ♀ ♥ ♡ ☜ ☞ ☎ ☏ ⊙ ◎ ☺ ☻ ► ◄ ▧ ▨ ♨ ◐ ◑ ↔ ↕ ♥ ♡ ▪ ▫ ☼ ♦ ▀ ▄ █ ▌ ▐ ░ ▒ ▬ ♦ ◊ ◘ ◙ ◦ ☼ ♠ ♣ ▣ ▤ ▥ ▦ ▩ ◘ ◙ ◈ ♫ ♬ ♪ ♩ ♭ ♪ ✄☪☣☢☠㊊㊋㊌㊍㊎㊏ ㊐㊑㊒㊓㊔㊕㊖㊗㊘㊜㊝㊞㊟㊠㊡㊢ ㊣㊤㊥㊦㊧㊨㊩㊪㊫㊬㊭㊮㊯㊰
✗✘✚✪✣✤✥✦✧✩✫✬✭✮✯✰ ✱✲✳❃❂❁❀✿✾✽✼✻✺✹✸✷ ✶✵✴❄❅❆❇❈❉❊❋❖☀☂☁【】┱ ┲ ❣ ✪ ✣ ✤ ✥ ✦ ❉ ❥ ❦ ❧ ❃ ❂ ❁ ❀ ✄ ☪ ☣ ☢ ☠ ☭ ♈ ➸ ✓ ✔ ✕ ✖ .: ◢ ◣ ◥ ◤ ▽ ▧ ▨ ▣ ▤ ▥ ▦ ▩ ◘ ◙ ▓ ▒ ░ ™ ℡ 凸 の ๑۞๑ ๑۩ﺴ ﺴ۩๑ o(‧”’‧)o ❆ べò⊹⊱⋛⋋ ⋌⋚⊰⊹ ⓛⓞⓥⓔ ☀ ☼ ☜ ☞ ⊙® ◈ ♦ ◊ ◦ ◇ ◆ εїз❃❂❁❀✿✾✽✼✻✺✹✸✷ ✶✵✴❄❅❆❇❈❉ ❊❋❖❤❥❦❧↔ ↕ ▪ → ︷╅╊✿ (¯`•._.• •._.•´¯)(¯`•¸•´¯) ❤`•.¸¸.•´´¯`•• .¸¸.•´¯`•.•●•۰• ••.•´¯`•.•• ••.•´¯`•.••—¤÷(`[¤* *¤]´)÷¤——(•·÷[ ]÷·•)—
①②③④⑤⑥⑦⑧⑨⑩ ⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳ ⒶⒷⒸⒹⒺⒻ ⒼⒽⒾⒿⓀⓁ ⓂⓃⓄⓅⓆⓇ ⓈⓉⓊⓋⓌⓍ ⓎⓏ ⓐⓑⓒⓓⓔⓕ ⓖⓗⓘⓙⓚⓛ ⓜⓝⓞⓟⓠⓡ ⓢⓣⓤⓥⓦⓧ ⓨⓩ(⊙▂⊙✖ )(づ ￣ ³￣)づ ( c//”-}{-*\\x)(-’๏_๏’-)(◐ o ◑ )(⊙…⊙ )๏[-ิ_•ิ]๏(•ิ_•ิ)\(•ิ_•ิ\) (/•ิ_•ิ)(︶︹︺)
Interensante estos simbolos, se pueden hacer muchisimas cosas con ellos todo va en la imaginacion de cada cual .
- ▲▼ Administrar la renovacion de un dominio comprado en blogger
Desde hace unos días he visto temas sobre como administrar los dominios que han sido comprado a través de Blogger,que pasa con esto quienes compran su dominio a través de Blogger la mayoría de las veces no hacen nada para configurarlo, pues Blogger,google lo hace de forma automática por nosotros, por lo que muchos ni se enteran cómo de como funciona todo despues y he ahí donde vienen luegos las preguntas de como pago la renovacion de mi dominio, como cambio la informacion de la tarjeta que use para la compra del dominio,etc......... y he ahí las precupaciones.
Pues bien, lo que les mostrare a continuación es información de como administrar nuestro dominio.Les aclaro que Blogger no es una compañia que se dedique a vender dominios, si bien se puede comprar el dominio desde la configuración del blog, no es Blogger o google quien nos lo vende, sino compañias como GoDaddy y eNom que son las que sí se dedican a la venta de dominios.
1-) Después de comprar tu dominio en Blogger, te debe llegar un correo de Google Apps que se titula "Confirmación de registro de dominios". Dentro de ese correo verás que dice algo como así "Si todavía no has creado una cuenta de administrador para tu dominio, haz clic en el enlace siguiente:
Para el que lo compro desde hace tiempo y nunca creo dicha cuenta de administrador a continuacion les brindo el enlace que debieron recibir en ese tiempo solo cambien lo que les voy a marcar.
https://www.google.com/a/cpanel/domain/setup/tudominio.com/faVaTzUBAAA.XIwV8hFMHakqUX6XOpxehA.zRb7NH0cAhQrSM8VDvpPVg?hl=es
2-)Una ves los haiga dirigido ese enlace, ahí podrán configurar una cuenta de correo personalizada de forma automática con el nombre de tu dominio seria algo así tunombre@tudominio.com Lo que elijan de nombre de usuario seria lo que dice tunombre(sin tener que ingresar registros en los DNS ni nada por el estilo), por ejemplo tunombre@tudominio.com . Una vez creada la cuenta de correo vas a ingresar a
https://www.google.com/a/tudominio.com
Google Apps
3-)Ponen el nombre de usuario que escogieron tunombre y el password,contraseña.una ves dentro van a Domain settings luego a domain names y podran ver la opcion si quieren la renovacion del dominio automatica o no ,si no se quieren preocupar que si su dominio se va a expirar pues solo señalen donde dice Automatically renew my domain registration every year .le dan a save mas abajo y es todo aquí.
4-)Ahora para administrar lo que es la forma de pagos es decir con lo que van a pagar que es la tarjeta que va a estar para lo pagos automaticos cada años,nos dirigimos a :
Google Checkout
checkout.google.com
5-)Van a entrar con la misma cuenta de google ,ya dentro veran cuando compraron su dominio ,que tarjeta usaron y toda la informacion acerca de la compra si quieren pueden dejar esa misma tarjeta o pueden eliminar la informacion de esa y poner otra ,con la cual google va a pagar tu dominio cada año,si ya no quieren renovar el dominio comprado van a donde señalaron Automatically renew my domain registration every year lo deselecionan le dan a save y ya no estara automatico el pago y dejas que se venza .
 |
&  |
&  |
0 comentarios:
Publicar un comentario