RSS
Write some words about you and your blog here
Showing posts with label Blogger Help. Show all posts
Showing posts with label Blogger Help. Show all posts

Difference - HTML and XHTML

Posted by CNVpro on Friday, May 15, 2009
Labels: , , , , , , , , , / Comments: (0)
When inserting codes into the Blogger template, page element, or blog post, you may have seen error messages that the code could not be parsed, was not well-formed, was broken, or that the elements were not closed properly. These errors can be corrected if you understand the rules that must be adhered to in XHTML documents. Blogger templates use the XHTML 1.0 Strict Document Type. In this article, we shall explain some of the XHTML syntax or rules, so that you may troubleshoot and resolve the problems if these error messages should occur.

XML, HTML and XHTML

We shall keep this short. Just so as you understand what we said about document type, view the Page Source or Source of your Blogger blog. You should see this document type declaration at the very top:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


The terms – XML, HTML and XHTML - refer to the markup language used to write the web pages. Many of us would have heard of HTML (Hypertext Markup Language), invented by Tim Berners-Lee, and used since the early days of internet. XML (Extensible Markup Language) is a meta-language, used to create other markup languages. The traditional HTML was later recast to use the rules of XML and that resulted in a new XML application, called XHTML (Extensible Hypertext Markup Language). Because XHTML rules are strict and unforgiving, not conforming to them when attempting to modify the template would result in error messages. So, what are these rules that Bloggers like us should take note of?

Basic Rules of XHTML

1. Codes to be in lowercase

Since XML is case sensitive, all the element keywords and attribute names used in XHTML should be in the lowercase. For example, the template code is not this:-

<TITLE>Tips for New Bloggers</TITLE>


but this:-

<title>Tips for New Bloggers</title>


If you have noticed, the elements and attribute names between the lesser than (<) and greater than (>) signs have to be in the lowercase. However, the value, which in this case is “Tips for New Bloggers”, can be in the uppercase, lowercase, or mixed case.

2. Attribute values to be in quotation marks

All the attribute values have to be enclosed either in single or double quotation marks. The following examples are not accepted by XHTML:-

<div id=header-wrapper>

<a href=http://tips-for-new-bloggers.blogspot.com>Text Link</a>

<img src=photo.jpg/>

<table width=200 border=0 cellpadding=2>


Instead, they should be written as such:-

<div id='header-wrapper'>

<a href="http://tips-for-new-bloggers.blogspot.com">Text Link</a>

<img src="photo.jpg"/>

<table width="200" border="0" cellpadding="2">


3. Container elements must have closing tags

This is not correct:-

<p>A paragraph.


In XHTML, there must be a closing tag with a forward slash (/) at the end:-

<p>A paragraph.</p>


Examples of the many non-empty elements that have opening and corresponding closing tags are:-

<ul> ... </ul>
<li> ... </li>
<table> ... </table>
<h2> ... </h2>
<div> ... </div>
<span> ... </span>
<dt> ... </dt>
<dd> ... </dd>
<a href> ... </a>


4. Standalone elements to be closed

Some of the elements are empty or standalone. They do not have associated closing tags. Common examples are:-

<br>
<img>
<input>
<frame>
<hr>
<meta>
<link>


Nonetheless, in XHTML, these elements must be terminated or closed. There are two ways to do that. One way to terminate the element is to put a forward slash (/) at the end like this:-

<br/>
<img/>
<input/>
<frame/>
<hr/>
<meta/>
<link/>


The second way is to add a corresponding closing tag like this:-

<br> ... </br>
<img> ... </img>
<input> ... </input>
<frame> ... </frame>
<hr> ... </hr>
<meta> ... </meta>
<link> ... </link>


5. Elements to be properly nested

This means that elements must be closed in the reverse order. For example, this code is not accepted in XHTML:-

<form><table> ... </form></table>


It is improperly nested because the form was created first followed by the table. To close them in the proper order, the table must be closed before the form, like this:-

<form><table> ... </table></form>


6. Document to have only one root element

In the XHTML document, you will see that except for the document type declaration, all the codes are nested between <html> and </html>. This is the root element and all other elements or sub elements are in between. The document structure will look like this:-

<html>
<head> ... </head>
<body> ... </body>
</html>


7. Attribute minimization is not allowed

In XHTML, all attributes should be in the form name="value". Even if the value is the same as the name, it cannot be minimized to one word. Hence, in our Add Text Box and Textarea article, the textarea code is not this:-

<textarea readonly>Hyperlink Code</textarea>


but this:-

<textarea readonly="readonly">Hyperlink Code</textarea>


XHTML Character Entities

Quite a number of readers had asked why they were unable to display HTML codes in their blog posts or why their codes were not well-parsed when inserted into the template. If you have noticed by now, the codes are wrapped in the lesser than (<) and greater than (>) signs. The moment these are posted, they will be interpreted as codes and will trigger an action by the browser. Should you want to display these as part of the text, use their character entities instead.

"&quot;
&&amp;
<&lt;
>&gt;


The next time you see an error message to the effect that the code is not well formed, not well parsed, not properly closed, etc., take a look at this guide, troubleshoot the problem and try out the possible solutions.

add digg button to blogger or blogspot

Posted by CNVpro
Labels: , , , , , , , , , , , , , , / Comments: (2)
This is a step-by-step guide to automatically place a real-time Digg count and vote button to every single blog post. Digg is a social content website where your readers or you can submit content to. If you have a good story, members will 'digg' the post and write comments. As a blog owner, you may want to make it easy for and encourage your readers to submit and digg your articles.

Automatic Count and Vote Button

Before you do that though, you would want to take note of the following:-

1. Your blog should be set to save Post Pages. Post Pages are archived blog posts published to their own web page. Each post will have a unique URL, which is required by Digg for the individual posts to be submitted. To verify or enable it, login to your Blogger Dashboard. Under Settings-> Archiving, set the “Enable Post Pages?” to “Yes” and save the settings.

2. This template hack will put a Digg button to every post. You are therefore not able to choose which post you want to include or exclude a button. If you would prefer to have a Digg button added only to some posts, read the later part of this article on “Button for selective posts.”

3. The code reads the URL of the individual blog page and this shall be the URL used for submission of the story to Digg.

Under “Template”, click the “Edit HTML” tab. Block copy the entire HTML code for your site and save it in a text file. You can also click the "Download Template" link. This is one of the two necessary steps whenever you want to change the template. The second step is of course to “Preview” the new changes, and save the changes only when you are satisfied. The backup you have saved in a text file will come in handy when you accidentally click to save the changes without previewing them. With a backup, you can easily restore the template to the prior state if need be.

Add Digg button to Blogger or Blogspot

Click the box next to “Expand Widget Templates”. Scroll about two-thirds down the template to look for the code that reads:-

<p><data:post.body/></p>




If you want the button to show at the top right corner of your post, replace the above code with this.

<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url=&quot;<data:post.url/>&quot;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>


This is what you get:-

Add Digg button to Blogger or Blogspot

If you would like the button to appear at the end of your post, replace with this following code instead.

<p><data:post.body/></p>
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url=&quot;<data:post.url/>&quot;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>


The result will be this:-

Add Digg button to Blogger or Blogspot

If you want to have the button at the top left corner of your post, change the alignment.

<div style='float:left; margin-right:10px;'>
<script type='text/javascript'>
digg_url=&quot;<data:post.url/>&quot;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>


The outcome is this:-

Add Digg button to Blogger or Blogspot

Digg has another compact button. If you insert this code:-


<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url=&quot;<data:post.url/>&quot;;
digg_skin=&quot;compact&quot;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>


You will see a compact Digg count button like this:-

Add Digg button to Blogger or Blogspot

You can also change the background color of the button to blend with your site. For example, a code like this:-


<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url=&quot;<data:post.url/>&quot;;
digg_bgcolor=&quot;#BDEDFF&quot;;
digg_skin=&quot;compact&quot;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>


will give you this:-

Add Digg button to Blogger or Blogspot

You can insert the color code of your choice into the red portion. For a list of color values to insert, you may refer to the Hexadecimal HTML color code list.

Automatic Count Button in Blog Footer

[Update] This segment is added in response to user's request to have the Digg button in the Blog footer, i.e., after the labels. If you scroll through your template, you will see this chunk of code which gives the labels in your Blog footer.

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>


If you want a Digg button to appear just after the labels, add the appropriate Digg button code right after the above code. For example, if you want the compact Digg button, add this code below the labels code:-


<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url=&quot;<data:post.url/>&quot;;
digg_skin=&quot;compact&quot;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>


The resulting layout is this:-

Add Digg button to Blogger or Blogspot

Move the Digg button code above the labels if you'd like. Experiment a little. Just remember to preview the template and not to save it unless you are satisfied.

Digg Button in Blog Footer

If you do not want to see an Automatic Count button, you can also place a link button into the template. This button will appear at the bottom right corner of every post and readers can click it to submit that post to Digg.

Scroll to this part of the template and insert the lines (in red):-

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<div style="float:right; margin-left:10px;">
<a expr:href='"http://digg.com/submit?phase=2&amp;url=" +
data:post.url + "&amp;title=" + data:post.title'
target='_blank'><img border="0" alt="Digg this" src="http://digg.com/img/badges/91x17-digg-button.gif"/></a></div>


With the code, this is what you will see at the end of every post.

Add Digg button to Blogger or Blogspot

You can change the position of this button. Go through what we discussed earlier in this article to understand where to place the code if you should want the button to be at the top of the article.

The button 91x17-digg-button.gif is simply an example. As the following section explains, there are many buttons you can use. To change the button to another design, replace the image URL with that of the new button.