Google blogger Blogspot Resizing - Reduce Space - Hide elements

How to add the CSS codes:
Step 1 : Go to blogger Template
Step 2 : Click Customize
Step 3 : Then Click Advanced
Step 3 : Click Add CSS (Scroll down - top left corner)
Step 4 : Add the following code in the CSS box.


#1.Reduce Space Between Blog Title & Description in Blogspot Blog.
You can do it easily by adding some extra code in the blogspot blog CSS section . At first I will show you that How can you find the CSS section where you can add the html code and the I will give you the code that reduce the space between your blogger header title and header description. To do this follow my instructions : 
.Header h1 {margin-bottom:0}
.Header .description {margin-top: 0;}
.header-inner .Header .titlewrapper {padding-bottom:0;}

#2a .How to remove space between blog post and footer ?

There is a margin at your post footer container. Add this in Blogger Theme Designer..

.post-footer {
  margin: 0;
}

#2b. how do i remove the space between my blog post and footer?

.post
{
margin-bottom:0px !important;
}

#3.How to remove white space between tabs bar and post body

#header-inner img {margin: 0 auto !important;}
#header-inner {text-align: Center ;}.post-title {
text-align:center;
}.sidebar .widget {margin: px 0;}
{blog-title{
margin: 20 20 20 15px; padding-top: 125px;

}.column-center-inner {
margin-top: -30px !important;
}
#sidebar-right-1 {
margin-top: -30px !important;
}

#4 Remove space between blog post title and post content

.post-title.entry-title{ 

margin-bottom: -20px !important; }

#5 How to reduce space between images in blogger

You workaround will only work fine for the images which have space with it's surrounding content but images which is just fine without your CSS will be messed with the contents near it. 

The space normally appears because of unwanted <br> tags in the post's HTML and it's causes the extra line breaks. In the new interface the post editor is full of bugs and this is one of them. To avoid the <br> tags simply click on 'Post Settings' on the right corner of your Post Editor, under "Post Settings", click on "Option", there you will see the "Line Breaks" option all you have to do is check mark the radio button that says 'Press "Enter" for line breaks'. After that use the Shift+Enter and Enter wisely for better line breaks in your posts. 

6# How to Reduce Right Margin from Blogger

Your template has a right sidebar which is currently empty but is taking up space which you want to reduce. To remove the right sidebar , go into Template > Customise > Layout > Body Layout and select one of the layout which doesn't contain a right sidebar (see image below) and click the Apply to Blog button

7# How to remove RSS Feed ( Atom ) link

.feed-links {
display: none;
}

8# Remove space between the tabs

This CSS will remove the space between tabs

.PageList ul li {
 margin-right:-5px !important;
}

But if you wish to remove the borders then try this CSS

.PageList ul li {
 margin-right:-5px !important;
}
.tabs-inner .widget li a {
border-left: 0px solid transparent !important;
border-right: 0px solid transparent !important;
}

9# How to Reduce Space Between Header And First Post In Blogger

/* Space Between Header And First Post Reduced */
.post {
margin-top:0px;
}
h2.date-header{
margin-top:0px;
}
.mainnbt {
margin-top:0px;
padding-top:0px;
}

10.1# How to remove left and right margins from blog?

1. go to Layout > find Header widget > click Edit
2. tick on Shrink to Fit
3. click Save to save your widget
4. click Save Arrangements
5. Refresh you blog page & preview the changes.

10.2# Alternative: 

.content-outer{

width:100% !important;

}

10.3# Alternative:

#navbar {display: none;}

.main-outer {

    max-width: 100%;

    width: 93%;

    margin: 0 auto;

}

.content-inner {padding: 0;}

.content-outer, .content-fauxcolumn-outer, .region-inner {

        max-width: 100% !important;

        width: 100% !important;

}

**If i remove .content-inner {padding: 0;} then right margin disappears, but the entire blog then doesn't fit 100% of width.

11# Move Post Title Below Thumbnail Image + Decrease gaps

.date-outer {
margin-top: 0px;
margin-bottom: 0px;
}

12# Change color of links in label cloud

/*--- Color Cloud --- */
#Label1 a {color:#8fbe28;}
#Label1 a:visited {color:#586182;text-decoration:none;}
#Label1 a:hover {color:#D55C25; text-decoration:underline;}

13# Change text colour in gadgets

.widget .post-body ul {
font: normal bold 16px Josefin Sans;
color: #1b0800;
list-style: disc;
}
.widget .post-body ul li {
font: normal bold 16px Josefin Sans;
color: #1b0800;
border: none;
}

14# Adding a colour hover to 'Post Title' link

.post-title a:hover {
color: #c00; /* Change hex color value as needed */
} /* Press Enter key after closing bracket

15# Gadget Background Colour Change

.PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: 180px;
overflow: hidden;
width: 240px;
margin-left: -10px;
}
.PopularPosts .item-thumbnail img {
position: relative;
top: -30px;
transition:all .2s linear;
-o-transition:all .5s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}

.PopularPosts .item-thumbnail img:hover{
background: transparent;
opacity:.6;
filter:alpha(opacity=60)
}
.PopularPosts .widget-content ul li {
color: #555555;
}

.PopularPosts .item-title {
clear:both;
font: 10px verdana;
color: #222222;
text-transform: uppercase;
text-align: center;
margin-right: 10px;
}

.PopularPosts .item-snippet {
display: none;
}

.widget .widget-item-control a img {
height: 18px;
width: 18px;

}

/***** To center the li elements ******/
.popular-posts ul { 
       margin: auto !important; 
       width: 1040px !important;
    }

Custom Blogger Labels style1:

/* STYLE 1 - Custom Blogger Labels Gadget Styles by Georgia Lou Studios */

.Label ul {
 text-align: center;    /* center aligns text in sidebar */
}
.Label ul li {
 margin: 7px 0;    /* Adds space above and below each link. Change the 7 to adjust your spacing */
}
.Label ul li a {
 color: #272727;    /* Link Color */
 font-family: "Open Sans";     /* Link Font */
 text-transform: uppercase;    /* Link case. Options are uppercase, lowercase, none, capitalize. */
 font-style: normal;    /* Font Style. Options are normal and italics. */
 font-weight: normal;    /* Font weight. Options include: light, normal, bold, */
 letter-spacing: 1px;    /* Space between letters */
 font-size: 12px;   /* Font Size. */
}
.Label ul li a:hover {
 color: #C39F76;   /* Link hover color */
}

Custom Blogger Labels style2:

/* STYLE 2 - Custom Blogger Labels Gadget Styles by Georgia Lou Studios */

.Label ul li a {
    display: block;
    width: 100%;
    text-align: center;    /* center aligns text in sidebar */
    margin: 7px 0;    /* White space between links */
    padding: 12px 0;    /* Padding for colored background */
 color: #272727;    /* Link Color */
    background-color: #f3f3f3;    /* Background Color */
 font-family: "Open Sans";     /* Link Font */
 text-transform: uppercase;    /* Link case. Options are uppercase, lowercase, none, capitalize. */
 font-style: normal;    /* Font Style. Options are normal and italics. */
 font-weight: normal;    /* Font weight. Options include: light, normal, bold, */
 letter-spacing: 1px;    /* Space between letters */
 font-size: 12px;   /* Font Size. */
}
.Label ul li a:hover {
 color: #ffffff;   /* Link hover color */
    background-color: #C39F76;    /* Background Color */
}

Custom Blogger Labels style3:

/* STYLE 3 - Custom Blogger Labels Gadget Styles by Georgia Lou Studios */

.Label ul li a {
   box-sizing: border-box;
 display: block;
 width: 100%;
 text-align: center;    /* center aligns text in sidebar */
 margin: 7px 0;    /* White space between links */
 padding: 12px 10px;    /* Padding for colored background */
 font-family: "Open Sans";     /* Link Font */
 text-transform: uppercase;    /* Link case. Options are uppercase, lowercase, none, capitalize. */
 font-style: normal;    /* Font Style. Options are normal and italics. */
 font-weight: normal;    /* Font weight. Options include: light, normal, bold, */
 letter-spacing: 1px;    /* Space between letters */
 font-size: 12px;   /* Font Size. */
}

/* LABEL COLORS */

/* First Label Colors */
.Label ul li:nth-child(6n+1) a {
 color: #272727;    /* Link Color */
    background-color: #b0a8a6;    /* Background Color */
}

/* Second Label Colors */
.Label ul li:nth-child(6n+2) a {
 color: #272727;    /* Link Color */
    background-color: #c3c5c4;    /* Background Color */
}

/* Third Label Colors */
.Label ul li:nth-child(6n+3) a {
 color: #272727;    /* Link Color */
    background-color: #e5d7ca;    /* Background Color */
}

/* Fourth Label Colors */
.Label ul li:nth-child(6n+4) a {
 color: #272727;    /* Link Color */
    background-color: #e0e1e6;    /* Background Color */
}

/* Fifth Label Colors */
.Label ul li:nth-child(6n+5) a {
 color: #272727;    /* Link Color */
    background-color: #f0ede4;    /* Background Color */
}

/* Sixth Label Colors */
.Label ul li:nth-child(6n+6) a {
 color: #272727;    /* Link Color */
    background-color: #f5f6f1;    /* Background Color */
}

/* HOVER COLORS */

/* First Label Hover Colors */
.Label ul li:nth-child(6n+1) a:hover {
 color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}

/* Second Label Hover Colors */
.Label ul li:nth-child(6n+2) a:hover {
 color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}

/* Third Label Hover Colors */
.Label ul li:nth-child(6n+3) a:hover {
 color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}

/* Fourth Label Colors */
.Label ul li:nth-child(6n+4) a:hover {
 color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}

/* Fifth Label Hover Colors */
.Label ul li:nth-child(6n+5) a:hover {
 color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}

/* Sixth Label Hover Colors */
.Label ul li:nth-child(6n+6) a:hover {
 color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}

Resource: 

https://developers.google.com/

https://developers.google.com/blogger/docs/3.0/reference/posts
https://georgialoustudios.com/customize-blogger-label-gadget/

The technologies and requirements have also changed and user habits such as the use of  smartphone  and  social networks choose (facebook, twitter, etc.) should not ignore these changes, instead use them  for the benefit of enterprise your

More information  here

   

NEW !!! You can actively participate in the wordpress911 team to ask and answer questions to upload articles and videos register » Here

Links: You can download the best WordPress Woocommerce templates HERE