How to add background color to Post

Copy The Red Color Codes

Goto New Post

Click on HTML

and

Paste the Code into Post Page

Change background-color: #444444    for Background Color

and

Change color: white for Text Color

Write Your Text

Save and Publish the Post

<div style="background-color: #444444; color: white; padding: 10px;">

Your Text Here
Dummy text
Quisque Dapibus

Interdum curabitur nulla iaculis. Non curae;. Praesent justo morbi lobortis quisque habitant cursus, taciti. Eu nisl rutrum vestibulum dis maecenas integer elit nonummy torquent conubia proin volutpat, ac nostra nam et tincidunt sociosqu eros scelerisque.

Viverra Magna Imperdiet
Natoque posuere curae;, fringilla. Cubilia elementum rutrum laoreet ut nostra cursus. Nibh pretium fermentum sagittis etiam in, tellus. Bibendum. Commodo. Tincidunt tempor justo feugiat penatibus porttitor mollis adipiscing torquent vitae sodales.

Aptent felis venenatis platea. Nascetur libero aptent viverra arcu hymenaeos blandit. Est iaculis conubia diam senectus cum etiam pharetra ut Porta interdum dignissim molestie sapien porta natoque quisque. Auctor risus fermentum, tristique elementum at.

Interdum curabitur nulla iaculis. Non curae;. Praesent justo morbi lobortis quisque habitant cursus, taciti. Eu nisl rutrum vestibulum dis maecenas integer elit nonummy torquent conubia proin volutpat, ac nostra nam et tincidunt sociosqu eros scelerisque.

Viverra Magna Imperdiet
Natoque posuere curae;, fringilla. Cubilia elementum rutrum laoreet ut nostra cursus. Nibh pretium fermentum sagittis etiam in, tellus. Bibendum. Commodo. Tincidunt tempor justo feugiat penatibus porttitor mollis adipiscing torquent vitae sodales.

Aptent felis venenatis platea. Nascetur libero aptent viverra arcu hymenaeos blandit. Est iaculis conubia diam senectus cum etiam pharetra ut Porta interdum dignissim molestie sapien porta natoque quisque. Auctor risus fermentum, tristique elementum at.

Interdum curabitur nulla iaculis. Non curae;. Praesent justo morbi lobortis quisque habitant cursus, taciti. Eu nisl rutrum vestibulum dis maecenas integer elit nonummy torquent conubia proin volutpat, ac nostra nam et tincidunt sociosqu eros scelerisque.

Viverra Magna Imperdiet
Natoque posuere curae;, fringilla. Cubilia elementum rutrum laoreet ut nostra cursus. Nibh pretium fermentum sagittis etiam in, tellus. Bibendum. Commodo. Tincidunt tempor justo feugiat penatibus porttitor mollis adipiscing torquent vitae sodales.

Aptent felis venenatis platea. Nascetur libero aptent viverra arcu hymenaeos blandit. Est iaculis conubia diam senectus cum etiam pharetra ut Porta interdum dignissim molestie sapien porta natoque quisque. Auctor risus fermentum, tristique elementum at.
Interdum curabitur nulla iaculis. Non curae;. Praesent justo morbi lobortis quisque habitant cursus, taciti. Eu nisl rutrum vestibulum dis maecenas integer elit nonummy torquent conubia proin volutpat, ac nostra nam et tincidunt sociosqu eros scelerisque.

Viverra Magna Imperdiet
Natoque posuere curae;, fringilla. Cubilia elementum rutrum laoreet ut nostra cursus. Nibh pretium fermentum sagittis etiam in, tellus. Bibendum. Commodo. Tincidunt tempor justo feugiat penatibus porttitor mollis adipiscing torquent vitae sodales.

Aptent felis venenatis platea. Nascetur libero aptent viverra arcu hymenaeos blandit. Est iaculis conubia diam senectus cum etiam pharetra ut Porta interdum dignissim molestie sapien porta natoque quisque. Auctor risus fermentum, tristique elementum at.
Interdum curabitur nulla iaculis. Non curae;. Praesent justo morbi lobortis quisque habitant cursus, taciti. Eu nisl rutrum vestibulum dis maecenas integer elit nonummy torquent conubia proin volutpat, ac nostra nam et tincidunt sociosqu eros scelerisque.

Viverra Magna Imperdiet
Natoque posuere curae;, fringilla. Cubilia elementum rutrum laoreet ut nostra cursus. Nibh pretium fermentum sagittis etiam in, tellus. Bibendum. Commodo. Tincidunt tempor justo feugiat penatibus porttitor mollis adipiscing torquent vitae sodales.

Aptent felis venenatis platea. Nascetur libero aptent viverra arcu hymenaeos blandit. Est iaculis conubia diam senectus cum etiam pharetra ut Porta interdum dignissim molestie sapien porta natoque quisque. Auctor risus fermentum, tristique elementum at.

</div>

Add an Image as background in Blogger Post

Copy The Red Color Codes

Goto New Post

Click on HTML

and

Paste the Code into Post Page

Enter Your Image's Link

Save and Publish the Post

Sample Post Picture

<div style=" background: url(Enter your Image's Link Here); background-size: cover; color: black; padding: 10px;">

Your Text Here
Dummy text
Quisque Dapibus

Interdum curabitur nulla iaculis. Non curae;. Praesent justo morbi lobortis quisque habitant cursus, taciti. Eu nisl rutrum vestibulum dis maecenas integer elit nonummy torquent conubia proin volutpat, ac nostra nam et tincidunt sociosqu eros scelerisque.

Viverra Magna Imperdiet
Natoque posuere curae;, fringilla. Cubilia elementum rutrum laoreet ut nostra cursus. Nibh pretium fermentum sagittis etiam in, tellus. Bibendum. Commodo. Tincidunt tempor justo feugiat penatibus porttitor mollis adipiscing torquent vitae sodales.

Aptent felis venenatis platea. Nascetur libero aptent viverra arcu hymenaeos blandit. Est iaculis conubia diam senectus cum etiam pharetra ut Porta interdum dignissim molestie sapien porta natoque quisque. Auctor risus fermentum, tristique elementum at.

Interdum curabitur nulla iaculis. Non curae;. Praesent justo morbi lobortis quisque habitant cursus, taciti. Eu nisl rutrum vestibulum dis maecenas integer elit nonummy torquent conubia proin volutpat, ac nostra nam et tincidunt sociosqu eros scelerisque.

Viverra Magna Imperdiet
Natoque posuere curae;, fringilla. Cubilia elementum rutrum laoreet ut nostra cursus. Nibh pretium fermentum sagittis etiam in, tellus. Bibendum. Commodo. Tincidunt tempor justo feugiat penatibus porttitor mollis adipiscing torquent vitae sodales.

Aptent felis venenatis platea. Nascetur libero aptent viverra arcu hymenaeos blandit. Est iaculis conubia diam senectus cum etiam pharetra ut Porta interdum dignissim molestie sapien porta natoque quisque. Auctor risus fermentum, tristique elementum at.

Interdum curabitur nulla iaculis. Non curae;. Praesent justo morbi lobortis quisque habitant cursus, taciti. Eu nisl rutrum vestibulum dis maecenas integer elit nonummy torquent conubia proin volutpat, ac nostra nam et tincidunt sociosqu eros scelerisque.

Viverra Magna Imperdiet
Natoque posuere curae;, fringilla. Cubilia elementum rutrum laoreet ut nostra cursus. Nibh pretium fermentum sagittis etiam in, tellus. Bibendum. Commodo. Tincidunt tempor justo feugiat penatibus porttitor mollis adipiscing torquent vitae sodales.

Aptent felis venenatis platea. Nascetur libero aptent viverra arcu hymenaeos blandit. Est iaculis conubia diam senectus cum etiam pharetra ut Porta interdum dignissim molestie sapien porta natoque quisque. Auctor risus fermentum, tristique elementum at.
Interdum curabitur nulla iaculis. Non curae;. Praesent justo morbi lobortis quisque habitant cursus, taciti. Eu nisl rutrum vestibulum dis maecenas integer elit nonummy torquent conubia proin volutpat, ac nostra nam et tincidunt sociosqu eros scelerisque.

Viverra Magna Imperdiet
Natoque posuere curae;, fringilla. Cubilia elementum rutrum laoreet ut nostra cursus. Nibh pretium fermentum sagittis etiam in, tellus. Bibendum. Commodo. Tincidunt tempor justo feugiat penatibus porttitor mollis adipiscing torquent vitae sodales.

Aptent felis venenatis platea. Nascetur libero aptent viverra arcu hymenaeos blandit. Est iaculis conubia diam senectus cum etiam pharetra ut Porta interdum dignissim molestie sapien porta natoque quisque. Auctor risus fermentum, tristique elementum at.
Interdum curabitur nulla iaculis. Non curae;. Praesent justo morbi lobortis quisque habitant cursus, taciti. Eu nisl rutrum vestibulum dis maecenas integer elit nonummy torquent conubia proin volutpat, ac nostra nam et tincidunt sociosqu eros scelerisque.

Viverra Magna Imperdiet
Natoque posuere curae;, fringilla. Cubilia elementum rutrum laoreet ut nostra cursus. Nibh pretium fermentum sagittis etiam in, tellus. Bibendum. Commodo. Tincidunt tempor justo feugiat penatibus porttitor mollis adipiscing torquent vitae sodales.

Aptent felis venenatis platea. Nascetur libero aptent viverra arcu hymenaeos blandit. Est iaculis conubia diam senectus cum etiam pharetra ut Porta interdum dignissim molestie sapien porta natoque quisque. Auctor risus fermentum, tristique elementum at.

</div>

How to Make Blogger's Header, Navigation and Footer full width

• Goto www.blogger.com

• Enter Email and Password

• Click On Design

•  Click On Template

• Click On Edit HTML

• Now Search  body {

For this. Click in the Window

and Press Ctrl+F  keys

Search Bar will appear

Type or Paste  

 body {

• Just below Body {

font: $(body.font);

color: $(body.text.color);

background: $(body.background);

padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);  

Replace above line with    padding: 0px;

$(body.background.override)

}

• Now search .content-inner {

• Just below    .content-inner {

padding: $(content.padding) $(content.padding.horizontal); 

• Replace above line with   padding: 0px;

}

• Now Search  $(content.background.color.selector){

• Just below  $(content.background.color.selector){

background-color: $(content.background.color);

• Replace above line with   background-color: $(body.background);

}

• Now Copy the below Code

.main-outer {

background: $(content.background.color);

}

•  Search  ]]></b:skin>

• and Paste the Code above   ]]></b:skin> 

• Now Search  .content-outer, .content-fauxcolumn-outer, .region-inner {

• Just below it

min-width: $(content.width);

max-width: $(content.width);

• Replace above line  with     max-width: 100%;

_width: $(content.width);

}

• Now Copy the below Code

 .main-outer {

max-width: $(content.width);

margin: 0 auto;

}

•  Search      </b:template-skin

• add Paste the Code just above     ]]> </b:template-skin

• Now Copy the below Code

 .tabs-inner {

padding: 0px;

}

.section {

margin: 0px;

}

.header-inner .widget {

margin: 0px;

}

• Search        ]]></b:skin>

• add Paste the Code just above       ]]></b:skin>

• Now Save Template 

and

• Go Back to Blogger

Menu Bar with Two Columns Sub-Menus

Goto www.blogger.com

Enter Email and Password

Click On Design

Click on Dropdown Errow 

Click On Layout

Click On   Add a Gadget

On HTML/JavaScript

Click on + Sign

 Copy the Below Code

<div id='menucol'>

<div id='topwrapper'>

<ul id='top'>

<li><a href='http://Enter URL here>Enter Title Here</a></li>

<li><a href='http://Enter URL here>Enter Title Here</a></li>

<li><a class='submenucol' href='#'>Enter Title Here</a>

<ul>

<li><a href='http://Enter URL here>Enter Sub- Title Here</a></li>

<li><a href='http://Enter URL here>Enter Sub- Title Here</a></li>

<li><a href='http://Enter URL here>Enter Sub- Title Here</a></li>

<li><a href='http://Enter URL here>Enter Sub- Title Here</a></li>

<li><a href='http://Enter URL here>Enter Sub- Title Here</a></li>

<li><a href='http://Enter URL here>Enter Sub- Title Here</a></li>

</ul>

</li>

<li><a class='submenucol' href='#'>Enter Title Here</a>

<ul>

<li><a href='http://Enter URL here>Enter Sub- Title Here</a></li>

<li><a href='http://Enter URL here>Enter Sub- Title Here</a></li>

<li><a href='http://Enter URL here>Enter Sub- Title Here</a></li>

<li><a href='http://Enter URL here>Enter Sub- Title Here</a></li>

<li><a href='http://Enter URL here>Enter Sub- Title Here</a></li>

<li><a href='http://Enter URL here>Enter Sub- Title Here</a></li>

</ul>

</li>

<li><a class='submenucol' href='#'>Enter Title Here</a>

<ul>

<li><a href='http://Enter URL here>Enter Sub- Title Here</a></li>

<li><a href='http://Enter URL here>Enter Sub- Title Here</a></li>

<li><a href='http://Enter URL here>Enter Sub- Title Here</a></li>

<li><a href='http://Enter URL here>Enter Sub- Title Here</a></li>

<li><a href='http://Enter URL here>Enter Sub- Title Here</a></li>

<li><a href='http://Enter URL here>Enter Sub- Title Here</a></li>

<li><a href='http://Enter URL here>Enter Sub- Title Here</a></li>

<li><a href='http://Enter URL here>Enter Sub- Title Here</a></li>

</ul>

</li>

<li><a href='http://Enter URL here>Enter Title Here</a></li>

</ul>

<br class='clearit'/>

</div>

</div>

and Paste Here

 Click On Save Button

Now Click On Template

Click On Edit HTML

 Copy The Code

 /* Horizontal menu with 2 columns

----------------------------------------------- */

#menucol {

width:940px; 

height:37px;

background-image: -moz-linear-gradient(top, #666666, #000000);

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));

filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);

border-bottom:1px solid #666666;

border-top:1px solid #666666;

margin:0 auto;padding:0 auto;

overflow:hidden;

}

#topwrapper {

width:940px; 

height:40px;

margin:0 auto;

padding:0 auto;

}

.clearit {

clear: both;

height: 0;

line-height: 0.0;

font-size: 0;

}

#top {

width:100%;

}

#top, #top ul {

padding: 0;

margin: 0;

list-style: none;

}

#top a {

border-right:1px solid #333333;

text-align:left;

display: block;

text-decoration: none;

padding:10px 12px 11px;

font:bold 14px Arial;

text-transform:none;

color:#eee;

}

#top a:hover {

background:#000000;

color:#F6F6F6; 

}

#top a.submenucol {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR5KXKByTm_MW1N6yDhGhm4eV-K5eJiYsr_NTYAn3horw0qZnpOa04tH7TpgiBIyTRbouix8ayUUxopfsaeHpIG9LF7Yswpj9YXw0d_3mn0STB3GblZPMzICF5R1_Ti4p9SqInMVGfmTY/s1600/arrow_white.gif); 

background-repeat: no-repeat;

padding: 10px 24px 11px 12px;

background-position: right center;

}

#top li {

float: left;

position: relative;

}

#top li {

position: static !important; 

width: auto;

}

#top li ul, #top ul li {

width:300px;

} 

#top ul li a {

text-align:left;

padding: 6px 15px;

font-size:13px;

font-weight:normal;

text-transform:none;

font-family:Arial, sans-serif;

border:none;

}

#top li ul {

z-index:100;

position: absolute;

display: none;

background-color:#F1F1F1; 

margin-left:-80px;

padding:10px 0;

border-radius: 0px 0px 6px 6px;

box-shadow:0 2px 2px rgba(0,0,0,0.6);

filter:alpha(opacity=87);

opacity:.87;

}

#top li ul li {

width:150px; 

float:left;

margin:0;

padding:0;

}

#top li:hover ul, #top li.hvr ul {

display: block;

}

#top li:hover ul a, #top li.hvr ul a {

color:#333; 

background-color:transparent;

text-decoration:none;

}

#top ul a:hover {

text-decoration:underline!important;

color:#444444 !important; 

}

Now search  ]]></b:skin>

For this. Click in the Window

and Press Ctrl+F  keys

Search Bar will appear

Type or Paste  

]]></b:skin>

Paste the Code Above the      ]]></b:skin>

Now Search   /* Tabs 

and

Replace the Codes between

/* Tabs      and     */ columns

with Below Codes

#crosscol ul {z-index: 200; padding:0 !important;}

#crosscol li:hover {position:relative;}

#crosscol ul li {padding:0 !important;}

.Menus-outer {z-index:1;}

.Menus-inner {padding: 0 0px;}

Now Save Template