Skip to main content

How To Reduce Space Between Blogger Top Menu Bar & Post Title

In my earlier post, How To Reduce Space Between Blogger Blog Title And Blog Description I have already shown you how to reduce extra space between blogger blog title and blog description. Today, you learn how to reduce the space between blogger menu bar and blogger post title. By default blogger has more space between menu bar and its post title. If you have a little bit knowledge of HTML you can reduce the extra space according to yourself. Read also How to reduce space between blogger gadgets

Important Note:-

Before doing customization of your blogger's default template, take Back-up of your template and your blog's data so that if you make any major mistake, you can easily restore your original template as well as your blog's data.


 How To Download Blogger Template

 How To Download Blogger Data


In the above space you see the space between blogger menu bar and its post title. To reduce the extra space between blogger menu bar and its post title you need to do the following steps.

Step 1. Login to your blogger account
Step 2. Click Template
Step 3. Click Edit HTML
Step 4. Once you click Edit HTML, you will able to see the codes of your blog's template.

Read also How to reduce space between blog title & post description 

Step 5. Click anywhere inside the code area
Step 6. Press Ctrl + F on your keyboard to get search box inside the code area
 
Step 7. Type /* tabs inside the search box and press Enter on the keyboard.


Step 8. Once you press Enter on the keyboard, you will switch to /* Tabs. Now you need to insert the code margin-bottom: -20px; below /* Tabs. See the below code and image.

/* Tabs ----------------------------------------------- */
.tabs-outer {
  overflow: hidden;
  position: relative;
margin-bottom: -25px;
 }

Step 9. Click Save template to save the changes.
You can also reduce this space by decreasing the value of "date.space" from 30 to 10. To do so just search "date.space" in the code and change the value and then save the arrangement.

Read also How to reduce space between post gadget & sidebar gadget

<Variable name="date.space" description="Date Space" type="length" default="30px"  value="30px"/>

That's it! Enjoy.

Watch this video


Thanks for reading the post. Let me know whether you have experienced this tricks. Also let others to experience this feature by sharing this post on your social networks.


Comments