Tips y tutorial recursos para tu blog Wordpress Blogger ETC

Flechita "ir arriba" Un detalle que es muy útil Cuando las publicaciones son muchas, conviene colocar al pie de los post un ícono que direccione hacia arriba, para volver al inicio de la página. dijo: La URL del botón la pueden reemplazar por el botón que quieran. Les dejo tres páginas con íconos lindos: esta , una más y esta otra con muchas flechitas. ¿Dónde pegar el código? Bien: lo agregan en "elemento de la página HTML/Java" y lo arrastran debajo del sector de post, siempre en la sección diseño.Guardan los cambios. Truco: cómo agrandar la columna del blog cómo agrandar la columna o sidebar del blog, esto se presenta cuando queremos agregar, artilugios o imágenes que son más anchos que los 200 px comunes que traen las columnas habituales de las plantillas de Blogger y vemos que no entran completos. O se modifican los artilugios...o agrandamos el ancho de la columna. Si prefieren lo segundo, aquí va la explicación. Es un truco simple. Deberán abrir el blog en la sección DISEÑO y trabajar en EDICIÓN HTML. Buscan esta parte que dejo en la imagen y reemplazan los valores. El ANCHO TOTAL (outer-wrapper) debe aproximarse a la suma de la sección de post (main-wrapper) y columna lateral (sidebar-wrapper). Agreguen pixeles y luego ven cómo va quedando con la VISTA PREVIA. Si están conformes, GUARDAN LOS CAMBIOS. Es MUY IMPORTANTE guardar previamente una copia de la plantilla original, ya que si se da algún inconveniente o quieren recuperarla, la tendrán disponible en sus documentos. Crear tus marquesinas Hacer una marquesina en movimiento es fácil. Tienes que crear una entrada en el blog: armar el texto, decorarlo con colores y tamaños de letras... y hasta agregar un gif animado o imágenes. Una vez que está terminado vas a la Edición HTML de la entrada en la que estás trabajando y colocas este código, al inicio y al final: dijo: al principio....y cerrar con Así le das la "orden" de que se mueva al texto...y ya tienes una marquesina en movimiento. Una vez listo, hacer la vista previa...y, en vez de guardarla como una entrada o post, simplemente copias el código, ...vas a elementos de la página, y lo guardas en HTML. ¡Tienes un nuevo artilugio! Que puedes dejar en la columna o pasarlo arrastrando el elemento debajo de la cabecera del blog. Te quedará una marquesina a lo largo de todo el encabezado. Vista previa, y a GUARDAR. (La entrada se puede suprimir... simplemente la usaste como "convertidor" a código HTML. No estás bueno? ) Blockquote interlineado Una forma de personalizar las entradas es aplicando la etiqueta blockquote dijo: Los más comunes son el uso de las comillas grandes y los rectángulos para bloques de texto Esta otra opción genera un cuadro encerrado entre dos líneas, arriba y debajo del texto. Puedes ver el ejemplo acá. Yo modifiqué el código original de la esta plantilla reemplazando todo el blockquote por este otro: blockquote { float: left; width: 120px; padding: 4px 0 4px 0; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; text-align: center; font-style:italic; color:#FFCCCC ; } Busca en edición html la sección Blockquote y reemplázala por el código anterior. Hecho esto, cada vez que vayas a escribir una nueva entrada, debes pegar este código en HTML o directamente agregarlo a la configuración de entradas, en FORMATO (así aparecerá incluido en la edición html de cada entrada y no tienes que escribirlo cada vez) :

Aqui va tu texto

Tu texto va en la parte en VERDE. En cuanto a la configuración del código: La etiqueta float es para ubicar a la derecha (right) o izquierda (left) del espacio. Width es el ancho del blockquote. Padding te permite espaciar arriba y abajo. Border-top y border-bottom es para el color de las líneas superior e inferior. Text-align se usa para alinear el texto a derecha e izquierda; font-style para el tipo de fuente, y color, para elegir el color del texto. Yo usé #FFCCCC que es un rosa pálido. Busca en la tabla de colores que está arriba y configura con tus propios colores. El truco de "Siga leyendo" Algunas plantillas nuevas ya lo traen incluído, recuerden "EXPANDIR ARTILUGIOS" para trabajar en esto...de otra manera NO van a encontrar los datos a reemplazar. Manos a la obra: (antes descarga la plantilla original por las dudas) ►Paso 1: En edición HTML marcamos expandir plantillas de artilugios ►Paso 2: Buscamos y antes pegamos este código: dijo: Donde dice siga leyendo y cerrar nota poder poner una imagen. Guardas plantilla y listo. ►Paso 4: Cuando hacemos una entrada usamos esto: y al final de todo lo cerras con esto Se entiende no? dijo: texto texto Por último otro regalito si te pudre tener que buscar estos códigos cada vez que realizas una entrada. Se puede configurar las entradas para que estos códigos te aparezcan cada vez que vayas a hacer una. Es asi: a) Vas a opciones/formato b) Mira abajo de todo que dice PLANTILLA DE ENTRADA y alli pegas los códigos del punto "4" guardar valores y listo, cada vez que creamos una entrada ya lo tenes. Convertidor de tamaño de videos Me decía un amigo que se le había "caído" la columna lateral al fondo. Eso pasa cuando el ancho de la misma es menor al ancho de algún artilugio, en su caso, un video. Para resolver esto te dejo un código donde podrás darle al video el tamaño que gustes.... Acá va la explicación y el truquito... Bien, les dejo el ejemplo de un video link: http://www.videos-star.com/watch.php?video=mgHDdq-AYCw [/col Esta es la url de video ¨http://www.youtube.com/v/mgHDdq-AYCw¨ Este es el código convertidor: dijo:

Reemplazan la URL del Video y también las dimensiones: como la columna/sidebar tiene un ancho de 200 en plantillas comunes de dos columnas, las dimensiones serán proporcionales en el código del video (yo dejo la mediana, con 184 de ancho y 150 de alto). Pueden cambiarlas a su gusto. Código NO COPIAR Un código útil para EVITAR QUE COPIEN las producciones del blog. Inhabilita el copiado del texto. No las imágenes. dijo: El único problema es que también inhabilita a que te copien el código del botón de enlace, en caso que tengas uno. Si tienes un botoncito, la gente no podrá llevarlo a su blog. El código se guarda en la cabecera del blog. Cómo colocar imágenes y colores de fondo a tu blog Este post les va a gustar a muchos. Se trata de colocar una IMAGEN DE FONDO en el blog. Al pensar en esto deben considerar el tipo de plantilla que están usando. De esto depende cómo se verá el FONDO. Por ejemplo: en una plantilla Black Mínima al colocar un FONDO se ve transparente. Entonces aparece el problema de las letras que, tal vez, no se distingan bien. En cambio, si sus plantillas tienen un "camino" en el centro, donde se hacen los post, entonces el FONDO se verá en los bordes. Luego pueden cambiar colores y letras desde el Diseño para que combine con el fondo elegido. Les dejo el link con una variedad enorme de FONDOS. Simplemente eligen uno y guardan el código que le pertenece en el sidebar, abajo del perfil, así aparece enseguida, cuando se abre el blog. Lo agregan como HTML, en "Agregar elemento a la página". También pueden colocarlo al Pie de Página, abajo de todo... pero si es un blog pesado tarda en cargar. Bueno, espero que les guste y renueven sus blog. Este es el link para IMÁGENES DE FONDOS PARA BLOGS Y este es para COLORES DE FONDO Lluvia de objetos Para adornar tu blog, una lluvia de objetos ... ¡De lo que elijas! Se genera el código y se pega al principio de la plantilla, en el encabezado o en "Agregar un elemento a la página", formato HTML. Recuerda comprobar con vista previa antes de guardar los cambios.... El código es bastante extenso. Aquí el link! http://www.glitter-graphics.com/generators/falling_objects.php Carteles en movimiento link: http://www.crazyprofile.com/scroller/scroller-sign.swf Get a scroller sign at http://www.crazyprofile.com.com! En esta página tenés mucha información.Te dejo uno de sus recursos: cartel en movimiento. Mas carteles en esta otra página... http://www.joombly.com/generadores-para-myspace Cómo borrar u ocultar la barra de Blogger Dos ideas Para eliminar totalmente la barra de blogger hacemos lo siguiente: 1. Seleccionar la pestaña Diseño. 2. Dentro de la pestaña Diseño seleccionaremos la opción “Edición de HTML”. 3. Posteriormente buscar la parte (usando control + f) 4. A continuación copiamos el siguiente código: dijo: Para ocultar simplemente la barra de blogger, y que al pasar el ratón por la zona donde está se active y aparezca el procedimiento es el siguiente (muy similar al anterior). 1. Seguimos los dos primeros puntos del proceso anterior. 2. Buscamos el fragmento de código body{ 3. Insertamos el siguiente código justamente arriba /antes: dijo: #navbar-iframe { opacity:0.0; filter:alpha(Opacity=0) } #navbar-iframe:hover { opacity:1.0; filter:alpha(Opacity=100,FinishedOpacity=100) } Listo. Barra oculta. Luego coloca una imagen o el botón de blogger en algún lugar para acceder al blog. Código html para separar elementos Detalles que ordenan Hoy les paso un truco muy sencillo pero tan necesario a la hora de organizar nuestras siderbar, los post, o cualquier elemento donde tengamos que trabajar con lenguaje de programación: el bendito HTML. Se trata de la separación o espacio entre elementos. Un espacio, dos o tres. Lo podemos usar al alinear etiquetas, palabras, imágenes. La palabrita mágica es:
. Si, el
te sirve para separar los elementos a fin de que no se te amontonen. Vamos a un ejemplo: dijo: amigos mate guitarra verano Ven cómo se arma la lista con separaciones? Así sería la forma de escribirlo: amigos
mate
guitarra
verano
Espero les sea útil para organizar los códigos. Truco Expandir - Contraer Para esconder elementos Sirve para todo: imágenes y texto. Te permite, iniciar una publicación y luego invitar a los lectores a seguir leyendo. Expande y contrae la publicación. Paso 1: Lo primero que hacemos es ir a la configuración HTML de nuestra plantilla y buscamos el ; y justo antes pegamos el siguiente codigo: dijo: Guardas los cambios. Paso 2:La segunda parte se agrega donde quieras expandir (post o sidebar/columna lateral).Pegas este código: dijo: Esta es la parte a la vista en tu publicación. Acá va la señal para que expanda