Saturday, May 12, 2012

Black Posting Background CSS Version 2



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>



Thanks for Visit Here Like Us on Facebook.
If Any Problem, Ask in Comments Follow US on Twitter.

help us to grow

Post a Comment