LA PLEGARIA DE UN PAGANO

Seguridad anti-hacker en Blogger (tutorial) | Anti-hacking

2009-07-10T03:33:00.019-05:00

No suelo hacer este tipo de tutoriales pero algo me llamó la atención, vi en Twitter dos twitts [1] [2] de @varthdeider que me obliga a hacer este tutorial.

Muchos ya hemos recibido ataques por parte de Trolls que se dedican a hacerles la vida imposible a los Bloggers, lo se porque yo soy uno de ellos, si... lo admito (mea culpa), tengo un pasado troll, la cual es una de mis múltiples personalidades esquizofrénicas que se activa justo en épocas de campaña electoral cuando me dedico a joderles la vida a los blogs socialistas y pro Gobiernistas Ecuatorianos.

Por lo tanto, con toda mi experiencia, pues es lógico que se como atacar y como defenderme de ataques trolls en todas sus formas posibles.

Una de ellas es el hackeo de cuentas de administrador en los blogs, muchos recibirán en sus correos múltiples solicitudes de Google para restaurar su contraseña Gmail, Hotmail tiene un sistema en el cual te avisan que se ha intentado muchas veces de ingresar a tu correo, los otros sistemas de correos como Yahoo tienen sus propios métodos para protegerte o avisarte de un posible intento de hackeo.

Blogger no tiene nada para protegerse del hackeo de una cuenta (no es de sorprenderse), lo único sería armarse un sistema de seguridad manual con el cual protegerse y respaldar cada cierto tiempo tu blog.

Hace algún tiempo Martha Colmenares sufrió un hacking en su blog en el cual le borraron toda la información, muchos sufrimos ante esa situación ya que su blog es una biblioteca y un referente histórico de la situación política Latinoaméricana, pero hay gente a la cual no le interesa la historia en absoluto.

Por lo tanto la forma más efectiva a mi parecer para protegerse contra un ataque
hacker es:

Tutorial Vizcaínico antihacker para Blogger:

1.-Crea una cuenta ultrasecreta en Gmail

1.a.- La cuenta de correo debe ser muy rara y nunca pero nunca la uses ni se la des a nadie.

2.- Usa una clave tan rara que ni tu te la aprendas de memoria y guárdala en un papelito, a mi me sirvió una vez hacer uso de la marca de un ventilador Japonés en la página que le hice a un amigo, lo chistoso es que el me dijo que si botaba el ventilador se le olvidaba la clave, usa algo como esto: 387LosCoMuniStasvaLenVergA756, bueno... que no sea tan exagerado, pero procura que tenga números al principio y al final mezclando letras mayúsculas y minúsculas, osea un código alfanumérico :D :D

2.a.- Nunca uses una clave que se relacione contigo, nada de tu comida favorita, el nombre de tu mascota, nada de tu segundo nombre, nada de tu fecha de nacimiento ni la tuya ni la de ningún conocido, peor la de tus hijos o esposa (por supuesto nunca la de tu esposa), obvio no uses "garfield" estadisticamente reconocida como la clave mas usada por mujeres de 15 a 25 años.

3.- Ve a Blogger: Escritorio / Configuración / Permisos, y envíale una invitación a tu nueva cuenta como si fuera un invitado mas a tu blog para postear.

3.a- Abre el correo de tu invitado fantasma y ultrasecreto en otro navegador y acepta la invitación.

4.- En los permisos de tu usuario normal otorgale a tu invitado fantasma: "privilegios como administrador".

5.- Entra luego en Blogger en el otro navegador con tu nueva cuenta fantasma y quítate a tu usuario normal los privilegios de administrador, esto quiere decir que seguirás posteando como siempre pero de ahora en adelante lo harás como invitado.

5.a.- Un invitado a tu blog tiene acciones limitadas, el puede editar solo sus post, nunca podrá editar los post del resto, y menos podrá acceder al diseño de tu blog y la configuración donde se puede borrar el blog por completo.

5.b.- Con esto estarás protegido por si llegasen a hackearte tu usuario normal, lo máximo que sucederá será que borren tus post (no te importará por que los tendrás respaldados), y perderás tu perfil de Blogger usual, pero lo solucionas luego creándote otro perfil con el mismo nombre del que perdiste.

6.- Por último a tu usuario fantasma quítale las opciones de ver el perfil, esto lo haces dentro de: Escritorio / Editar perfil / Privacidad / compartir mi perfi (quitas el visto), y luego allí mismo en seguridad / Privacidad, pones donde dice: "Selecciona los blogs que deseas mostrar" y desmarcas tu blog, así nadie sabrá que ese usuario existe, será un fantasma total y absoluto :D :D

6.a.- Y ahora si lo último, en tu usuario fantasma dentro de: Configuración / Comentarios, donde dice: "Correo electrónico de notificación de comentarios" pon tu correo de siempre para que seas notificado cuando te llega algún nuevo comentario.

Anexos. 1.- Con tu nueva cuenta fantasma podrás entrar normalmente a tu blog y editar cosas como diseño y configuración, obvio no deberás postear nunca porque saldrá este como autor.

Anexos 1.a.- Cuando entres con tu usuario fantasma nunca lo hagas desde Internet Explorer wareber, ya que los "Ie" poseen una seguridad del perro, la razón es que al estar integrados al sistema operativo significa que actualizarlos sería actualizar tooodo el maldito sistema operativo, entra siempre desde Opera, que es el navegador con la mayor eficiencia en seguridad del mundo, no recomiendo Firefox en seguridad, solo Opera, el cual es mundialmente conocido por sus ventajas a nivel de seguridad informática.

Anexos 1.b.- Esto es demasiado útil si por ejemplo posees un blog separatista y atacas constantemente a tu Gobierno y tu familia está asustada porque creen que en cualquier momento les ponen una bomba, por lo que quieren desesperadamente borrarte el blog y están a la caza de que dejes abierto el escritorio bara borrártelo (en este caso además postea siempre con un proxy server), o si por alguna circunstancia tienes que postear desde un cyber o la casa de un amigo y desconfías en ti mismo por algún descuido (dejar marcado el recordarme siempre del navegador), la presencia de algún Keylogger o la presencia también siempre misteriosa de un sapo con vista ágil que te sapée la clave; y... si por alguna Dantezca razón (Dios no quiera), lograsen ingresar a tu escritorio pues solo encontrarán acciones muuuy limitadas.

Final 1.- Y listo, esto es exáctamente lo mismo que la seguridad que te da Windows Vista o Linux en los cuales tu no puedes realizar ninguna acción importante sino tienes los privilegios de administrador los cuales solo lo tiene quien posee la clave.

Conclusión.- Por múltiples razones los blogs en Wordpress no son muy seguros que digamos ya que dependen de cada servidor o hosting, sino que lo diga Marthita, es verdad que brinda muchísimas ventajas, pero yo prefiero entre las innumerables desventajas de Blogger una sola: "la seguridad", un blog de Blogger es practicamente "inhackeable", a menos que averiguen tu clave y si lo hacen aun después de este tutorial es exclusivamente "culpa tuya".

Disfrútalo, espero que te sea muy útil.

Menu horizontal multiple en Blogger

2008-05-11T12:32:00.001-05:00

Aqui esta un buen menu muy facil de utilizar y que permitira acceder a tus categorias - temas o a otros blogs:

1.- Ve a: Panel / diseño / Edición de HTML y respalda tu plantilla.
2.- Ahora pegas esto en la sección de CSS, es decir antes de ]]></b:skin>:

#navlist ul { margin-left: 0; padding-left: 0; white-space: nowrap; } #navlist li { display: inline; list-style-type: none; } #navlist a { padding: 3px 10px; } #navlist a:link, #navlist a:visited { color: #fff; background-color: #036; text-decoration: none; } #navlist a:hover { color: #fff; background-color: #369; text-decoration: none; }

Esta es la parte media oscura pero la explicare paso por paso:

3.- Ahora pon control + f y busca <div id='header-wrapper'> (está casi al último) la cual cierra con <DIV> a partir de alli, pega lo siguiente:

<center><strong><big><font color='white'>Temas - Etiquetas</font></big></strong></center> <div id="navcontainer"> <ul id="navlist"> <center> <li id="active"><a href="#" id="current">Item uno</a></li> <li><a href="#">Item dos</a></li> <li><a href="#">Item tres</a></li> <li><a href="#">Item cuatro</a></li> <li><a href="#">Item cinco</a></li> </center> </ul> </div>

4.- Muy bien ahora lo editamos:
Cambia esta parte para darle otro titulo, yo le puse temas etiquetas:
<strong><big><font color='white'>Temas - Etiquetas</font></big></strong>

5.- En esta parte, tu tienes que editar la redireccion:
<li><a href="#">Item dos</a></li>

Si por ejemplo quieres deshacerte de tus etiquetas tradicionales para ponerle un estilo personal pues primero debes tenerlas activas, vas por cada una haciendole click derecho y copiando el link para luego pegarlo en donde dice # luego le pones el nombre de la etiqueta original en vez del item warever (1,2,3,4).

Asi haces con todas y cada una de ellas... como van a salir una fila interminable pues los agrupas por intereses, lo cual es extremadamente util, y los divides de forma armoniosa con un simple <br/>

El resultado te quedara asi:

Pero como soy obsesivo tanto para personalizar mi blog como para explicar estos trucos pues voy a exponer otro truco por si necesitas poner otro menú distinto en tu mismo blog para lo que sea.

Tengo por ejemplo este menú que me gusta mucho... mismo sistema, pegas esto debajo del anterior código que insertaste en el sector de Css.

#navlist1 { padding: 3px 0; margin-left: 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif; } #navlist1 li { list-style: none; margin: 0; display: inline; } #navlist1 li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: #DDE; text-decoration: none; } #navlist1 li a:link { color: #448; } #navlist1 li a:visited { color: #667; } #navlist1 li a:hover { color: #000; background: #AAE; border-color: #227; } #navlist1 li a#current { background: white; border-bottom: 1px solid white; }

El código original tiene #navlist pero para que no se confunda con el anterior menú pues le puse un simple 1, es decir: #navlist1, para que el navegador no de error.

Luego buscas el <div id='header-wrapper'> - <DIV> luego del cual pegaste el anterior código del menú y debajo de el pegas:

<center><strong><big><font color='white'>Mis otros blogs:</font></big></strong></center> <div id="navcontainer"> <ul id="navlist1"> <center> <li id="active"><a href="#" id="current">Item uno</a></li> <li><a href="#">Item dos</a></li> <li><a href="#">Item tres</a></li> <li><a href="#">Item cuatro</a></li> <li><a href="#">Item cinco</a></li> </center> </ul> </div>

Lo editas como el aterior pero ahora le pones cualquier otros links, los que te de la gana.

Ahora cambié el navlist por navlist1, si le quieres poner mas menús distintos solo tienes que cambiar los navlist y agregarle otro número, los distintos menús los podrás encontrar en esta página, hay una infinidad de menús tanto horizontales como verticales, los códigos los sacas de alli, yo utilicé estos dos menús horizontales:

Rollover horizontal list y Eric Meyer's tabbed navbar.

Te quedara así:

Una vez que has hecho esto ya podras borrar tus etiquetas tradicionales, en lo personal a mi ya me aburrió la famosa nube de etiquetas...

Listo disfrútalos...

Ocultar subscribirse a entradas en blogger

2008-02-25T00:39:00.000-05:00

Voy a ser exhaustivo, existen dos formas de ocultar la opcion de subscribirse a entradas atom y son:

Proceso 1.- Ve a: Panel / diseño / Edición de HTML y respalda tu plantilla.

Haz control + f y busca este codigo: .feed-links

.feed-links { clear: both; line-height: 2.5em; }

Y luego le agregas lo que falta:

.feed-links { clear: both; line-height: 2.5em; visibility:hidden; display:none; }

Proceso 2.- Haz control + f y busca este código: <b:includable id='feedLinksBody' var='links'>

Luego agrega las lineas en rojo, esto hara que el mensaje solo aparezca en los vínculosy no en la portada.

<b:includable id='feedLinksBody' var='links'> <b:if cond='data:blog.pageType == "item"'> <div class='feed-links'> <data:feedLinksMsg/> <b:loop values='data:links' var='f'> <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a> </b:loop> </div> </b:if> </b:includable>

Si deseas en cambio sustituir el texto de subscribirse a por otro, solo reemplaza este código integramente: <data:feedLinksMsg/> por el que desees poner.

Para el texto entradas, reemplaza: <data:f.name/>

Para el texto (Atom) reemplaza: <data:f.feedType/> reemplazalo por otro o elimínalo.

Disfrutalo.

Ocultar navbar en Blogger

2008-02-25T00:14:00.001-05:00

No se porque no lo habia posteado antes, pero aquí está el truco para ocultar la navbar de Blogger.

Paso 1.- Ve a: Panel / diseño / Edición de HTML y respalda tu plantilla.

Paso 2.- Haz control + f y busca esto: #navbar-iframe esta al inicio de la plantilla mas o menos una vez encontradole agregas lo siguiente al #navbar-iframe y punto:

#navbar-iframe { height:0px; visibility:hidden; display:none }

Es probable que después de poner el código te aparezca un espacio donde iba la navbar, si eso ocurre usa entonces este otro reemplazando el anterior:

#navbar-iframe { margin-bottom: -30px; height:0px; visibility:hidden; display:none }

Pero hay otra forma, pega el siguiente código antes de <head> o despues de <body>:

<style type="text/css"> #navbar-iframe { height:0px; visibility:hidden; display:none; } </style>

Y como ya sabes, si te llega a salir el espacio en blanco usa mas bien el código de acá:

<style type="text/css"> #navbar-iframe { margin-bottom: -30px; height:0px; visibility:hidden; display:none; } </style>

Disfrútalo.

Imprimir pagina en Blogger

2008-02-24T21:21:00.000-05:00

Hoy en dia cada vez se hace mas dificil imprimir algun texto gracias a los altos costos de las tintas de las impresoras, no obstante es de todos modos importante tener a mi parecer una opcion en el blog que permita a los ususarios imprimir tus textos:

Paso 1.- Ve a: Panel / diseño / Edición de HTML y respalda tu plantilla.

Paso 2.- Pega el siguiente código entre: <head> y </head> preferible al último:

<style media='print' type='text/css'> #navbar-iframe {display: none; height: 0px; visibility: hidden;} .noprint {display: none;} body {background:#FFF; color:#000;} a {text-decoration: underline; color:#00F;} } </style>

Paso 3.- Guarda y luego expande la plantilla de artilugios y en: <p class='post-footer-line post-footer-line-3'/> pega esto:

<a href="javascript:window.print()">Imprimir Pagina</a>

Asi facilmente te saldra una opcion para imprimir, recuerda que se imprimiran tambien los textos de tus widgets, el script esta hecho de tal forma que se evite imprimir el fondo del blog de tenerlo, y pondra por defecto el color blanco.

Recomiendo combinar el script con: este hack cosa que solo aparezca la opción de imprimir en el vínculo del post, además de que se podrá evitar imprimir todos los widgets de utilizarlo correctamente.

Existe otra opción y es la de poner en cada widget este codigo para ocultarlos

<span class="noprint"> Aqui lo que queremos ocultar </span>

Pero eso muy complicado prefiere la primera recomendación.

Listo que lo disfrutes.

Buscador interno en Blogger

2008-01-13T21:37:00.000-05:00

Dado que la verdadera fuerza del Blogger no esta en su portada sino en sus etiquetas un mejor servicio que le puedes ofrecer a tus visitantes es dar la opcion de un buscador interno que les permita una búsqueda mas adecuada de tus articulos post, aqui el codigo:

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/><input id="search-btn" value="Buscar" type="submit"/></form>

Si tienes una nube de etiquetas y quieres integrar este buscador en tu nube, ve al último de este post y descubrirás como

Disfrutalo.

Traductor multiple para Blogger

2008-01-13T07:39:00.000-05:00

¿Quieres que tus páginas puedan ser traducidas por tus visitantes en múltiples idiomas? pues aquí está el script que necesitas:

<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank"> <input value="ES" name="wl_srclang" type="hidden"/> <select style="font-size: 70%; width: 160px;" name="wl_trglang"> <option value="AR"/>Spanish to Arabic <option value="ZH_CN"/>Spanish to Chinese (Simplified) <option value="ZH_TW"/>Spanish to Chinese (Traditional) <option value="NL"/>Spanish to Dutch <option value="FR"/>Spanish to French <option value="DE"/>Spanish to German <option value="EL"/>Spanish to Greek <option value="IT"/>Spanish to Italian <option value="JA"/>Spanish to Japanese <option value="KO"/>Spanish to Korean <option value="PT"/>Spanish to Portuguese <option value="RU"/>Spanish to Russian <option value="EN"/>Spanish to English <option value="SV"/>Spanish to Swedish </select> <input value="http://Tu blog.blogspot.com/" name="wl_url" type="hidden"/> <input style="font-size: 70%; width: 35px;" value="Go" type="submit"/> </form>

Reemplza donde dice: "Tu blog" por el tuyo y listo.

Que lo disfrutes.

Etiquetas como menu desplegable en Blogger

2008-01-13T06:45:00.000-05:00

Si te cansaste de que tu nube de etiquetas no te dice cuantos post tienes por etiqueta puedes implementar otra forma de verlas aqui, como menu desplegable o incluso combinarla con tu nube:

Paso 1.- Ve a: Panel / diseño / Edición de HTML y respalda tu plantilla.

Paso 2.- ¿Hemos de tener creado el widget de etiquetas verdad? entonces sin expandir la plantilla de artilugios haz control + f y busca este codigó:
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

En title dice: labels, tu lo tendras como: etiquetas, temas, categorias etc...

Paso 3.- Ahora lo reemplazamos por esto sin importarte lo de labels que eso lo reemplazas luego:

<b:widget id='Label1' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <br /> <select onchange='location=this.options[this.selectedIndex].value;'> <option>Etiquetas</option> <b:loop values='data:labels' var='label'> <option expr:value='data:label.url'><data:label.name/> (<data:label.count/>) </option> </b:loop> </select> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Donde dice: option cambialo por el nombre que tu le quieras dar.

Guarda tu plantilla y listo.

Ahora esto es algo especial, digamos que no quieres hacer otro widget y quieres poner esta forma de ver la etiqueta junto con tu nube de etiquetas entonces debes abrir la plantilla de artilugios haz: control + f y busca este código: <div id='labelCloud'/> ahora ve hasta el ultimo de este codigo el cual es de la nube hasta que encuentres esta ultima parte:

<noscript> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop> </ul> </noscript> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Ahora justo entre: </noscript> y <b:include name='quickedit'/> pega el codigo a continuacion:

<br/> <select onchange='location=this.options[this.selectedIndex].value;'> <option>Temas</option> <b:loop values='data:labels' var='label'> <option expr:value='data:label.url'><data:label.name/> (<data:label.count/>) </option> </b:loop> </select>

Quedara de esta forma:

Disfrutalo.

Etiquetas expandibles en Blogger

2008-01-13T05:26:00.001-05:00

Este es el código de las etiquetas expandibles, es un código en el cual te saldrán solo los títulos de tus entradas con un ícono de texto: [+/-] que al hacerle click te expandirá todo el contenido del post en tus etiquetas, asi ya no cargara tanto tu pagina y se la vera mucho mas organizada.

Paso 1.- Ve a: Panel / diseño / Edición de HTML y respalda tu plantilla.

Paso 2.- Pega el siguiente código entre: <head> y </head> preferible al último:

<script type='text/JavaScript'> //<![CDATA[ function toggleIt(id) { post = document.getElementById(id); if (post.style.display != 'none') { post.style.display = 'none'; } else { post.style.display = ''; } } function showFullPost(id) { var post = document.getElementById(id); var spans = post.getElementsByTagName('span'); for (var i = 0; i < spans.length; i++) { if (spans[i].id == "fullpost") spans[i].style.display = 'inline'; if (spans[i].id == "readmore") spans[i].style.display = 'none'; } } function showFull(id) { var post = document.getElementById(id); var spans = post.getElementsByTagName('span'); for (var i = 0; i < spans.length; i++) { if (spans[i].id == "fullpost") spans[i].style.display = 'inline'; if (spans[i].id == "showlink") spans[i].style.display = 'none'; if (spans[i].id == "hidelink") spans[i].style.display = 'inline'; } } function hideFull(id) { var post = document.getElementById(id); var spans = post.getElementsByTagName('span'); for (var i = 0; i < spans.length; i++) { if (spans[i].id == "fullpost") spans[i].style.display = 'none'; if (spans[i].id == "showlink") spans[i].style.display = 'inline'; if (spans[i].id == "hidelink") spans[i].style.display = 'none'; } post.scrollIntoView(true); } function checkFull(id) { var post = document.getElementById(id); var spans = post.getElementsByTagName('span'); var found = 0; for (var i = 0; i < spans.length; i++) { if (spans[i].id == "fullpost") found = 1; if ((spans[i].id == "showlink") && (found == 0)) spans[i].style.display = 'none'; } } //]]> </script>

Paso 3.- Guarda la plantilla... luego regresa pero esta vez abre la plantilla de artilugios:

Paso 4.- Haz: control + f y pon este código:
<b:includable id='main' var='top'>

Paso 5.- Esta es la parte fea... reemplaza en tu plantilla solo lo que esta en rojo, el resto déjalo tal cual.

<b:includable id='PeekABooPost' var='post'> <div class='post uncustomized-post-template'> <table><tr> <td width='40px'> <a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a> </td> <td> <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> </td> </tr></table> <div class='post-body' expr:id='data:post.id' style='display:none'> <p><data:post.body/></p> <div style='clear: both;'/>  </div> </div> </b:includable> <b:includable id='main' var='top'>  <div id='blog-posts'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><data:post.dateHeader/></h2> </b:if> <b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != "item"'> <b:include data='post' name='PeekABooPost'/> <b:else/> <b:include data='post' name='post'/> </b:if> <b:else/> <b:include data='post' name='post'/> </b:if> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.allowComments'> <b:include data='post' name='comments'/> </b:if> </b:if> </b:loop> </div>

Una vez que logres reemplazarlo de forma adecuada, haz una vista previa, ten en cuenta de que en la vista previa no vas a poder ver el hack en acción, pero si te salió la vista previa sin problemas entonces guarda la plantilla.

El truco sale perfecto, cuesta un poco al principio pero si le pones atención y cuidado al reemplazar los códigos todo saldrá bien, te lo aseguro.

Si haces uso de los comentarios en barra lateral tendrás que quitar solo el pequeño "CODIGO DE LOS COMENTARIOS" el cual guardaste entre <head> y </head> solo ese, nada mas... para que exista mayor compatibilidad.

Que lo disfrutes.

Personalizar etiquetas en Blogger

2008-01-13T04:19:00.000-05:00

Este código te permitirá poner una imagen o un título en cada una de tus etiquetas de Blogger:

Ve a: Panel / diseño / Edición de HTML, una vez ahí le haces click donde dice expandir plantillas de artilugios luego haces control + f y buscas el siguiente código:

<b:includable id='status-message'>

Debajo de este código pones lo siguiente:

<b:if cond='"http://TUBLOG.blogspot.com/direccion-de-etiqueta" == data:blog.url'> XXXX Titulo aquí XXXX </b:if>

Reemplaza donde dice: http://TUBLOG.blogspot.com/direccion-de-etiqueta por la direccion de tu etiqueta.

Ahora si quieres poner una imagen pon:

<b:if cond='"http://Tu blog.blogspot.com/search/label/CSS" == data:blog.url'> <img src='http://Direccion de la imagen'/> </b:if>

Te darás cuenta de que se verá feo ya que el mensaje original de Blogger te aparecerá, si quieres puedes borrar todo el mensaje, borra:

<b:if cond='data:navMessage'> <div class='status-msg-wrap'> <div class='status-msg-body'> <data:navMessage/> </div> <div class='status-msg-border'> <div class='status-msg-bg'> <div class='status-msg-hidden'><data:navMessage/></div> </div> </div> </div> <div style='clear: both;'/> </b:if>

Osea todo lo que esta dentro de:

<b:includable id='status-message'> y </b:includable>

Gracias a Francisco de: Blog and web que muy amablemente me lo envio por correo.

Eso es todo disfrutalo.

Imagen estatica en Blogger

2008-01-13T03:28:00.000-05:00

Si quieres poner una imagen estatica en tu blog este es el código, pégalo entre <head> y </head>:

<a href='http://URL DE TU BLOG.blogspot.com/' style='display:scroll;position:fixed;bottom:0px;right:0px;'><img src='URL DE TU IMAGEN'/></a>

Widget solo para portada en Blogger

2008-01-13T02:29:00.000-05:00

La mejor portada que he visto en mi vida

Este es un hack demasiado útil como para ser cierto, con esto tu podrás poner widgets solo en la portada principal, osea que cuando tus visitantes vayan a tus etiquetas donde esta la verdadera fuerza del Blogger la pagina no demorará mucho en cargar, en todos los post de consejos para Bloggers siempre está presente el tener una página liviana ya que si es muy pesada el visitante simplemente se vá y no regresa más, además te permite poner widgets para cada una de tus etiquetas, ahí va lógicamente el ad sense o lo que desees:

Ve a: Panel / diseño / Edición de HTML, una vez ahi le haces click donde dice expandir plantillas de artilugios, ahora necesitas mucha paciencia ya que tendras que modificar cada uno de tus widgets:

<b:widget id='HTML4' locked='false' title='Subscribete' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.homepageUrl == data:blog.url'>  <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:if> </b:includable> </b:widget>

Este es el ejemplo de uno de mi widgets.

El codigo: <b:if cond='data:blog.homepageUrl == data:blog.url'> va siempre despues de: <b:includable id='main'>

El codigo </b:if> va siempre antes de: </b:includable>

Ahora si quieres poner un widget exclusivo para cada una de tus etiquetas por si por ejemplo te consigues un patrocinador distinto para cada etiqueta lo cual hasta ahora no he visto pero me suena muy vanguardista, pues creas tu widget, le pones un nombre facil de reconocer y la buscas con la plantilla de artilugios expandida y en vez de: <b:if cond='data:blog.homepageUrl == data:blog.url'> pones esto:

<b:if cond='"http://la url de tu etiqueta o un post de links - premios aqui" == data:blog.url'> Luego el if como en el codigo al principio: </b:if>

Si quisieras poner tus widgets solo en los vínculos de tus post usa este codigo:

<b:if cond='data:blog.pageType == "item"'> </b:if>

Es muy sencillo aunque un tanto tedioso, pero muy util.

Disfrutalo.

Avatar en Blogger

2008-01-13T02:09:00.000-05:00

Existen opciones en otros sistemas de blogs para poner un avatar, en Blogger lo podemos emular de esta forma:

Ve a: Panel / diseño / Edicion de HTML, una vez ahi le haces click donde dice: expandir plantillas de artilugios, haces: control + f y buscas este codigo:

<p class='post-footer-line post-footer-line-1'>

Debajo de este pones el siguiente codigo, primero debes subir tu imagen a un hosting cualquiera, no importa el tamaño el siguiente script le pone un cierto tamaño, modificalo si queres:

<img align='left' height='50' src=' http://XXXXXX ' width='40'/>

Donde dice: http:// XXXXXX pones la direccion de tu imagen hosteada.

Esta creado este script de tal forma que se alinee siempre a la izquierda, cosa que las opciones de comentarios, email, etiquetas y demas aparezcan a partir de esta imagen.

Listo disfrutalo.

Fondo aleatorio en Blogger

2008-01-04T17:07:00.000-05:00

Si tu blog tiene fondos puedes usar este script para que en cada click de actualizacion que hagas te aparezca un fondo diferente de forma aleatoria:

Paso 1.- Ve a diseño / edicion de HTML y dentro de <head> y </head> pones este script:

<script type='text/javascript'> //<![CDATA[ var banner= new Array() banner[0]="Image01URL" banner[1]="Image02URL" banner[2]="Image03URL" banner[3]="Image04URL" banner[4]="Image05URL" banner[5]="Image06URL" banner[6]="Image07URL" banner[7]="Image08URL" banner[8]="Image09URL" banner[9]="Image10URL" var random=Math.floor(10*Math.random()); document.write("<style type='text/css'>"); document.write("body {"); document.write(' background: #000000 url("' + banner[random] + '") no-repeat center top;background-attachment:fixed;'); document.write(" }"); document.write("<\/style>"); //]]> </script>

Para que se vea mejor el asunto le puse de background el fondo negro osea: #000000 para que primero aparezca dicho fondo y luego la imagen, si deseas... cámbialo por uno de tu gusto o borralo definitivamente.

Ademas le implementé el fondo estatico, para que solo el post y los widgets se muevan (prefiere usar fondos con una resolución amlia paa que se adapten a la resolucion de cualquier pantalla, busca un editor de imágenes y disminúyeles la calidad, para que no se te hagan tan pesadas)

Te darás cuenta de que comienza desde el banner 0 ¿verdad? y avanza hasta el 9, esto quiere decir que si los sumas con el cero son entonces 10 los fondos que pondrás, el cero esta ahi por asunto de variables de programacion y ademas por un asunto de cuántica, no le hagas caso... pero si vas a poner mas fondos o quieres disminuirlos tendras que sumar los fondos existentes y poner su numero donde dice: (10*Math.random()) cambiendo el 10 por el num de fondos que vayas a poner.

Como es un asunto de probabilidades tal cual un juego de dados, muchas veces se repetiran los fondos dependiendo del num que tengas cuando hagas click, asi que no te preocupes... asi funciona.

Listo... disfrutalo.

Menu de links desplegables en Blogger

2008-01-04T16:29:00.000-05:00

Para los que se cansaron de tener una larga lista de links que ocupa incluso mas allá del tamaño de los post, pues esta es la solucion: un menu desplegable en donde poner los links de los blogs que promocionas, que te promocionan, que lees... o lo que se te ocurra, ademas lo mejor es que los abre en una ventana aparte:

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);"> <option value=""/>Favoritos <option value="http://URL del blog que desees enlazar"/>Nombre del blog <option value="http://URL del blog que desees enlazar"/>Nombre del blog <option value="http://URL del blog que desees enlazar"/>Nombre del blog </select>

Por cada nuevo link agregate este codigo y pon el link correspondiente entre las comillas:

<option value="http://Url del nuevo link"/>Nombre del nuevo link

Cambiar entradas antiguas por imagen en Blogger

2008-01-04T15:53:00.000-05:00

Este es un hack para cambiar las frases al final de tu blog en Blogger: Entradas antiguas, entradas mas recientes y pagina principal por unas imagenes que funcionen como vinculo y que identifiquen dichas acciones.

Paso 1.- Ve a diseño / edicion de html / expandir plantilla de artilugios, una vez alli haz: Control + F y te saldra un widget para buscar el codigo, buscate este:

<b:includable id='nextprev'>

Paso 2.- respalda tu plantilla.

Paso 3.- Identifica a continuacion este codigo:

<b:includable id='nextprev'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> </span> </b:if> <b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> <b:else/> <b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> </b:if> </b:if> </div> <div class='clear'/> </b:includable>

Paso 4.- Borra con confianza dicho codigo y reemplazalo integramente por el que viene a continuacion:

<b:includable id='nextprev'> <div id='blog-pager'> <br/><b:if cond='data:newerPageUrl'> <a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'><img src='http://bp1.blogger.com/_Onf3OTr1X5Y/SGP-bsoylNI/AAAAAAAABGo/9hWUKo9ONUk/s400/left.gif'/></a> </b:if><b:if cond='data:olderPageUrl'> <a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'><img src='http://bp2.blogger.com/_Onf3OTr1X5Y/SGP-8YacvcI/AAAAAAAABGw/sM1nx3OlGvQ/s400/right.gif'/></a> </b:if> <a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://bp1.blogger.com/_Onf3OTr1X5Y/SGP_OseSSkI/AAAAAAAABG4/s-mkoZ4pY3k/s400/home.gif'/></a> </div> <div class='clear'/> </b:includable>

Donde dice Http://XXXXXX puedes cambiarle por otras imagenes que llegues a encontrar por ahi en alguna otra pagina, cuando veas una imagen que te guste, copiala... hosteala en blogger y pon en su su lugar la nueva url.

Te debe de quedar asi:

Por si quisieras en vez de poner una imagen, cambiar simplemente la frase, aqui esta la solucion:

<b:includable id='nextprev'> <div id='blog-pager'> <b:if cond='data:newerPageUrl'> <a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>Hacia las mas recientes</a> </b:if> <b:if cond='data:olderPageUrl'> <a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>Hacia las mas antiguas</a> </b:if> <a class='home-link' expr:href='data:blog.homepageUrl'>Pagina de Inicio</a> </div> <div class='clear'/> </b:includable>

Como siempre: eso es todo... y que lo disfrutes.

Cargar pagina en Blogger

2007-12-18T14:59:00.000-05:00

Un blog es un hijo mas...

Para los que tienen paginas pesadas, lo cual no deberia ser sino no seran muy visitadas y son demasiado necios como para no quitarles los mil y un widgets que tienen, les recomiendo usar este script que le dice al visitante que se aguante un ratito que la pagina esta cargando:

Este codigo lo pegas justo antes del: <head> ¿?????? si asi asi es, te parecera raro pero es justo antes del <head> por la parte superior de la plantilla, o en cambio podrías ponerlo despues del: <body>

(Ponerlo antes del <head> puede traerte complicaciones a la hora de validar tu página web y seguir estándares del w3c, también podrías ponerlo dentro del <body> pero esto podría hacer que algún javascript no funcione bien, queda a tu elección donde ponerlo)

 <center> <script type='text/javascript'> window.onload = detectarCarga; function detectarCarga() { document.getElementById("imgLOAD").style.display="none"; } </script> <br/> <div id='imgLOAD'> <img src='http://mentalized.net/activity-indicators/indicators/simon-claret/progress_bar.gif'/><div align='center'><strong><big><font color='white'>Cargando...</font></big></strong></div></div> </center> 

Para este codigo le agregue al texto cargando... el comando big, para que se vea mas grande, el strong, para que se vea en negritas y el font para cambiar el color, yo lo puse en white, puedes ponerle white, black, yellow, red no utilices los codigos HTML porque no los coge solo nombres de colores, despues posteare una tabla de colores para esto por el momento prueba...

Existen otras imagenes de este tipo que podras descargar en:

Load Info

Ajax Load

Mentalized

Listo eso es todo que lo disfrutes...

Ventana popup en Blogger

2007-12-18T14:17:00.000-05:00

Este es un sencillisimo script para poner un link de otro blog que tengas o de alguna imagen pero en vez que salga en otra pestaña o en la misma direccion aparzeca en una ventanita popup, no es nada del otro mundo pero se ve quiza esteticamente novedoso, por lo menos asi a mi me parece:

<a href="http://url de pagina web o imagen" onclick="window.open(this.href, this.target, 'width=313,height=450'); return false;">nombre para usarlo como link de texto</a>

Con este tendrás la posibilidad de tener activas la scrollbar y la capacidad de maximizar la ventana popup, tu excoges...

<a href="http://url de pagina web o imagen" onclick="window.open(this.href, this.target,'scrollbars=yes,resizable=yes,width=600,height=600'); return false;">Nombre de tu pagina web</a>

Si lo que quieres es una imagen que aparezca en popup de mejor forma que el horrible link que deja blogger esto es lo que necesitas, tambien puedes usarlo para agrandar una imagen osea en el primer link pones la imagen grande pero en el segundo pones el link de la pequeña, la segunda imagen te servira como link a la de mayor tamaño:

<a href="http://url de pagina web o imagen" onclick="window.open(this.href, this.target, 'width=313,height=450'); return false;"><img src="http://imagen para usar como link"/></a>

No te olvides de cambiar el tamaño de la ventana con width y height

Listo puedes usarlo donde quieras, que lo disfrutes...

Redes sociales en blogger

2007-12-13T06:47:00.011-05:00

Al fin logre poner las redes sociales en español en mi blog, me he sacado el aire buscando y ninguna era compatible, me saltaban mil y un errores, no se el resto... pero a mi ningunas me fueron compatibles hasta que encontre estas (OJO no todas las plantillas son iguales respalda primero tu plantilla antes de probar esto):

Paso 1.- Expandir la platilla de artilugios y pegar el codigo del cuadro a continuacion de esta forma:

<p class='post-footer-line post-footer-line-3'/>
XXXAqui el codigoXXX
</p>

Obviamente sin las equis no? si no ves: </p> no te preocupes, solo pegalo justo debajo de: <p class='post-footer-line post-footer-line-3'/> encuentralo haciendo: control + f

Enviar a: <div class='rsociales'> <ul> <li><a expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title" + data:post.title' target='_blank'><img alt='Agregar a Del.icio.us' class='rsociales-sobre' src='http://1.bp.blogspot.com/_Onf3OTr1X5Y/S3_KUdk2doI/AAAAAAAAILk/dtsMQIuNfiA/s400/icoMdelicious.png' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a Del.icio.us'/></a></li> <li><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url+ "&title=" + data:post.title' target='_blank'><img alt='Agregar a Facebook' class='rsociales-sobre' src='http://1.bp.blogspot.com/_Onf3OTr1X5Y/S3_KeM-n1jI/AAAAAAAAILs/hkTgfXBxk98/s400/icoMfacebook.png' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a Facebook'/></a></li> <li><a expr:href='"http://friendfeed.com/?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Friendfeed' class='rsociales-sobre' src='http://4.bp.blogspot.com/_Onf3OTr1X5Y/S3_KnkmIEDI/AAAAAAAAIL0/uzwW7lRyWzI/s400/icoMfriendfeed.png' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a Friendfeed'/></a></li> <li><a expr:href='"http://promote.orkut.com/preview?nt=orkut.com&du=" + data:post.url + "&tt=" + data:post.title' target='_blank'><img alt='Agregar a Orkut' class='rsociales-sobre' src='http://4.bp.blogspot.com/_Onf3OTr1X5Y/S3_KxB_OwTI/AAAAAAAAIL8/FYsl6cNINPo/s400/icoMorkut.png' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a Orkut'/></a></li> <li><a expr:href='"http://www.plurk.com/m?content=" + data:post.url + "&qualifier=shares"' target='_blank'><img alt='Agregar a Plurk' class='rsociales-sobre' src='http://3.bp.blogspot.com/_Onf3OTr1X5Y/S3_K7Fn5LsI/AAAAAAAAIME/duxGzgC8ye8/s400/icoMplurk.png' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a Plurk'/></a></li> <li><a expr:href='"http://www.stumbleupon.com/submit?url="+data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Stumbleupon' class='rsociales-sobre' src='http://4.bp.blogspot.com/_Onf3OTr1X5Y/S3_LEJE24kI/AAAAAAAAIMM/C_jJXZvFpbU/s400/icoMstumbleupon.png' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a Stumbleupon'/></a></li> <li><a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank'><img alt='Agregar a Technorati' class='rsociales-sobre' src='http://4.bp.blogspot.com/_Onf3OTr1X5Y/S3_LPi-kl2I/AAAAAAAAIMU/5RPfg7PGB1g/s400/icoMtechnorati.png' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a Technorati'/></a></li> <li><a expr:href='"http://twitter.com/home?status=Leyendo: " + data:post.title + ": " + data:post.url' target='_blank'><img alt='Agregar a Twitter' class='rsociales-sobre' src='http://1.bp.blogspot.com/_Onf3OTr1X5Y/S3_Lah6NAjI/AAAAAAAAIMc/dhrf69hPPTs/s400/icoMtwitter.png' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a Twitter'/></a></li> <li><a expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Google Reader' class='rsociales-sobre' src='http://3.bp.blogspot.com/_Onf3OTr1X5Y/S3_LjwiKc6I/AAAAAAAAIMk/Nv4o6d_C-MI/s400/icoMbuzz.png' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a Google Reader'/></a></li> <br/> <li><a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a DiggIt!' class='rsociales-sobre' height='18px' width='18px' src='http://2.bp.blogspot.com/_Onf3OTr1X5Y/S3_AyQArNKI/AAAAAAAAIJM/_6G4IBM-Pio/s400/digg.png' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a DiggIt!'/></a></li> <li><a expr:href='"http://bookmarks.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Yahoo!' class='rsociales-sobre' height='18px' width='18px' src='http://1.bp.blogspot.com/_Onf3OTr1X5Y/S3_BBvEVQvI/AAAAAAAAIJU/CaqbPAHp4as/s400/yahoo.png' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a Yahoo!'/></a></li> <li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Google' class='rsociales-sobre' height='18px' width='18px' src='http://2.bp.blogspot.com/_Onf3OTr1X5Y/S3_BSkXuzZI/AAAAAAAAIJc/U7yRnnR1uJ0/s400/google.gif' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a Google'/></a></li> <li><a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Meneame' class='rsociales-sobre' height='18px' width='18px' src='http://3.bp.blogspot.com/_Onf3OTr1X5Y/S3_Bjp1fbGI/AAAAAAAAIJk/RgH2ct-terw/s400/meneame.png' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a Meneame'/></a></li> <li><a expr:href='"http://www.diigo.com/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Diigo' class='rsociales-sobre' height='18px' width='18px' src='http://1.bp.blogspot.com/_Onf3OTr1X5Y/S5PYj2MMukI/AAAAAAAAIUM/r-L3Rh2oieY/s400/diigo.gif' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a Diigo'/></a></li> <li><a expr:href='"http://es.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Reddit' class='rsociales-sobre' height='18px' width='18px' src='http://3.bp.blogspot.com/_Onf3OTr1X5Y/S3_CKb7k8-I/AAAAAAAAIJ0/o8aWCEbUCag/s400/reddit.gif' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a Reddit'/></a></li> <li><a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Blinklist' class='rsociales-sobre' height='18px' width='18px' src='http://2.bp.blogspot.com/_Onf3OTr1X5Y/S3_Cpv8-o7I/AAAAAAAAIKE/ddMMs5FrzUI/s400/blinklists.gif' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a Blinklist'/></a></li> <li><a expr:href='"http://blogmarks.net/my/new.php?mini=1&simple=1&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Blogmarks' class='rsociales-sobre' height='18px' width='18px' src='http://1.bp.blogspot.com/_Onf3OTr1X5Y/S3_C_xQseBI/AAAAAAAAIKM/SKOBoWssm6c/s400/blogmarks.gif' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a Blogmarks'/></a></li> <li><a expr:href='"http://www.webeame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a webeame' class='rsociales-sobre' height='18px' width='18px' src='http://4.bp.blogspot.com/_Onf3OTr1X5Y/S3_EOu5Y09I/AAAAAAAAIKc/XESXPLyjARE/s400/webeame.gif' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a webeame'/></a></li> <li><a expr:href='"http://enchilame.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a enchilame' class='rsociales-sobre' height='18px' width='18px' src='http://3.bp.blogspot.com/_Onf3OTr1X5Y/S3_EjQiMmNI/AAAAAAAAIKk/m-QlS58VS8s/s400/enchilame.gif' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a enchilame'/></a></li> <li><a expr:href='"http://fresqui.com/enviar?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a fresqui' class='rsociales-sobre' height='18px' width='18px' src='http://4.bp.blogspot.com/_Onf3OTr1X5Y/S3_E64vPi1I/AAAAAAAAIKs/_ewk8Pl36jE/s400/fresqui.gif' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a fresqui'/></a></li> <li><a expr:href='"http://www.blogmemes.com/post.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a blogmemes' class='rsociales-sobre' height='18px' width='18px' src='http://3.bp.blogspot.com/_Onf3OTr1X5Y/S3_FOLxlwVI/AAAAAAAAIK0/2BQmfvZxKtQ/s400/blogmemes.gif' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a blogmemes'/></a></li> <li><a expr:href='"http://promotingblogs.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Promoting Blogs' class='rsociales-sobre' height='18px' width='18px' src='http://3.bp.blogspot.com/_Onf3OTr1X5Y/S3_GGUoMbxI/AAAAAAAAILE/FnLcYURHn7U/s400/promotingblogs.png' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a Promoting Blogs'/></a></li> <li><a expr:href='"http://www.mister-wong.es/index.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Mister Wong' class='rsociales-sobre' height='18px' width='18px' src='http://1.bp.blogspot.com/_Onf3OTr1X5Y/S3_GY_V4ilI/AAAAAAAAILM/3R96zSjBTVc/s400/misterwong.gif' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a Mister Wong'/></a></li> <li><a expr:href='"http://barrapunto.com/submit.pl?story=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Barra punto com' class='rsociales-sobre' height='18px' width='18px' src='http://4.bp.blogspot.com/_Onf3OTr1X5Y/S3_GrA0-6YI/AAAAAAAAILU/zQ6Ue6k6X0c/s400/barrapuntocom.jpg' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a Barra punto com'/></a></li> <li><a expr:href='"http://www.autobombo.es/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a autobombo' class='rsociales-sobre' height='18px' width='18px' src='http://1.bp.blogspot.com/_Onf3OTr1X5Y/S3_G6I43D8I/AAAAAAAAILc/wJI2S9IN6VY/s400/autobombo.jpg' style='border:0;background:none;padding:0px;text-decoration:none;' title='Agregar a autobombo'/></a></li> </ul> </div>

Ni se te ocurra cambiarle absolutamente nada a menos de que sepas lo que haces, me he sacado el aire agregando otras redes como enchilame y otras mas, y por muchos motivos no eran compatibles con las que originalemnte encontre, parece mentira que haya tanta diferncia entre una simple y misera coma, no es lo mismo una comilla con cabeza y rabo que una comilla en forma de tilde, las malditas comillas me hicieron sufrir...

Paso 2.- Luego para darle un efecto de transparencia, ademas de que se enciendan como luz los iconos al pasarles el mouse pon este codigo justo antes de: ]]></b:skin> de esta forma:

XXXCodigoXXX
]]></b:skin>

¿Ok list@? aqui te va:

.rsociales ul { display:inline; margin:0pt !important; padding:0pt !important; } .rsociales li { background:transparent none repeat scroll 0%; display:inline; list-style-type:none; margin:0pt; padding:2px; } .rsociales img { border:0pt none; float:none; margin:0pt; padding:0pt; } .rsociales-sobre { opacity:0.4; } .rsociales-sobre:hover { opacity:1; }

Anexos:

1.- Si en vez de una imagen quieres que aparezca solo el texto entonces borra todas las imagenes y cambialas por el respectivo link en texto, ejemplo:

Enviar a: <div class='rsociales'> <ul> <li><a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'>Technorati</a></li> </ul> </div>

2.- En algunas plantillas no es necesario tanta cosa (ul, li, div, etc...) sinó solo poner este código... en especial si solo tienes texto, ejemplo:

<a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Technorati' class='rsociales-sobre' src='http://bp1.blogger.com/_Zuzii37VUO4/Rjl62eMBQ0I/AAAAAAAAAto/zkas68GmVFk/s1600/technorati.gif'/></a>

Asi con todas las otras redes.

3.- Si quisieras ahorrar memoria en pantalla y disminuir la carga de imágenes en tu blog te recomiendo que uses esto:

<b:if cond='data:blog.pageType == "item"'> XXXXXX REDES SOCIALES AQUI XXXXXX </b:if>

Reemplaza donde dice: XXX redes sociales aqui XXX por los codigos de tus redes, asi solo se cargaran estas en el vinculo del post (articulo completo, url propia) pero jamas en la pagina principal (portada) y para que tus visitantes lo sepan usa esto:

<b:if cond='data:blog.homepageUrl == data:blog.url'> (Ve al vinculo del post para obtener las opciones de envio e impresion) </b:if>

Este mensaje "solo" aparecera en la portada de tu blog, tus visitantes lo veran y se dirigiran a tu vínculo y allí les aparecerán todas tus redes sociales.

4.- Adorna tus redes poniendoles un marco con el comando: <fieldset> y </fieldset> resalta tus textos en negritas con el comando: <strong> y </strong> céntralo todo con el comando: <center> y </center> ya depende de ti y de tu creatividad.

Fin de los anexos.

Guarda la plantilla y ufff malditas comillas... que lo disfrutes.

Etiquetas multiples en blogger

2007-12-05T01:07:00.001-05:00

En mi afan por encontrar chucherias inservibles tipo widgets para mi nuevo juguete blogger, he encontrado uno muy interesante e igualmente inservible, que se puede complementar con la nube de etiquetas que postee aqui, siempre y cuando la pongas en otro widget y cambies a 2 la opcion del numero de widget cuando hagas la nube:

1.- paso 1.- Ve a: Panel / Diseño / Añadir un elemento de pagina / HTML/Javascript.

Pon como titulo: Multietiquetas y luego copia este codigo:

<a href='javascript:void' title='Switch to List' onclick='javascript:linkStyle();'> <img src='http://bp1.blogger.com/_Onf3OTr1X5Y/R6lQSGCK37I/AAAAAAAAA1U/OmR21eKQ7o4/s400/1.jpg'/></a> <a href='javascript:void' title='Switch to Menu' onclick='javascript:menuStyle();'> <img src='http://bp2.blogger.com/_Onf3OTr1X5Y/R6lQtWCK38I/AAAAAAAAA1c/ZKKHn3C78eI/s400/2.jpg'/></a> <a href='javascript:void' title='Switch to Zoom' onclick='javascript:zoomStyle();'> <img src='http://bp0.blogger.com/_Onf3OTr1X5Y/R6lRK2CK39I/AAAAAAAAA1k/v-FXfJRIWhs/s400/3.jpg'/></a>

Paso 2.- Luego sin expandir la plantilla de artilugios ve hasta este codigo:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Y reemplázalo por este código:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div id='LabelDisplay'> </div> </div> <script language='javascript' type='text/javascript'> function zoomStyle() { var max = 0; var min = 10000; <b:loop values='data:labels' var='label'> if (<data:label.count/> > max) max = <data:label.count/>; if (<data:label.count/> < min) min = <data:label.count/>; </b:loop> var display = ""; <b:loop values='data:labels' var='label'> var delta = <data:label.count/> - min; var size = 100 + (delta * 100) / (max - min); display = display + "<span style='font-size:" + size + "%'><a expr:href='data:label.url + "?max-results=100"' style='text-decoration:none;'><data:label.name/></a></span><br/><br/>"; </b:loop> obj = document.getElementById('LabelDisplay'); obj.innerHTML = display; } function menuStyle() { var display = "<select onchange='location = this.options[this.selectedIndex].value;'><option>Selecciona etiqueta</option>"; <b:loop values='data:labels' var='label'> display = display + "<option expr:value='data:label.url + "?max-results=100"'><data:label.name/> (<data:label.count/>)</option>"; </b:loop> display = display + "</select>"; obj = document.getElementById('LabelDisplay'); obj.innerHTML = display; } function linkStyle() { var display = "<ul>"; <b:loop values='data:labels' var='label'> display = display + "<li><a expr:href='data:label.url + "?max-results=100"'><data:label.name/></a> (<data:label.count/>)</li>"; </b:loop> display = display + "</ul>"; obj = document.getElementById('LabelDisplay'); obj.innerHTML = display; } // set default to zoom style zoomStyle(); </script> <b:include name='quickedit'/> </b:includable> </b:widget>

Luego al hacer click en el primer icono, las etiquetas cambian y vuelven como estaban por defecto:

Esta es la imagen de como quedan las etiquetas ante la accion del segundo icono:

Y con el tercer icono vuelven a su estado original:

Listo eso es todo, no es muy util creo yo... es como la mayoria de las cosas de la vida: pura noveleria, pero con una gran dosis de diversion... je je, que lo disfrutes.

Nube de etiquetas en blogger

2007-12-03T17:59:00.000-05:00

Por fin despues de algunas semanas de buscar una nube de etiquetas, al fin encontre una que me gusta, habia visto otras de diseño de compañia, con el tedioso problema de suscribirme, y para colmo la publicidad en tu propia pagina, como decia el pitufo gruñon: yo ooooodio la publicidad... yo buscaba una nube widget de etiquetas que su instalacion sea todo un trabajo cientifico... es que me aburre hacer las cosas del modo facil... prefiero hacerlas en dificil.

Paso 1.- Ve a: Panel / Diseño / Edicion de HTML
Copia este codigo y pegalo antes de este codigo: ]]></b:skin>

/* Estilos de la Nube de Etiquetas */ #labelCloud {text-align:center;font-family:arial,sans-serif;} #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;} #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;} #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0} #labelCloud a{text-decoration:none} #labelCloud a:hover{text-decoration:underline} #labelCloud li a{} #labelCloud .label-cloud {} #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000} #labelCloud .label-cloud li:before{content:"" !important }

Pso 2.- Ahora copia este codigo y pegalo pero despues del mismo codigo: ]]></b:skin>

<script type='text/javascript'> // Variables en la Nube sobre el color y tamaño de la fuente var cloudMin = 1; var maxFontSize = 16; var maxColor = [0,0,255]; var minFontSize = 12; var minColor = [30,144,255]; var lcShowCount = false; </script>

Paso 3.- Ahora busca el codigo sin expandir la plantilla de artilugios, el cual esta casi por el ultimo:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Y reemplazalo por el codigo que te presento a continuacion:

<b:widget id='Label1' locked='false' title='Nube de etiquetas' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div id='labelCloud'/> <script type='text/javascript'> /* Este es el script que hace posible la nube y no hay necesidad de cambiar nada */ function s(a,b,i,x){ if(a>b){ var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m) } else{ var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a) } return v } var c=[]; var labelCount = new Array(); var ts = new Object; <b:loop values='data:labels' var='label'> var theName = "<data:label.name/>"; ts[theName] = <data:label.count/>; </b:loop> for (t in ts){ if (!labelCount[ts[t]]){ labelCount[ts[t]] = new Array(ts[t]) } } var ta=cloudMin-1; tz = labelCount.length - cloudMin; lc2 = document.getElementById('labelCloud'); ul = document.createElement('ul'); ul.className = 'label-cloud'; for(var t in ts){ if(ts[t] < cloudMin){ continue; } for (var i=0;3 > i;i++) { c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz) } var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz); li = document.createElement('li'); li.style.fontSize = fs+'px'; li.style.lineHeight = '1'; a = document.createElement('a'); a.title = ts[t]+' Posts in '+t; a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')'; a.href = '/search/label/'+encodeURIComponent(t); if (lcShowCount){ span = document.createElement('span'); span.innerHTML = '('+ts[t]+') '; span.className = 'label-count'; a.appendChild(document.createTextNode(t)); li.appendChild(a); li.appendChild(span); } else { a.appendChild(document.createTextNode(t)); li.appendChild(a); } ul.appendChild(li); abnk = document.createTextNode(' '); ul.appendChild(abnk); } lc2.appendChild(ul); </script> <noscript> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop> </ul> </noscript> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Para cambiar los colores de la nube aqui te dejo una guia que te sera muy util

Y listo, eso es todo, una nube de etiquetas que no tiene nada de publicidad y que es de tu total propiedad, que lo disfrutes.

Post expandible - selectivo en Blogger

2007-11-28T00:13:00.002-05:00

Este es otro sistema de ver los post que están comprimidos para una mejor organización en la página principal, (aqui ya expuse el sistema pero con post expandibles), con este post tu podrás poner solo dos párrafos del post y luego un link que te referenciará a la página del link.

Paso 1.- Paso 1.- Ve a: Panel / diseño / Edición de HTML y respalda tu plantilla luego pega el siguiente código antes de </head>

<b:if cond='data:blog.pageType != "item"'> <script type="text/javascript"> //<![CDATA[ var fade = false; function showFull(id) { var post = document.getElementById(id); var spans = post.getElementsByTagName('span'); for (var i = 0; i < spans.length; i++) { if (spans[i].id == "fullpost") { if (fade) { spans[i].style.background = peekaboo_bgcolor; Effect.Appear(spans[i]); } else spans[i].style.display = 'inline'; } if (spans[i].id == "showlink") spans[i].style.display = 'none'; if (spans[i].id == "hidelink") spans[i].style.display = 'inline'; } } function hideFull(id) { var post = document.getElementById(id); var spans = post.getElementsByTagName('span'); for (var i = 0; i < spans.length; i++) { if (spans[i].id == "fullpost") { if (fade) { spans[i].style.background = peekaboo_bgcolor; Effect.Fade(spans[i]); } else spans[i].style.display = 'none'; } if (spans[i].id == "showlink") spans[i].style.display = 'inline'; if (spans[i].id == "hidelink") spans[i].style.display = 'none'; } post.scrollIntoView(true); } function checkFull(id) { var post = document.getElementById(id); var spans = post.getElementsByTagName('span'); var found = 0; for (var i = 0; i < spans.length; i++) { if (spans[i].id == "fullpost") { spans[i].style.display = 'none'; found = 1; } if ((spans[i].id == "showlink") && (found == 0)) spans[i].style.display = 'none'; } } //]]> </script> </b:if>

El siguiente paso es expandir la plantilla de artilugios, hacer control + f y en el cuadro de búsqueda poner <div class='post-body'> o búscalo manualmente y luego modifíca el código a continuación agregando únicamente lo que esta con rojo

<div class='post-body' expr:id='"post-" + data:post.id' > <b:if cond='data:blog.pageType == "item"'> <style>#fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>#fullpost{display:none;}</style> <p><data:post.body/></p> <span id='showlink'> <a expr:href='data:post.url'><strong><big>Leer post completo.....</big></strong></a> </span> <script type='text/javascript'> checkFull("post-" + "<data:post.id/>"); </script> </b:if> <div style='clear: both;'/>  </div>

Listo ahora cada vez que postees esciribe tu post como siempre, luego despues de los dos primeros párrafos o donde tu estimes conveniente pon este script, seria mejor que te lo aprendas de memoria o lo tengas en un archivo de blog de notas en el escritorio ya que lo vas a utilizar bastante:

<span id="fullpost">

Despues de este codigo termina todo el post, pero luego al final del mismo pon esto:

</span>

a.- Esto quiere decir que lo que esta arriba de: <span id="fullpost"> es el resumen o sumario, dos parrafos seran suficientes.

b.- Todo lo que este dentro de: <span id="fullpost"> y </span> será el cuerpo del post y lo que se referenciará a la página del post.

C.- Ten en cuenta de que si tu post no es muy grande no necesitas este script, para esto solo no pongas los escript: <span id="fullpost"> - </span>, y todo sera como antes, al menos en ese post.

D.- Puedes usarlo a voluntad en el post que desees.

Hecho, que lo disfrutes...

Post expandible en Blogger

2007-11-27T14:18:00.000-05:00

Me acabo de encontrar con el script de Leer mas o post expandibles, es muy tipico verlo en ciertas paginas, quiza las mas cotizadas, es un escript en donde solo se muestra uno o dos parrafos del post y luego sale un link que dice leer mas, al hacerle click este se expande y muestra todo el contenido del post sin tener que cargar la pagina entera, es perfecto para post demasiado grandes, que demoren la carga de la pagina a continuacion:

Paso 1.- Pega este script entre: <head> y </head>:

<b:if cond='data:blog.pageType != "item"'> <script type="text/javascript"> //<![CDATA[ var fade = false; function showFull(id) { var post = document.getElementById(id); var spans = post.getElementsByTagName('span'); for (var i = 0; i < spans.length; i++) { if (spans[i].id == "fullpost") { if (fade) { spans[i].style.background = peekaboo_bgcolor; Effect.Appear(spans[i]); } else spans[i].style.display = 'inline'; } if (spans[i].id == "showlink") spans[i].style.display = 'none'; if (spans[i].id == "hidelink") spans[i].style.display = 'inline'; } } function hideFull(id) { var post = document.getElementById(id); var spans = post.getElementsByTagName('span'); for (var i = 0; i < spans.length; i++) { if (spans[i].id == "fullpost") { if (fade) { spans[i].style.background = peekaboo_bgcolor; Effect.Fade(spans[i]); } else spans[i].style.display = 'none'; } if (spans[i].id == "showlink") spans[i].style.display = 'inline'; if (spans[i].id == "hidelink") spans[i].style.display = 'none'; } post.scrollIntoView(true); } function checkFull(id) { var post = document.getElementById(id); var spans = post.getElementsByTagName('span'); var found = 0; for (var i = 0; i < spans.length; i++) { if (spans[i].id == "fullpost") { spans[i].style.display = 'none'; found = 1; } if ((spans[i].id == "showlink") && (found == 0)) spans[i].style.display = 'none'; } } //]]> </script> </b:if>

Paso 2.- Ahora ve a: Panel / diseño / Edicion de HTML, una vez ahi le haces click donde dice: expandir plantillas de artilugios.

Ahorai haz: control + f y pon este codigo: <b:includable id='post' var='post'> luego ubica el codigo a continuacion:

<b:includable id='post' var='post'> <div class='post uncustomized-post-template'> <a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h1 class='post-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </b:if> </h1> </b:if> <div class='post-header-line-1'/> <b:if cond='data:post.dateHeader'> <p class='date-header'><data:post.dateHeader/></p> </b:if> <div class='post-body'> <p><data:post.body/></p> <div style='clear: both;'/>  </div>

Paso 3.- Solo tienes que reemplazar lo que esta en rojo y letras grandes, ponte pilas que lo que sobre de tu plantilla y no lo entiendes... pues dejalo, solo agrega lo que falte que justamente esta en rojo...

<b:includable id='post' var='post'> <div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'> <a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h3 class='post-title'> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h3> </b:if> <div class='post-header-line-1'/> <div class='post-body'> <b:if cond='data:blog.pageType == "item"'> <p><data:post.body/></p> <b:else/> <style>#fullpost {display:none;}</style> <p><data:post.body/></p> <span id='showlink'> <p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'><strong><big>Ver post completo...</big></strong></a></p> </span> <span id='hidelink' style='display:none'> <p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'><strong><big>Contraer post...</big></strong></a></p> </span> <script type='text/javascript'> checkFull("post-" + "<data:post.id/>"); </script> </b:if> <div style='clear: both;'/>  </div>

Ojo, No todas las plantillas son iguales, a veces el hack simplemente no funciona pero en mi experiencia es por esta razon, este codigo al inicio:

<div class='post uncustomized-post-template';>

Que tendrias que reemplazarlo de esta forma:

<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>

A veces no aparece igual en todas las plantillas, una vez me encontre con un codigo asi:

<div class='post hentry'>

Asi que lo que hice fue eliminar el hentry, cerrar las comillas y continuar el hack de esta forma:

<div class='post' expr:id='"post-" + data:post.id'>

Y funcionó a la perfeccion...

Paso 4.- Cada vez que postees esciribe tu post como siempre luego despues de los dos primeros parrafos o donde tu estimes conveniente pon este script, seria mejor que te lo aprendas de memoria o lo tengas en un archivo de blog de notas en el escritorio ya que lo vas a utilizar bastante:

<span id="fullpost">

Despues de este codigo termina todo el post, pero luego al final del mismo pon esto:

</span>

a.- Esto quiere decir que lo que esta arriba de: <span id="fullpost"> es el resumen o sumario, dos parrafos seran suficientes.

b.- Todo lo que este dentro de: <span id="fullpost"> y </span> sera el cuerpo del post y lo que se expandira.

C.- Ten en cuenta de que si tu post no es muy grande no necesitas este script, para esto solo no pongas los escript: <span id="fullpost"> - </span>, y todo sera como antes, al menos en ese post.

D.- Puedes usarlo a voluntad en el post que desees.

Espero que lo disfrutes...

Comentarios en barra lateral en blogger

2007-11-27T07:06:00.000-05:00

Sin comentarios

Es por muchos conocido que se pueden agregar los comentarios simplemente en: Panel /diseño / Agregar un elemento de pagina / Feed, y donde te dice direccion del feed pones:

http://Tu blog.blogspot.com/feeds/comments/default

Obviamente reemplazas donde dice Tu blog por el nombre de tu pagina y mantienes el: .blogspot.com.

Pero con este widget que te pongo a continuacion tu podras:

1.- Especificar cuantos comentarios quieres que sean expuestos (por defecto van 10)
2.- Especificar el maximo numero de letras en cada comentario (por defecto van 100)
3.- Haciendo click en el nombre de quien te dejo el comentario vas al post directamente.
4.- Haciendo click al ultimo donde dice comentarios, puedes ver un resumen total de tus comentarios y tus lectores podran suscribirse a los mismos, siii!!!! creando una especie de foro general!!!

Ok ahora vamos con el widget:

Paso 1.- Ve a: Panel / Diseño / Edicion de HTML

Pso 2.- Copia este codigo y pegalo entre <head> y </head>

<script type='text/javascript'> //<![CDATA[ function commentDisplay(json) { for (var i = 0; i < numcomments; i++) { var entry = json.feed.entry[i]; var alturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } alturl = alturl.replace("#", "#comment-"); if (entry.content) { comment = entry.content.$t; } else if (entry.summary) { comment = entry.summary.$t; } var re = /<\S[^>]*>/g; comment = comment.replace(re, ""); document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> dijo:<br/>'); if (comment.length < numchars) document.write(comment + '<br/><br/>'); else document.write(comment.substring(0, numchars) + '...<br/><br/>'); } } //]]> </script>

Paso 3.- Ve a diseño, escoges la opcion de añadir un elemento de pagina, ahi escoges: HTML/Javascript, le haces click a añadir al blog y añades este codigo:

<br/><script language="javascript"> var numcomments = 10; var numchars = 100; </script> <script src="http://tu blog.blogspot.com/feeds/comments/default? alt=json-in-script&callback=commentDisplay"></script> <br/> <br/> <a href="http://Tu blog.blogspot.com/feeds/comments/default" target="_blank">Comentarios totales</a>

Paso 4.- Donde dice: tu blog, remplazalo por el nombre del tuyo y manten el: .blogspot.com

Y ya esta!!! eso es todo, asi podras tener un resumen completo de tus comentarios en tu barra lateral, con un script medio artesanal (como todos los que tengo), pero mejor que muchos "oficiales" que no funcionan...

Que lo disfrutes...

Widget personal en Blogger

2007-11-20T08:37:00.001-05:00

Este es un script interesante y muy sencillo, creas un widget pequeño en tu blog con un boton que hace que al hacerle click, los otros bloggers pueden agregar un enlace de tu pagina a su blog por medio de la interface oficial de Blogger, como un artilugio.

Ve a diseño, escoges la opcion de añadir un elemento de pagina, ahi escoges: HTML/Javascript, le haces click a añadir al blog y añades este codigo:

<form action="http://beta.blogger.com/add-widget" target="_blank" method="post"> <input value="" name="widget.title" type="hidden"/> <textarea style="display: none;" name="widget.content">  <div align="center"> <a href="http://direccion de tu blog "><img src="imagen de hosting que represente tu blog el cual saldra en el blog de quien te agregue"/></a> <br/> <a href="http:// Direccion de tu blog "><strong><font size="3">Titulo de tu blog en texto que servira como link al igual que la imagen</font></strong></a> </div> </textarea> <div align="center"> <img src="http://Imagen de hosting que represente a tu blog el cual saldra en tu pagina"/> <input value="Agregame a tu Blogger" name="go" type="submit"/> <input value="http://informaticaesencial.blogspot.com/2007/11/widget-personal-para-blogger.html#links" name="infoUrl" type="hidden"/> </div></form>

Aqui el ejemplo:

El mismo ejemplo pero mas interactivo:

<br /><br /><div align="center"><br /><a href="http://laplegariadeunpagano.blogspot.com"></a><br /><br/><br /><a href="http://laplegariadeunpagano.blogspot.com"><strong><font size="3">La plegaria de un pagano</font></strong></a><br /></div><br /><br />

Ahora el ejemplo de como queda en la pagina de quien te agrego:

Si quieres borra el link que redirige a mi pagina de informatica, es solo por si alguien tambien le gusta el widget y lo quiere usar, pero borra solo esta parte o pon el link que quieras:

<input value="http://informaticaesencial.blogspot.com/2007/11/widget-personal-para-blogger.html#links" name="infoUrl" type="hidden"/>

Lógicamente para usar la imagen de hosting como icono deberas ajustarla al tamaño adecuado, para esto te recomiendo usar: PIXreziser, el cual es extremadamente sencillo, la medida que utilicé para mi icono fue de: 100 x 100 pixeles

Y eso es todo, listo... que lo disfrutes!!!