trucos blogger

Upload: elhermitanio

Post on 11-Jul-2015

323 views

Category:

Documents


0 download

DESCRIPTION

trucos para mejorar

TRANSCRIPT

los 10 trucos de blogger mas buscadosEsta post pretende ser una lista con los 10 trucos ms buscados en Blogger, algunos muy sencillos, otros no tanto, pero todos buscando mejorar algn aspecto de la plataforma para blogs de Google. 1. Eliminar la navbar o barra Blogger.

Aunque esta barra puede tener algunos atajos para manejar nuestro blog, su valor es poco o nulo para el lector, ocupa espacio extra y es poco esttica. Eliminarla es sumamente sencillo, solo hay dirigirse a Diseo/Edicin HTML y buscar el siguiente cdigo: dijo: ]]>

Y justo antes pegar lo siguiente: dijo: #navbar-iframe { height:0px; display:none; visibility:hidden; }

2. Mostrar los ltimos comentarios y los ltimos artculos en la sidebar. Este truco se basa en usar la direccin sindicacin de comentarios y los artculos que todos los blogs de Blogger tienen. Estas direcciones son: Para comentarios: http://tublog.blogspot.com/feeds/comments/default Para artculos: http://tublog.blogspot.com/posts/comments/default Donde tublog.blogspot.com es la direccin de tu blog.

Ahora solo hay que ir a Diseo/Elementos de pgina y dar clic en Aadir un gadget, en la ventana que se abre se selecciona un gadget de Feed y se escribe la direccin de

comentarios para mostrar los ltimos comentarios, se repite el proceso para crear un nuevo gadget de feed pero esta vez usando la direccin de los artculos. 3. Agregar una barra lateral o sidebar adicional a la plantilla. Agregar una nueva sidebar a una plantilla Blogger es una de las preguntas ms comunes entre lo usuarios de la plataforma para blogs de Google. Agregar una segunda sidebar varia en complejidad de acuerdo al diseo que se trate, as, mientras algunas solo requieran cambiar unas lineas de css, otras necesitarn de una remodelacin total que tal vez hagan ms conveniente cambiar de diseo. A grandes rasgos el proceso es el siguiente: 1. Analizar la estructura y estilos de la plantilla. 2. Agregar un nueva zona editable, es decir, la nueva zona para agregar los gadgets. 3. Modificar estilos. Para seguir sin problema este y cualquier tutorial que implica hacer cambios en la estructura de un blog o sitio web es muy recomendable saber algo de html y css. Entonces: Analizar la estructura y estilos de la plantilla

La mayora de las plantillas, y especialmente las de Blogger, tienen una estructura muy similar, un header (cabecera) con ttulo y descripcin, un contenedor con la columna principal y una sidebar (barra lateral) y un footer (pe de pgina) con crditos y otra informacin. Para este caso, es de inters el contenedor, donde se encuentra el contenido y la sidebar, desde el cdigo de Blogger (Diseo / Edicin HTML) este se ve como: dijo:

Varia un poco de plantilla en plantilla, pero generalmente es muy similar a lo anterior. Tanto main-wrapper (columna principal) como sidebar-wrapper (contenedor del sidebar) estn definidos por estilos css que determinan su ancho, fondo y otras caractersticas. As que lo primero ser averiguar estas caractersticas buscando algo como: dijo: #main-wrapper { float:left; width:620px; /*.... otros atributos ... */ } #sidebar-wrapper { float:right; width:300px; /*.... otros atributos ... */ }

Nota: Seguramente no los encontraran juntos ni exactamente igual y en algunas ocasiones, ms de una vez. Aqu es importante ver los anchos (width) de cada elemento, pues para agregar una nueva barra hay que cambiar la distribucin. Al sumar los anchos del cdigo de ejemplo se tiene un total de 920px, el cual ser el espacio disponible para el contenedor principal y las sidebars. Agregar un nueva zona editable. Agregar una nueva zona editable en blogger es muy sencillo, estas estn definidas por elementos section que al incluirlos en el cdigo ya pueden contener gadgets (elementos de pgina). El cdigo de una nueva zona editable es algo como: dijo:

Y para agregar una nueva zona editable, solo hay que agregar este cdigo justo despus de la zona editable existente: dijo:

Hay que tener cuidado que el ID de la nueva zona, no exista en otro elemento section, es por eso que en el ejemplo aparece como sidebar2. La clase puede repetirse y en el caso de los sidebars hasta es conveniente que lo haga. Como es una zona nueva, no necesita tener cdigo de gadgets, estos se integraran automticamente cuando agreguemos un nuevo gadgets desde Elementos de pgina. Con esto ya hay una zona editable pero como no la plantilla no esta preparada seguramente se deformara, as que falta hacer algunos cambios. Modificar estilos.

Ya sabemos el ancho total disponible y tenemos la zona editable, as que hay que cambiar determinar el ancho de cada elemento. Siguiendo el ejemplo; main-wrapper se reduce a 540px y sidebar-wrapper el ahora contenedor de ambas sidebars se aumenta a 380px. Quedando los estilos como sigue: dijo: #main-wrapper { float:left; width:540px; /*.... otros atributos ... */ } #sidebar-wrapper { float:right; width:380px; /*.... otros atributos ... */ }

De esto modo el espacio disponible para ambas sidebars es de 380px. Lo ms comun es ambas tengan el mismo ancho, es decir que ocupen el 50% cada una. A partir de lo IDs de cada zona editable definimos el ancho de cada una y su ubicacin (derecha izquierda) dentro del contenedor sidebar-wrapper, agregando los estilos: dijo: #sidebar { width:50%; float:left; /*.... otros atributos que consideres necesarios: padding, margin, etc ... */ } #sidebar2 { width:50%; float:right;

/*.... otros atributos que consideres necesarios: padding, margin, etc ... */ }

Con esto ya se tiene 2 sidebars de un ancho de 190px cada una, capaces de soportar gadgets. 4. Leer ms o Continuar leyendo en los artculos de Blogger. Para hacer la navegacin ms ligera a nuestros lectores muchas veces conviene mostrar solo un resumen de los artculos. Como Blogger no tiene esta caracterstica por defecto, habr que usar CSS o Javascript para conseguir este propsito. Ventaja: Leer ms se aade slo en las entradas que elegimos. Paso a paso: a) Expandir los artilugios y aadir justo antes de :

b) Buscar la siguiente lnea antes de post-header-line-1: dijo:

Y reemplazarla por: dijo:

c) Justo debajo de , ubicar estas dos lneas: Reemplazarlas por:

#fullpost {display:none;} Leer ms... checkFull("post-" + ""

) Guardar los cambios. e) Para postear una entrada, hacerlo del siguiente modo: dijo:

TEXTO A MOSTRAR TEXTO A OCULTAR

y listo. 5. Mostrar los artculos ms populares o ms comentados. Seguramente debido a las pruebas de Blogger para incluir el "Suscribe" en el formulario de comentarios, el widget de entradas ms populares en espaol, ha dejado de funcionar correctamente.

He corregido la Pipes de Yahoo, y ya podis disponer de nuevo del widget funcionando sin problemas. Solo tenis que copiar el cdigo en un elemento HTML (Gadget) y sustituir donde dice "elescaparatederosa" por el nombre de vuestro blog (tal como aparece en la url del navegador). function pipeCallback(obj) { document.write(''); var i; for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items.link + "'"; var item = "" + "" + obj.value.items.title + " "; document.write(item); } document.write(''); }

El nmero de entradas a mostrar en el widget, podis controlarlo en &num=5 cambiando el 5 por el nmero de entradas que queris mostrar en el widget. 6. Paginacin o pginas numeradas en Blogger.

Blogger solo muestra un enlace a la pgina siguiente y anterior, con la pgina es posible mostrar un cantidad ms grande de pginas para navegar indicadas con nmeros. Nuevamente el funcionamiento se basa en un script que es necesario instalar en el blog para que funcione. Paginar es separar las entradas del blog en grupos de cierta cantidad de entradas y permitir navegar entre ellas. En Blogger, la nica posibilidad que tenemos es Avanzar (Newer Post) o Retroceder (Older Post); en otros servicios, tambin existe la posibilidad de crear esa paginacin de tal manera que no slo podemos avanzar o retroceder sino "dividir" nuestro blog de tal manera de poder "saltearnos" cosas y navegar ms rpido:

En Blogger Accesories han creado un script que nos permite hacer esto con algunas limitaciones pero, funciona bien y, como parte del truco se basa en propiedades CSS, nos da la posibilidad de personalizarlo de muchas maneras.

Para empezar, vamos a la plantilla y sin expandir lo artilugios, buscamos lo siguiente: Justo debajo, agregamos el script que pueden descargar de este archivo de texto o copiarlo del blog original. Este es su contenido: //=(thisNum-displayPageNum-1) && p=(thisNum-displayPageNum-1) && p1) { if(!isLablePage) { html = ''+upPageHtml+' '+html +' '; } } html = ''+html; // html = ' Total '+(postNum1)+': '+html; if(thisNum

En el cdigo, hay una serie de valores que podemos modificar: La cantidad de posts que se mostrarn por pgina (por defecto una sola): var pageCount = n; La cantidad de pginas listadas (por defecto dos) var displayPageNum=n; Los textos a mostrar: var upPageWord ='Back'; // pgina anterior var downPageWord ='Next'; // pgina siguiente Para que todo estuviera terminado slo nos faltara agregar el estilo. Eso lo ponemos entre etiquetas o bien antes de . Este son las propiedades originales definidas por Blogger Acccesories: dijo: .showpageArea { background: transparent url(http://i263.photobucket.com/albums/ii150/mohamedrias/ShowPagenavbar.jpg) norepeat left top; color:#003366; font-size: 11px; padding: 10px 15px 10px 30px; text-align: left; width: 470px; } .showpageArea a {

color: #0F0; text-decoration: underline; } .showpageNum a { border: 1px solid #FFF; color:#0F0; margin: 0 10px; padding: 0 5px 0 8px; text-decoration:none; } .showpageNum a:hover { color: #FE8314; background-color: #FFF; border: 1px solid #0071A5; } .showpagePoint { color: #FE8314; margin: 0 8px 0 4px; } .showpage a { color: #FFF; padding: 0 2px 0 4px; text-decoration: none; } .showpage a:hover { color: #FE8314; text-decoration: underline; } .showpageNum a:link,.showpage a:link { color: #CC0000; text-decoration: none; }

Veamos que significa cada cosa as podemos personalizarlo: .showpageArea {} es el rectngulo donde se va a mostrar la paginacin y en el ejemplo, tiene una imagen de fondo. En mi caso, slo defin un borde, elimin el ancho y centr el contenido. .showpageArea a {} son los enlaces en general (los nmeros de las pginas 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 grfico cuando colocamos el ratn encima de un enlace. .showpageNum a {} y .showpageNum a:hover {} son los enlaces con los nmeros de

las pginas 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 nmero de la pgina actual Otra posibilidad si no se quiere poner el cdigo a la plantilla, es agregar un elemento HTML y ubicarlo justo debajo del elemento Entradas del Blog. En ese caso, es all donde colocamos el estilo y debajo, el script. Es importante saber que la paginacin no funciona en las pginas individuales (esto es lo normal incluso en otros sistemas) pero tampoco funciona si navegamos por etiquetas utilizando hacks y, esto ltimo es una limitacion. De cualquier modo, me parece una solucin interesante y pese a que los cdigos son largos, es bastante simple de implementar y all en el fondo, pueden verlo funcionando. 7. Agregar un favicon en Blogger. Para agregar ese pequeo icono visible en favoritos, pestaas y barra de direcciones, solo hay que crear un icono y vincularlo desde la plantilla. Para esto desde Diseo/Edicin HTML se busca el siguiente cdigo: dijo:

Y justo antes se coloca lo siguiente: dijo:

Para obtener la URL de tu favicon puedes alojarlo en un servicio gratuito como fileden. 8. Utilizar un dominio propio en Blogger. Tener un dominio propio es como tener una marca y una identidad mejor definida y desde hace un tiempo Blogger te da la posibilidad de usar el tuyo en tu blog. A continuacin te mostramos como hacerlo: 1. Tu dominio Lo primero es disponer de un dominio propio (ej tublog.com), si no cuentas con uno, existen muchos sitios para comprarlos, como mydomain o godaddy, este ltimo es el

ms popular y econmico en particular, lo recomiendo. En estos momentos los precios no rebasan los 9 dolares y todos te proveen de un panel para manejarlo. S quieres ahorrarte algunos pasos, puedes comprarlo en Blogger por un precio un poco mayor (10 dolares) y pasar al paso 3. 2. Configuracin en tu dominio. Lo siguiente es direccionar los DNS (Domain Name System) de tu dominio con un registro CNAME, esto varia de acuerdo a la entidad registrante pero afortunadamente Google provee una gua en espaol para los servicios ms comunes. De forma general el proceso es el siguiente: 1: Entra al panel de tu dominio y busca la administracin de DNS. 2: Si existen registros CNAME, elimnalos. Despus de eliminarlo o si no existe ninguno, crea uno nuevo, en el campo de nombre (name) coloca sin comillas www y en el nombre del hospedaje (host name) coloca sin comillas: ghs.google.com y guarda el registro.

S tienes problema con esto tienes todo el derecho a pedir que te auxilie tu empresa registradora. 3: Configuracin en Blogger. 1- Entra Blogger y dirgete a la pestaa Configuracin y ah a la opcin Publicacin. 2- Entra en el enlace de Dominio personalizado

3: S no has comprado aun tu dominio, aqu lo puedes hacer pero a un precio un poco ms alto, si ya dispones de l da clic en Cambiar a opciones avanzadas

4: Introduce el nombre de tu dominio, por ej. www.tublog.com y guarda

4. Ahora solo resta esperar para que el registrante actualice sus registros y la redireccin se complete Hay que ser pacientes en la actualizacin de los registros, algunos servicios pueden durar unos minutos y otros un par de das. Algo muy bueno es que Blogger se encarga de redireccionar tu dominio genrico (tublog.blogspot.com) al nuevo. 9. Formulario de comentarios en la misma entrada. para esto hay dos formas fasil y difisel yo recomiendo la difisil pero la que les guste funsiona 1: La fasil En este en realidad a dejado de ser un truco, pues ya forma porte de las caractersticas comunes de Blogger, aun as hay que activarlo desde Configuracin/Comentarios , ah en la opcin de Ubicacin del formulario de comentarios se selecciona Entrada incrustada a continuacin. 2: La difisil Hace unos das que Blogger la opcin de agregar el formulario de comentarios en la misma pgina, una gran noticia pero que no se aplica de forma automtica en los blogs que usan plantillas modificadas previamente. Para estos casos hay que introducir modificar un cdigo manualmente. El proceso es el siguiente: 1. Entrar a Blogger in Draft (No blogger normal). 2. Ir a la pestaa Opciones y posteriormente a la opcin Comentarios. 3. Ah encontraran una nueva seccin Ubicacin del formulario de comentarios con las opciones: blogger-formulario-comentar Donde se selecciona la marcada en la imagen. 4. Guarda los cambios. Ahora dirgete a la pestaa Diseo y posteriormente a la opcin Edicin de HTML. Ah marca la opcin Expandir plantillas de artilugios. 5. Ahora busca el siguiente cdigo:

dijo:

Nota: Si encuentras dos cdigos iguales a este, el indicado ser el que se encuentre dentro de: , es decir, que este cdigo estar unas lineas arriba del buscado. Si encuentras solo una vez el cdigo, continua normalmente. Y remplzalo con el siguiente: dijo:

6. Guarda los cambios en la plantilla y tendrs a disposicin tu nuevo formulario de comentarios. Nota: La variacin en el diseo de las plantillas puede causar algunas pequeas diferencias el proceso. 10. Poner publicidad de Adsense en Blogger. Con el cambio de lenguaje en las plantillas de Blogger, de html a xml, agregar publicidad directamente en el cdigo se volvi un poco menos intuitivo, adems que cualquier error en la sintaxis puede ocasionar que no puedas guardar los cambios en la plantilla. Para ayudarte en esta tarea hemos hecho una lista con 10 de los lugares en tu blog ms comunes para poner publicidad, as como la forma de implementarlos y los formatos ms adecuados en base a los disponibles en adsense. (Clic en leer ms) PUBLICIDAD Sidebar

Implementacin. Este es uno de los lugares ms sencillos para colocar adsense. Basta con ir al panel de elementos (plantilla/elementos de pgina) y agregar un widget html con el cdigo del anuncio o bien directamente un widget de publicidad adsense. Formatos recomendados: 125125, 120600 y 160600 Entre posts

Implementacin. Puedes ver como implementarlo en nuestro artculo sobre esta opcin de blogger. Formatos recomendados: 46860, 300250 y 336280 Bajo el header

Implementacin: * Transforma el cdigo del anuncio a su equivalente en caracteres html. Puedes usar algn convertidor en linea. * Busca * Pega el cdigo convertido justo despus. Formatos recomendados: 72890 y 72815 Sobre la columna de entradas

Implementacin: * Transforma el cdigo del anuncio a su equivalente en caracteres html. * Busca * Pega el cdigo convertido justo despus. Formatos recomendados: 46068, 46815 y 336280 Bajo el ttulo de la entrada (visible en todas las pginas)

Implementacin: * Transforma el cdigo del anuncio a su equivalente en caracteres html. * Expande plantilla de artilugios y busca (sino lo encuentras bscalo sin /) * Pega el cdigo convertido justo despus. Formatos recomendados: 46868 y 46815 Bajo el ttulo de la entrada (solo visibles en pginas de las entradas) Implementacin: * Transforma el cdigo del anuncio a su equivalente en caracteres html. * Expande plantilla de artilugios y busca (sino lo encuentras bscalo sin /) * Pega el cdigo convertido siguiendo este esquema: dijo:

Formatos recomendados: 468x68 y 468x15 Al pie de la entrada

Implementacin: * Transforma el cdigo del anuncio a su equivalente en caracteres html. * Expande plantilla de artilugios y busca (sino lo encuentras bscalo sin /) * Pega el cdigo convertido justo despus. Formatos recomendados: 468x68 y 468x15 En el cuerpo de la entrada (visible en todas las pginas)

Implementacin: * Transforma el cdigo del anuncio a su equivalente en caracteres html. * Expande plantilla de artilugios y busca (sino lo encuentra busca nicamente) * Justo abajo pega el cdigo transformado siguiendo este esquema: dijo:

Formatos recomendados: 125x125, 180x150, 120x240 y 200x200 En el cuerpo de la entrada (solo visibles en pginas de las entradas) * Transforma el cdigo del anuncio a su equivalente en caracteres html. * Expande plantilla de artilugios y busca (sino lo encuentra busca nicamente) * Justo abajo pega el cdigo transformado siguiendo este esquema: dijo:

Formatos recomendados: 125x125, 180x150, 120x240 y 200x200 Entre post y comentarios (solo visibles en pginas de las entradas)

Implementacin: * Transforma el cdigo del anuncio a su equivalente en caracteres html.

* Expande plantilla de artilugios y busca: * Justo arriba pega el cdigo transformado siguiendo este esquema: dijo:

Formatos recomendados: 468x60, 300x250 y 336x280 Al pie del blog

Implementacin: * Transforma el cdigo del anuncio a su equivalente en caracteres html. Puedes usar algn convertidor en linea. * Busca * Pega el cdigo convertido justo despus. Formatos recomendados: 728x90 y 728x15.

CREAR UN INTRO PARA EL BLOG

Cuando es la primera vez piensas en hacer un blog seguro se te viene a la mente algo ms del estilo pgina Web con algn tipo de pantalla de bienvenida, pero luego descubres que una pgina Web no es lo mismo que un blog, y aunque un blog tiene demasiados puntos positivos a favor de repente hay quien quiere usar estos elementos de las pginas Webs para su propio blog, tal es el caso de las pantallas de presentacin o intros. Aunque hay muchos mtodos para ello algunos de estos requieren que se cree un documento html que ser el se muestre como presentacin, sin embargo esto no es muy recomendable cuando se trata de posicionar el blog. As que experimentando un poco dise un mtodo con el cul no usaremos pginas adicionales para no afectar el PageRank, y para evitar daar el posicionamiento o ser sancionados por Google no ocultaremos el contenido del blog, slo usaremos dos capas, una que es el contenido del blog le pondremos un z-index muy bajo, y otra que ser el intro con otro z-index pero ms alto, esto har que los robots de Google puedan leer el contenido del blog sin problemas. Este intro para el blog aunque es algo sencillo puede tener ms elementos si lo desean, ya ser a opcin de cada quien, yo por lo pronto slo le puesto una imagen de presentacin, un botn para entrar y msica de fondo. Y atencin, que slo se ver en la portada del blog para que no sea molesto para los lectores, as que cuando naveguen por las entradas o pginas del blog el intro no ser visible. Ahora veamos cmo ponerlo, primero entra en Diseo | Edicin de HTMl y busca esta etiqueta: dijo:

O si usas una plantilla del Diseador de Plantillas de Blogger entonces busca esta lnea: dijo:

Justo debajo de cualquiera de una de ellas agrega lo siguiente:

body {margin:0; padding:0; overflow:hidden;} .entrar, #navbar-iframe, .navbar {display:none;} .BlogOculto {z-index:-100;} #Intro {z-index:5000;} #Intro {text-align:center; background:#000; /* Color de fondo de la pantalla */ position:absolute; width:100%; height:100%; overflow-x:hidden; } p.btnEntrar a { font-size: 16px; /* Tamao de la letra del botn */ font-style: italic; font-weight: bold; text-decoration: none; color: #1C1C1C; /* Color de la letra del botn */ background: #ccc; /* Color de fondo del botn */ padding: 6px; border: 1px solid #2E2E2E; /* Color del borde del botn */ border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } p.btnEntrar a:hover {position:relative; top:1px; left:1px;} Entrar Y luego busca la etiqueta y arriba de ella agrega esto: dijo:

Es todo? S, eso es todo, ahora slo vamos a personalizarlo. En el primer cdigo que hemos agregado estn sealados en color verde algunos aspectos como el color que tendr el intro, el tamao de letra del botn, color del botn, etc. Luego, en donde dice URL de la imagen puedes poner la URL de la imagen del logotipo de tu blog, alguna imagen de bienvenida o cualquier otra imagen. El texto del botn 'Entrar' puede cambiarse por cualquier otro, ah lo he sealado en negrita, o bien, si lo deseas puedes reemplazar el botn por una imagen, slo elimina el texto Entrar y en su lugar pon el cdigo de una imagen: dijo:

Si haces eso entonces debers eliminar el borde y color de fondo del botn sealado en color verde. Pero es MUY IMPORTANTE que si cambias ese texto o si pones una imagen en su lugar NO modifiques el cdigo prpura que se encuentra alrededor. Cualquier elemento que quiera agregarse al intro debe ir antes de donde dice Fin del contenido del intro o despus de Inicio del contenido del intro Regularmente los intros no tienen muchos elementos por cuestin de presentacin, as que entre menos cosas

tenga mejor. En donde dice margin-top:200px es la distancia que tendrn los elementos del intro respecto a la parte superior de la pantalla, puede modificarse por otro valor.

Yo le he puesto una msica de fondo utilizando un video de YouTube slo que le he puesto en ceros los valores de alto y ancho para que el reproductor sea invisible. Si deseas poner tambin una msica de fondo entonces cambia las XXXXXXX por la ID del video que quieres poner. Si quisieras poner un archivo en flash SWF quita el cdigo del reproductor (slo lo gris) y en su lugar pon el cdigo del SWF. Pero ojo, que slo debe eliminarse lo que est en color gris. Si no deseas poner audio, ni tampoco un archivo en flash puedes eliminar el cdigo gris o dejarlo como est.

Bueno gente aca les traigo algunos de los miles de trucos que se para mejorar tu blog. son todos muy buenos si necesitan saber algo solo pregunten que los posteo.Ocultar/Eliminar los crditos en las plantillas nuevas

Casi todos los das me preguntan cmo quitar los crditos que aparecen al final de las plantillas nuevas de Blogger. Quiero aclarar que no es algo con lo que estoy muy de acuerdo, pero como s que lo seguirn preguntando y de cualquier manera conseguirn hacerlo ser mejor que explique cmo hacerlo de una vez. Primero, antes de decidir si lo quitamos podemos considerar que el gadget se puede

editar de forma que dentro de esos crditos pueda aparecer nuestro nombre u organizacin. Para conseguirlo slo hay que ir a Diseo | Elementos de la pgina y hacer click en Editar sobre el elemento llamado Attribution. Ah se puede agregar el nombre del autor, del blog, o de lo que sea.

Esto har que antes de los crditos aparezca el nombre que hayamos ingresado, de manera que el lector podr saber que el autor del blog es X persona pero que la plantilla es desarrollada por Blogger. La otra opcin es ocultar el gadget para que no aparezca en el blog. Para ello vamos a Diseo | Edicin de HTML, y antes de ]]> pegamos lo siguiente: #Attribution1 {display:none; visibility:hidden;}

Con eso habrs ocultado los crditos, as que cuando quieras que aparezcan de nuevo slo eliminas eso que has agregado. La tercera opcin es eliminarlo por completo. Para hacerlo entra igual en Diseo | Edicin de HTML y SIN expandir los artilugios busca esta lnea y elimnala:

Con eso habrs eliminado el gadget de forma permanente.

Botn de Facebook flotante

Para colocar este badge de Facebook en tu blog, entra a Diseo > Edicin de HTML y antes de esto:

Slo cambia tu nombre de usuario y listo. Si ya tienes el botn de Twitter y quieres tener ambos bagdes entonces cambia lo que est en color verde por bottom:105px; de este modo el botn quedar abajo del badge de Twitter. En esta ocasin slo hice un diseo del botn pues pens que el color clsico de Facebook es muy distintivo y no necesita muchas variantes, pero si quieres cambiar el badge por un cono u otra imagen cambia la URL de la imagen por la tuya y listo. [b]Botn [/b] Colocarlo es muy sencillo, slo entra en Diseo > Edicin de HTML y antes de pega esto:

de Twitter flotante

Cambia lo que est en color rojo por tu nombre de usuario de Twitter.

Cmo evitar que te copien el texto de tu blogComo ya sabemos hay mucha gente que se quiere pasar de lista copiando el contenido de un blog para luego pegarlo tal cual y publicarlo. En ocasiones escribir un post significa dedicarle mucho tiempo, ya sea investigando, recopilando fuentes, buscando imgenes, redactando, corrigiendo y dando forma al contenido, y de pronto nuestro esfuerzo aparece en el blog de otros asumiendo que son los autores de dicho contenido y obviamente sin la mencin de crditos. As que veremos una forma para evitar que nos roben el contenido del blog alguno de estos odiosos personajes. Aclaro, estoy completamente de acuerdo en que la informacin debe ser libre y debe compartirse, pero de ningn modo estoy de acuerdo en que se robe informacin y se asuman el trabajo de otros, por lo que si tomas informacin de algn lado cita a los autores y redctalo con tus propias palabras.

Entonces vamos a emplear un script que deshabilita la opcin de seleccionar el texto de una pgina web, evitando de esta forma que hagan un 'copy & paste' y te roben tu contenido. Slo tienes que entrar a Diseo > Edicin de HTML y pegar antes de lo siguiente:

function disabletext(e){ return false } function reEnable(){ return true } //if the browser is IE4+ document.onselectstart=new Function ("return false" //if the browser is NS6 if (window.sidebar){ document.onmousedown=disabletext document.onclick=reEnable }

Cambiar o eliminar "Suscribirse a: Entradas (Atom)"Suscribirse a: Entradas (Atom) es un link para que tus lectores puedan suscribirse a tus post y estn actualizados con el contenido de tu blog a travs del feed del sitio. En el pasado slo desde ah podan realizarse dichas suscripciones, pero con el tiempo y la creacin de nuevas plantillas esta suscripcin se hizo ms dinmica con conos, imgenes, links, botones y formularios. As que el Suscribirse a: Entradas (Atom) se volvi un tanto obsoleto en cuanto a diseo se refiere, es por eso veremos hoy cmo eliminarlo, cambiarlo o decorarlo. Primero que nada que hay que localizar el cdigo que contiene este link de suscripcin; entra a Diseo > Edicin de HTML y marcando la casilla Expandir artilugios busca esto:

(

Si quieres ocultar toda la frase entonces elimina todo lo que est en rojo. Si quieres cambiar el texto de "Suscribirse a:" sustituye por el texto que desees. Si quieres cambiar la palabra "Entradas" remplaza por otro texto. Si quieres cambiar el "(Atom)" cambia ( por otro texto o elimnalo. Si quieres anteponer un cono de feed pon esto: antes de

Ocultar la barra de BloggerTal vez a algunos les parezca funcional dejar en su blog la barra superior de Blogger (navbar) , pero otros por esttica desean eliminarla. Oculatrla es muy sencillo, slo debes ir a Diseo -> Edicin de HTML, y pegar despus de la etiqueta este cdigo: #navbar-iframe { height:0px; visibility:hidden; display:none; } Si usas una plantilla hecha a travs del Diseador de plantillas de Blogger entonces el cdigo debes pegarlo despus de

En esta primera parte de trucos para blogger, les contare acerca de algunas herramientas y cdigos, que nos pueden ayudar en algunas de las tareas de vital importancia para nuestros blogs. TIP 1 Algo que debemos tener en cuanta cuando creamos nuestros blogs, son los enlaces externos. En muchas ocasiones necesitamos hacer referencia a otras paginas y en muchos casos solo logramos que salgan de la nuestra, gracias a que no configuramos nuestro blog para que habr dichos enlaces en una pagina nueva. Para lograr que todo link que insertemos en nuestro blog se habr en una pestaa diferente del navegador de nuestros lectores haremos lo siguiente: Vamos a la pestaa DISEO, luego clic en EDICIN HTML, y luego buscamos esta palabra ]]> como lo muestra la siguiente imagen.

Justo debajo de este cdigo colocamos lo siguiente. var dominio = "www.tublog.blogspot.com"; var dominio1 = "tublog.blogspot.com"; var script = "javascript:void(0);"; var imagenesblogger0 = "bp0.blogger.com"; var imagenesblogger1 = "bp1.blogger.com"; var imagenesblogger2 = "bp2.blogger.com"; var imagenesblogger3 = "bp3.blogger.com"; var blogger1 = "www.blogger.com";

var blogger2 = "www2.blogger.com"; var publicidad = "pagead2.googlesyndication.com"; function LinksExternos() { var Externo; if (document.getElementsByTagName('a')) { for (var i = 0; (Externo = document.getElementsByTagName('a')); i++) { if ( Externo.href.indexOf(dominio) == -1 && Externo.href.indexOf(dominio1) == -1 && Externo.href.indexOf(script) == -1 && Externo.href.indexOf(imagenesblogger0) == -1 && Externo.href.indexOf(imagenesblogger1) == -1 && Externo.href.indexOf(imagenesblogger2) == -1 && Externo.href.indexOf(imagenesblogger3) == -1 && Externo.href.indexOf(publicidad) == -1 && Externo.href.indexOf(blogger1) == -1 && Externo.href.indexOf(blogger2) == -1 ) { Externo.setAttribute('target', '_blank'); //Externo.setAttribute('class', 'linkexterno'); } } } } window.onload = function() { LinksExternos(); } En las primeras lineas donde dice "www.tublog.blospot.com" y "tublog.blogspot.com" las cambiamos por el link de nuestro blog y listo, ya esta configurado para que cuando le den clic en algn link no salgan de nuestra pagina si no que se les habra otra pestaa. TIP 2

Como pueden ver en este blog hay un pajarito volando de lado a lado del blog xD, pues este pajarito hace referencia a TWITTER, y cuando le das clic te redirecciona a mi cuenta en twitter http://twitter.com/anderkno Si quieres tenerlo en vuestro blog solo debes insertar la siguiente linea de codigo en DISEO>ELEMENTOS DE LA PAGINA>AADIR UN ELEMENTO luego de esto solo seleccionamos AADIR ELEMENTO HTML/JAVASCRIPT y listo copiamos el siguiente codigo. var birdSprite='http://oloblogger.googlecode.com/files/birdsprite.png'; var targetElems=new Array('img','hr','table','td','div','input','textarea','button','select','ul','ol','li','h1','h2','h3','h 4','p','code','object','a','b','strong','span'); var twitterAccount = 'http://twitter.com/USUARIO'; var twitterThisText =''; tripleflapInit();

Donde dice USUARIOS, colocas tu usuario de twitter y listo. Bueno amigos eso es todo por esta ocasin, espero y les haya servido esta informacin, recuerden que el conocimiento es poder xD

Como sacar la barra de blogger navbar

Primero que todo vamos a diseo buscamos edicin de HTML y no saldr la plantilla en HTML de nuestro blog, apretamos Ctrl+F (nos saldr una barra en la esquina inferior izquierda) entonces en ese momento introducimos este cdigo:


No olvides de cambiar la direccin de mi Blog (http://freevolution-utem.blogspot.com/) con tu direccin del Blog. Tambin esta imagen de Homero se puede cambiar con otra imagen que te gusten este es la url de la imagen: (http://3.bp.blogspot.com/vXqxtR1wOmc/TVoQPzKTUEI/AAAAAAAAB9U/z6onoofmFzA/s1600/Deja%252B un%252Bcomentario%252Bhomero.png) Aqui les dejo la url de otra imagen si quieren cambiar: (http://4.bp.blogspot.com/3UliRpL59Pw/Te1I1zZNOgI/AAAAAAAAAR0/fgIrZF_DSVg/s1600/gato+listo.png)

Para instalarlo debers ir a Diseo->Elementos de pgina->Aadir un gadget>HTML/Javascript. En l debers pegar el cdigo de arriba.

Quitar lo de los creditos - blog blogger (con la tecnologa de blogger)

Muchas personas no estn de acuerdo con esto de quitar los crditos de quin lo hizo y su dueo, pero eso esta en la persona pues un blog en muy personal: Una opcin es ocultar el gadget para que no aparezca en el blog. Para ello vamos a Diseo | Edicin de HTML, y antes de ]]> pegamos lo siguiente:

#Attribution1 {display:none; visibility:hidden;}

Con eso habrs ocultado los crditos, as que cuando quieras que aparezcan de nuevo slo eliminas eso que has agregado. La Otra opcin es eliminarlo por completo. Para hacerlo entra igual en Diseo | Edicin de HTML y SINexpandir los artilugios busca esta lnea y elimnala:

Con eso habrs eliminado el gadget de forma permanente. Ahora slo depende de cada uno quitar o no eliminar al diseador y dueo de la plantilla.

Gadgets para Observar el Transito de tu BlogUna forma interesante de observar el trnsito de tu blog es agregar uno de estos Gadgets que permiten observar el pas del visitante (segn su registro) y origen de su entrada a tu blog (post, blog, Google). Es en tiempo real.

Dejo el enlace para que elijan el modelo. Arriba de cada uno tienen la primer opcin de diseo (estilos predeterminados, colores y ancho). Una vez concluido el diseo copian y pegan en sus blogs el cdigo que les ofrece al final.

Aqu te dejo el enlace a (http://feedjit.com/) para obtener el cdigo de este Gadget.

Contador de personas online para blog (blogger o blogspot)

Estadsticas en tiempo real para tu blog (blogger o blogspot) y para todos los blogs y webs. En este post les dejo 2 de lo mas fciles contadores de personas online gratis y sin registro para vuestro blog. Simplemente copia el cdigo html que aparece abajo en el cuadro y pgalo en tu blog . Para instalarlo debers ir a Diseo->Elementos de pgina->Aadir un gadget>HTML/Javascript. En l debers pegar el cdigo de abajo .

1. El primer contador de personas online para tu blog queda as:

Copiar Cdigo:

WAU_classic('mx48m7f2bopt')

2. El segundo contador de personas online para tu blog queda as:

Copiar cdigo:

WAU_tab('9wjcxhm2c9hm', 'left-middle')

Espero les sirva

Crear una pgina de fans en Facebook para tu blogPara poder hacer esto, tenemos que crear una nueva pgina en Facebook para nuestro blog, lo que nos permitir entonces aadir el gadget de "Fans" desde all.

[1] Nos daremos de alta en Facebook si es que an no lo estamos. [2] Ahora tendremos que loguearnos en Facebook para crear una nueva pgina para fans de nuestro blog, desde este enlace: Pgina fans de FaceBook (http://www.facebook.com/pages/create.php) [3] Una vez all veremos unos campos que hemos de completar: Aqu seleccionamos como veis en la imagen "Marca, producto, o de la Organizacin" y escogemos la opcin "Sitio web" que es la ms lgica si vamos a usar el gadget para que las visitas de nuestro blog se hagan fans del mismo. En "Nombre de la pgina" colocamos el de nuestro blog. Debajo podemos marcar la opcin para hacer la pgina pblica o dejarlo para despus una vez hayamos terminado de prepararla. Completamos las palabras de seguridad y damos en "Crear pgina". [4] En la pgina siguiente hemos de incluir una imagen para nuestra pgina y editar la informacin para incluir los datos que consideremos oportunos. [5] El siguiente paso ser importar las entradas de nuestro blog a la nueva pgina de fans del mismo. En las pestaas del men de la pgina, pinchamos en el simbolo + y escogemos la opcin Notas. En la siguiente pantalla pinchamos en el botn "Escribir una nota nueva". Veremos entonces un editor con algunos iconos pequeos en la parte superior derecha, pinchamos en el que parece una libretita (Notas). En la siguiente pgina optamos por "Importar blog". En la siguiente pgina introducimos la url de nuestro blog o la url del feed del blog y pinchamos en Empezar a importar, una vez termine, pinchamos para confirmar la importacin. Despus de confirmar la exportacin, las ltimas entradas de nuestro blog se habrn importado a nuestra pgina de fans.

Volvemos al inicio de la nueva pgina y ah veremos la nueva pgina lista tal como la hemos configurado. [6] Vamos ahora a incluir un gadget en nuestro blog para facilitar que las visitas se hagan "fans" de la pgina que acabamos de crear. En la nueva pgina creada, debajo de la imagen que hemos incluido en su perfil, pinchamos en Modificar pgina En la nueva pgina que se abre, localizamos el gadget de la imagen y pinchamos en "Promote with a like Box". Pasamos a la pgina siguiente y en el formulario escogemos las opciones para el panel. Pinchamos en "Get code" y copiamos el cdigo "iframe" para colocarlo en un gadget HTML/Javascrip en la sidebar de nuestro blog.

Algo como asi debe qedar :

Espero que les sirva

Juego Pacman en tu BlogSi quieres que tus visitantes permanezcan ms tiempo en tu Blog y quieres reducir el porcentaje de rebote de Google Analytics. La mejor alternativa es poner el Pacman en tu blog, con esto le ofreceremos la posibilidad de jugar al Pacman a nuestros visitantes y seguramente estn ms tiempo en el blog.

Es muy fcil de Instalar, simplemente tenemos que aadir un nuevo Gadget HTML/Javascript y pegar en l el siguiente cdigo:



Si quers cambiarle el ancho, simplemente modific el 320 por otro nmero mayor o menor, y para el alto slo tienes que modificar el 420. Esto es muy efectivo, incluso hasta yo me qued jugando un rato...

Gadgets Gratis relojes para tu BlogTan slo tienes que elegir el reloj que ms te guste, de entre la gran variedad de relojes

de que dispone este web, y pulsar en el enlace que aparezca debajo del reloj, accediendo as a la pgina donde te encontrars el cdigo que hayas elegido, el cual slo debes copiar y pegar en el lugar que desees de tu web o blog.

Para instalarlo debers ir a Diseo->Elementos de pgina->Aadir un gadget>HTML/Javascript. En l debers pegar el cdigo de abajo de cada reloj. Aqu abajo te dejo algunos relojes para poner en tu blog:

Copia y pega el siguiente cdigo en tu blog :


Quero este Reloj

Copia y pega el siguiente cdigo en tu blog:


Quero este Reloj


Copia y pega el siguiente cdigo en tu blog :



Quero este Reloj

Copia y pega el siguiente cdigo en tu blog:



Los cdigos son configurado para que los relojes tenga un tamao de 120x120. Si deseas variar el tamao a tu gusto, tan slo tienes que cambiar el 120 de height y width para variar el alto y ancho, respectivamente. Aqui puedes encontrar mas relojes gratis para tu Blog: http://www.widgetsi.com/relojes-web-gratis.php

Quitar Attribution de Plantillas de BloggerLa la hora de crear nuestro sitio/blog; nos vemos afectados que debemos utilizar en el caso de Blogger plantillas ya creadas de otras personas. y blogger en algunas de estas plantillas agrega un Attribution el cual deja los creditos del creador de la plantilla y los de blogger. Para nosotros que utilizamos blogger y queremos quitar esos creditos, simplemente editando el codigo CSS del Attribution1 podemos borrarlo sin problema. Aclaro que no se borra simplemente lo hacemos tan diminuto que no se vera. Ejemplos:

Ejemplo de Attribution de la plantilla simple de Blogger.

Ejemplo de Attribution de una plantilla creada por un sitio web.

#Attribution1 { height: -0px; width: -0px; font-size: -0px; margin: -0px; padding: -0; } #HTML2 { height: 10px;

Como veran tambien edite la configuracin de HTML2. HTML2 es el gadget que utilizo en "HTML/Javascript" para agregar el copyright que quiero; simplemente lo bajo 10px; para que no se vea muy alto y listo. El HTML2 puede variar dependiendo cuantos "HTML/Javascript" tengas en tu sitio/blog.

trucos blogger: cambia la barra separadora

Despues de buscar y buscar encontre un buen tuto para cmabiar la barra separadora en blogger espero les sirva, la fuente al final y el ejemplo tambien.

1- Situate en Plantilla, edicin HTML

2- Busca el siguiente cdigo: post {

margin:.5em 0 1.5em; border-bottom:1px dotted $bordercolor; padding-bottom:1.5em; }

[copien esto ctrl + f en la pagina y pegar] 3- Cambia esta parte: border-bottom:1px dotted $bordercolor; por esta otra background:url("http://URL DE TU IMAGEN" no-repeat bottom left; Quedara as: .post { margin:.5em 0 1.5em; background:url("http://URL DE TU IMAGEN" no-repeat bottom left; padding-bottom:1.5em; } De la misma manera la barra de separacin en la sidebar por una imagen: Buscas este cdigo en tu plantilla - HTML: .sidebar .widget, .main .widget { border-bottom:1px dotted $bordercolor; margin:0 0 1.5em; padding:0 0 1.5em; } Y lo sustituyes por este: .sidebar .widget, .main .widget { background:url("http://URL DE TU IMAGEN" no-repeat bottom left; margin:0 0 1.5em; padding:0 0 1.5em; } Tienes que cambiar la url (direccin) "URL DE TU IMAGEN" por la de tu barra.

Solo sube o busca una barra y listo puedes modificarlo fuente

Trucos/efectos/cdigos para que pongas en tu blog.Hola, ac les vengo a dejar un post para cualquier persona que tenga blogger y quiera ponerle efectos/trucos. Todo lo que voy poner a continuacin son cosas que fui aprendiendo y que saque de blogs de ayuda. Ac dos formas para evitar que te copien: Evitar Copiar 1 Muchas veces ponemos algo copado, luego entramos a otros blogs y vemos que tiene lo mismo que nosotros escribimos, esta forma es para evitar que nada de lo que esta en nuestro blogs sea copiado. Lo que vamos a hacer es entrar a "Diseo" y "Edicin de HTML" y marcar el cuadradito "Expandir artilugios"

Apretamos ( Ctrl + F ) y buscamos esta lnea: La remplazamos por esta otra: Si usas una plantilla hecha con el "Diseador de plantillas de Blogger" entonces tenes que buscar esta lnea:

Y reemplazarla por esta: Guardas los cambios y listo, no se va a poder seleccionar el texto, usar el botn derecho, ni arrastrar imgenes dentro del blog.

Evitar Copiar 2 (Ventanita) Otra manera de evitar que copien, y que al momento de dar click en el boton derecho del mouse salga una ventanita con un mensaje es la siguiente:

tenes que colocar este script entre las etiquetas y de tu sitio: /*Mensaje que puedes personalizar*/ var mensajeerror = "Epa, no copiemos(?"; if(document.layers) window.captureEvents(Event.MOUSEDOWN); function bloquear(e){ if (navigator.appName == 'Netscape' && ( e.which == 2 || e.which == 3)) { alert(mensajeerror);return false; } if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 2 || event.button == 3)) { alert(mensajeerror);return false; } } window.onmousedown=bloquear; document.onmousedown=bloquear;

Donde dice "Epa, no copiemos(?" ponemos que poner el mensaje que queremos que salga en la ventanita, guardamos y ya esta.

Efectos de aparecer y desaparecer imgenes al pasar el mouse: Para hacer estos efectos tenemos que ir a "Diseo" > "Edicin de HTML" y marcando "Expandimos artilugios" buscamos la etiqueta y justo antes ponemos los siguientes cdigos script : Para el efecto "aparecer imagen" ponemos: (este efecto se aplicara en todas las fotos del blog) $(document).ready(function() { $('img').fadeTo('slow', 0.5); $('img').hover(function() { $(this).fadeTo('slow', 1.0); }, function() { $(this).fadeTo('slow', 0.5); }); }); Efecto "desvanecer" ponemos: (este efecto se aplicara en todas las fotos del blog) $(document).ready(function() { $('img').fadeTo('slow', 1.0); $('img').hover(function() { $(this).fadeTo('slow', 0.5); }, function() { $(this).fadeTo('slow', 1.0); }); }); Guardamos y ya tenemos el efecto.

Efecto "arcoiris" en los links:

Con este script vamos a dar un efecto de "arcoiris" al pasar el mouse sobre los links. Esto har que el link que nosotros tocamos con el mouse cambie de colores (el efecto se aplica para todos los links que tengas en el blog) Entramos a "Diseo" > "Edicin de HTML" buscamos y antes de esto, pegamos: Y listo.

Efecto deslizante en enlaces. Lo primero que debemos saber es que para aadir este efecto en el blog, tenemos que tener la llamada a JQuery en nuestro blog, se coloca solo una vez en el blog, por si no la tenes te la dejo ac. Este cdigo hay que pegarlo antes de : //