Modify Background With CSS

Background has an important function for a blog or website. In addition the convenience of readers, the beauty and eye catching blog also depends on the background. The blog background is the most basic part of the blog, many blogs have the same background. To differentiate our blog with others, the easiest thing is change the background of the blog. Usually the blog background using an image or color, many ways to change the blog background. One of them is change the blog background using css code.

Change the background of your blog actually be done using blogger template editor. But if you are not use default template from blogger, it can't be done. The only way is to manually change the background, through the edit html page. Before changing the css code, I recommend downloading the tempalte you, just in case if something goes wrong.

The first step to change the background template with css is login into blogger dasboard >>setting>>edit html>>expand template widget, use ctrl + f to find body {background:..............}. Copy and paste the following code to replace the body code :

body{background:-webkit-linear-gradient(-45deg, #ffffff 22px, #E6E6E6 22px, #E6E6E6 24px, transparent 24px, transparent 67px, #E6E6E6 67px, #E6E6E6 69px, transparent 69px),-webkit-linear-gradient(225deg, #ffffff 22px, #E6E6E6 22px, #E6E6E6 24px, transparent 24px, transparent 67px, #E6E6E6 67px, #E6E6E6 69px, transparent 69px)0 64px;-moz-linear-gradient(-45deg, #ffffff 22px, #E6E6E6 22px, #E6E6E6 24px, transparent 24px, transparent 67px, #E6E6E6 67px, #E6E6E6 69px, transparent 69px),-moz-linear-gradient(225deg, #ffffff 22px, #E6E6E6 22px, #E6E6E6 24px, transparent 24px, transparent 67px, #E6E6E6 67px, #E6E6E6 69px, transparent 69px)0 64px;-o-linear-gradient(-45deg, #ffffff 22px, #E6E6E6 22px, #E6E6E6 24px, transparent 24px, transparent 67px, #E6E6E6 67px, #E6E6E6 69px, transparent 69px),-o-linear-gradient(225deg, #ffffff 22px, #E6E6E6 22px, #E6E6E6 24px, transparent 24px, transparent 67px, #E6E6E6 67px, #E6E6E6 69px, transparent 69px)0 64px;-ms-linear-gradient(-45deg, #ffffff 22px, #E6E6E6 22px, #E6E6E6 24px, transparent 24px, transparent 67px, #E6E6E6 67px, #E6E6E6 69px, transparent 69px),-ms-linear-gradient(225deg, #ffffff 22px, #E6E6E6 22px, #E6E6E6 24px, transparent 24px, transparent 67px, #E6E6E6 67px, #E6E6E6 69px, transparent 69px)0 64px;background-size: 64px 128px; repeat;font-family:arial,verdana,helvetica,tahoma,Sans-serif;font-size:100%;width:100%;margin:10px 0 0 0;padding:0;} 

Replace some parts of the code :
#ffffff = (white) with your color;
And then save your template.

Read More

Troubleshooting Rich Snippet Error

When I tried to test my blog has been running well or not. I tried to test my blog in Google webmaster tools rich snippets, but the result was very disappointing. A message appears : missing required field "updated" and missing required hCard "author". This error is found mostly in case of blogspot /blogger blogs. If you are trying to include rich snippet in your blog/website hosted in blogger/blogspot for claiming authorship. Please correct this error by following this tutorial, maybe in another template code placement  is different from mine.

First step:

Log into your blogger dashboard, design >> edit HTML >> tick the 'Expand Widget Templates', for safety I recommend you to "Download Full Template" first and save your template to your hard disk. Copy this code  :

<div class='vcard' id='hcard- your name'><span class='fn n'><span class='given-name'>Posted by: your name</span></span></div><a class='updated' href=' http://your blog URL/ ' rel='bookmark'>your blog name </a> Updated at: <abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr>

Paste that code like the example below :

<div style='clear: both;'/> <!-- clear for photos floats -->
 </div>
<div class='vcard' id='hcard- your name'>
<span class='fn n'>
<span class='given-name'>Posted by: your name</span>
</span>
</div>
<a class='updated' href=' http://your blog URL/ ' rel='bookmark'>your blog name </a> Updated at: <abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>
<div class='post-footer'>

Second step :
Adjust some code :

• <div class='vcard' id='hcard- your name'> : replace with your name;
• <span class='given-name'>Posted by: your name</span> : replace with your name;
• <a class='updated' href=' http://your blog URL/ ' rel='bookmark'>your blog name </a> : replace with your blog url and blogname.

Third step :

Save your template, test again your blog in Google webmaster tools rich snippets, first enter your blog url then click preview see what the result. Does the error still appear ?

Read More

Making a Table

The table is a list that contains an overview of a number of data information is usually in the form of words or numbers arranged in a line delimiter. On some sites, tables are widely used for specific purposes. In making the table there are several tags, among others: <table> ... </ table>, <tr> </ tr>, <td> </ td>. Before create a table  first you should  understand what is the use of these tags. I'll try to share a little knowledge about how to create tables. Perhaps in this tutorial is still a lot of mistakes, I apologize because ha was caused by my ignorance.

Look at the table below :

• border : to give the outline of the table box;
• cellspadding : to give distance between the table border to the content;
• cellspacing : to give distance between the columns with each other.
• width : to give the width of a table;
• bgcolor : to give color of the table backround.
• valign : to set the vertical align of the text

Table 1 :

Tag	Atribut	Deskripsi
<table> ...........</table>	border	border="0" , "collapse" , solid #4F81BD
	cellpadding	cellpadding="2"
	cellspacing	cellspacing="0"
	width	"100", "100", "400"
	bgcolor	bgcolor="# CCFFFF"
	valign	valign="top"

Table  2 :

Tag	Deskripsi
<tr><!--</tr>	To make a table row' <tr>beginning of the row and</tr> is the end of row
<td><!--</td>	To make table coloumn, <td>beginning of the coloumn and</td>is the end of coloumn

Here's the code of the table 1 :

<table bgcolor="#CCFFFF" border="0" cellpadding="2" cellspacing="0" style="border-collapse: collapse; border: solid #4F81BD 2px;"><tbody> <tr><td style="border: solid #4F81BD 2px; width: 60px;" valign="top">Tag</td><td style="border: solid #4F81BD 2px; width: 100px;" valign="top">Atribut</td> <td style="border: solid #4F81BD 2px; width: 400px;" valign="top">Deskripsi</td> </tr> <tr><td rowspan="6" style="border: solid #4F81BD 2px; width: 60px;" valign="top">&lt;table&gt; ...........&lt;/table&gt;</td><td style="border-bottom: solid #4F81BD 2px; border-left: solid #4F81BD 2px; border-right: solid #4F81BD 2px; border-top: solid #4F81BD 2px;" valign="top">border</td>   <td style="border-bottom: solid #4F81BD 2px; border-left: solid #4F81BD 2px; border-right: solid #4F81BD 2px; border-top: none;" valign="top">border="2" , "collapse" ,<span style="background-color: transparent;">&nbsp;</span><span style="background-color: transparent;">solid #4F81BD</span></td></tr> <tr> <td style="border-bottom: solid #4F81BD 2px; border-left: solid #4F81BD 2px; border-right: solid #4F81BD 2px; border-top: solid #4F81BD 2px;" valign="top">cellpadding</td>   <td style="border-bottom: solid #4F81BD 2px; border-left: solid #4F81BD 2px; border-right: solid #4F81BD 2px; border-top: none;" valign="top">cellpadding="2"</td></tr> <tr><td style="border-bottom: solid #4F81BD 2px; border-left: solid #4F81BD 2px; border-right: solid #4F81BD 2px; border-top: solid #4F81BD 2px;" valign="top">cellspacing</td>   <td style="border-bottom: solid #4F81BD 2px; border-left: solid #4F81BD 2px; border-right: solid #4F81BD 2px; border-top: none;" valign="top">cellspacing="3"</td></tr> <tr><td style="border-bottom: solid #4F81BD 2px; border-left: solid #4F81BD 2px; border-right: solid #4F81BD 2px; border-top: solid #4F81BD 2px;" valign="top">width</td>   <td style="border-bottom: solid #4F81BD 2px; border-left: solid #4F81BD 2px; border-right: solid #4F81BD 2px; border-top: none;" valign="top">"100", "100", "400"</td></tr> <tr><td style="border-bottom: solid #4F81BD 2px; border-left: solid #4F81BD 2px; border-right: solid #4F81BD 2px; border-top: solid #4F81BD 2px;" valign="top">bgcolor</td>   <td style="border-bottom: solid #4F81BD 2px; border-left: solid #4F81BD 2px; border-right: solid #4F81BD 2px; border-top: none;" valign="top">bgcolor="#D8D8D8"</td></tr> <tr><td style="border-bottom: solid #4F81BD 2px; border-left: solid #4F81BD 2px; border-right: solid #4F81BD 2px; border-top: solid #4F81BD 2px;" valign="top">valign</td>   <td style="border-bottom: solid #4F81BD 2px; border-left: solid #4F81BD 2px; border-right: solid #4F81BD 2px; border-top: none;" valign="top">valign="top"</td></tr> </tbody></table>

There are several attributes that are not shown in the table above, please your own modifications to your table to be perfect. Good luck!

Read More