[TAG] Multi-Propositos 1 de 3

Este Hack en particular fue una idea que tuve para poder resolver un problema muy simple, solo que los usos que le fui descubriendo sobrepasaron el uso original para el que le habia pensado. Una vez mas, por la ventana del Gmail Chat le pedi a Aditya por un hack que basado en el siguiente concepto: "Quisiera un script para remplazar o quitar elementos en cualquier lugar de mi plantilla con imagenes o simplemente borrarlos de la misma si asi lo quiero". 15 minutos despues Aditya habia encodeado algo para resolver mi problema sin siquiera saber para que lo queria o que pensaba hacer con el. Inicialmente lo queria para resolver un problema muy en especifico y lineal, evitar los errores y saltos al filtrar una fuente. Si tu vas a algun servicio como Feedshake( hay varios como este i los abarcare en otro post) tu puedes entonces poner la fuente principal de tu blog en FeedShake para crear categorias para tu fuente o si estas usando categorias en tu blog, puedes entonces crear una Fuente de RSS para cada categoria que tengas o quieras de tu blog. El problema era que FeedShake en algunos momentos se saltaria o se saldria de orden sin explicacion alguna, errando un articulo de tiempo en tiempo, o simplemente no poniendolos en el orden original como se supone que esten. Habiendo visto el problema, pense que la mas simple solucion seria sortearlas con una palabra en el articulo pero que fuera completamente imposible de obviar o de que el sistema se saltara. la mejor solucion entonces seria poner un [TAG] en el titulo del articulo. ¿Por que?. Por la simple razon de que cualquiera de esos sistemas parsean primero los titulos y con mayor prioridad debido a que hay algunas señales de RSS que solo son titulos. De esa manera puedes poner un tag de la misma manera en el titulo: [TAG] al principio de tu entrada: Example 1: [square] [TAG] Multi-Propositos 1 de 3 En este primer ejemplo podran ver el remplazo de un elemento de una imagen por el [tag]. En este caso el [tag] es SQUARE Ejemplo #2: [square] [TAG] Multi-Proposito 1 de 3 [circle] Hovering Peek-A-Boo Blogger Navbar [triangle] Agreadecimientos Especiales y Una Nota En este ejemplo has decidido tener varios tags para hacer diferentes Feeds para ser remplazados por el mismo elemento y para ser filtrado en diferentes feeds, una para cada [TAG]. [TAG]s: SQUARE, CIRCLE y TRIANGLE. Ejemplo #3: [erase] [TAG] Multi-Propositos [erase] Hovering Peek-A-Boo Blogger Navbar [erase] Agradecimientos Especiales Y Una Nota En este ejemplo haz decidido que al diablo, tu no quieres ningun elemento extra en tu blog, pero que quieres una feed filtrada de manera confiable para tu categoria. [TAG]: ERASE Ejemplo #4: [square] [TAG] Multi-Propositos 1 de 3 [extra] Hovering Peek-A-Boo Blogger Navbar [more] Agradecimientos Especiales Y Una Nota En este ejemplo tu has decidido que no solo quieres que los tags sean remplazados por una imagen pero que aparte quieres una imagen diferente para cada remplazo de tag, y asi lo puedes hacer. [TAG]S: SQUARE, EXTRA y MORE. Ejemplo #5: [square] [TAG] Multi-Propositos 1 de 3 [erase] Hovering Peek-A-Boo Blogger Navbar [extra] Agradecimientos Especiales Y Una Nota [circle] Introducciones En este ejemplo final solo quiero que vean como el script puede borrar, remplazar uno o mas elementos al mismo tiempo con una o mas [TAG]s dependiendo en tu decision. [TAG]s: SQUARE, ERASE, EXTRA y CIRCLE. Ven, Bastante Chido no?. Esto hara que tu Feed filtrada jamas tenga ningun desliz en lo absoluto por no solo el tag sea captado en el elemento clase 1 de tu feed, Sino que es la Primera palabra en este. Y no solo eso. Puedes tener esas Feeds para las categorias or solamente usarla para tener dichas categorias sin interferir con el look de tu blog, o usarla para mejorar el look del mismo. Veamos dentro del codigo explicandolo en terminos simples, el codigo para esto no podria ser mas corto ni mas claro aun para los principiantes. Asi que, solo agreguen este codigo dentro de los tags de Head: JS->>> function change(){ var findone=/\[whatever\]/ig; var rep ="'<'img src="Image Url" gif="" border="0" /> "; var d=document.getElementsByTagName('div'); var i=0; for(i=0;i Y para evitarte cualquier clase de problema cuando estes apuntando a una imagen, aqui esta como se debe ver el link para usar una imagen: LINK DE LA IMAGEN->>> var rep =" '<' img src="URL DE LA IMAGEN" border="0" />"; Finalmente, veamos como se ve el codigo para los ejemplos representados en este post: EJEMPLOS-->>> function change(){ var findone=/\[SQUARE\]/ig; var findtwo =/\[CIRCLE\] /ig; var findthree =/\[TRIANGLE\] /ig; var rep =" '<' img src="Image Url" gif="" border="0" /> "; var findfour=/\[ERASE\]/ig; var repone =""; var findfive =/\[EXTRA\] /ig; var reptwo =" '<' img src="Image Url" gif="" border="0" /> "; var findsix =/\[MORE\] /ig; var repthree = '<' img src="Image Url" gif="" border="0" / > "; var d=document.getElementsByTagName('div'); var i=0; for(i=0;i<d.length;i++){ if(d.item(i).innerHTML.match(findone)){ d.item(i).innerHTML=d.item(i).innerHTML.replace(findone,rep); if(d.item(i).innerHTML.match(findtwo)) d.item(i).innerHTML=d.item(i).innerHTML.replace(findtwo,rep); if(d.item(i).innerHTML.match(findthree)) d.item(i).innerHTML=d.item(i).innerHTML.replace(findthree,rep); if(d.item(i).innerHTML.match(findfour)){ d.item(i).innerHTML=d.item(i).innerHTML.replace(findfour,repone); if(d.item(i).innerHTML.match(findfive)) d.item(i).innerHTML=d.item(i).innerHTML.replace(findfive,reptwo); if(d.item(i).innerHTML.match(findsix)) d.item(i).innerHTML=d.item(i).innerHTML.replace(findsix,repthree); } } } Como pueden ver en esta demostracion, cada vez que agrego un nuevo [TAG] debo agregar un nuevo find "#". Si hay varios [TAG]s que van a ser remplazados por la misma imagen, entonces solo debe haber un solo valor 'rep', si por el contrario solo quiero borrarlas, eso puede hacerse tambien con un solo valor rep que debe quedar vacio. Solamente cada vez que vaya a agregar un [TAG] que sera remplazado o borrado aparte de otro que ya este dentro del script, solo entonces es cuando debo agregar otro valor rep y identificarlo para que el mismo pueda ser remplazado el [TAG] correcto con la imagen requerida. Pues, ahi lo tienen, Si tienen alguna duda, sugerencia o nuevo uso para esto, dejen un comentartio. Aunque este hack todavia esta dado por terminado ya que de aqui siguen dos post mas que enseñaran todo lo que puede hacerse con este [TAG]. Creditos: Codigo: Aditya Idea y Implementaciones: Avatar

Posted By Avatar X At 1:43 AM