Translate This Blog
Always Remember To Back Up Your Template Before Attempting Any Of The Tweaks On This Site

Do to error codes you should use the old interface when attempting many of these tweaks to your template

Split Post Area Into Two Columns (Blogger)

With this post you can split your post into two columns side by side. This is a little tricky since it requires HTML coding in each post for this to take effect.


1.)   Go to  Design--> Template Designer--> Advanced--> Add CSS--> Input code below
.post-column-left {
float: left;
width: 45%;
}
.post-column-right {
margin-top: -5px;
float: right;
width: 45%;
}

2.)   Now that my styles are in place I just need to add a few lines of HTML into the post I wish to split. When you go to the Post Editor make sure you are in Edit HTML mode when you apply this code below.
<div class="post-column-left">
<--Content To Display on Left Side of Post-->
</div>
<div class="post-column-right">
<--Content To Display on Right Side of Post-->
</div>
3.)   Fill in the Blue with the text or content you wish to display.

Inside the Post Editor you will not see any changes, but once you view the content on you blog it will then show up side by side.
Labels:

12 comments:

  1. I guess you can use just 45% instead of pixels and than there is no need to know the width of the post area and 20px gap you can specify with padding property.
    Anyway this was helpful.cheers.

    ReplyDelete

  2. LOL Why did I not think about that >_<

    ReplyDelete

  3. Hi. This is really useful but I have a problem. When I add to my columns I get a few paragraphs down and then (after copying the HTML for safety) I publish and the post vanishes. I then have to copy and paste in the pre-copied HTML, delete the last paragraph I added and re-post. It is then back again. Unfortunately it seems I cannot have a post that is very long down the page?

    ReplyDelete

  4. Perfect! Worked like a dream - took me about an hour of googling to find this lol

    Thanks heaps x

    ReplyDelete

  5. Oh look,I wrote on the wrong post lol I came back to say thanks, was meant to be on the 'Split Gadgets'post :)

    ReplyDelete

  6. this was exactly what i needed; thanks!

    ReplyDelete

  7. Thank you so much! I didn't expect to be that simple.

    ReplyDelete

  8. Thanks! worked perfectly!!!

    ReplyDelete

  9. the best and easiest way I've found

    thanks a lot!

    ReplyDelete

  10. Perfect! I've been looking for something like this!

    ReplyDelete

  11. that the thing that i wana to find still log time

    i m just a beginer n not having html or other css laguage knowledge

    throw ur blog i learned this think

    thanks u so much dude

    ReplyDelete

Subscribe to: Post Comments (Atom)
Web Design Blogs PageRank