How to Remove Blank Space Between Blogger Gadgets in Notable Template

We all know that blogger is a flexible blogging platform compare to other blogging platform where new blogger can easily start blogging unlike other blogging platforms. Blogger templates are designed in such a way that it can be customized easily. Any blogger have a little bit knowledge of HTML, can easily customize blogger template according to themselves. He/She can easily Lock and Unlock gadgets, Add or Remove gadgets from the defaults template like previous templates. In this post I am going to show you, how to remove the extra space between gadgets from the blogger new Notable theme. Therefore to remove the extra blank space between gadgets, you need to perform the following steps. Read also : How to Fix 404 Error

Important Note:-

Always remember one thing. Before changing or doing anything with template or uploading a custom template, always take backup of your blog's template and your blog's data as well. It helps you to recover your blog data and template from an unexpected error.

Read also :

How to set default operating system in dual boot Windows 8 computer
How To Take Backup of Blogger Template
How To Take Backup of Blogger Data

Steps To Remove Blank Space Between Gadgets in Notable Template

Step 1. At first login to blogger account

Step 2. After login to blogger account, click Theme and then click Edit HTML

Step 3. After that click anywhere inside the code and press Ctrl + F on the keyboard to get search box.

Read also :

How to schedule android phone to turn on/off automatically
How to schedule android phone to power on/off automatically
How to decorate text with shadow effects

Steps to reduce blank space of featured post

To reduce the extra space of featured post in blogger notable template, you need to type .heroPost .big-post-title{ in that search box and press Enter on the keyboard to switch the below code

.heroPost .big-post-title{
background-color:$(heropost.main.background.color);
box-sizing:border-box;
-webkit-box-flex:1;
-webkit-flex:1 1 auto;
-ms-flex:1 1 auto;
flex:1 1 auto;
max-width:$(feed.width - 392px);
min-width:0;
padding-bottom:76px;  
padding-$endSide:76px;
padding-$startSide:136px;
padding-top:76px  
}

Now you need to change the value 76 of margin-bottom and margin-top to 1 or as per your choice.

Reduce space between post author name and featured post description

To reduce the extra space between post author name and post description, you need to  Press Ctrl + F on the keyboard to get search box and then type .byline{ in that search box and press Enter on the keyboard  till you get the below code

.byline{
display:inline-block;
margin-bottom:8px

}

Now you need to change the value 8 of margin-bottom to 2 - 5 or as per your choice.

Reduce space between post and share button on home page

To reduce the extra space between post author name and post description, you need to  Press Ctrl + F on the keyboard to get search box and then type .post-body{ in that search box and press Enter on the keyboard  till you get the below code

.post-body{
color:$(feed.text.color);
font:$(feed.text.font);
line-height:2;
margin-bottom:10px 

}

Now you need to change the value 10 of margin-bottom to 2 - 3 or as per your choice.

Read also :




How to customize blogger featured post section
How to change WhatsApp phone number
How to setup Google pay application
How to remove a member from WhatsApp group

Reduce space between featured post and recent post on home page

To reduce the extra space between post author name and post description, you need to  Press Ctrl + F on the keyboard to get search box and then type .FeaturedPost{ in that search box and press Enter on the keyboard  till you get the below code

.FeaturedPost{
margin-bottom:10px
}
Now you need to change the value 10 of margin-bottom to 1 - 5 or as per your choice.

Reduce space between blogger recent posts on home page

Now to reduce the space between blogger post, you need to  Press Ctrl + F on the keyboard to get search box and then type body.feed-view .post-outer-container{ in that search box and press Enter on the keyboard to switch the below code

body.feed-view .post-outer-container{
margin-top:85px
}

Now you need to change the value 85 of margin-top to 5 or as per your choice.

Reduce space between blogger featured posts & recent feed post on home page

Now to reduce the space between blogger post, you need to  Press Ctrl + F on the keyboard to get search box and then type .feed-message{ in that search box and press Enter on the keyboard to switch the below code

.feed-message{
color:$(feed.subtitle.color);
font:$(feed.subtitle.font);
margin-bottom:40px 

}
Now you need to change the value 85 of margin-top to 5 or as per your choice.

Reduce space between blogger post title and author name

To reduce the extra space between blogger post title and author name, you need to  Press Ctrl + F on the keyboard to get search box and then type .post-title-container{ in that search box and press Enter on the keyboard to switch the below code

.post-title-container{
margin-bottom:15px 
}

Now you need to change the value 15 of margin-bottom to 2 - 5 or as per your choice.

Read also :

How to shutdown windows computer automatically
How to shutdown Windows 8 in one click

Reduce space between post author name and post description

To reduce the extra space between post author name and post description, you need to  Press Ctrl + F on the keyboard to get search box and then type .post-header-container{ in that search box and press Enter on the keyboard to switch the below code

.post-header-container{
margin-bottom:12px
}

Now you need to change the value 12 of margin-bottom to 2 - 5 or as per your choice.

Reduce height of post title

To reduce the height of post title of blogger each post in notable template, you need to  Press Ctrl + F on the keyboard to get search box and then type body.item-view .Blog .post-title,body.item-view .Blog .post-title in that search box and press Enter on the keyboard to switch the below code

body.item-view .Blog .post-title,body.item-view .Blog .post-title a{
color:$(item.title.color);
font:$(item.title.font);
line-height:1.41667;
margin-bottom:0
}

Now you need to change the value 1.41667 of line-height to 1.1 or as per your choice.

Reduce Blank Space of Blogger Post Title

Now to reduce the blank space around blog post title, you need to  Press Ctrl + F on the keyboard to get search box and then type the code   body.item-view .Blog .post-title-container{   in the search box and press Enter on the keyboard to switch to the below code

body.item-view .Blog .post-title-container{
background-color:$(item.title.background.color);
box-sizing:border-box;
margin-bottom:-1px;
padding-bottom:86px;
padding-$endSide:290px;
padding-$startSide:140px;
padding-top:124px;
width:100%

In the above code, you have to change the value 86 and 124 of padding-bottom and padding-top to 1 or according to yourself.

That's it! Now try in your blog and share your experience through comment box.