Bloggeratto

This particular hack was one idea that I had to use to solve a simple issue but one that extended way beyond the initial use i originally thought for it.

Once again, over the gmail chat window i asked Aditya for a very simple hack based on this concept. "I want a script to replace elements anywhere in my template with images or to erase the elements if i want it so." I said. 15 minutes later Aditya solved my problem without knowing what i was going to do with it or why i wanted such a thing. initially i wanted it to solve a very straigforward problem: feed filtering bumps.

If you go to a service like Feedshake, (there are more other services like it and i will tackle their use in a new post) you can then put your blog feed in FeedShake to create categories for your feed or if you are using categories in your blog, you can then create an RSS feed for every category you have in your blog. The problem was that Feedshake would bump, or miss a article from time to time, or not put them in order as they should, etc. Having seen the problem, I thought the easiest solution would be to sort a word that was in the title of the article. Why? Because as in a search, the first thing that get parsed on a feed is the title, and it is parsed with a class one priority everytime, some feeds only parse the titles and so on.

That way you can put a tag in the same way i have put in the title: [TAG] at the very beginning of your post:

Example 1:

[square] The Multi-Purposes [TAG]

In this first example you can see the replacement of a element for a image for the [tag].in this case [tag] is: SQUARE

Example 2:

[square] The Multi-Puposes [TAG]
[circle] Hovering Peek-A-Boo Blogger Navbar
[triangle] Special Thanks and a Note

In this example you have decided to have several tags to make different feeds to be replaced by the same element and to be filtered to different feeds, one for each [TAG].[TAG]s: SQUARE, CIRCLE and TRIANGLE.

Example 3:

[erase] The Multi-Puposes [TAG]
[erase] Hovering Peek-A-Boo Blogger Navbar
[erase] Special Thanks and a Note

in this example you have decided that hell, you don´t want any extra element in your blog, but you do want the filtered Feed for your category. [TAG]: ERASE

Example 4:

[square] The Multi-Puposes [TAG]
[extra] Hovering Peek-A-Boo Blogger Navbar
[more] Special Thanks and a Note

In this example you have decided that you not only want the tags replaced by a element but that you want a special image for each tag replacement, and you can do so.[TAGS]: SQUARE, EXTRA and MORE.

Example 5:

[square] The Multi-Puposes [TAG]
[erase] Hovering Peek-A-Boo Blogger Navbar
[extra] Special Thanks and a Note
[circle] Introductions

In this final example i just want you to see how the script can erase,replace one or more elements at the same time with one or more [TAG]s depending on your decision.

[TAG]s: SQUARE, ERASE, EXTRA and CIRCLE.

See, very cool! Isn't it?

This will make your filtered feed have no bumps whatsoever because not only the tag gets parsed in the class 1 element of your feed, its the first word in it.

And not only that. You can now can have that feed or feeds for the categories or just use it to have categories without interfering with your blog's look or use it to change your blog look.

Lets get into the code and explaining it easily, the code for this could not be shorter and more crystal clear even to non coders!

So, just add this code inside the the head tags:

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

And to avoid you any kind of problem when pointing to a image here is how a link to a image must look:

var rep =" '<' img src="IMAGE URL " border="0" />";

Now finally, lets see how the code in this very blog was defined to be able to represent the examples we just have seen:

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);

            }
    }
}

As you can see in this example, every time I add a new [TAG] i add a new find "#". If there are several [TAG]s which are going to be replaced with the same image, there is only need for one 'rep' value, if am gonna erase them all, that can be done also with one rep value, only every time I am going add a [TAG] that will be replaced or erased plus other [TAG]s already in the script, then I must add another 'rep' value and identify it so it can replace the correct [TAG] with the right image.

PHEW! There you have it then. If you have any doubt, suggestion or new use for it please leave a comment!

Credits:
Code: Aditya
Idea & Implementations: Avatar