JackBook.Com

This questions were sent by Samrat, about customizing his blogger templates. Hopefully we all can learn from this case study. (thanks Samrat)

Jack i need a small help please check my site http://www.samratjobs.com im facing two problems.

1) The post text starts immediatley after the vertical line i need some gap between the horizontal line after the sidebar widget and the post.. im not able to identify whats the variable for it.

2) The height of the menu bar should be decreased.

waiting for your reply . thank you in advance.

Question #1

I guess, this questions is about to put same gap (space) between posts. That means we can just simply put a space after each post footer. let’s try some tricks.

trick #1

If you are looking at your blogger template codes, then you should see something like this (Don’t forget to Tick the Expand Widget Template)

<b:includable id='post' var='post'>

SOME CODES HERE, THIS IS THE POST CONTENT AREA.

</b:includable>

So basically we can just add a space with this code below

<div style='height: 25px;'></div>

Of course you can change the number fit to your own need. So now the code should be something like this

<b:includable id='post' var='post'>

SOME CODES HERE, THIS IS THE POST CONTENT AREA.

<div style='height: 25px;'></div>

</b:includable>

save your template and done.

trick #2

On most templates, most of template designers wrap the post with a div element with a class name “post”

You can check if inside that includable you can see something like this

<div class="post" ...

then it’s likely you can use this tricks below.

1. Go to your template editor

2. Find this code below

.post {

SOME CODE HERE

}

3. Now put this line below on the last line inside the code above.

margin-bottom: 20px;

So it should be some thing like this

.post {

SOME CODE HERE

margin-bottom: 20px;

}

Increase the number if you want some more space, or decrease it if you want to remove some space.

4. Save your template, and done.

Question #2

Now, this probably useful for samrat only, since there are so many possibilities of variation of this answer for the others.

Samrat, I hope you meant is this menu bar.

SamratJobs | Placement Papers | Hyderabad Jobs | Bangalore Jobs | Chennai Jobs | Todays Walkins | Contact Us

To decrease this menubar, you should decrease the padding of your menu style. Follow these steps below

1. Go to your template editor

2. Now find this codes below

#menu a

{

text-decoration: none;

font-variant:small-caps;

font-size: 1em;

background:#778899;

border:3px none;

color:#eee; padding-left:16px; padding-right:16px; padding-top:8px; padding-bottom:8px

}

see the padding-top:8px and padding-bottom: 8px ?

change that number to your fit.

3. save your template and done.

Any more question guys? thanks

You can learn more about padding and margin here.