Después de vueltas y vueltas a través de toda la Web, para puro crear un Blog y vaya que me costo, no, es una broma nada mas, ya que no me costo nada de nada crear un blog, sobre todo con el sitio Web para crear blog gratis llamado Blogger, se los recomiendo, no es mejor que WordPress, pero es mucho mas fácil y rápido de usar, ahora, como les contaba, después de vueltas y vueltas por la Web, localice varios artículos interesantes, para adornar un blog, y en este post pienso darles, solo a los novatos en este tipo de temas, una ayudadita, a todo lo que significa colocar Gadget a un Blog, pero como dice el titulo de mi post, nada mejor que comenzar desde un principio, ósea, con la creación básica de un Blog, yo se que este tipo de temas se encuentran en todas partes, pero lo diferente a todo eso, es que va a ser mi propia experiencia en este tipo de temas, y por supuesto mis propias imágenes, para hacerlo mas practico, ya que lo primordial es el contenido del Blog, y no darle tantísimo tiempo al diseño del blog, y con esto no me refiero a hacer un Blog a medias, sino que hacer mas fácil su diseño, para que con ello el tiempo dedicado al diseño del Blog sea menor, y no dedicarlo a estar buscando por toda la Web todo este tipo de temas, y después encontrar que perdiste valioso tiempo en buscar cosas para el diseño, en vez de empezar con los artículos de una vez por todas, entonces con este post, solo quiero proveerlos de un material, o mas bien dicho de un tutorial básico de cómo hacer blogs, entonces, aquí les pondré toda mi experiencia que he tenido desde que empecé a crear mi Blog, que por cierto fue hace dos semanas no mas, para que vean que fácil es crear este tipo de paginas, que por cierto esta experiencia no es basta, pero a mas de alguno le puede ayudar a no tener que buscar por todos lados este material, lo mejor de todo, es que todo lo que aquí les pondré esta certificado que funcionara, ya que yo mismo los utilizo en mi Blog, así que pueden estar seguros que todo esto que aquí les enseñare funcionara, además les pondré un Blog, vacío por supuesto, en donde les estoy mostrando esto, hoy en el presente post, todo esto se los digo, por el solo hecho de que he buscado bastante en la Web y algunas de los múltiples materiales que hay no me sirvieron para nada, bueno eso es todo lo que tengo que decir, ahora los dejo con este pequeño post:
Entrar en Blogger
1- Primer paso: Acceder a Blogger : http://www.blogger.com/
2- Segundo paso: Registrarse, solo si no lo has hecho, después de hacer click en la parte que muestro en la imagen, solo tienes que realizar tres pasos, en donde anotaras todo lo que te indica la web:
3- Tercer paso: Una vez realizado todo lo anterior, solo tendremos que empezar a crear nuestro propio Blog, y por cierto se pueden crear los blog que tu quieras, o borrar si no te gusto uno de ellos; para crear un blog solo tendrás que hacer click donde dice la imagen:
4- Cuarto paso: Una vez realizado lo anterior, en la misma página se te dirá que hacer, por lo que no creo necesario alargar tanto esta parte del post, ya estar creado el Blog, y elegiste la plantilla de inicio, ósea el diseño de cómo se vera tu blog, puedes empezar a ponerle Gadget o seguir mejorando tu Blog:
5- Quinto paso: Si decidimos seguir con el diseño del Blog, accederemos a la pagina de abajo, pero sin esas líneas blancas, que tiene, ya que las puse solo para dividir la pagina de diseño del blog, ya que la que esta arriba es la que nos da las opciones de diseño y la de abajo solo es vista previa de lo que haces en el Blog, y la de al medio, la parte que esta entre medio de las dos partes anteriores, se utiliza para subir toda la parte relacionada con el diseño del blog.
Cuando accedes a la parte de diseño, te fijas que hay 5 opciones de diseño, la primera se llama “Plantillas”, aquí están los diseños del blog, ósea la apariencia del mismo, luego se encuentra la opción “Fondo”, con esta, puedes cambiar la parte trasera de los artículos, ósea el fondo de todo el blog, la siguiente opción es “Ajustar Ancho”, con ella, podrás ajustar el ancho del Blog, con la opción “Diseño”, tendrás a tu disposición, todas las maneras de acomodar, tanto los artículos como los Gadgets, que son los implementos de la Web, como un reloj, etc, y por ultimo esta la opción “Avanzado”, en ella hay varias opciones, casi todas pertenecientes al color y tipo de fuente del texto del Blog.
Como crear tu primer Articulo en el Blog y colocar Más información » (Seguir leyendo)
Yo tome un post que hice en Taringa, para hacer mi primer artículo, para tener un ejemplo de ello, nada más:
1- Primer paso: Realizar un artículo relacionado con el blog que realizas, ahora en la siguiente imagen, les muestro, cuales opciones son las más importantes.
Como aclare en la imagen, existen dos maneras de realizar un post, por medio de la ventan que dice “Código de HTML” y por medio de “Redactar”, esta ultima es la mas fácil de realizar, aquí realizaras tu articulo, siendo en “Código de HTML”, en la única parte donde pondrás cualquier tipo de código fuente, ya que si las colocas en la opción “Redactar estos códigos no funcionan”; por otra parte la opción “Inserta salto de línea”, como aparece en la imagen, la utilizaras para poner en el articulo que pongas, esto se hace solo si quieres que el articulo se acorte y solo se vea un poco de el, y que para verlo por completo, tendrás que presionar en el enlace que dice “Más información »”, así accederás al articulo completo, como se puede observar en esta imagen, pero este enlace solo se puede ver en la pagina de Inicio del Blog, porque en el articulo entero no se vera.
Como colocar Gadget en el Blog
Estuve inspeccionando en la Web por varios tipos de Gadget, todos los que yo quería, nada mas, por lo que les voy a mostrar además de cómo colocar estos Gadget, unas paginas web, excelentes a mi parecer, en donde hallaran distintos tipos de Gadget, todos estos implementos que les pondremos a nuestro blog, irán en la opción “Diseño”
1- Primer paso: En la imagen de abajo se muestran en donde tienen que hacer click para colocar el Gadget, pueden ser cualquiera de las opciones mostradas, si quieres ponerlo a la derecha o abajo del Blog, es su decisión:
2- Segundo paso: En este caso, yo decidí colocar el Gadget, en la parte derecha del Blog, como ejemplo de Gadget, utilizare el de Taringa, entonces una vez presionada la opción que dije anteriormente, nos disponemos a buscar la única opción que necesitamos, la cual es “HTML/Javascript” en ella colocaremos el código del Gadget a convenir, es nuestro ejemplo usaremos, como ya dijimos, el de Taringa, pare ello presionamos en la opción antes dicha:
Luego no aparecerá esta pagina, en donde colocaremos el nombre del Gadget y el código fuente del mismo, ustedes verán si les ponen un titulo o nombre al Gadget, yo por ejemplo le puse como en la imagen, después le puse guardar y listo, por cierto el Gadget de Taringa, es para que los visitantes que halla en tu blog, puedan recomendar a sus seguidores tu blog y lo localizas aquí: http://www.taringa.net/widgets/compartir
Luego de colocar el código, solo procedemos a guardar nuevamente, luego de esto ya tenemos nuestro Gadget listo para usarse en tu blog, aquí esta el mío, junto con varios otros, Gadget, con los que realice el mismo procedimiento:
Cada uno de los Gadget que se ven en la Imagen de arriba, sirven a su propósito, de arriba hacia abajo, estos son, uno para dar la fecha y la hora, el que le sigue que esta abajo del anterior es un contador de visitas, hay de distintos tipos, este cuanta las visitas que se realizan en tu Blog, ya sean en general o visita por país, el Gadget que sigue también da la hora y la fecha, y el que le sigue es el Gadget de Taringa, lo puse por mientras al ultimo, pero esto se puede cambiar como en la imagen, solo hay que ir a la opción “Diseño”, y hacer click y mantener apretado sobre el Gadget a mover, solo no hay que soltarlo hasta acomodarlo en el sitio que quieran, luego soltarlo y guardar y listo, Gadget acomodado:
Como colocar categorías o Secciones
Si quieres que tu blog muestre a un lado de la página, las distintas categorías o secciones que tienen tus artículos o alguna sección en especial, solo tienes que ir de nuevo a la opción “Diseño”, como lo mostré anteriormente, solo hay que instalar un nuevo Gadget, solo hay que seguir el procedimiento anterior, pero en vez de ir a la opción “HTML/Javascript”, nos vamos directamente a “Lista de enlaces”, que se encuentra mucho mas debajo de la opción antes dicha, presionamos esta opción:
Luego de presionar la susodicha opción, “Lista de enlaces”, veremos la ventana que les muestro a continuación, en ella colocaremos el Titulo de este complemento del blog, en nuestro caso le pondremos Categorías, pero pueden ponerle cualquier nombre que quieran, una vez puesto el nombre o titulo, nos disponemos a ver la opción “Número de enlaces que se mostrarán en la lista”, en ella pondrás un numero, correspondiente al numero de categorías que quieras que aparezcan, si solo quieres que aparezcan solo 5 o 10 o mas o todas, en este ultimo caso no habrá que colocar ningún numero, la siguiente opción es “Ordenación”, aquí yo puse ordenar alfabéticamente, después viene la opción “URL del sitio web nueva”, en ella colocaras la dirección que viene en la etiqueta o categoría de los artículos a mostrar, por ejemplo, en el articulo que puse de ejemplo, yo le puse la etiqueta de “imagnes animadas” (me equivoque en poner imagnes y no imágenes, pero es lo de menos), le coloque la dirección del sitio Web en donde esta dicha categoría, por ultimo y la ultima opción llamada “Nombre del sitio Web nuevo”, en esa opción se pone la categoría o etiqueta que antes mencionamos, ósea esta “imagnes animadas”, todo esto lo muestro en las imágenes, que van a continuación:
La dirección Web que va en la opción “URL del sitio web nueva”, es la de la etiqueta, como aparece en la imagen:
Realizado todo esto, nos disponemos a guardar todo, y para poner mas categorías, solo habrá que seguir el mismo procedimiento, hasta que se tengan todas las categorías, necesaria o que quiera uno.
Como Borrar un Blog
Si no te gusto el Blog que hiciste, nada mejor que borrarlo, y para ello solo tienes que hacer lo que se muestra en la Imagen:
Luego de los pasos anteriores, te aparecerá una nueva ventana que te dará la opción de Suprimir o cancelar, si presionas en suprimir, borraras por entero el blog que querías, de lo contrario no.
Sitios web para Gadgets
Con lo que navegue en la Web, encontré un cúmulo de sitios con Gadget, y se los pongo a su disposición, a ver si les sirven en su empresa de realizar un Blog, son bastante buenos, deben haber mejores pero, como hay demasiado Internet, no quise buscar mas, supongo que por flojera, pero son bastante buenos, son los que utilizo, y cumplen su cometido, les daré unos sitios para complementar su blog con accesorios útiles a la hora de crear un Blog, aunque hay algunos bastantes inútiles, los cuales no los pondré, hay contadores de visitas, para saber cuantas visitas vienen a tu sitio, ya sea por país, por el día de hoy o desde que pusiste el Blog, otros Gadgets que hay don los relojes, para poner son muy buenos, buenos diseños y todo eso, acuérdense que solo tendrán que copiar el código fuente del Gadget y proceder como se los mostré en el apartado de Como colocar Gadget en el Blog y listo el Gadget estará listo para ser usado, y por ultimo, los sitios son totalmente gratis, y les recomiendo visitar mas de alguna pagina, para que vean los diferentes diseños que hay en cada una de ellas, a mi me gustaron bastante algunas de ellas:
1- Sitios de Taringa:
http://www.taringa.net/widgets/compartir
2- Sitios para Contadores de visitas:
http://contador-de-visitas.com/
http://www.gratisparaweb.com/
http://www.revolvermaps.com/?target=setup
http://www.widgeo.net/?lng=es
http://www.geovisite.com/es/ (este sitio necesita registro para darte el código fuente del gadget)
3- Sitios para Relojes y calendarios:
http://www.crearunaweb.net/complementos/relojes-flash.html
http://douglascomputer1.***/Relojes-Para-Web.htm
http://www.creatupropiaweb.com/Recursos_Flash/recursos_flash_gratuitos_creatupropiaweb.htm
http://disemucho.jimdo.com/relojes-anime/
http://www.websmultimedia.com/reloj-blog-gratis
http://pagina-del-dia.euroresidentes.es/gadget-hoy.php
http://www.relojesflash.com/
4- Sitios con de todo un poco: Estos gadgets no los he probado, pero confío en que funcionen, eso espero, y si me pueden avisar por mp, si les sirvieron mucho mejor.
http://btemplates.com/
http://www.cssmenumaker.com/horizontal_css_menu.php
http://www.google.com/gadgets/directory?synd=open&hl=es&cat=all
http://www.euroresidentes.es/gadgets.htm
5- Sitios de Gadget del clima
http://www.eltiempo.es/widget/
http://www.tiempo.com/widget/
Separadores en los Gadget
Miren, los separadores, nos servirán para hacer visible los limites de cada Gadget, presente en el Blog, existen dos maneras de hacerlo, una de ellas, solo generara una línea de color oscuro, que se localizara en la parte de arriba y de debajo de los Gadget, y la otra podrás generarla con alguna imagen que tengas en un host de imágenes, son muy fáciles de instalar en el Blog.
Separadores sin imágenes
Estos separadores, son muy básicos, por lo que ponerlos en el Blog, es bastante fácil, lo único que tendremos que hacer es colocar este censillo código o script que daré a continuación:
dijo:.column-right-outer .widget, .column-left-outer .widget {
border-bottom:4px solid #000;
padding-bottom:20px;
}[/quote]
El código de arriba, lo tendremos que poner, justo antes del valor “]]></b:skin>”, este valor aparecerá en el código fuente del blog nuestro, una vez localizado este valor en el código del Blog, solo deberemos poner el script de arriba, antes del valor antes dicho, ósea antes de este “]]></b:skin>”, si no sabes como hacer esto, solo copien el código fuente del Blog, que se localiza en la opción “Diseño” del Blog, y después las ventana “Edición de HTML”, ahí aparecerá el código HTML del blog, este lo copias y lo pegas en Microsoft Word, hay mismo lo puedes editar o en este caso buscar el valor ]]></b:skin>, y luego pegar antes de el script, que esta arriba, luego de hacer este proceso, vuelves al blog, y en la misma parte de donde copiaste el Código del Blog, lo pegas de nuevo y lo guardas, el proceso es similar al que muestro en el apartado “Numeración o Paginación en tu Blog”, que aparece en mi anterior post, ósea este: “http://web1.taringa.net/posts/hazlo-tu-mismo/12887383/Coloca-Menus-basicos-y-avanzados-en-Blogger-_-Trucos.html”
Según lo que tengo entendido, este Script solo les servirá en las nuevas plantillas de Blogger, pero no en las antiguas, yo como estoy usando el Blogger recientemente, llevo como tres semanas, no lo he probado en las antiguas, pero por lo que se, no funciona, no creo que los antiguos Bloggers necesiten este dato, puesto que ya lo deben saber.
Pasos a seguir (Solo Imágenes)
1- Ir directamente a la opción Diseño de Nuestro Blog, y colocarse en “Edición de HTML”:
2- Copiar el Código HTML del Blog, y pegarlo en Word, o algún otro programa similar
3- Buscar la clave ]]></b:skin>, localizada en el Código del Blog, y pegar arriba de el código:
dijo:.column-right-outer .widget, .column-left-outer .widget {
border-bottom:4px solid #000;
padding-bottom:20px;
}[/quote]
4- Copiar todo lo que hicimos en Word, y lo pegamos otra vez en el Blog:
Configuración
border-bottom:4px solid #000 : Este valor del código, se puede alterar, e indica el grosor, el tipo y color del borde, del mismo separador, y si cambiamos el 4px, que aparece, por un numero mas alto, lograremos que el separador sea mas ancho, o con mas grosor, y si cambiamos el valor #000 (por cierto este es el formato que muestran los colores en paginas Web, ósea en vez de colocar el color rojo, se colocaría #FF0000), por otro le cambiaríamos el color al separador, aquí dejo una web (haber si no le ponen problemas), para ver colores en código HTML:
http://es.wikipedia.org/wiki/Colores_HTML
http://www.color-hex.com/
Esas tres paginas de arriba, nos mostraran los colores en este tipo de formato, necesario para poder cambiarle el color a nuestro separador, si es que se Eligio este tipo de separador, pero estoy casi seguro, que este no lo elegirán, porque es mucho mejor tener un separador de imagen, que este, pero de todas formas ustedes eligen.
Por ultimo y no menos importante se encuentra el valor “solid”, este valor representa el tipo de borde, lo podrás cambiar por estos valores: dotted, dashed, double, groove, ridge, outset, o inset, ósea en vez de colocar solid en el valor del script, podrás cambiarlos por dotted, o por dashed, etc…
padding-bottom:20px : Este valor es para colocar distancias mayores o menores entre separadores, de modo que si aumentamos o bajamos el valor de 20px, esta separación disminuirá o aumentara.
Configuración en Imágenes
1- En esta imagen se puede apreciar los elementos del script a cambiar
2- Este es el resultado del cambio que realice a los separadores, le puse color rojo y mas anchura.
Separadores con Imágenes
Los separadores con imágenes, son igual de fáciles que los sin imágenes, me refiero a ponerlos, solo necesitamos realizar el mismo procedimiento anterior, y listo, tendremos como separador de Gadget, alguna imagen que nosotros elijamos, este es el script, que habrán de poner en el mismo lugar que el script anterior, procuren de no poner los dos al mismo tiempo, no he probado, pero si quieren lo hacen, ahora les muestro el script, que encontré, para realizar tal acción:
dijo:.column-right-outer .widget, .column-left-outer .widget {
background: url(URL de la imagen)no-repeat 50% 100%;
padding-bottom:70px;
border:0;
}[/quote]
Si se fijan en el script anterior, esta puesta una parte que dice “URL de la imagen”, esta la reemplazara con la dirección o enlace de la imagen a poner.
Configuración
Como en todo script siempre hay valores que uno podrá cambiar, estos nos darán la posibilidad de cambiar alguna característica del separador en cuestión, y como en este caso hablamos de una imagen, que actuara de separador, continuación, les mostrare los valores que se podrán cambiar:
padding-bottom:70px : Este valor, es el que determina que la imagen que uno ponga, se vea correctamente, ósea, si esta es muy alta, solo habrá de colocarle un valor mas alto que el 70px, que aparece, para que dicha imagen se vea correctamente
Espero les halla gustado, este pequeño truco, que como ustedes ya saben encontré buscando en la web, yo solo lo tome y le di una explicación simple, porque este post esta destinado a hacer fácil, lo que debería ser fácil, y para no darse tantas vueltas, por ahí tratando de encontrar material para encachar nuestro Blog, y como yo estoy también aprendiendo lo básico de este tipo de temas, les estoy echando una mano a este basto mundo que es la construcción de un blog, ahora por fin encontré una manera básica de crear una galería de imágenes, después de tanto buscar, no hallaba nada relacionado con mostrar imágenes, juntas una al lado de la otra, y que al presionar sobre estas imágenes en miniatura estas nos lleven a la imagen de origen, por lo menos para mi esta excelente, aquí unas imágenes, por si quieren aprender a como hacerlo:
Añadir menús horizontales simples
Para añadir menúes horizontales básicos, no dirigimos a la opción “Diseño” de nuestro Blog, y luego a “Elementos de la página”, en aquella área, y como lo muestro en la imagen, habrá que colocar un Gadget, una vez abierta la ventan de “Añadir un gadget”, solo tendremos que buscar la entrada “Lista de enlaces”, para los que ya vieron mi post anterior de Blogger, solo deberán seguir el mismo procedimiento que di anteriormente sobre las categorías, para los que no vieron mi post anterior, solo deberán seguir el procedimiento que doy a continuación, en la ventana que aparece deberás ponerle el titulo al Gadget, justo donde dice titulo, por supuesto,
En la imagen de abajo deberás colocar en la opción “URL del sitio web nueva” la dirección de una parte de tu sitio, esta puede ser de una categoría, o de un sitio Web externo, o de cualquier sitio Web que quieras, que aparezca en el menú, que quieras que vaya en uno de los botones del menu, en mi caso el Menú "Ayuda", me dirigirá de inmediato a la direccion que le puse:
Este es el resultado de lo que he realizado, es simple, pero depende del estilo de la plantilla, y de la cantidad de menús que uno le ponga, espero que hayan comprendido, porque este procedimiento es igual al que hice en las categorías, en el anterior post:
Colocar menús verticales con botones flash
Este procedimiento nos servirá tanto para crear categorías, como menúes, o lo que se nos ocurra poner como titulo, es muy fácil de hacer, y solo necesitamos, por desgracia, de una pagina Web externa, la cual nos servirá para colocar estos menús, en ella encontraremos diversos tipos y estilos de menús verticales, los podremos poner en la izquierda o derecha de nuestro blog, para colocar estos menús, lo primero será dirigirnos a la pagina en cuestión, allí pondremos los nombres de los menús, junto con la dirección Web a la que queremos que nos lleve el menú que pondremos, así si queremos que el primer botón del menú nos dirija a una categoría, o a un sitio de nuestro blog, e incluso a un sitio ajeno a nuestro blog, lo único que deberemos hacer es colocar el nombre, como lo muestro en las imágenes, y la dirección del sitio en cuestión, pero esto debe hacerse de manera ordenada, ósea nombre del menú, luego abajo colocar la dirección del sitio web, luego colocamos otro nombre para el botón siguiente, y luego abajo la dirección a donde quieres que vaya ese menú o botón, a continuación les mostrare en imágenes que tienen que hacer, ya verán que es muy fácil:
Así es la página en donde nos dirigiremos, por supuesto que es solo la parte de arriba de la misma, ahí mismo se encuentran todos los menús, de los cuales elegirán el que quieran:
Primero les colocare el sitio Web en donde crearan dicho menú: http://www.flashvortex.com/index.php?action=category&categoryId=2
En la página que les puse arriba tendrán que elegir alguno de los menús que aparecen, puede ser un menú vertical u horizontal, pero quise enseñarles a como colocar un menú vertical, por la sencilla razón de que ya puse arriba como hacerlo de manera fácil, pero el procedimiento sirve tanto para el menú vertical, como para el horizontal, de modo que si les enseño a poner este, también lograran colocar el horizontal, solo que este debe ir, como muestro en el primer truco; siguiendo con lo anterior, una vez elegido el menú se procederá como lo indique en las imágenes, ah, y se me olvidaba, este sitio web es gratuito y no requiere de ningún registro, por suerte.
Estos menús se pueden usar no solo colocando categorías, sino que se pueden utilizar para colocar un menú para “Entradas populares”, lo malo es que no son autoactualizable, sino que uno deberá colocar estos enlaces, cuando uno quiera y los que quieras poner ahí, también se puede utilizar para colocar paginas Web ajenas al blog, o simplemente los últimos post que hicimos.
Procedimiento
1- Lo primero que deberemos hacer al momento de estar en la página anterior, es hacer click en la opción que dice “CLICK HERE TO EDIT THIS” y que se encuentra debajo del menú elegido, como muestro en la imagen:
2- Después de realizar lo anterior, procedemos a editar o a crear de inmediato el Menú, y para ello, solo tendremos que anotar ciertas características, pero si quieren pueden editarlo ya que es muy fácil, pero tienes que tener nociones básicas de Ingles, nada más. Procedemos a fijarnos en la opción “Button's Text Labels and Links”, que aparece en la pagina en donde editaremos el menú, en esa parte, pondremos lo mas esencia, que es el nombre de cada botón del menú, y por supuesto el enlace a la pagina web en donde deseas que vayan los usuarios, al hacer click en uno de los botones, entonces procederemos a colocar en la casilla que dice “Button's labels”, Los nombres que les pondremos a los botones del menú, y en la casilla de abajo, llamada “Buttons should link to”, pondremos los enlaces o sitio web, a los que quieres que nos lleven dichos botones, por supuesto que luego del nombre del botón, debe venir la dirección del sitio web que ira con el botón, tal como a aparece en la imagen de abajo:
3- Como podrán ver en la imagen de abajo, yo puse los nombres que quiero a los botones del menú, y nos tenemos que acordar en poner el nombre del botón del menú, en la casilla de arriba, seguido inmediatamente del enlace del botón, ósea, suponiendo que llamo al primer botón, Biografías, entonces de inmediato pondremos en la casilla de abajo la dirección o enlace del sitio Web en donde nos llevara este botón en cuestión, como lo muestro en la imagen de abajo:
4- Luego de realizado lo anterior, solo tendremos que generar dicho menú, pero antes si quieren pueden editar el menú, pero si no saben aunque sea un poco de Ingles, se les dificultara un poco hacer esto, de todas maneras estas opciones nos ofrecerán cambiar el tipo de texto y los botones del menú (tamaño, sombra, etc), así como el menú en si mismo (brillo, sombra, etc.):
5- Luego de realizar lo anterior, nos aparecerá una nueva pagina, en ella copiaremos el código del menú que queremos colocar en el blog:
6- Después de lo que hicimos anteriormente, solo nos queda ir a nuestro blog, o si es que ya estamos allí, pegar el código que copiamos en la web anterior, y lo pegamos, pero primero debemos estar en la opción “Diseño” de nuestro Blog, y después colocar “Añadir un gadget”, y localizar la entrada que dice “HTML/Javascript”, ahí es donde pegaremos el código antes mencionado, abajo muestro la imagen de donde pegue el script o código del menú:
7- El numero siete y el ultimo, aquí verán los resultados de lo explicado anteriormente:
Protección anticopia de tus imágenes
Para colocar este código que les doy a continuación, hay que pegarlo en el post donde estará la imagen en cuestión, y lo tendremos que hacer con cada imagen que queramos proteger, solo deberemos poner el código que esta mas abajo, y colocar la dirección de la imagen en donde dice “URL DE TU IMAGEN”, todo esto lo tendremos que hacer en el modo “Edición de HTML”, y no en el modo “Redactar”, que aparece al lado de este, o si no el código no funcionara, el código es el que les pongo a continuación:
<img src="URL DE TU IMAGEN" oncontextmenu="alert('TEXTO');return false" oncopy="alert('TEXTO');return false"/>
Así quedara cuando coloquen el código que esta mas arriba:
Este código que les puse arriba, bloquea el botón derecho del Mouse, haciendo que aparezca un mensaje al usuario que quiera copiar la imagen o las imágenes de este modo, este mensaje dirá:
<nosequeponer.com>
TEXTO
Este es el mensaje que aparecerá, cuando alguien quiera copiar una de las imágenes del Blog:
Por supuesto que no aparécela lo primero, si no que aparecerá la dirección Web de tu pagina Web, y si le pones algo a la parte que dise “="alert('TEXTO')”, ósea cambias la palabra TEXTO, que aparece entre paréntesis, por alguna palabra que quieras mostrar a quien trate de copiar las imágenes, aparecerá en la pequeñísima ventana que aparece, ósea si quieres reemplazar la palabra TEXTO, por, supongamos “No tienes permitido copiar las imagenes”, entonces el dialogo aparecerá como muestro a continuación:
<nosequeponer.com>
No tienes permitido copiar las imagenes
El código en cuestión quedaría así:
<img src="URL DE TU IMAGEN" oncontextmenu="alert('No tienes permitido copiar las imagenes');return false" oncopy="alert('TEXTO');return false"/>
Añade el Traductor de Google a tu Blog
Desde esta página Web: http://translate.google.com/translate_tools?hl=es, podrán crear el código HTML, para su blog, este Gadget, tendrás que colocarlo como lo dije en esta página:
Una vez en la pagina, solo deberemos copiar el código y pegarlo, pero antes seria mejor cambiarle las opciones a nuestro traductor (obvio que no es nuestro, pero si esta en nuestro Blog), como cuantos idiomas quieren que traduzca, o la forma que este tendrá, y como es un Gadget, solo lo pegaremos, como aparece en mi anterior post.
Añade el Gadget del Tiempo/Clima
En esta pagina: http://www.rtve.es/eltiempo/descargas/ , podrán sacar el Gadget del clima, aquí encontraran varias ciudades distintas, cero que mas de 1000, por lo tanto lo mas probable es que se encuentre cada cuidad que ustedes necesitaran para colocar en su Blog
Procedimiento:
Solo tendrán que cambiar las opciones de país, ciudad y el tamaño del Gadget a mostrar, todo esta en español, así que no hay mucho que explicar, el único defecto que vi de este Gadget, es que mientras mas grande es mas lenta de pone la pagina del Blog, por lo demás se puede hacer bastante pequeño, esto disminuye su defecto:
Añadir la Opción “Entradas populares”
Esta es una de las cosas mas fáciles de hacer, solo hay que ir a la opción “Diseño”, y hay colocar este Gadget, para ello solo deberás presionar en la opción “Añadir un gadget”, luego les aparecerá una ventana, en la que localizaran la entrada “Entradas populares (Nuevo)”, solo tienes que realizar un click en esa opción, y en la ventana que te aparezca colocar las opciones pertinentes, como se muestran en las imágenes de abajo, lo malo de esta opción que esta integrada en Blogger, es que las imágenes que deberían aparecer en las entradas, solo aparecen de vez en cuando, y algunas veces ni siquiera aparecen, pero por lo menos nos ayuda hasta que consigamos una mejor opción.
1- Vamos directamente a la opción diseño de nuestro blog, luego presionamos añadir Gadget:
2- Una vez abierto el Gaget, tendremos que localizar la entrada “Entradas populares (Nuevo)”
3- Ya hecho lo anterior, nos queda solamente configurar las opciones del Gadget, como el numero máximo de entradas a mostrar, o si quieres que se muestren las imágenes, terminado esto, nos disponemos a guardar, y listo ya tenemos el Gadget:
Añadir la característica “Post Recientes”
Esta es otra de las opciones integradas en Blogger, al igual que la anterior, este Gadget es muy fácil de colocar en nuestro Blog, solo deberemos acceder a la opción “Diseño”, de nuestro Blog, y luego dirigirnos a “Destacados”, localizada en la parte izquierda de la pagina, que nos salio después de que dimos click en “Añadir Gadget”, luego de esto buscamos la entrada que esta en ingles, y que dice “Recent Posts”, hacemos click en esta entrada, luego nos aparecerá una nueva ventana, en ella pondremos los datos que tendrá el Gadget en nuestro blog, como por ejemplo el tamaño, o el numero de artículos a mostrar o el titulo en cuestión, el resultado no es muy bueno, pero por lo menos es algo:
1- Aquí realizaremos lo mismo que hicimos anteriormente, pero elegiremos la entrada “Recent Posts”, localizado en “Destacados”:
Añadir la Opción “Comentarios recientes”
Hacemos lo mismo que lo que hicimos anteriormente, solo que esta vez nos dirigimos a la entrada llamada “Los más populares”, como aparece en la imagen de abajo, luego solo habrá que elegir la opción “Recent Comments (Comentarios recientes)”, luego colocamos los datos pertinentes al Gadget en cuestión, y listo ya tenemos esta característica en nuestro Blog:
Numeración o Paginación en tu Blog
Esta es una opción que se ve frecuentemente en los blog, y sirven para que uno avance en los blog en modo numérico y no a través del enlace que aparece al pie del blog, el conocido “Entradas antiguas”, entonces tendríamos todas las entradas numeradas del 1,2,3,4 al 500, ya que solo acepta asta este numero de pagina, esta es una de sus desventajas, la otra seria que solo se presenta en la pagina inicial, y no en cada uno de los post o artículos.
Generalmente los Blogs menos sofisticados, solo tienen la opción, que es la integrada en Blogger, “Entradas más recientes” y “Entradas antiguas”, y también la clásica “Página principal”, estos enlaces nos ayudan a avanzar de uno en uno, en todas las entradas que hicimos en nuestro Blog, pero que tal si pudiéramos, saltar de dos en dos o de tres en tres, etc, para ello no hay nada mejor que crear una paginación personalizada, y para lograrlo les mostrare un truco que si me resulto.
Procedimiento Nº 1
Nos vamos directamente a la opción “Diseño”, de allí nos vamos a “Edición de HTML”, sin activar la casilla en donde dice “Expandir plantillas de artilugios”, en esa misma sección de nuestro blog, localizamos le siguiente entrada, por cierto estos script los puse en un host, porque aquí en Taringa, se ven son un emoticono entre medio, por lo que preferí ponerlo externamente, solo deberán realizar un click al enlace de abajo y accederán a la pagina del script:
http://mirrorimg.net/im1/f99.txt
Este es el código del Blog al que le vamos a agregar el script, para agregarle al blog la numeración de los post.
Antes de colocar el código que les pondré a continuación, primero que nada les recomiendo realizar un Backup o copia de seguridad de la plantilla del Blog, y para ellos nada mas fácil que hacer click en la opción localizada mas arriba de la sección “Editar plantilla”, llamada “Descargar plantilla completa”:
Una vez hecho esto, proseguimos y agregamos el script que les pongo a continuación, este ira de bajo del script o código que les puse anteriormente, este es el script:
http://mirrorimg.net/im1/3js.txt
Para hacer este procedimiento mucho más fácil, me refiero al de buscar el código:
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
, yo utilizo el Microsoft Word, en el copie el código HTML que se encuentra en la sección “Editar plantilla” del blog, entonces procedemos a copiar y pegarlo en Word, después buscamos con la opción de búsqueda de Word, como lo muestro en la imagen:
Aquí copie el codigo HTML del blog, a Word:
Aquí estoy buscando el valor showaddelement, solo haciendo eso encuentro el script completo:
Luego de encontrar la entrada, que dijimos, osea esta:
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
Procedemos a pegar ese script (el localizado aquí: http://mirrorimg.net/im1/3js.txt), que es bastante extenso, y lo pegamos debajo de la parte que dice </b:section> , del script de arriba, luego copiamos todo lo que pusimos ebn word y lo colocamos de nuevo en la sección “Editar plantilla”, de nuestro blog, después solo presionamos el botón “Guardar plantilla”, y listo tendremos lo que aparece en la imagen de mas abajo, se ve así porque todavía no tiene estilos visuales, pero mas adelante les diré como se colocan los estilos visuales que he aprendido. Aquí abajo se ve marcado en negro, el script que incorporamos al HTML del Blog:
Configuración del Script de paginación
Como ya les mostré, ustedes tendrán que integrar un código bastante extenso, para tener solo una característica, en ese código, se pueden denotar opciones que pueden ser cambiados, como por ejemplo la cantidad de paginas a mostrar, etc. A continuación les mostrare cuales son esos valores:
1- El valor de abajo, y que aparece en el extenso código de arriba, es la cantidad de artículos o post a mostrar por página, que por defecto es una sola:
var pageCount = n;
2- Este valor, nos dará la cantidad de páginas listadas, que por defecto son solamente dos:
var displayPageNum=n;
3- Estos valores son los que aparecerán al momento de avanzar o retroceder en cada página:
var upPageWord ='Anterior'; : Este valor indica que te llevara a la página anterior a la que estas actualmente
var downPageWord ='Siguiente'; : Este valor indica que te llevara a la página siguiente a la que estas actualmente
Este es el resultado del Script que incorporamos en nuestro código HTML del Blog, se ve así porque aun no le hemos agregado ningún estilo visual:
Agregarle estilos visuales a la Paginación
Para agregarle un estilo visual a nuestra utilidad de Paginación y para ello solo tendremos que buscar otra vez en el CODIGO HTML del Blog, buscamos los valores <style> , si no lo encuentran buscamos el valor </b:skin>, y colocamos el siguiente código antes de el valor anteriormente nombrado, los siguientes son los códigos a poner, pero antes de ponerlos, tendrán que estar, ya puesto el anterior y extenso código o script, que les puse, el que les mostré al comienzo del apartado.
Aquí les muestro las imágenes que nos mostraran a donde va el script de los estilos visuales que les doy mas adelante, abajo les muestro una imagen en donde aparece el valor </b:skin>, y mas debajo de esta imagen, muestro el script de uno de los códigos de los estilos visuales, este esta ya pegado al HTML del blog, es el que se muestra marcado en negro:
“Procedimiento”, siempre que pongan uno de los siguientes estilos visuales, tendrá que ir al valor </b:skin>, después podrán poner los siguientes códigos:
Primer Estilo Visual
http://mirrorimg.net/im1/y4j.txt
Segundo Estilo Visual
http://mirrorimg.net/im1/7mx.txt
Veamos que significa cada cosa así podemos personalizarlo:
.showpageArea {} es el rectángulo donde se va a mostrar la paginación y en el ejemplo, tiene una imagen de fondo. En mi caso, sólo definí un borde, eliminé el ancho y centré el contenido.
.showpageArea a {} son los enlaces en general (los números de las páginas y los textos Anterior y Siguiente). Podemos usar cualquier propiedad; yo, elegí ponerles una imagen y un borde.
.showpageArea a:hover {} no está en el ejemplo pero, como en mi caso, todos los rectangulitos será iguales se lo agrego para cambiar el efecto gráfico cuando colocamos el ratón encima de un enlace.
.showpageNum a {} y .showpageNum a:hover {} son los enlaces con los números de las páginas si es que queremos que se vean diferentes.
.showpage a {} y .showpage a:hover {} son los enlaces con los textos si es que queremos que se vean diferentes.
.showpagePoint {} es el texto que muestra el número de la página actual
Tercer Estilo Visual
http://mirrorimg.net/im1/i8w.txt
Luego de haber puesto alguno de estos códigos y suponiendo que todavía están con Word haciendo este procedimiento, nos disponemos a copiar el contenido de Word, y pegarlo en el blog, en la sección “Editar plantilla”, y listo la característica de paginación estará disponible en otro estilo visual, luego de esto solo guardaran la plantilla.
Por ultimo es importante decirles que no podrán ver ningún script en vista previa, por lo que los cambios no se verán, solo tendrán que guardar y ver los en el propio blog, y también habrá que recalcar que para los que tienen un dominio propio este script funcionara a medias.
Procedimiento Nº 2
Este método es mucho más fácil que el anterior, este consiste en colocar un Gadget, para ello nos dirigimos a mi anterior post, en el enseñó como colocar Gadget, solo para los que no saben colocarlos, este Gadget lo colocaremos al pie del Blog, pero también funciona si lo colocas en otras partes del blog:
Primer Gadget
Este es el script del Gadget a colocar:
http://mirrorimg.net/im1/7xn.txt
Configuración del Gadget
Para personalizarlo se pueden cambiar los siguientes valores antes de Guardar el Gadget:
var pageCount=5 : Número de entradas que se mostrarán en cada página
var displayPageNum=3 : La cantidad de cuadraditos máxima que se mostrarán delante y detrás de la página activa
var upPageWord="Anteriores" : Texto para el botón de las páginas previas
var downPageWord="Siguientes" : Texto para el botón de las páginas siguientes
También antes de Guardar o Editando posteriormente, pueden configurar todo el aspecto de la botonera de las páginas modificando las propiedades de las clases correspondientes:
.showpageArea a : Contenedor general del artilugio. Enlace.
.showpageNum a : Cada uno de los botones, excepto la página activa. Enlace.
.showpageNum a:hover : Idem anterior. Enlace al pasar el puntero.
.showpagePoint : El botón de la página activa.
.showpageOf : Texto que muestra el total de páginas.
.showpage a : Botones de texto Anteriores/Siguientes. Enlace.
.showpage a:hover : Botones de texto Anteriores/Siguientes. Enlace al pasar el puntero.
.showpageNum a:link,.showpage a:link : Para no cambiar los enlaces visitados.
Los inconvenientes que verán en este Gadget, solo lo verán cuando accedan a menús, categorías, etc, ya que solo funciona en el Blog de forma general, cuando accedemos como siempre al Blog, por fechas.
Para solucionar esto hay que acceder al código de la plantilla con los Artilugios Expandidos y buscar todas las menciones a la variable 'data:label.url'. Allí donde estuviera ese trozo de código, sustituirlo por 'data:label.url + "?&max-results=5"'
Aquí se ha usado el número 5 porque es el número de posts por página que seleccionamos al principio. Si hubiéramos optado por otra cifra entonces, ahora tendríamos que usar esa en lugar del 5.
Ojo al buscar la cadena 'data:label.url'. Sólo hay que cambiar aquella que sea exactamente igual, con sus comillas simples incluidas. En algún sitio os encontrareis la variable formando parte de un condicional, pero no está encerrada entre comillas y en ese caso NO hay que sustituir nada. Por lo general encontrareis cuatro ocurrencias, pero puede haber alguna más o alguna menos.
Una vez hechas las sustituciones, Guardamos la plantilla y ya funcionará el gadget también para la navegación por etiquetas. En las páginas individuales de las entradas, seguirá sin funcionar, pero esto es lo lógico puesto que aquí no se pueden mostrar cinco posts, sino sólo aquel al que se accede.
Segundo Gadget
Este Gadget, solo habrá que colocarlo igual que el anterior, nada más fácil, el estilo visual no es de lo mejor, pero algo es algo, genera un efecto que al acercar el puntero del Mouse este se achica:
http://mirrorimg.net/im1/q13.txt
Configuración del Gadget
Luego podemos editar algunas funciones como:
var pageCount = 5; (numero de paginas que se muestran por pagina)
var displayPageNum = 3; (numero de paginas en la lista)
var firstPageWord = 'First'; (cambiar por Primero, Inicio, etc)
var endPageWord = 'Last'; (cambiar por Último, algún símbolo, etc)
var upPageWord ='Previous'; (cambiar por Anterior, algún símbolo, etc)
var downPageWord ='Next'; (cambiar por Siguiente, algún símbolo, etc)
Page '+thisNum+' of ' (Página - de, o lo que gusten poner)
Hasta el momento, yo estoy igual que la mayoría de ustedes, aprendiendo sobre blogs y todo lo relacionado con ellos, por lo que esto es lo único que he conseguido hasta el momento, para los que no han visto mi anterior post, véanlo aquí: http://www.taringa.net/posts/hazlo-tu-mismo/12859176/Como-colocar-Gadget-en-un-Blog.html , aquí les enseño a poner Gadget, entre otras cosas, espero que les sirva todo lo que les ofrezco, igual que ha mi me ha servido y bastante, de a poco iré buscando mas material de este tipo, porque la igual que ustedes yo también estoy tratando de crear un blog, se que es un trabajo arduo, sobre todo porque mucha de la información, como dije, sobre blogs o esta descontinuado o no me sirve, o simplemente no entiendo demasiado el tema, bueno eso es todo, por ahora, si les gusto, veré si hago mas de estos post, por ahora estoy buscando como crear galerías, pero sin usar Picasa o Flickr, y no he podido encontrar nada, que sea lo que me gusta, pero averigüe que si uno copia el código HTML, de alguna galería en la Web, y esta la colocas en tu blog, en modo Edición de HTML, me sale algo parecido a lo que quiero, pero con algunas cosillas de mas….
Nota: El material que les estoy entregando es el que estoy juntando a medida que aprendo, ya que yo, al igual que ustedes o algunos de ustedes, estoy aprendiendo poco a poco, y lo que muestro en este post, es algo de lo que he aprendido hasta el día de hoy, poco, pero algo es algo, ah y por cierto el blog que utilice es uno que recién estoy creando, y solo lo use de demostración, así que no importa si el estilo que use no le viene, ya lo arreglare.
Nota 2: Por cierto creo que mas de alguien le a pasado, que no puede entrar a ciertas pagina, por uno u otro motivo, por ejemplo a mi, por lo menos antes, me bloqueaban en Taringa, y no podía entrar, no habiendo Rompido las reglas del mismo Taringa, otro ejemplo, corresponde al que me ha pasado con Blogger, el cual me bloquea la entrada, y ni siquiera he roto las reglas del sitio (anduve investigando y no solo me pasaba a mi), por lo que tuve entre varias posibilidades, debido a que busque como siempre en la Web, una manera de entrar a estos sitios, halle tres manera, una de ellas fue el sitio web http://www.firewallblocker.net/ , este sitio te permite navegar anónimamente en cualquier sitio web, pudiendo blandir cualquier restricción, pero lo malo de este método, es que no te deja mas que entrar al sitio, pero no puedes lonjear, para meterte en tu cuanta, así que me vi obligado a encontrar otro método, por lo que encontré que el traductor de Google, también me dejaba entrar al sitio, pero no me dejaba lonjear en mi cuenta, por lo que otra vez me vi en la necesidad de buscar otra alternativa, y por fin lo logre, usando nada ni nada menos que el Opera Tor, no es por hacerle propaganda, pero con este si me funciono, también me había funcionado, cuando no podía acceder a Taringa, digo esto solo por si quieren saber, nada mas.