How to add Custom CSS code into blogger websites ~ Best We Want

For styling of your website you should add Cascading Style sheet (CSS) code. The CSS code plays your website as colorful. The user see your website very great looks.

In blogger websites has built in CSS code are there for display/Layout your websites like header, body , widgets according to template view style. If you add more style ,as you need , so add Custom CSS code into blogger websites.

How to add Custom CSS code in blogger websites

For blogger websites can add Custom CSS code has some tricky ways. Mainly adding Custom CSS code into blogger has 4 following ways.

Global adding Custom CSS code
Inline adding Custom CSS code
Widget level adding Custom CSS code
External adding Custom CSS code

Global adding Custom CSS code

Adding of additional Custom CSS code , that works all pages in website, you should add at <head> section. So that code effects in all pages throughout website.

For these follow Steps as

Step 1: Login to blogger.com website.

Step 2: Go to Dashboard >> Theme option ,

How to add Open Graph tags in blogger websites

Step 3: Now Click on Customize Arrow option

Step 4: Under of Customize >> choose Edit Html option

Step 5: Now find the exactly location of ]]></b:skin>, and paste following code just above of ]]></b:skin>

Sample CSS Code

pre {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-left: 3px solid #f36d33;
    color: #666;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-break: keep-all;       
}

You can add more number of repeated CSS code adding, that can effect for all web pages.

Inline adding Custom CSS code

Inline adding Custom CSS code at Page level, that is at <body> section, so this style code works only at that page only, can't effect on all web pages.

For this point of follow the steps

Step 1: At any page posting go to HTML view option rather than Compose View

Add Custom CSS code into blogger websites

Step 2: For example following code to be add

<div style="border: 0px; color: #797979; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">-----
-----
</div>

Normally Inline CSS apply with Style attribute to any tag.

Widget level adding Custom CSS code

Normally Widget means one rectangle box (that mention separate area like right sidebar elements). For this Stylish use inline Custom CSS code.

For this you follow the following steps.

Step 1: Go to Dashboard under these

Step 2: Select Layout option

Step 3: Next Click Add a Gadget

Step 4: Next Choose HTML/Java Script option, see below links

Step 6: Now type Custom CSS code , see above picture.

The Custom css code to apply to following code see below example

<style> 
#example1 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px;
}

#example2 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px #888888;
}

#example3 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px red;
}
</style>
<div id="example2">
  <p>You can also define the color of the shadow. Here the shadow color is grey.</p>
</div>

<div id="example3">
  <p>A red shadow.</p>
</div>

Note: That Custom CSS code apply to only that widget/gadget only.

External adding Custom CSS code

The external CSS code placed in some other site or separate .css file in same web sever. You should add Custom CSS code easily with <link> tag and assign complete path of that css file redeposit location.

Normally external CSS code add at <head> section. See following examples.

<head>
<link rel="stylesheet" href="mystyle.css"> 
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>
</head>

Note: Above code effect all web pages in that website.

Best We Want

Best Useful Information

How to add Custom CSS code into blogger websites

Global adding Custom CSS code

Inline adding Custom CSS code

Widget level adding Custom CSS code

External adding Custom CSS code

0 Comments:

Post a Comment