Black Posting Background CSS Version 2 ~ Face Blog

As in our last post you learned that how to color the background and also you get the embed the Each Post of Blogger in Different Color OR With a Image Background. Now this is the Version 2 of colored and image background, here you will able to do your post with CSS black background.

Black Posting Background

Login to Blogger > Dashboard
Go to Posting > Edit HTML
Paste Below Code in it and make following changes according to you.

<style>
/* CSS Posting Background by www.fblatest.in */

table#vsTable {
position: relative;
z-index: 2;
border: none;
border-bottom: 2px solid #000;
border-collapse: collapse;
margin: 0 auto;
border-right: 1px solid #505050;
width: 100%;
font-size: 12px;
}

table#vsTable td {
padding: 10px 0;
border-bottom: 1px solid #505050;
border-right: 1px solid #505050;
vertical-align: middle;
text-align: center;
background: #393939;
color: #e7e7e7;
}

table#vsTable tr.second td {
background: #333333;
}

table#vsTable tr td div {
text-align: center;
}

table#vsTable tr td div.yes, table#vsTable tr td div.no, table#vsTable tr td div.partial {
height: 16px;
}

table#vsTable tr td.cat div, table#vsTable tr td.title div {
height: auto;
}

table#vsTable td.cat div {
text-align: left;
padding: 0 10px;
}

table#vsTable td.title {
background: #393939;
font-size: 16px;
color: #fff;
text-shadow: 1px 1px 0 #000;
border: 1px solid #424242;
border-bottom: 2px solid #202020;
vertical-align: middle;
text-align: center;
}

table#vsTable .cat, table#vsTable tr.second .cat {
text-align: left;
background: #333333;
color: #fff;
border-left: 1px solid #481b5b;
}

table#vsTable td.title.cat {
background: none !important;
border: none;
border-bottom: 1px solid #481b5b;
cursor: default !important;
box-shadow: none;
}

table#vsTable td.title.cat div {
display: none;
}

table#vsTable tr td.cat:hover {
background: #404040;
}

table#vsTable tr td.title:hover {
background: #404040;
}

table#vsTable div.yes {
background: url(images/yes.png) no-repeat center center;
}

table#vsTable div.no {
background: url(images/no.png) no-repeat center center;
}

table#vsTable div.partial {
background: url(images/partial.png) no-repeat center center;
}

table#vsTable .title .editable input {
color: #fff;
text-shadow: 1px 1px 0 #000;
}

table#vsTable .cat .editable input {
color: #fff;
text-shadow: 1px 1px 0 #000;
}

table#vsTable .text .editable input {
color: #fff;
text-shadow: 1px 1px 0 #000;
}

table#vsTable .titleImage {
padding: 0;
margin: 0;
border: none;
width: 90%;
float: none;
height: auto;
}

</style>

<div dir="ltr" style="text-align: left;" trbidi="on">
<!---CSS Widget by www.fblatest.in ---!>
<h2>
</h2>
<div id="tableWrapper" style="width: 100%;">
<table id="vsTable"><tbody>
<tr style="font-family: Verdana,sans-serif;"><td class="text" style="width: 50%;"><div class="">
<table id="vsTable"><tbody>

<tr><td class="title" style="width: 50%;"><div class="">
<span style="font-size: x-large;"><b>Heading</b></span></div>
</td></tr>
</tbody></table>
</div>
</td></tr>
<tr style="font-family: Verdana,sans-serif;"><td class="text" style="width: 50%;"><table id="vsTable"><tbody>
<tr class="second"><td class="text" style="width: 50%;"><div class="">
<span style="font-size: large;">Write Your Text Here</span>

</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
</div>
</div>

Make Changes....!

Heading Replace it with your heading of content.
Write Your Text Here Replace it with your text.
If you don't want to add heading then delete these codes
<tr><td class="title" style="width: 50%;"><div class="">
<span style="font-size: x-large;"><b>Heading</b></span></div>
</td></tr>