Customize Posting Background in HD
In the blogging backgrounds are usually having the white color but we can easily edit it and also can customize it with using simple CSS, In this tutorial you will get to know that how to customize the blogger's posting background easily with only one simple CSS language and this will be amazing and very funny be'coz it looks very awesome and also this is a HD background, so your visitors will love it when they see it. Also they will ask to you that how did you customize it and how this is shows in HD form, as you will see in the live demo now.- Login to Blogger > Dashborad
- Click on Posting Menu and select Edit HTML
- Paste below code in the HTML area.
<style>
/* CSS Posting Background by www.widgetgenerators.com */
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.widgetgenerators.com ---!>
<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 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>
If Any Problem Comes, Ask in Comments
