How to Make Rounded Corner on Sidebar Widgets?

Filed Under : Blog Sidebar, Pictures

Hi bloggy readers,

If you've already utilized the template provided by Google Blogger.com, Rounders template, as you can see that template, on the sidebar corners, up and bottom, have rounded corner images or rounded shape. And if you check the sidebar CSS style that controls that blogger sidebar in the blog template, you will find that it uses picture to create a rounded corner effect on the top and bottom positions. So, if you want to make your own round cornered sidebar widget, these are the following steps you need to follow.

Preparing the rounded corner picture

1. Prepare your own rounded picture

First things first, you have to prepare your own rounded corner images using Paintbrush or any image software such as Photoshop or G.I.M.P, even Paintbrush for creating a simple image. Okay, the image should look like this:

2. Adjusting the width size of rounded corner with the sidebar

The one thing you must remember in making that picture is, you have to make sure that the rounded corner you're about to use in this article must have the same size with the sidebar width. The easiest way to do that is by trying to adjust the width size of the sidebar column on your actual blog with the picture itself by taking screenshot from computer screen. Here are what you need to do:

Take a screenshot of your blog, especially in the sidebar area,
Paste the screenshot you've already taken to the blank paper in Paintbrush by pressing Ctrl + V at the same time,
Still in the Paintbrush with the pasted screenshot, now put the rounded picture above (number 1 of this tutorial) near the sidebar area and then try adjusting the width size of rounded corner to get the same width size with the sidebar element.

Now take a look at the example of adjusting the width size of rounded corner with the real sidebar in your blog.

adjusting the width size of round corner images

3. Uploading the final rounded corner to the file sharing

Now, you have to upload that picture to the upload hosting site so it can be accessed on internet. FileupYours is still my best recommendation for uploading files, and you can upload any file with any format there, but you have to log in to this site often, to make sure that your account will stay alive from their database . Anyway, you can also use your Blogger blog to upload the image.

4. Getting the URL address of the picture

After uploading the rounded corner images to the file hosting site or your Blogger blog, you will get the URL address of that image, as follow:

http://4.bp.blogspot.com/_UtQyNOQGaVM/SwnMKA0I-NI/AAAAAAAABbA/T76dRm5adT8/s1600/sidebar.jpg

Now copy that URL address and then paste it in the Notepad, which later, will be used in your blog template.

Customize the sidebar element on Blogger account

5. Log in to your Blogger blog

To begin this tutorial, now go to Blogger.com and Log in to your Blogger account. Make sure that you are using "Rounders" template for this tutorial. If you're currently not using this template, i suggest you to make a new blog and use the Rounders template just in case you don't like the new look of your sidebar. Go to Layout > Edit HTML and search the code below (Ctrl + F):

#sidebarbottom-wrap1 {
  margin:0 0 15px;
  padding:10px 0 0;
  color: $mainTextColor;
}

6. Paste the rounded picture inside the code

After locating the CSS id #sidebarbottom-wrap1 in your blog template. Now put the URL address of the new rounded corner (you've created before) in the red area (img-source.jpg) below.

#sidebarbottom-wrap1 {
  background:$mainBgColor url(img-source.jpg) no-repeat $startSide top;
  margin:0 0 15px;
  padding:10px 0 0;
  color: $mainTextColor;
  }

Anyway, you can also modify the interface of your sidebar around that code above.

7. Save the Change
Now press the Save Template button to save the change you've just made in your blog template.

Okay, that's it for this tutorial to make a rounded corner sidebar. What do you think? Is this article working on your blog? If not, feel free to leave me your question here, and let me help you with that.

Share This Article to Other People Across the World !

Del.icio.us | Reddit | Stumbleupon | Technorati |

Thanks!

Get the fresh update from Whatmakesblog.com!

To get updates from this blog, just enter your email address in the below subscription form and then click Subscribe. Your email address will not be shared to any third party

Delivered by FeedBurner