Test scroll box

Change Text Size<br/>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'"><span style="font-size: xx-small;">+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1em'"><span style="font-size: x-small;">+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.5em'"><span style="font-size: small;">+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2em'"><span style="font-size: large;">+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2.5em'"><span style="font-size: x-large;">+</span></a>

Test testarea tag

Text inside here<br />second row<br />third row<br />A long sentence: This text area is surrounded by the <textarea< tag and let's see what happens when I type in here a long sentence plus blank lines below:<br /><br /><br /><br />

Blogger Tips and Tricks Youtube video channel

Am going to experiment with Youtube video channel, creating one for my main blog, Blogger Tips and Tricks and starting with a simple screen capture of what happens to a blog with a fixed width template when the screen resolution (width) changes. The video below shows a horizontal scroll bar when the screen width is below 1024px but the horizontal scroll bar disappear when the screen width is wider than 1024px. This video helps explain my post on optimizing template for majority visitors at Blogger Tips and Tricks is now 4 column and the earlier Blogger for Dummies is now 3 column:

Animated image in post title

Test animated image in post title. The little animated image in the title above is a downsized version of this animated image below:

Testing image for blogger

Hey Attiya, look at the pictures below, especially the 2 side by side. Do you see any difference? I think all you need to do is to crop the image smaller especially the space below the image so the bottom of the image will be roughly inline with the bottom of the text.

All I needed was a sweater and pants I don't mind being wrong in cases like that

How to add photo to post title

Want to know how to add your photo to post title? Contact me via my contact form

Testing hyperlink to open in new window without target="_blank"

Blogger Tips and Tricks

Let's see if clicking the above opens target in new tab/window

Testing SEO monitor

Test Google Docs Spreadsheet Chart Behavior

Let us see what happen to the chart as we resize the chart made with Google Docs chart:

(result of test, as chart is resized in Google Docs, the chart below similarly get resized:

Test Tweetizen Tweeter embed code

Test Cover It Live iFrame - Dr. Porntip at Teoh Beng Hock inquest

Below is an example of an event that had occurred in 18^th August 2010 meaning it already is in the past and it is no longer LIVE. Had you chanced upon the iFrame below prior to or in the midst of the inquest on August 18, you will not see the whole sequence of happenings but only as it unfolds in real time. This test post is specially created for :

Test centering post title for reader

I think I have already tested that but can't find the post, so testing again. This is in response to a commentator at Customization - how to center post title

Test make Amazon banner open in new window successful

Amazon uses iFrame for their affiliate banners this test is the same as testing how to make iFrame open in new window. Try clicking on the banner below to confirm for yourself that the banner does really open in new window:



and if you want to know to do do it, refer to this post: How to make iFrame open in new window and you will get very clear "HTML for Dummies" kind of easy to understand kind of instructions.

Test img tag and Blogger.com image hosting

and

Test adding caption for photo aligned left or right

Damansara Uptown 1 tower with Multi-national companies as tenants, now lets try to make this caption very very long and see what happens.

Damansara Uptown Multistorey Carpark

This photo first uploaded using Blogger updated post editor in COMPOSE mode, then clicked on photo in post editor to chose align-left then add caption.

Damansara Uptown Multi-storey Carpark parking rates, lets try making this caption very long and see what Blogger does. Now try uploading photo with cursor (insertion point) here: 

Now to try uploading second photo using direct insertion at actual location :


Result, Photo of Uptown 1 plaque listing Multi-national companies as tenants did not end up here but ended up at the top of the post instead.

Test image upload with old and new updated post editor

Original photo uploaded via old post editor photo upload icon:

====================================
Test uploading and manipulating image uploads

The codes for below picture uploaded with old Blogger post editor

Lewis feeding little brother Lincoln

is as follows:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCbbScaRJ5IYtRxgNt9sOaovYVAZDBJmvennKcZDoro1IPedXbyrzn4vp3I7sMxMDNjNYD9fQat8GTL9I0ta8uQclqnOsgdOcAJLeMf0crewzggz1wqATU2xL3zNpPydExc_2hErKqBHU/s1600/IMG_9855.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCbbScaRJ5IYtRxgNt9sOaovYVAZDBJmvennKcZDoro1IPedXbyrzn4vp3I7sMxMDNjNYD9fQat8GTL9I0ta8uQclqnOsgdOcAJLeMf0crewzggz1wqATU2xL3zNpPydExc_2hErKqBHU/s400/IMG_9855.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5523708324625216450" /></a>

Let's see if the codes get changed on changing the universal setting to the new updated Blogger post editor:

Result of test, on switching to the new updated post editor and switching between COMPOSE mode and EDIT HTML mode, the code for displaying the photo changed to

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCbbScaRJ5IYtRxgNt9sOaovYVAZDBJmvennKcZDoro1IPedXbyrzn4vp3I7sMxMDNjNYD9fQat8GTL9I0ta8uQclqnOsgdOcAJLeMf0crewzggz1wqATU2xL3zNpPydExc_2hErKqBHU/s1600/IMG_9855.JPG" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5523708324625216450" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCbbScaRJ5IYtRxgNt9sOaovYVAZDBJmvennKcZDoro1IPedXbyrzn4vp3I7sMxMDNjNYD9fQat8GTL9I0ta8uQclqnOsgdOcAJLeMf0crewzggz1wqATU2xL3zNpPydExc_2hErKqBHU/s400/IMG_9855.JPG" style="display: block; height: 300px; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center; width: 400px;" /></a>

test background image for post title

Test substituting span for div in the post tile for background image

test background image for post title

Test substitute span for div

test background image for post title

Test substitute span for div

test background image for post title

The script:

<div style="background-image:url('http://goo.gl/Ob6X');">test background image for post title</div>

BTW original image url is very long
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4C2wh_60JmnFcuUAHHu5hqONxab9b0Ir-YIcb2y5rFYO9Qw3DRPj4nFfU1EVXlBZJ6sIa84rmuSAtap07D7PoxvBAND3HWFdH9qIo_gUcM75kgtcaHOPgNRl_-JfgwCZ7GCXAuEuzvptU/s1600/Blogger+Tips+and+Tricks+4.jpg

but shortened by Google Short URL service to
http://goo.gl/Ob6X

which then enabled me to keep the number of characters below 150 characters including space.

This post was inspired by a blogger's comment in How to change post title background color:

"thanx for sharing this..

but instead of color..how about to add image for background?"

Test if Blogger.com post editor title field accepts <img> tag

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4C2wh_60JmnFcuUAHHu5hqONxab9b0Ir-YIcb2y5rFYO9Qw3DRPj4nFfU1EVXlBZJ6sIa84rmuSAtap07D7PoxvBAND3HWFdH9qIo_gUcM75kgtcaHOPgNRl_-JfgwCZ7GCXAuEuzvptU/s1600/Blogger+Tips+and+Tricks+4.jpg

Test successful, now to get image resized to 430px width

Test individual post title background

If test works out only this post will have a purple background for its post title.

The script:

<div style="background-color:purple;">Test individual post title background</div>

Test post title aligned center

The script:

<div style="text-align:center;">Test post title aligned center</div>

After successful test to right align post title, very confident above post title will be centered despite the default for post title for this blog being left aligned.

Test post title align left

The script:

<div style="text-align:right;">Test post title align left</div>

Let's see if post title will be aligned right

Test PHP script to block IP address

According to Blog Technics: Script To Block IP Addresses on Blogspot, all one need to do is to upload a PHP script to a file host which allows PHP files, then add another script to just before </head> in the template (or add them to a HTML/Javascript gadget).

This was exactly what was done to Medical Information as a test to ban myself (IP Address 110.159.247.42) from that blog.

Let's go through what was done for the test. The following script:

<?php
/*
Blogspot IP address blocker. Provided by www.blogtechnics.info
*/
$iplist = array("IP Address 1","IP Address 2","IP Address 3"); // the list of banned IPs

$ip = getenv("REMOTE_ADDR"); // get the visitors IP address
// echo "$ip";
$found = false;
foreach ($iplist as $value) { // scan the list
if (strpos($ip, $value) === 0){
$found = true;
}
}

if ($found == true) {
echo "top.location = \"error.html\";\n"; // page to divert to
}

?>

was replaced with

<?php
/*
Blogspot IP address blocker. Provided by www.blogtechnics.info
*/
$iplist = array("110.159.247.42"); // the list of banned IPs

$ip = getenv("REMOTE_ADDR"); // get the visitors IP address
// echo "$ip";
$found = false;
foreach ($iplist as $value) { // scan the list
if (strpos($ip, $value) === 0){
$found = true;
}
}

if ($found == true) {
echo "top.location = \"error.html\";\n"; // page to divert to
}

?>

The above in a Notepad file (ASCII) was saved with a .php extension and uploaded to www.110mb.com/. The URL of the uploaded file is

http://bloggerfordummies.110mb.com/BlogspotIPblocker.php

Accordingly I am supposed to substitute BlogspotIPblocker.php in the code below:

<SCRIPT LANGUAGE='javascript' SRC='BlogspotIPblocker.php' TYPE='text/javascript'>
</SCRIPT>

with that URL whereupon the above become:

<SCRIPT LANGUAGE='javascript' SRC='http://bloggerfordummies.110mb.com/BlogspotIPblocker.php' TYPE='text/javascript'>
</SCRIPT>

and was copy-pasted to just before </head> in the template. The portion in the template just before </head> in the template thus become

<SCRIPT LANGUAGE='javascript' SRC='http://bloggerfordummies.110mb.com/BlogspotIPblocker.php' TYPE='text/javascript'>
</SCRIPT>
</head>

Test centering large image

Test centering tabs for blogger

• 



• 




• 



• 




• 

Codes for the above:

<center><div id="newnavbar"> <ul>


<center><li><a href="http://thedirtroaddiva.blogspot.com"><img src="http://lh3.ggpht.com/_nhljcQCSg9s/TJFRlBlR38I/AAAAAAAAXFI/v_d2beci3lE/s800/homesmall.jpg" /></a></li></center>

<center><li><a href="http://thedirtroaddiva.blogspot.com/p/about-me.html"><img src="http://lh4.ggpht.com/_nhljcQCSg9s/TJFRjH5qC7I/AAAAAAAAXFA/cQVYdGcvrsk/s800/absmall.jpg" /></a></li></center>


<center><li><a href="http://thedirtroaddiva.blogspot.com/p/shop.html"><img src="http://lh6.ggpht.com/_nhljcQCSg9s/TJFRmaYPTlI/AAAAAAAAXFY/GVHKTN8ForE/s800/shopsmal.jpg" /></a></li></center>

<center><li><a href="http://thedirtroaddiva.blogspot.com/p/tutorials.html"><img src="http://lh5.ggpht.com/_nhljcQCSg9s/TJFRjK3vL2I/AAAAAAAAXE8/ds_fd2mxowE/s800/butsmal.jpg" /></a></li></center>


<center><li><a href="http://thedirtroaddiva.blogspot.com/p/parties.html"><img src="http://lh4.ggpht.com/_nhljcQCSg9s/TJFRlu2wAuI/AAAAAAAAXFQ/As2IgZ_YE3s/s800/partbut.jpg" /></a></li></center>

</ul></div></center>

Test making images uploaded via Blogger unclickable

The images below are for verifying that the method to make images uploaded via Blogger not clickable and you may try clicking the displayed images that the top 2 when clicked will lead to an enlarged image while the last 2 are not clickable thus verifying the method described works:

===============================

Test hyperlink to spot in same page

click here to go there

Here is some text:
AdSense Facts & Fiction Part IV: Program policies
Tuesday, July 06, 2010 | 12:10:00 PM
Labels: Facts and Fiction, Program Policies
Fiction: AdSense disables accounts and issues warnings at random.

Fact: We rely upon a detailed set of guidelines when looking at policy violations, and these policies are published in our Help Center. Our intent is to keep Google's content and search networks safe and clean for our advertisers, users and publishers. We seek to be as transparent and consistent with our decision making.

Part of our job of monitoring the AdSense network involves working with publishers to identify and address potential issues. We understand that there are a lot of policies to take into account, and so for minor policy violations our first step will be to issue a warning. The reasons a publisher might receive a warning will vary, but in general they tend to be for violations that can be fixed fairly easily. Examples of these violations range from deceptively labeling ads “Today’s hot deals” to having a minimal amount of adult-content comment spam in a forum. Publishers, after receiving a warning, are given three days to fix their violations. If changes are not made in that time, ad serving will be disabled to the violating site.

There are some situations when we would need to disable ad serving to a site without first sending a warning. We usually reserve this action for egregious violations like adult content, copyright infringement, as well as cases of extreme violence and gore. We may also disable ads to a site when we find a violation that we’ve already contacted a publisher about in the past.

The final and most severe action that our teams can take is to close down an account completely. This normally only happens when we find that a publisher’s entire network consists of violating sites or for repeat policy offenders. If you have received a policy notification from the AdSense team, please visit this help center entry for additional information.

We want to point out that notifications that result from the previously mentioned policy violations are different from notifications sent because of issues with invalid click activity, which are monitored by Google's Ad Traffic Quality Team. Invalid click activity consists of any clicks or impressions that may artificially inflate an advertiser's costs or a publisher's earnings, and for which we decide not to charge the advertiser. For more information about invalid clicks and impressions, please refer to this page, which includes a link to our FAQ page for accounts disabled due to invalid activity.

Lastly, we highly recommend reviewing these guidelines to help avoid policy violations, and to help keep your AdSense account in good standing.

Posted by Andres Schabelman - AdSense Policy team

You should land here if id works

Here are somemore text:

Updates to the program policies page
Tuesday, April 28, 2009 | 11:25:00 AM
Labels: Program Policies
If you've checked the AdSense program policies page today, you've probably noticed that we've just made a few small updates. We'd like to take a moment to clarify what's been changed.

The first thing you might notice when you visit the program policies page is that we've revamped the look. Based on your feedback, we've reorganized the content and updated the layout to make it easier to read and navigate. We've highlighted some key information for each policy, and added expandable 'Learn more' sections that you can click for more detailed information. Also, we've grouped together policies that are specific to only AdSense for content or AdSense for search.

There are also a few updates to the content of the program policies, which we've outlined below:
Google brand violations: This policy has always existed in our Terms and Conditions, but we've now brought it directly to the 'Ad Placement' section of the program policies page so that it's easier to find. According to this policy, we don't allow ads or search boxes to be placed on pages which misuse Google logos, trademarks, or other brand features in the page content or URL, and which could mislead users into thinking the page is associated with Google.

Deceptive implementations: We've clarified this policy a bit in the 'Encouraging Clicks' section of the program policies - ads may not be formatted in a way that makes them indistinguishable from other content on the page where they appear. This includes, for instance, formatting content to mimic ads, aligning images with ads, and placing ads under a misleading heading.

Ad placement in emails and email programs: This updated policy clarifies that Google ads , search boxes, and search results may not be placed in emails, as well as alongside emails.

Other Google products' policies: With this new policy, publishers aren't permitted to place ads, search boxes, or search results on, within, or alongside other Google products in a way that violates the policies of that other product or service. For instance, this would include placing ads on sites which allow users to download YouTube videos, which isn't permitted by the YouTube Terms of Service.
Finally, we've added more information to the 'Webmaster Guidelines' section and created a new 'Traffic Sources' section. Whether you regularly review the program policies or haven't reviewed them since you signed up for AdSense, we encourage you to visit the program policies page and check out the updates.

(Post has been updated to provide additional clarification.)

Posted by Winnie Creason - AdSense Publisher Support

Land here if id attribute don't work

Test embed Youtube Malaysians4change video

Test Macmillan Dictionary BuzzWord

Test Paypal shopping cart HTML code

Testing this Paypal code:

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="G6ZUFHJ9ESHQJ">
<input type="image" src="https://www.paypal.com/en_AU/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypal.com/en_AU/i/scr/pixel.gif" width="1" height="1">
</form>

and below you should see the Paypal Shopping Cart button:

Gmail new priority Inbox

test scroll box horizontal scroll bar

For inserting an equation to a posting in a simple way, we need to make sure that LaTeX code can be rendered in the blog. Please follow the steps bellow:

- Copy (to clipboard) the following script using block and ctrl-c

 
<script src="http://www.watchmath.com/cgi-bin/mathtex3.js" type="text/javascript"></script>
<script type="text/javascript">
replaceMath( document.body );</script>
 

- Add a HTML/Script

Testing a blogger's affiliate link

Hi XXXX,

I have copy-pasted the content of your letter into Blogger post editor (in the Edit HTML mode:

Hi Peter!
Its the code for the History channel. I will try to paste it below: it is a URL

Get Planet Earth complete series on DVD or Blu-ray - new low price!

How do I insert it on my Page? WHERE do I insert it?

Thanks

Now let me add a target="_blank" attribute to the hyperlink tag you gave me. Click on it and see the difference:

Hi Peter!
Its the code for the History channel. I will try to paste it below: it is a URL

Get Planet Earth complete series on DVD or Blu-ray - new low price!

How do I insert it on my Page? WHERE do I insert it?

Thanks

Now let me change the anchor text:

Hi Peter!
Its the code for the History channel. I will try to paste it below: it is a URL

Click here to get Planet Earth complete series on DVD or Blu-ray at amazing low price

How do I insert it on my Page? WHERE do I insert it?

Thanks

A

Test image border for updated post editor

Test Youtube video autoplay (Angklung music)

This is the original embed code from Youtube for the above video:

<object width="400" height="324"><param name="movie" value="http://www.youtube.com/v/lniVx_pFM_A&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/lniVx_pFM_A&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="400" height="324"></embed></object>

Below is the edited Youtube video with &autoplay=1 (highlighted in red) appended to the end of the source URL to make the video autoplay:

<object width="400" height="324"><param name="movie" value="http://www.youtube.com/v/lniVx_pFM_A&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/lniVx_pFM_A&hl=en&fs=1&autoplay=1
" type="application/x-shockwave-flash" allowfullscreen="true" width="400" height="324"></embed></object>

Test removing border from image

The photo displayed below uses codes sent to me by a blogger and as you can see, there is a border:




Compare with the photo below and you can see that the border has been removed:




The border was removed by adding this inline CSS style="border:none;" immediately after the img tag. For further details, see How to remove border in images uploaded by Blogger.com

Testing images side by side

Codes as given by blogger:



With HTML non-breaking space in between

  

Test Podcast

Testing sub-domain link from commentator

Below is the hyperlink of a Blogger.com sub-domain taken from comments over at How to create sub-domain with Custom Domain using standard HTML hyperlink tag <a>
. Try clicking on it and see what happen:

Open in new window:
Everything Is There to See

Open in same window
Everything Is There to See

testing javascript

Test Blogger Tips and Tricks Forum

The Enviroman is Awesome Thread

Test play list

Test individual font style for specific post title

Let's see if the post title is itallic?

Test successful. Blogger allow CSS in the post title field. The above individualized post title was created by putting the following into the post title field:

<div style="font-style:italic; color:red;">Test font style for post title</div>

A second test proved that one can also use <span> too like below:

<span style="font-style:italic; color:red;">Test font style for post title</span>

and even nest span within span (or div) like the above title which is now two colors using the following:

<span style="font-style:italic; color:red;">Test <span style="color:green;">individual&kt;/span> font style for specific post title</span>

However, test revealed there probably is a limit on the number of characters one can put in the post title field to make it really multi-color.

Test profile photo for post title

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPf1NWuRricYl-AtZx13G5DDr6Pk0Yn8c4s7bPdoK-78u5oQu9SBDcPvPfgtPYK1vW3toUh28vfmDrjXFwqv7XVUFf-Wbl87hYl2ihoVN_dcr52ySsgld5iRE2U-EMcP1Kr3gWKQaeI9-P/s1600/_DSC5044.jpg" style="border:none;"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 233px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPf1NWuRricYl-AtZx13G5DDr6Pk0Yn8c4s7bPdoK-78u5oQu9SBDcPvPfgtPYK1vW3toUh28vfmDrjXFwqv7XVUFf-Wbl87hYl2ihoVN_dcr52ySsgld5iRE2U-EMcP1Kr3gWKQaeI9-P/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXaOydhZoN32Y3R0hA3c96eGGfR94_vKoalP0LS1rBTq2Y5vOQerKpRnA14AODuwCAPgnnzvbDyM71tTL28n-hUAdYlxItDrPElFbWsGm4YLs0tHBAFrr6pxEJc4opYU7bbR4F3QgU-tg/s1600-h/kimchi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="border:none;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXaOydhZoN32Y3R0hA3c96eGGfR94_vKoalP0LS1rBTq2Y5vOQerKpRnA14AODuwCAPgnnzvbDyM71tTL28n-hUAdYlxItDrPElFbWsGm4YLs0tHBAFrr6pxEJc4opYU7bbR4F3QgU-tg/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>

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:

Testing marquee with scrolling pictures

After some initial failed testing, finally succeeded to incorporate horizontal scrolling pictures at Testing Blogger xml templates.

The script used to display those horizontal scrolling graphics is as follows:

<iframe src=" http://site.personnel.free.fr/scroller.htm" height="158" width="100%" scrolling="No" marginheight="0" marginwidth="0" frameborder="0"></iframe>

To do this, it is advisable to first backup whatever page elements (gadgets) that can be backed up and also backup the template so that you can return if anything goes wrong.

Then go to LAYOUT > EDIT HTML to open the template editor and first tick
[ x ] expand widget templates
and search for (make this task easier by keyboard shortcut ctrl+F to find the code):

<div id='header-wrapper'>

and immediately below that line add the iFrame:

<iframe src=" http://site.personnel.free.fr/scroller.htm" height="158" width="100%" scrolling="No" marginheight="0" marginwidth="0" frameborder="0"></iframe>

and thus finally end up with

<div id='header-wrapper'>
<iframe src=" http://site.personnel.free.fr/scroller.htm" height="158" width="100%" scrolling="No" marginheight="0" marginwidth="0" frameborder="0"></iframe>

Preview and if happy, save the template.

Test embed Blogger video upload

The codes that were used to embed the video below which was uploaded via Blogger's video upload (filmstrip) icon by a blogger who contacted me for assistance. The codes were obtained by view source:



first video:


second video:

How to allow comments for pages

Test to see if "to" and "for" appears in Permalinnk (individual post URL) of this post or not.

Result:
http://testing-blogger-beta.blogspot.com/2010/05/how-to-allow-comments-for-pages.html

Both were included in URL

Test Blogger uploaded video script

first video:


second video:

Test Windows Live Writer as post editor

Test displaying images

 

 

 

 

 

Photo embedded but unfortunately no provision for caption

Test table

Row 1 Column 1	Row 1 Column 2
Row 2 Column 1	Row 2 Column 2

Table inserted easily, no hassle. Let’s see what happens when published. Will there be lots of white space?

 

Test uploading video

Tried to upload to Soapbox from Live Writer. Result – no permission to upload from Live Writer

Test embedding mimio.com in an iFrame

A Blogger says embedding mimio.com in an iFrame give rise to problems when viewed with IE7 or IE8 (see How to embed a webpage in a blog post with iFrame

IMPORTANT NOTE: I will be writing to mimio.com to see if they object of having their website embedded here in an iFrame or not as there may be copyright issues. So do not be surprised to see the site below either removed or replaced by another website which is my own and which does not involve copyright issues. The result of the test will be given below the 2 iFrames after publishing

Using URL http://mimio.com/


Using URL http://www.mimio.com/global/ap/index.asp


RESULT: I did test viewing the above with IE8 after publishing and as mentioned by the blogger, that website for some reason (probably something to do with Adobe Flash), was not displayed properly. I append below a screenshot as if mimio.com object, the above will be edited to embed other webpage that probably will be my own:

Test embedding Wikipedia "web server" page in iFrame

Below is embedded Wikipedia's post on web server. When you embed a webpage into an iFrame, you essentially are putting their content into your own webpage. This may involve legal issues. I vaguely remembered you can use Wikipedia's content if you give credit by acknowledging it with a link so I will now go over to Wikipedia Questions to check:

Testing multiple image upload

This is in response to a blogger's problem with uploading more the 5 photos:

blogger: "I see that there is a limit of 5 pictures for upload. I found that if you upload 5 then change your mind about one or two of the images, you cannot then upload again to replace those you have deleted."

Me: "Limit of 5 photos, yes, but it is only for each upload. You can always click the photo upload icon to upload more up to 5 at a time."

Blogger: "I did click the 'upload photo' icon but it refused to open the upload window again"