How to adjust post and widget margins in blogger

If you own a business, having a website or a blog is very important as it helps your business to reach many people in world thus grows your brand. The appearance of your website and how it is designed is also much concerned. If your website is well designed means you form good impression to your customers over your business. 
This post is going to show you on how to adjust margins for posts and widgets in a blogger blog as one of the ways of designing your blog and improve its appearance.

To adjust post margins in your blogger blog, you have to follow the steps below;

1. Open your browser then sign in to blogger.com and select a blog you want to adjust margins.

2. Click on "theme".
Click on Theme

3. Click on "Customise".
Click on Customise

4. Click on "Advanced".
Click on Advanced

5. Click on "Add CSS".
Click on Add CSS

6. Copy the CSS code below then paste it in the CSS box.

CSS code for adjusting Blogger Posts

.blog-posts  {margin-left:32px}
.blog-posts  {margin-right:32px}

Or use this code below

#Blog1  {margin-left:32px}
#Blog1  {margin-right:32px}


Adjusting blogger widget

To adjust the widget in blogger, you have to get an ID of the widget you want to adjust. To get widget ID is very simple, just do the following.

1. In the blogger panel, click layout then click edit icon on the gadget you want to adjust.

Click on Layout



2. Look at the top of your browser where the URL is displayed, you will see the word "widgetId=" at the end of the URL, then copy the word that follows after "widgetId=". The word which you copy is what we call widget id. For example from the image below the widget Id is "Navibar1".

Widget Id

Then add the widget Id just after hash tags "#" in the CSS code below.

# {margin-left:32px}
# {margin-right:32px}

For example, if the widget Id is "Navibar1" the CSS code will be,

#Navibar1 {margin-left:32px}
#Navibar1 {margin-right:32px}

Comments

Popular Posts