> Adding Css custom codes to blogger blog template | My blogger Truth

Friday, 30 June 2017

Adding Css custom codes to blogger blog template

2 comments
Add css codes

After setting up your blogger site. The next step you might want to embark on is editing or adding CSS to your website template.


In the scenario where you are new to blogger. You might just choose one of the free themes during sign up, and because it is so plain, there would be need to add life to it and make it more presentable.


Cascading style sheets (CSS) if used well can change the outlook of your website. It includes styling the entire site's appearance. It can affect particular elements such as; post, titles, menu bar, sidebar, footer etc .


Css gives everyone the opportunity to make their web page unique and different from others of their niche.


There are several ways of inserting your css code in blogger. I would go through all of them below, then you can choose any one that is easier to implement.



1) Adding css in blogger template designer

Step 1: First and foremost, login to your blogger account or if you don't have one, you can easily signup (make sure you have a gmail account first).


Step 2: After you have logged in, follow this next step closely.


From your blogger dashboard, go to the theme tab on the menu. After the template page opens, click on "customise button".

Css customise



Step 3: Click on Advanced button. After which, you can make selection based on the fonts and colors you prefer. If you are looking to add the css code, click on "Add css" from the menu.

Theme for blogger blog


Step 4: Then you can add the Css code in the space provided under "Add custom css", to override existing css in your blog.
              Css option


2) By Editing blogger template html.


Another way of adding  Css is by Editing it right from the blogger template html. Before anyone attempts this, they must have basic knowledge about html codes.  To be on the safe side, it is always advisable to backup the original html file before editing.

Theme selection
Click on 'ctrl F'  on your computer to search  for '</b:skin>',  then add your Css code above or before it to change any appearance on your blog. 

For example



/* my blogger truth CSS Codes sample for body tag */
body {
font-family:"Times New Roman",Serif;
color:#fff;
background:#eee;
border:solid 2px red;
}

3) Adding Css through blogger gadget


Step 1: visit your blog Dashboard .

Step 2: Go to the Layout tab and then click on the "Add a Gadget"  link provided on the widget areas of your blog.

Step 3: Select HTML/JavaScript and then add your CSS codes 

Gadget options




Conclusion 

Method 1 & 3 would not cause much damage to the blog appearance if done properly. Although, it is still important to learn basic html editing so you would be able to build your blogger to your taste. 

After adding your CSS custom codes click on preview at the top left of your blogger page to see if the styling worked well. 


CSS code methods

If You Enjoyed This, Take 5 Seconds To Share It

2 comments:

  1. Nice post
    Will be helpful in editing my blog @ danglobal.blogspot.com

    ReplyDelete
    Replies
    1. Thanks Dan. It's good to know you found it useful. Hope to see more of you.

      Delete

author About Author: Writer,blogger, and engineer. I am very passionate about what i do. I share useful blogging tips and tricks. All at mybloggertruth.com. Read More... < Join me on Google+ | Facebook | Twitter