blogger basic css

Blogger templates are composed of constituent elements ranging from basic elements to specially structured elements. CSS is used to set all the appearance of each element from size, position, to color.

In the preparation or creation of a blog template, we can add CSS from the most basic elements, namely standard elements.

The good news is that the most basic elements (standard elements) of each template are generally the same. Therefore, we don’t have to bother thinking about how to set standard CSS elements, just copy and paste from the existing ones.

In the first chapter The Complete Tutorial on How to Create Your Own Blog Template for Beginners We have created the basic elements including header, content, sidebar, and footer.

To make the basic elements into a design framework we can add a new element for the wrapper and also CSS to set the display, width, and position.

In addition to forming the framework, we will also add Standard CSS Elements which functions to reset and general style the standard elements to make it easier for us to design our own blog templates in the future.

Blogger Basic CSS

The first step is to enter the template editor first

Add the following Element Standard CSS before ]]></b:skin>


/* BLOGGER CSS */
.widget li{padding:0}
.widget ul{padding:0;margin:0;line-height:normal}
.widget-content li{list-style-type:none}
.separator a {margin:initial!important;}
.separator a img{margin: 1em;}
.separator:nth-child(1) a img{margin:initial;margin-bottom:1em}
.Navbar {display:none}

/* CSS RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}

/* HTML5 */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;display:block;}*{margin:0;padding:0;}html{display:block;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{background:transparent;}table{border-collapse:collapse;border-spacing:0;}*,*:before, *:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}ins{background:#fff;}

Save Template

Wrapping Element

Next we will wrap all the elements from the header to the footer using a new element.

Copy the following code and paste it before or above the code <b:section class="header" id='header' maxwidgets="1" name="Header" showaddelement="no">


<div class="outerWrapper">

Don’t forget to close the div tag, copy and paste the following code below the code </footer>

CSS Basic Elements of Blogger Framework

After we’ve added a new element for the wrapper, we can immediately set the size and other styles using CSS.

The first element that will be set with CSS is the body because it is the outermost element in the template structure

CSS for the body tag this time will be filled with background, normal font size, word-wrap, etc.

Here’s the CSS code for the body tag, please install it before ]]></b:skin>


body{
	position: relative;
	background-color: #f8f8f8;
	font-size: 14px;
	color: #656565;
	word-wrap: break-word;
	margin: 0;
	padding: 0;
}

Here we will use the standard size with an overall width of 1024px

Add the following CSS code before ]]></b:skin>


.outerWrapper{
	max-width: 1024px;
	margin: 0 auto;
	background-color: #fff;
	padding: 30px;
	box-shadow: 0 0 5px rgba(0,0,0,.1);
}

CSS Standard Heading

Heading tags (h1-h6) are tags for titles including blog titles, content titles, and so on.

The font size of headings is usually larger and bolder than other text.

To set the heading size, you can add the following CSS before ]]></b:skin>


/* HEADING */
h1,h2,h3,h4,h5{display:block;font-weight:700}
h1{font-size:150%}
h2{font-size:140%}
h3{font-size:130%}
h4{font-size:120%}
h5{font-size:110%}

Save template

Let’s try to view the blog then the display becomes more or less like the following.

css standard element blogspot

If there are errors or difficulties, you can ask them directly in the comments. Or you can match your source code with mine.

Here you can download the final source code for this session

Congratulations, until here you have completed Chapter 2 in The Complete Tutorial to Create Your Own Blog Template for Beginners.

Please continue to the next chapter or see the Table of Contents Guide to Creating Your Own Blog Template For Beginners

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Free Online Cooking Classes
Are you looking for resources on how to cook online that will help you in the culinary arts?
Yes, Please