Thursday, January 31, 2008

SezWho's Comment Ranking Platform Launch

BlogCatalog, a social network for bloggers which claims a membership of over 100,000 bloggers will partner with SezWho to provide for comment tracking and ranking platform for bloggers. This sounds like something new and will be good news for those bloggers who post useful comments, which I suppose will include their own blogs as well as others.

BlogCatalog also mentioned a network which offers a searchable directory to connect bloggers with a wider audience and provides a support group for discussion and collective action. This is another useful feature for bloggers, but it remain to be seen how useful when it is launched. Meanwhile, I am sure many bloggers are looking forward eagerly to see how it works.

A blogger, by joining blogger joins BlogCatalog, they will be able to create a personal profile for the network and this means additional exposure for bloggers who want exposure. Not only that, you can create an avatar for the profile and get a listing in the blog directory.

BlogCatalog SezWho Popup
Screenshot titled "BlogCatalog SezWho Popup" belongs to FutureWorks PR


Partnership with SezWho have now given BlogCatalog members to download a plug-in for their blog. However, I cannot comment on how this plug-in works or how useful it can be as it will only be released after the launch (31st January 2008?).

With this Comment Ranking Platform, bloggers can provide comment ratings, comment filtering and the ability to view a contributor's commentary across the web. That can either be welcomed by bloggers who wants greater exposure but may be viewed as a sort of invasion of privacy by those bloggers who like to stay private. But it looks like it can help drive traffic to one's blog for those who look forward to getting more visitors to their blog.

This may be what you may see in the comment system:

BlogCatalog SezWho Integration
Screenshot of BlogCatalog SezWho Integration by FutureWorks PR


For bloggers who have been providing good and useful content, here is your chance to enhance your reputation in the Blogosphere.

Peter Chen's nice graphic signature

Friday, January 18, 2008

How to display underlined text

Want to underline some text in your post? It is very easy.

However, to do this, you must use the EDIT HTML mode and not the COMPOSE mode. You will need to do what they call Inline CSS (Cascading Style Sheet) which is CSS inside a HTML element. However, don't get frightened off by the technical jargon as you need not know what I mean by the above. All you have to do is to examine the HTML I used to display It is very easy inside the scroll box below and just copy what I do:

<span style="text-decoration:underline;">It is very easy</span>


Peter Chen's nice graphic signature

Tuesday, January 15, 2008

New option for Profile photo: Upload direct from computer

Previously, any photo you want to use for your profile photo must first be hosted on the web and then you must get the proper URL. Got a question from a blogger recently who gave the URLs for the photos which she said when entered into the relevant field in the EDIT PROFILE page, resulted in error message. I tested with a test Blogger account using the give photo URLs and did not encounter any error message and the editing saved OK, but when the blog is viewed on the web, there were no photo in the "About Me" (Profile) section.

But I noticed something new. Now you can upload a photo stored in your computer for your profile photo. This was not available before.

Blogger profile photo upload options

I am in a hurry to test this new option (upload from computer) and hope if you have tried that, let us know your experience by leaving a comment. Please.

Peter Chen's nice graphic signature

Thursday, January 10, 2008

Add AdSense products to Blogger blogs: Recommended method

This question crops up often:

when customizing my blog, I click on 'add a page element', then I click on 'adsense' and this is what comes up.....

Please correct the errors on this form.

Format: 300 x 250 Rectangle (drop down menu)

Blogger is not allowed to request ad code for your AdSense account. You must fix this by signing in again and allowing Blogger to manage your account.


My recommendation is, forget about adding AdSense products direct via Blogger except if you want to add AdSense ads between posts (click BACK button to get back to this page). Reasons: You have much limited options like being unable to add AdSense custom channels and Adsense text or button referral links, or even Google site search box.

Use this method: Adding Adsense products to Blogger blogs. No time to check what is inside there, but perhaps you can get more information from Blogger Beta: Adding advertisement and hit counters, etc (click BACK button to get back to this page). Feedback highly welcomed as some may need updating.

Peter Chen's nice graphic signature

Thursday, January 03, 2008

Captions for images in blog posts

It is always useful for visitors to a blog with images (photos especially) to have a caption and here I am going to describe how I do it for images uploaded via the photo upload icon in the Blogger post editor. There are 2 ways, and I hope to add notes of the advantages and disadvantages of both. Note that all these must be done in the EDIT HTML mode EDIT HTML/COMPOSE tabs in the Blogger post editor, not the COMPOSE (WYSIWYG) mode. Also, in this post, I will give scripts for you to study, and if you find it troublesome to do it on the post itself, you can highlight all the script in the scroll box, copy it, then paste it into a Notepad file to study at your leisure.

Also, each time you upload a photo, the script for the photo (in EDIT HTML mode) or the photo itself (in the COMPOSE mode) will be right at the top of the post, irrespective of where you place the mouse cursor. I prefer EDIT HTML mode rather than the COMPOSE as it gives me better control over how my post will display. Also, my habit is to leave the original script in its original place place at the top of the post, highlight it all, right-click, select "copy", scroll down the post editor window, paste it where I actually want the image. This means I will have 2 copies, the original at the top, and the copy at the spot where it will be eventually. This I feel is safer as if anything happened, you can still get the script from the original at the top, and only delete it when you have everything worked out fine.

For more details, refer to Uploading and manipulating images with Google Blogger (click BACK button to get back to this page).

Add caption direct into the Blogger script for the image>

This is the easiest method. When you upload an image via the photo upload icon in the Blogger post editor, this is how the script may look like:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_jizoPL28qCY/R3mYAlYUScI/AAAAAAAABEY/5GbJ3Y_dkfA/s1600-h/Paris+Eiffel+Tower+double+decker+bus+bratan.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://2.bp.blogspot.com/_jizoPL28qCY/R3mYAlYUScI/AAAAAAAABEY/5GbJ3Y_dkfA/s400/Paris+Eiffel+Tower+double+decker+bus+bratan.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5150314784676399554" /></a>


This is what appear at the end of the script:

id="BLOGGER_PHOTO_ID_5150314784676399554" /></a>

Now what I am going to do is to cut out the beginning part of the above to make it shorter, then insert the text "CAPTION" into the script just before the last </a>:

399554" />CAPTION</a>

This CAPTION can be any test you want and will do a demonstration below:

Paris, Eiffel Tower, double decker busCAPTION

Note that I have chosen to upload the photo above as "center" as I only use option like "left" when it is a small photo and I want the text in the paragraph to wrap around the text. Note that while the photo in centered, the caption, is not, and also CAPTION is a link to the larger image on the web containing nothing else but the photo. I suspect this can be overcome by choosing the "left" option when uploading the image, but anticipate problems, unless you do not have any text in the same paragraph as the image. I do not know as I have never done it before, and don't have any need to do it. Leave a comment if you have experience with this and share.

The above does not look nice, so to center the caption, all I need to do is to add the HTML tag <span style="text-align;"> at the beginning of the script and <span style="text-align:center;"> and </span> at the end.

Note also that the above is not my photo, but is the property of David who have kindly given permission to use his photo in a post in another blog: Paris, most popular tourist destination in the world, etc. Note that it is also polite to attribute the source of the photo you use when it is not yours, and normally I acknowledge it by adding a link to whatever website the photo owner wants it. This is done by adding a HTML hyperlink tag <a> and I will put the script I used to display the photo by David at Paris, most popular tourist destination in the world, etc. The script is inside the scroll box below, and it is your job to study it if you want to do something similar, and ask for help if you get into any difficulties.

<div style="text-align:center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_jizoPL28qCY/R3mYAlYUScI/AAAAAAAABEY/5GbJ3Y_dkfA/s1600-h/Paris+Eiffel+Tower+double+decker+bus+bratan.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://2.bp.blogspot.com/_jizoPL28qCY/R3mYAlYUScI/AAAAAAAABEY/5GbJ3Y_dkfA/s400/Paris+Eiffel+Tower+double+decker+bus+bratan.jpg" border="0" alt="Paris, Eiffel Tower, double decker bus"id="BLOGGER_PHOTO_ID_5150314784676399554" />Photo of Eiffel Tower and double Decker bus
<a href="http://www.flickr.com/photos/bratan/809334835/" target="_blank">by David</a></a></div>


This is not obvious, but there are actually 2 links in the caption, one to the enlarged photo on the web (the one above), and one to the source of the photo (the one below). You can try clicking on them if you want and observe what happen. This is done by typing the text "Photo of Eiffel Tower and double Decker red bus", then pressing the ENTER key to force a line break, then continue with the HTML hyperlink tag to link to the source of the photo (<a href=".....).

I have earlier done it a very slightly different way as you can see in the photos in the post Malaysian students in Paris. Note that except for the first photo, all the captions in all the photos is a single line, not in 2 different lines like above. There are again 2 links in a single line in the caption, one is at the beginning and one at the end. It is not obvious, but since the photo owner, didn't object, I will just leave it as a demonstration. To make the 2 links in separate lines, you must make a line break by pressing the ENTER key when typing out the caption. You can study the script for the above example to better understand. Hopefully, this is very clear as to what can be done.

<div style="text-align:center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_sEyw6txVACs/R3P7GgvBc-I/AAAAAAAAA_g/rqQu6zbZa7M/s1600-h/Arc+de+Triomphe+sbcar.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_sEyw6txVACs/R3P7GgvBc-I/AAAAAAAAA_g/rqQu6zbZa7M/s400/Arc+de+Triomphe+sbcar.jpg" border="0" alt="Arc de Triomphe"id="BLOGGER_PHOTO_ID_5148734888299557858" />Arc de Triomphe by <a href="http://www.flickr.com/photos/stephencarlile/487336403/" target="_blank">Stephen Carlile</a></a></div>


Advantages and disadvantages of inserting stuff direct into image script to add caption

The advantage of this method is, it is relatively easy to implement as compared to what follows, which require a bit more of HTML. The disadvantage is that the caption will always be a link, and you cannot have plain text or add a title which is possible in the second method.

As to having the photo aligned to the left, I have never tried adding captions to such images, but anticipate problems, so don't want to try. But if you have done it before, and willing to share your experience, I hope you will leave a comment with a link to the post where you have done it.

Use HTML tags for table

Another way to add caption using the HTML table tag <table>. You can see an example of that in the post Malaysian married couple's honeymoon in Greece. In the first method, you cannot avoid captions as links. In this case, you can see the caption are plain text, not link. The way to do it is to upload your image via the photo upload icon in the Blogger post editor, select the "center" option, then upload. In the script for the image at the top of the post, add some descriptive text in the alt="" attribute in between the 2 quotation marks "" (highly recommended), highlight all the script, right-click, choose "copy" (or press ctrl+C), scroll down to where you want the image to be, right-click and choose "paste" (or press ctrl+V). This method will be a bit more complicated if you are not familiar with HTML, but let us press ahead and if you concentrate, you can do it and learn more HTML in the process. Note: it is important you do not press the ENTER key at any point while typing the HTML for the table or you will find large empty space above your photo. If you have difficulties in doing this, refer to Easy way to avoid large blank space above table when using the <table> HTML tag (click BACK button to get back to this page).

Type this at the beginning of the image script:

<table style="text-align:center;"><tr><td>

I will explain what all the gibberish is all about so you know what we are doing. <table is to tell the web browser we want to display a table. style="text-align:center;"> is to tell web browser we want things to be centered. <tr> is to indicate the beginning of a table row. <td> stand for table data. In this case, the table data is the script to display the image. Practically all HTML tags occurs in pairs, opening tags like those above, and closing tags. Now we need to add the closing tag at the end of the image script. At the end of the image script, type

</td></tr><tr><td>

</td> closes the table data tag, </tr> closes the table row tag, <tr> tells the web browser we are beginning a new table row and <td> tells the web browser we are starting a new table data, in this case, the caption. Just type the caption you want, then end it with
</td></tr></table>, the corresponding closing tags. For your better understanding, I will put the script to display one of the photos in the post Malaysian married couple's honeymoon in Greece below:

<table style="text-align:center;"><tr><td><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_sEyw6txVACs/R1-OeIxatfI/AAAAAAAAA9Y/bqjOd6nFG3Q/s1600-h/C-G2+athens.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://4.bp.blogspot.com/_sEyw6txVACs/R1-OeIxatfI/AAAAAAAAA9Y/bqjOd6nFG3Q/s400/C-G2+athens.jpg" border="0" alt="Athens, Greece"id="BLOGGER_PHOTO_ID_5142985947882370546" /></a></td></tr><tr><td>Athens: Photo courtesy of Blogger Employee</td></tr></table>


Instead of just plain text, you can also include link, for example, link to the source of the photo you took from, or to the website the photo owner wants to be linked to. For an example, have a look at Kuala Lumpur Terry Fox run. Look at the second photo in the post, the one of the National Museum of Malaysia. It has both a title and a caption, and within the caption, there is a link to the source of the photo (actually, by now, I have my own photo which I can use, but didn't at that time). Note that the photo was used with permission of the owner.

To have both title, photo, caption, you must have a 3 rows table. This is a long post, and I am a bit tired by now and have other things to do, so just going to put the script to display the photo of the National Museum of Malaysia below in a scroll box for you to examine, analyse and learn:

<table style="text-align:center;"><tr><td>Muzium Negara Malaysia (National Museum of Malaysia)</td></tr><tr><td><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_sEyw6txVACs/RxMvhsUPT3I/AAAAAAAAA0g/e2UV_RNU9vU/s1600-h/muzium+negara+superciliousness.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://3.bp.blogspot.com/_sEyw6txVACs/RxMvhsUPT3I/AAAAAAAAA0g/e2UV_RNU9vU/s400/muzium+negara+superciliousness.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5121489457128623986" /></a></td></tr><tr><td>Photo by <a href="http://www.flickr.com/photos/superciliousness/125144914/" target="_blank">superciliousness</a> under Creative Commons license</td></tr></table>


Acknowledgement: I got the idea of using <table> from Chuck or Nitecrutz of The real Blogger status but am now putting it in hopefully easily digestible form. I am going to add some HTML you can just copy-paste and then just edit to get what you want:

(later, got to finish something first)

You can also add a border to the table if you want. Just add an extra attribute border="1" to the HTML tag for table. If you want a thicker border, just increase the number from more than 1, the bigger the number, the thicker the border. I did this for one post, and found out that it caused problems. The table with the photo extend into the right sidebar, and in Internet Explorer 6, the right sidebar was pushed to the bottom of the post. I can't remember if I corrected the problem or left it as it is, but if I find it later, I will post a link. In the meantime, I need to finish this post and move on to other things.

Advantages of using table to add title and caption to photo

Advantages of using table is you can add both title and caption, the the capti0n can be just plain text or if you wish, a combination of text and link. Advantage is, it is slightly more complicated if you are not familiar with HTML and involves more work.

Update 30 January 2008: I have started using a different method and waiting for time to publish instructions. If interested, bookmark blog or subscribe in the email subscription box in the left sidebar.

Peter Chen's nice graphic signature

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics