How To Customize Blogger Layout Design?


#1

Hello , I am Tanmay form Your PC Genie .I am a website designer.I have a new project in mind.But for that i need to expand my knowledge.I have started customising the blogger templates , however there’s one place i am not able to get a hold on.The blogger layout , i have seen other blogger templates but i am unable to edit the blogger layout design. I need help in understanding these codes.

    body#layout header#header
{
	margin-top:100px
}

If someone could take the time and explain it with example.

Thankyou , Tanmay Kapse


#2

That is a really nice question and here are the complete details

Stylesheet For Layout Page Elements

The Layout in Blogger is the place which lets you add, remove, edit gadgets on your blog. It lets you rearrange gadgets by just dragging it. Blogger adds a unique its to the <body> tag of the layout page to organize the column height, width and its spacing. This CSS ID is identified as #layout and is inserted inside the body as shown below:

<body id="layout">

The layout is divided into 4 important sections

  1. Header
  2. Sidebar
  3. Content (where Blog Posts are displayed)
  4. Footer

In order to customize the arrangement of gadget boxes and their margin and padding properties, you just need to add custom styles inside your template editor.

For example if you want to make changes to the alignment of widget boxes inside header, then you will add the following styles inside the <b:skin> tag where all styles of blog are located.

Note: Suppose my header has ID #header and the left header section have id #header-left and right side #header-right

body#layout #header
{
	width:90%!important;
        margin: 10px!important;
}

body#layout #header  #header-left
    {
    	width:30%!important;
            float: left!important;
    }


body#layout #header  #header-right
    {
    	width:60%!important;
        float: right!important;
    }

Note that in order to force re-write the styles it is important to use !important declaration at the end of each CSS property.

The above code will give the header a width of 90% and will align the header sections to left and right respectively as shown below:

Header left is given 30% width and header right is given 60%. The remaining 10% is covered by the gap between the two sections.

You will adopt the same approach to align Multi tabs in sidebar, columns in Footer and so on to keep a neat and clean layout structure.

You just need to pick the right ID’s(starting with # sign) or Class (starting with dot) of the section you want to align in layout. Use your browser inspect tool to pick the right classes or IDs. Remember that layout Styles will render only if they are referred as body#layout

That’s all required to create a clean setup layout design for your blogspot blog! :smiley: