Nhãn

Thứ Ba, 31 tháng 1, 2012

Using Google Page Creator and Google Groups

If you are looking to have a Favicon (icon next to your URL) or music on your blog, you will need to upload the files onto a web host. Most bloggers do not register and pay for a .com site. Fortunately for us, there are many sites offering free hosting of your files, documents, photos, and so on. I shall cover 2 very useful free web hosts which you can consider using – Google Page Creator andGoogle Groups.

Google Page Creator

You can use your Gmail account to access the available services offered by Google. Google Page Creator is an easy-to-use free tool that lets you create web pages in your browser and publish them to the web with just one click. It works on a what-you-see-is-what-you-get format. Everything is done on the screen and you do not need to download any software. Pretty much like a simpler version of Pagemaker or other web design tools. The pages you create are hosted on Google servers and your own page will be at http://yourname.googlepages.com.

Once you are in it, you will be able to create your webpage – change layout, background color, heading and content font, upload images, and publish.

Using Google Page Creator and Google Groups

For our purposes, we would like to focus on uploading of files. Return to the Site Manager. On the right of the screen, you should see this:-

Using Google Page Creator and Google Groups

Click the “upload” link, and you will be able to browse your computer for the file that you want to upload.

Using Google Page Creator and Google Groups

Once you have uploaded the file, take note of the URL of your file. You may upload as many files as you want, provided that the space for your pages and uploaded files does not exceed 100MB.

Google Groups

Google Groups is a great communication platform for users to get in touch with friends, or people who share similar interests over the internet.

Using Google Page Creator and Google Groups

As you can see, creating a Google group is easy. Click the “Create a group” button. You will be brought to a screen which requires to enter your Group's name, and description.

Using Google Page Creator and Google Groups

If you have no intention to invite any member at this stage, click “Skip this step”.

Using Google Page Creator and Google Groups

You have now created a new Google Group. If you should wish to upload files, click the “Files” link on the right panel, and you can begin uploading. If you are using the files for your blog, see that the Group Settings->Access is configured such that anybody can view the group content.

Using Google Page Creator and Google Groups

Every group comes with 100 MB of storage space for all of the group's photos, documents, and files. Take note of the URLs of your uploaded files, if you intend to use the icon for your Favicon, or the music file for your blog.

Other Free Image Hosts and File Hosts

We have also a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites as well and choose one that is fast, reliable and enables hotlinking to the uploaded files.

Technorati Tags in Blogger Posts

Technorati, which indexes some 94 million weblogs, allows blog owners to assign tags to their posts. These tags are essentially words which describe the category that the posts, photos and videos fall under. Visitors can then search these tags to find the relevant blog posts. How can the Technorati tags be inserted into Blogger posts so that they can be indexed by Technorati? Is there a need to include Technorati tags in the first place?

Tags for Blogs

There is a Blog Finder function in Technorati which searches for blogs within general topics of interest. When you first register with Technorati, you can assign twenty tags which best describe your blog. To edit them, login to Technorati and go to Account -> Blogs. Click “Edit Settings” to change the tags and when finished, click “Save Blog Info” at the bottom of the page. Try to fill up all the 20 tag slots and choose keywords that are relevant to the blog contents.

To check if your blog is properly tagged, copy this URL into the internet browser and insert one of the 20 tags into the portion in red. Your blog should appear in the blog listing.
http://www.technorati.com/blogs/TAG


Tags for Blog Posts

If you search the net, you can find several online tag generators which help you to easily create Technorati tags. What they do is to identify the keywords and insert a code to these words so that Technorati spiders can index them. Those using Firefox browsers download the Greasemonkey add-on and install user scripts to automatically append Technorati tags to their posts. From our reading and testing, it seems that these extra third party scripts and tools are no longer necessary in the Blogger Beta or the new Blogger platform.

When creating a Post, you will see at the bottom of the text editor a box for “Labels for this post”. Enter the labels or keywords that describe the Post. A label can comprise more than one word and each label should be separated by a comma. For example, our labels for this post may read “Technorati tags, Blogger Tips, Labels”.

The limit for this box is 200 characters. What can you do if your labels exceed 200 characters? A tip that you can bear in mind is to remove the spaces after the commas. A spacing is deemed as 1 character. We will therefore have something like “Technorati tags,Blogger Tips,Labels” with no spacing after each comma.

Technorati Tags in Blogger Posts

When the Post is published, the Labels will appear in the footer. What if you do not see the Labels? Follow this guide to Customize the Blog Posts Elements. Make sure there is a tick against the “Labels: photos, vacation” option. In fact, you can change the word “Labels” to “Tags” or “Categories” or even “Technorati Tags”.

If you refresh the Blog page and view the source code, you will notice that the Labels automatically contain an additional code:-

<a href='http://tips-for-new-bloggers.blogspot.com/search/label/Blogger%20Tips'rel='tag'>Blogger Tips</a>


The first part in blue is just a hyperlink, a URL that directs the users to the search results of posts bearing this label. The second portion in red is what we are most interested in because the rel='tag' is what Technorati reads.

According to the Technorati guide, their search spiders will look out for these tag links that bear the rel='tag' code. These will then be indexed and will appear in the Technorati tag pages. To ascertain whether your Blog Post label or tag has been indexed by Technorati, copy the following address into the internet browser. Replace the TAG (marked in red) and your BLOG URL (shown in blue).

http://www.technorati.com/tag/TAG?from=BLOG URL


Using our above example, if we want to confirm that the label “Blogger Tips” has been tagged in Technorati, we would enter this URL into our browser. We should see the posts that are tagged with this label:-

http://www.technorati.com/tag/blogger+tips?from=http://tips-for-new-bloggers.blogspot.com


Although it appears that essentially all you need to do is to key in the Labels to have them tagged by Technorati, there are still several things to bear in mind:-

1. After posting, submit your blog to a Ping Service which notifies several major feed aggregators, syndicates or directories that your blog has been updated. Ensure that Technorati is one of the sites that you ping.

2. Technorati reads the blog feed to pick up the tags. Check that blog feed has been enabled by going to Settings -> Site Feed -> Allow Blog Feed and choose either “Short” or “Full”.

3. There appears to be a slight problem if you have selected the “Short” feed, syndicating only the first paragraph, or the first 255 characters, whichever is shorter. What happens is that when Technorati spiders visit your site feed, it sees only this short paragraph. As you are aware, the Labels that you have inserted appear at the footer of the article and quite naturally, the spiders may miss out these tags. Fortunately, it seems that Technorati is aware of this and besides the blog feed, they will index the tags that appear in the new posts that are on your main Blog page. So long as you have a habit of pinging Technorati after each new post, and the full article is displayed on the main page, their search spiders will visit your main Blog page to index the labels/tags. Once indexed, it does not matter whether or not your feed shows only a summarised content.

4. For a week, we have not posted any article because our recent posts were not shown in Technorati. We did not realize it until we clicked our Technorati Blog page. To digress a little, the first thing we noticed was that we were somehow ranked within the “Top 5K” blogs. Quite a surprise to us since we were not even in the top 10K the last time we visited the page. Of course, it is all thanks to you, our readers, for the continued support and encouragement. Back to our issue, we saw at the same time that our latest 3 posts were not updated in the index. We submitted a ticket to the Technorati team. Because of what we mentioned earlier, we had to change our blog settings to show 3 posts on the main page so that the spiders can pick up the tags in the posts. As at today, the problem has yet to be rectified. Probably they are too busy. We can't delay our posts and have therefore decided to keep changing our blog settings to show more posts in the main page until Technorati indexes them.

Template Tweaks for Technorati Tags

If you are still concerned that the labels at the footer may not be seen by Technorati spiders, one of the things you can do is to shift the Labels to the top of the article. Go to Template -> Edit HTML and back up the existing template. Next, check the box against “Expand Widget Templates”. Scroll to these lines:-

<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>


Cut the entire piece of code and Ctrl+F to search for the following code (marked in green) and paste what you have cut just below it like this:-

<div class='post-header-line-1'/>
<div class='post-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></div>


We have added the code (shown in blue) so that the style of the Labels will follow the Footer styles. Preview the Template. The labels should appear after the Post Title but before the Post contents. If you are happy with it, Save the Template.

Selective words for Technorati Tags

Let's say you have a post and as you write, you want a word in the post to be tagged in Technorati. Switch from “Compose” mode to “Edit HTML” mode. Type in this code before and after the word to be tagged.

<a href="http://technorati.com/tag/WORD" rel="tag">WORD</a>


If the keyword comprises two or more words, use this:-

<a href="http://technorati.com/tag/TWO+WORDS" rel="tag">TWO WORDS</a>


You can change the URL to anything else, as long as you keep the rel="tag" in the code.

About Tags

Tags are not case-sensitive. However, you may want to consider using variations of the keyword now and then. A word in British English may be spelled differently in American English. Some people may even misspell the word altogether. This is very likely since tags are inserted by individuals who write the blog posts and these individuals may not be English-educated. Having different spellings of a keyword may increase the chance of your blog being found. Nonetheless, do not go overboard. Having too many keywords that mean about the same thing may be deemed as keyword spamming and is frowned upon by search engines and users alike.

The tags should reflect the post contents. If they are wholly irrelevant, users who are 'tricked' to visit your blog would be annoyed. If Technorati or other tag search engines heed such calls, you may one day find your blog blackmarked or de-listed.

Tables – HTML Basics and Tutorial

In this article, we shall learn how to create tables in our Blog posts or as a part of our web design layout. This guide covers the usual HTML attributes and styles that can be applied to tables. Tables add a different dimension to displaying your contents and whether you have a football match fixture, menu, and song, price or grocery lists, putting them in a table format is certainly neater.

Most of us would have either used or come across tables that display data or information. If you have used word processor or spreadsheet softwares, you should be familiar with these terms, which apply as well to our discussion here:-

“row” - a horizontal line of units
“column” - a vertical line of units
“cell” - each unit or data compartment enclosed by the borders

Let us look at some examples to illustrate how the HTML table codes work and where you can place them.

Placement of the Table Code

To create a table in a Blog post, simply type in the HTML codes (mentioned below) when you are writing your post. See that you are in “Edit HTML” mode rather than “Compose” mode when the code is inserted.

Tables – HTML Basics and Tutorial

If you want the table to be displayed in your sidebar or elsewhere in your template, go to Template -> Page Elements -> Add a Page Element and select “HTML/JavaScript” to paste the code.

Basic Table
Height:2.2m
Weight:185kg


The HTML for the above table is this.

<table width="200" border="1" cellspacing="2" cellpadding="2"><tbody>
<tr>
<td>Height:</td>
<td>2.2m</td>
</tr>
<tr>
<td>Weight:</td>
<td>185kg</td>
</tr>
</tbody>
</table>


Note:

1. It should begin with a <table> tag and end with a closing </table> tag.

2. We have specified the border as 1px. You can set it to “0” to have no visible border or set it to any other value.

3. Try to specify a width at all times. This improves the speed of page loads since the browser would be able to set aside the space required for the table. When you view your template source code, the width allocated for your Blog posts should be found under #main or #main-wrapper and your table width will have to be less than that. If you do not set a width, the table will by default take up the full width.

4. The cellpadding is the amount of white space between the content and the borders. If there is no cellpadding, you will find the text very close to the border.

5. Cellspacing is used to define the distance between each cell.

6. Every row starts with a <tr> tag and ends with a </tr> tag. In this example, we have 2 rows, the portion colored blue being the first row, and the portion coloredred being the second row.

7. Within every row, we have the contents governed by the <td> (table data) tags. You would notice that in the first row, the first data cell “Height:” begins with <td> and ends with </td>. Every data cell will have to be enclosed within such tags.

8. The contents in each data cell need not be plain text. You can insert pictures, images, links, videos, etc. For instance, we could replace “Height:” with a picture code that looks like this “<img src="Image URL" />” to insert a picture that we have uploaded onto a photo server. For more on the links and image codes to insert, you may refer to our guide at Hyperlinks and Image Links.

Text Formatting

You may want to change the text font face, font-size or color and make the text bold or italic. You can even align the text either to the left, center or right of the cell. We'll suggest a method that is easy for all of us to adopt, without having to learn complicated style codes. Create a new draft post. Choose “Edit HTML” mode and paste the above table code. Now, view the post under “Compose” mode. Using the rich-text editor, change the font, color and alignment to whatever you like. All the style codes will be automatically inserted and what-you-see-is-what-you-get.

If you want the table in your sidebar, do the same, create the table in a draft post and use the rich-text editor to insert the style codes for you. When you are done, click back to “Edit HTML” mode and copy the entire table code. Under Template -> Page Elements -> Add a Page Element -> HTML/JavaScript, paste this code (with all the style definitions) and save.

Table with Header

S/No.InventoryQty
1.Plate50
2.Cup22
3.Bowl30


The code for the above table is this:-

<table border="1" cellpadding="1" cellspacing="0" width="200"><tbody>
<tr>
<th>S/No.</th>
<th>Inventory</th>
<th>Qty</th>
</tr>
<tr>
<td>1.</td>
<td>Plate</td>
<td>50</td>
</tr>
<tr>
<td>2.</td>
<td>Cup</td>
<td>22</td>
</tr>
<tr>
<td>3.</td>
<td>Bowl</td>
<td>30</td>
</tr>
</tbody>
</table>


Note:

1. The <th> tags are used to mark the content as headers and such text will be bold by default to distinguish them from the other contents. We intentionally included more rows and columns to let you see how you can insert more rows using the <tr> tags and more data cells using the <td> tags.

Row Span and Column Span

Sometimes, you may want to merge certain cells, such that the cell spans multiple rows or columns like this:-

Menu
StartersSalad$1.00
Soup$2.00
MainFish$3.00
Chicken$4.00
Lamb$5.00


The code for the above table is this:-
<table border="1" cellpadding="0" cellspacing="0" width="300"><tbody>
<tr>
<td colspan="3">Menu</td>
</tr>
<tr>
<td rowspan="2">Starters</td>
<td>Salad</td>
<td>$1.00</td>
</tr>
<tr>
<td>Soup</td>
<td>$2.00</td>
</tr>>
<tr>
<td rowspan="3">Main</td>
<td>Fish</td>
<td>$3.00</td>
</tr>
<tr>
<td>Chicken</td>
<td>$4.00</td>
</tr>
<tr>
<td>Lamb</td>
<td>$5.00</td>
</tr>
</tbody>
</table>


Note:

1. For the top row, we merged 3 columns and named it “Menu”. In the <td> tag, we have therefore inserted a colspan="3" to indicate that the word spans 3 columns.

2. In the left column, we wanted the word “Starters” to span 2 rows, and have inserted rowspan="2" into the <td> tag.

3. Similarly, to have the word “Main” span 3 rows, we inserted rowspan="3" into the <td> tag.

Border Color, Background Color, Background Images

Let us now insert some colors into our table code.

MusicVideos
Games


The above table HTML code is this:-

<table border="1" bordercolor="#ff3366" cellpadding="0" cellspacing="0" width="200"> <tbody>
<tr>
<td bgcolor="#33ffcc">Music</td>
<tdbackground="http://www.blogpulp.com/imagehost/images/381245101.jpg">Videos</td>
</tr>
<tr>
<td bgcolor="#ff66cc">Games</td>
<td><img src="http://www.blogpulp.com/imagehost/images/236728310.jpg" /></td>
</tr>
</tbody>
</table>


Note:

1. We have added a bordercolor to the table. Take a look at our Hexadecimal HTML Color Codes article for more color choices and the codes to use.

2. To add a background color to a cell, insert the bgcolor definitions.

3. Should you like, you can have a background image instead of color as we have done in the above “Videos” cell. Upload the image onto a free server and insert the relevant URL of that image.

4. In the bottom right cell, we have inserted an image rather than text, to show you how an image can be inserted into a table.

Alternative Method

We end this part of our introductory article on HTML table codes with an alternative method to insert tables into Blog posts. If you have a word processor - MS Word, OpenOffice writer, etc. - you can create a number in the processor. Format it, enter your text and when it is done, block copy the entire table. Go to your New Post and under “Compose” mode, paste the table.

When you view the post in “Edit HTML” mode, you can see the table code similar to what we have discussed above. While this method of inserting a table is easy for the layman, the final code may be cluttered with other styles and definitions that are brought over from the word processor. If you'd like, create a simple table using your word processor but use the Blogger text editor to format the fonts, colors and alignment. To insert background colors and images, it is still advisable to follow the above guide.

Remove White Spaces

You may see a lot of white space or gap at the top of the table. To remove this unnecessary space, you would need to compact the code and remove the line breaks. We have used a lot of line breaks in the above code so that you can better understand how the code works. Take the first example of a Basic Table, compacting the code will mean removing all the new line breaks like this:-

<table width="200" border="1" cellspacing="2" cellpadding="2"><tbody> <tr><td>Height:</td><td>2.2m</td></tr><tr><td>Weight:</td><td>185kg</td></tr></tbody></table>