How to Customize Infolinks Related Tags

It's been more a month since Infolinks introduced the Related Tags feature. Until now, they haven't released a new version that allows color and size customization. The first version looks fine on sites with light background but not on sites with dark templates.

Here are the reasons. First, the Related Tags logo isn't transparent. Second, the tags are blue by default which make it unreadable in dark templates. The tendency is that the publisher would rather uninstall the widget than keep it.

We did a little experiment to come up with a workaround. And it was successful. The trick? We gave the Infolinks Related Tags a white background so that the tags become readable, and then we added a line of code to allow a rounded corner and presto! the feature looked better.

So that you too can install the Infolinks Related Tags in dark templates and eventually increase your earnings by as much as 30%, we are more than glad to share the following guide for customization.

The steps:

1. In your Blogger dashboard, go to Design > Add a Gadget > HTML/JavaScript;
2. Put “Infolinks” as the title;
3. Add the Infolinks Related Tags code:


<input type="hidden" name="IL_RELATED_TAGS" value="1" />


4. Hit Save.
5. Now, go to Design > Edit HTML > Expand Widget Templates;
6. Search for “Infolinks” (minus the quotes) using using Ctrl+F, you'll find a set of codes similar to this:



7. Delete the code <data:title/> as highlighted in the image;



8. And then add the code style='background: #ffffff; padding: 10px 10px 10px 10px; -moz-border-radius: 1em;' as shown in the image;


9. Finally, click SAVE TEMPLATE and you're done.
10. View your blog.

You will notice that the Infolinks Related Tags feature already has a white background. It looks better now on top the dark template, isn't it?

BEFORE

AFTER

Click here to go to the demo page.