Friday, May 15, 2009

Rounded Corners for Blog Post Column

I have always wanted to have rounded corners for my blog post column so that it's not too pointy. Finally, I found this tip at Blog Doctor about rounded corners. Unfortunately, it was for the blog header. Still, I decided to try it but I experimented with it and used it in my blog post column instead. And what do you know? It worked! I just thought I'd share it to you. Here is the website I used to make the rounded corners: Cornershop.

After creating your corners in Cornershop, you will get four corner images, a CSS code, and an HTML code. Save the images to your hard disk then upload them to a free filehosting. I used Imageshack for mine. When you upload to Imageshack, take note of the URLs of the images.

Now, go to your blog's Edit HTML tab under Customize>Layout. It is a good blogging practice to ALWAYS BACKUP YOUR TEMPLATE before changing anything.

Copy the CSS code in Cornershop and paste it right AFTER this line:

/* Header
-----------------------------------------------
*/

In the CSS code, replace the picture URLs (ne2.gif, nw2.gif,...) with the URLs of the images you uploaded. For the HTML code, first copy this part only:

<div class='box'>
<div class='boxtop'><div></div></div>
<div class='boxcontent'>

And paste it right BELOW this line:

<div id='main-wrapper'> This is the beginning of the blog post column.

Now, copy the second part of the HTML code, which is this:

</div>
<div class='boxbottom'><div></div></div>
</div>

Paste it right ABOVE the following two lines:

</div>
<div id='sidebar-wrapper'>

Save your template and view your blog. You can see how it looks like in my blog. Hope this helps!

1 comment:

  1. DreamHost is definitely the best hosting provider with plans for all of your hosting requirments.

    ReplyDelete