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

Area of Parallelogram

Parallelogram is a plane shape that has two pairs of parallel sides and equal in length. Parallelogram has two pairs of angles that are not right-angled. Opposite corners of a parallelogram having the same large angle. Parallelogram with four equal sides is called a rhombus.

The properties of a parallelogram is as follows:

• Opposite sides are parallel and equal in length
• Opposite angles are equal  
• Adjacent angles  add up to 180°, so they are supplementary angles (Two Angles are Supplementary if they add up to 180 degrees).
• Both diagonals bisect each line segment equal in length.

AC and BD are diagonal of ABCD parallelogram.

• AB equal length and parallel to the CD.
• BC equal length and parallel to AD.
• ∠ BAD = ∠ BCD, ∠ CBA = ∠ ADC
• OA = OB = OC and OD

Area of parallelogram can be found using triangle area by divide through BD or AC diagonals, so there are 2 congruent triangle. ΔBAD and ΔBCD.
Area of parallelogram = 2 x Area of triangle
                                       = 2 x ½ (b x h)
                                       = b x h
The Area is the base x height :
Area = b × h
Than from the area  of parallelogram can be found the base and heigh.
b  = A/h and h = A/b


Example :
1.  Height of a parallelogram is 15 cm and base = 25. What is the area ?
     Area = b x h
              = 15 x 25
              = 375 cm
2.  Area of parallelogram is 595 cm, height 17 cm. What is the base ?
     Base = Area/height
              = 595/17
              = 35 cm
3.  Base of the parallelogram is 16 cm and volume = 192 cm. What is the height ?
      Height = Area/Base
                   = 192/16
                   = 12 cm

Read More

Creating View Demo Button

The use of this css is to create a button on a blog. With this css code will make it easier to modify the button, shapes, sizes and colors of the button. This button allows you to "view demo" or "download" and other purpose on your blog, You can customize your button with the right colors that adjusted with your theme background. With this button can change appearance of your blog.

How to make the this button ? Please copy and paste the code below in your post page, do some color changes that proper with your blog theme.

<style type="text/css">
.button1 {
 color:#a8a8a8;
 font-family:arial;
 font-size:15px;
 font-weight:bold;
 padding:6px 30px;
 text-decoration:none;
 text-shadow:0px 1px 0px #000000;
  -webkit-border-radius:15px;
  -moz-border-radius:15px;
 border-radius:15px;
 border:1px solid #8a8a8a;
 display:inline-block;
 -webkit-box-shadow:inset 0px 1px 0px 0px #aba9ab;
 -moz-box-shadow:inset 0px 1px 0px 0px #aba9ab;
 box-shadow:inset 0px 1px 0px 0px #aba9ab;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7a7a7a), color-stop(1, #000000) );
 background:-moz-linear-gradient( center top, #7a7a7a 5%, #000000 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7a7a7a', endColorstr='#000000');
 background-color:#7a7a7a;
}
.button1:hover {
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #7a7a7a) );
 background:-moz-linear-gradient( center top, #000000 5%, #7a7a7a 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#7a7a7a');
 background-color:#000000;
}
.button1:active {
 position:relative;
 top:1px;
}
</style><a class="button1" href="your URL">View Demo</a>
<style type="text/css"></style>

Note :

• Change the blue text with your color(text will be displayed),
•  The red text with your URL.

View Demo

Download

Read More