Search This Blog

Wednesday, December 18, 2013

How to make a blogger blog fluid ?


Fluid means that the content displayed changes with he size of the browser window. A liquid or fluid blog has a default width, for example 950 pixels, not matter what, e.g. changing the size of your browser window will just add more pixels fille with the background on each side of the main (inner) view (rectangle) :



To make the blog fluid, click Template (just above Settings, last item of the list on the left, this menu is in your blog dashboard window), click on the Edit HTML button and change:

.content-outer, .content-fauxcolumn-outer, .region-inner {
    min-width: 800px;  /* $(content.width); */
    max-width: 2200px; /* $(content.width); */
    _width:    100%;   /* $(content.width); */
}

Which means that the inner page will never be smaller than 800 pixels but can be as large as 2200 pixels, and that is 100%  of this space should be filled. The value between /* ... */ are the original (commented) ones.

To try it just resize your browser window. The left and right column width should stay the same, while the blog text area should change.

There are also a bunch of Blogger free templates out there, do an internet search "free blogger template fluid" or something !

No comments:

Post a Comment