Friday, June 25, 2010

Test profile photo for post title





[mugshot+smiling+and+bright.jpg]

[mugshot+smiling+and+bright.jpg]

Thursday, June 17, 2010

Test remove border image old post editor

Testing removing border for a blogger for image uploaded via the old Blogger post editor using instructions from Remove image border for images uploaded via Blogger updated post editor:



HTML to display image above:

Update: As a result of testing, I have found out that the inline CSS style="border:none;" must be placed before src="photo URL" and not after, preferably immediately after img. The HTML code below will result in image with a border. The image from the photo above is not displaying a border because style="border:none;" was moved. For more details, refer to remove border from photos uploaded via Blogger photo upload icon.


<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_VZIbdkIsWCQ/TBJNwBaDA4I/AAAAAAAAAFM/5-FuR03Csq0/s1600/_DSC5044.jpg" style="border:none;"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 233px;" src="http://4.bp.blogspot.com/_VZIbdkIsWCQ/TBJNwBaDA4I/AAAAAAAAAFM/5-FuR03Csq0/s400/_DSC5044.jpg" alt="" id="BLOGGER_PHOTO_ID_5481529183870059394" style="border:none;" border="0" /></a>





HTML to display the photo below is take from How to remove border from images uploaded via the new updated Blogger post editor:





<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/_jizoPL28qCY/Suj7U1LF3rI/AAAAAAAADL0/ZvBqjo6s6eg/s1600-h/kimchi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="border:none;" border="0" src="http://3.bp.blogspot.com/_jizoPL28qCY/Suj7U1LF3rI/AAAAAAAADL0/ZvBqjo6s6eg/s320/kimchi.jpg" /></a>
</div>





The HTML to display the image below is taken from How to remove border of images uploaded via old Blogger post editor (with HTML below the photo:



HTML in the scroll box below:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/x/blogger/1313/787/1600/396073/Sibu%20Island%20-%20Johore%20800x400px.jpg"><img style="border:none;" "display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/x/blogger/1313/787/400/161663/Sibu%20Island%20-%20Johore%20800x400px.jpg" border="0" alt="Sibu Island, Johore 800x400px" /></a>

Saturday, June 05, 2010

Test post title color font type and size

This post is to test if inline CSS can be activated in post title to control the font type, color and size.

Below is what I typed into the post title box:
<span style="color:red; font-family:Reenie Beanie; font-size:140%">Test post title color font type and size</span>

and as you can see from the post title of this post is different from the other posts in this blog. The styling of this post title is controlled by the inline CSS

Note that while font-color and font-size doesn't require extra word, to display the Reenie Beanie font, some code to enable @font-face must be added to the CSS part of the template which has been tested at Test @font-face and inline CSS

Test @font-face & inline CSS

Let us see if we will get a different font in the paragraph below:

This is a test paragraph. The lamb jumped over the moon is a favorite nursery rhyme


Test successful as you can see the line of text above is using the Reenie Beanie font.

The test consist of first putting this code immediately after the <head> tag in the template. The above paragraph was displayed using this Inline CSS:

<p style="font-family:Reenie Beanie; font-size:140%;">This is a test paragraph. The lamb jumped over the moon is a favorite nursery rhyme</p>

Since I cannot find "font-family" in the template itself, that set me thinking perhaps instead of font-family in the inline CSS, perhaps I can get away with just writing font:

Below I will test that:

This is a test paragraph. The lamb jumped over the moon is a favorite nursery rhyme


The above was displayed using the following code:

<p style="font:Reenie Beanie; font-size:140%;">
This is a test paragraph. The lamb jumped over the moon is a favorite nursery rhyme</p>

As you can see, the test is a failure. Just font:Reenie Beanie will not do. It has to be font-family:Reenie Beanie

πολιτική φιλοσοφία

Now after publishing this post with the post title "politikí̱ filosofía" which is Romanized Greek (greek word using Roman abc alphabets) I will edit the post title to Greek letters πολιτική φιλοσοφία

OK after publication, the permalink (post URL) of this post is
http://testing-blogger-beta.blogspot.com/2010/06/politiki-filosofia.html
unlike when Greek letters πολιτική φιλοσοφία are used for the post title which caused the post title to be the SEO-unfriendly
Greek letters πολιτική φιλοσοφία

OK now I will edit this post and replace with the post title politikí̱ filosofía with Greek letters πολιτική φιλοσοφία and we will then check to reconfirm that there will be no change to the post title which remained the SEO friendly post title like
http://testing-blogger-beta.blogspot.com/2010/06/politiki-filosofia.html

Conclusion

Well folks, testing completed and successful. By first using Latin (Roman) alphabets like "politikí̱ filosofía, publishing, then edit the post title to using Greek alphabets like πολιτική φιλοσοφία, one can have the Greek alphabets in the post title and still get SEO friendly post title.

πολιτική φιλοσοφία

Testing permalink (post URL) when post title are Greek characters. This post is entitled "political philosophy" in Greek. Here goes: