Customizing The Blogger Template

AssalamuAlaikum Readers,
Hey readers how are you all? hows everything going on? A blogger main ambition and aspire is to make his blog even more attractive and productive and he is always into customizing the template sometimes he fall sometimes he show creativity and sometimes he mess up everything so the very first thing before customizing the template is to make a backup of it as it's the only alternative to time machine when you mess up your template and publish it ;), after receiving tons of requests from our readers on customizing their templates so therefore rather then spending time on customizing others templates for free one by one we got an idea of shooting a tutorial on it.

What Actually We Are Going To Teach You:

We are going to teach you different ways of customizing the your template but there are somethings that should be kept in mind before customizing the template and you should backup your template right before every time you are going to publish.

Things That Should Be Kept In Mind Before Customizing Are:

• You should not implement heavy java scripts as they may lead to effecting your blog load time.
• You should not remove credits of codes which are copied from resources as it may led to copyright infringement and your site may loose all of its respect.
• Weather you are editing the template which is to be edited or not :D!

What Are We Going To Teach You:

As Editing the template is a long process and it contains a lot of topics and subtopics so we have decided to create a series on this topic so this is the part 1 and today we are going to teach you how to customize template style using css

Editing Template Series

Part1: Customizing The Template Using CSS

Part2: Customizing The Heading Style Using CSS

CSS is the most easiest language of all and learning it is entertaining only if you have some serious ambitions of learning it.There are many tutorials and sites which are offering CSS course for 100 dollars and so and that's really annoying and depressing as its an language and it should be taught for free and what I think is that if you teach others anything you eventually becomes a master of it.

Introduction To CSS:

CSS(cascade style sheet) allows you to make your presentation more attractive by using the simple CSS properties e.g border,border-radius,background,links effecting, mouse hovers, fonts, fonts decoration on hover etc.

CSS Basic Properties:

CSS have almost more then 10 properties and there is a proper syntax for describing the css the syntax is 

Selector{Property:Value(ending colon i.e ;}

Background:

Defines background which can be either color or a picture.

Property:Background: #333 url('img-url');
Background Values:Attachment.
Color.
Image.
Position.
Repeat.

Border:
Used for creating borders, you can even make a circle with it :)

Property:Border: 1px solid #333;
Individual Properties:Border-Bottom:
Border-Top:
Border-Right:
Border-Left:
Values:Color.
Style.
Width.
Style-Values:dashed
dotted
double
groove
hidden
inset
none
outset
ridge
solid

Padding:
With padding you can align your element to where you want but you have to use overflow:hidden; as the padding can create left to right scrolling which is not liked by everyone.

Property:Padding: length percentage;
Individual Property:Padding-top: length percentage;
Padding-left: length percentage;
Padding-right: length percentage;
Padding-bottom: length percentage;
Values:Length.
Percentage.

Text Properties:
Are just similar to the properties used in html and are used to define how to text should looks like with and without mouse hover.

Color Property:Color:Value;
Values:color name – example:(red, black…)
hexadecimal number – example:(#ff0000, #000000)
RGB color code – example:(rgb(255, 0, 0), rgb(0, 0, 0))
Letter Spacing Property:Letter-spacing: value;
Values:Normal.
Length.
Text Align Property:Text-align: value;
Values:Left.
Right.
Center.
Justify.
Text Decoration Property:Text-decoration: value;
Values:None.
Underline.
Overline.
Line through.
Blink.
Text Indent Property:Text-indent: value;
Values:Length.
Percentage.
Text Transform Property:Text-transform: value;
Values:None.
Capitalize.
Lowercase.
Uppercase.
White Space Property:White-space: value;
Values:Normal.
Pre.
Nowrap.
Word Spacing Property:Word-spacing: value;
Values:Normal.
Length.

So above are some of the properties you need to know while editing your blog and there are two ways to link CSS property the first is internal style sheet which is inside the template above ]]></b:skin> and the other is external which is linked by using the <style type=”text/css”> Your CSS CODE </style> and for linking CSS codes we use <div class="CSS Property"></div> and that's all.

What's Next?

In the part 2 I will be sharing some cool css heading customizations so stay tuned and if you have any queries or if you faced any problem feel free to contact us stay blessed, ALLAH HAFIZ.

Thanks For Making This Possible! Kindly Bookmark and Share it.