How to use InfoGrid javascript in Blogger.com?

[delscarlet]

Hello.
I’ve just the InfoGrid. Cool thing.
I’ve just started a blog in Blogger. [Still in designing mode] And I want to use this widget in my blog. Is it possible? If yes, how?
By the way, it’ll be really helpfull if you can put a “Read more” to link to a particular post.
All I want is “THIS“.
Please help me.
Thanx and regards

FYI : I’m not a programmer from any angle. So a detailed description is what I need. Sorry. :-)

[gno]

— selfmoderated — misunderstood the op

[delscarlet]

Well, at first, thanks for the comment gno. But I guess I gota tell you something.

Blogger do support template customization by coding. It supports HTML,CSS,JAVASCRIPT.

Wordpress is fine. But I am addicted to google services. And blogger can create some serious stuffs too. Most importantly, without spending a single buck. ;-)

If I had to hire someone to do it for me, I would have simply upload my template codes file, paste the link here. and would have ask him to send it back to me after making necessary changes.

I asked for a detailed description just to make sure, that I can understand what I’m up to. Beacuse I do not want to simply follow the instructions, like, find “this” code, paste “this” code after “that” code.. blah blah blah..

Its completely OK if no one is coming up with the solution. At least the world won’t end. :-)

[gno]

@delscarlet – I’m sorry. I was a bit too fast on that one.

Most of the demos on css-tricks.com seem to origin from educational articles, but sadly, this seems to not be the case.

The InfoGrid itself consist of 4 parts.

• The minified 1.4 version of the jquery library
• The Stylesheet: https://css-tricks.com/examples/InfoGrid/css/style.css
• The Jquery script: https://css-tricks.com/examples/InfoGrid/js/infogrid.js
• The markup it self: https://css-tricks.com/examples/InfoGrid/

What you need to do, is to fetch the stylesheet and the infogrid.js file. Then make references to them from the page where you want to use them.

The interesting part of this is the markup;

All the columns are wrapped in a container – in this case the container is called #pagewrap.

Each row is completely the same – markup wise.

Superman




View Image





Super Power


Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea

commodo consequat.




Costume


Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea

commodo consequat.






Morality


Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea

commodo consequat.

Lets break down the structure:
The div with class info-col wraps each column. Inside that div you have the name of the column, in a h2 tag. The image is made from the a-tag’s href attribute. The rest of the grid is made from the dl (datalist) tag – which contains the different content parts of the grid, in dt (datatype – or infogrid header) and dd (data-data(?) – or infogrid data) tags.

While I have not looked too much into the source of this demo, I suspect that it will not work as expected in IE8 and lower. As no individual class names are given to the dt/dd parts, it looks like Chris was using the :nth-child constructor which is not supported by some browsers. But I think it will have decent fallback, as the basic styling will be ok, and if the grid jquery stuff fails, it will have a decent structure just without the folding.

I think that you should be able to make this work, with basic understanding of the markup used to create the grid, and knowledge of which external resources the script depends on.

Let me know, if I’m mistaken again ;-)

[Author]

Posts