Testing Blogger in Draft

Tuesday, February 20, 2007

Testing blogging from Windows Live Writer

Someone asked for an WYSIWYG (What You See Is What You Get) authoring tool, and I responded asking why should one need a WYSISYG authoring as the COMPOSE mode is WYSIWYG (well, almost). However, Brett of Maven Mapper's Information suggested Windows Live Writer. I use an ADSL always on service provider, and perhaps for me, there is no need for such a tool, but now I can see the need for one who is using dial-up and/or time based service provider. Also, if this works out, it will tie in nicely with the method I suggested for preparing post to be published in the future. See How to prepare a post to be published in the future. So I am now testing to see how it works out. I am going to try putting in some images:

Well, looks like it inserts an <img> tag and the source of the picture is a path to the file in my computer. Now, when I publish this, I wonder what is going to happen.

UPDATE: Well, the photo just appeared a a blank square. Perhaps that was because I want to try to make the picture a hyperlink to Guide to Malaysia for reasons I will explain later. For for that, I need to be in the EDIT HTML mode. I post below the actual screenshot of Windows Live Writer as I tried to prepare the above post:

I am going to try to do the same thing in the next post, but this time use the WYSIWYG mode. I have done it and you can see the result at Testing blogging from Windows Live Writer again, but this time using WYSISYG mode

Saturday, February 17, 2007

Toggle Show/Hide navbar Hack

Derya commented in one of my posts, alerting me to a hack that will enable you to put a script in a Page Element which will display a text

which when clicked upon will hide the navbar if it is displayed, and display the navbar if it is hacked. As I don't want to execute the hack in this blog, I tested it in the blog Computer and Internet Articles. The toggle switch (which is the text you see above) is placed at the bottom of the right sidebar, below my profile. Click on it and observe what happens to the navbar.

You can get Derya's hack here How to hide the navbar? if you are interested in the hack. It is very easy to implement. All you have to do is to get to the template editor, look for the <head> tag, then paste the script he has given. When I implemented the hack, I only made some small modification to the hack. I put a comment (part of a program that does nothing but document a program to make it easy to follow and understand). I put the comment
 followed by the script, then at the end of the script, I marked it with the comment


For easier understanding, I put the script below:

<head>


<script type="text/javascript">
var showHeader=false;
function ShowHideNav()
{
showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{
nav.style.visibility="visible";
nav.style.display="block";
}
else
{
nav.style.visibility="hidden";
nav.style.display="none";
}
}
</script>
<style type="text/css">
#navbar-iframe {
visibility: hidden;
display: none;
}
</style>

The part in black (<head>) is what is already in the template, and the part in red are what is added to the template.

You will then have to add this to a page element in a part of the blog that you choose:

<span style="cursor:pointer;" onclick="ShowHideNav();">
Show/Hide Navigation
</span>

Saturday, February 10, 2007

How to get a template for a blog with only a main column and no sidebar

Assuming that you are using Douglas Bowman Minima two column template, sign into Dashboard, choose the blog and click Layout, then click the TEMPLATE > EDIT HTML tabs to open the template editor window.

First, backup your template by clicking DOWNLOAD FULL TEMPLATE and save it in a suitable folder with a suitable file name.

Then look for the following block of codes:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Change it to

#header-wrapper {
width:750px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Look further down for this block of codes

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Change it to

#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Look further down the template for this block of codes:

#main-wrapper {
width: 410px;
float: left;

Change it to

#main-wrapper {
width: 750px;
float: left;

Look further down the template for this block of codes:

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Delete it.

Preview the template, and if satisfied, save the template

Friday, February 09, 2007

Testing a Wimpy player for a reader

A reader of my blogs complained that the script generated by the software he purchased for a MP3 player is being rejected by the HTML/Javascript Page Element of the Layout. The script he gave was an URL, so it can't be placed in a HTML/Page Element unless it is written as a hyperlink.

Testing if writting it into this post will do the trick. Why I am putting below the scroll box is the HTML

<a href="http://www.thefunkykind.com/myWimpy.html" target="_blank">My Wimpy Player</a>

Here goes:
My Wimpy Player

Also, testing if putting the hyperlink into a HTML/Javascrip Page Element will work. Look for "My Wimpy Player" at the bottom of the left sidebar. Try clicking on the links and see what you get.

Monday, February 05, 2007

Testing embedding video in Blogger

A reader of my blogs posted a question in my post Migration to New Blogger (formerly beta) about uploading vidoe to his blog. My answer to him is he will have to host his video with a host like http://www.youtube.com/ and then copy the given script to embed into a post.

I decided to test embedding of video myself to confirm my answer to his question. I made a search for environmental videos (my first blog is Enviroman Says), found a video related to the environment. I copied the script for embedding (not the URL, see screenshot), and tried to embed the video into a post, but found the video window to be too wide. This was the original script:

The width of the main column of this blog is 400px, but for the video, it was width="425" height="350". So what I did was to open a picture (any picture) with Irfanview, resize the image to 425x350 (Preserve aspect ratio radio button unchecked, the picture will of course become distorted), then check the radio button to preserve the aspect ratio and resize the width to 395. The height automatically changed to 325, so I changed the height and width of the video to width="395" height="325". (Note: Instead of opening any picture, you can also create an empty image 425x350, then with the preserve aspect ratio ticked, change the width to the width {or slightly less} of your main column , then resize). For those not familiar with how to find the widths of the various parts of you blog, refer to How to find the widths of your blog Header, main column (posts), sidebar. For those not familiar, I hope to do some tutorials later in the future and hope that I will remember to post a link here. Otherwise, try searching in my blogs in the "Blogger Resources" section in the right sidebar.

There were two places in the script where I had to change the width and the height. The new script which I posted in this post to produce the video below is as follows:

If you want to learn how to change the width of Youtube or other video websites, refer to FAQ: Youtube, Google video and Blogger.com

Sunday, February 04, 2007

Testing uploading of a tall picture.

Petronas Twin Tower, Kualal Lumpur, Malaysia

Petronas Twin Tower
There have been complaints of Blogger orientating a tall picture horizontally. I also received a comment in my post Uploading and manipulating photos in Blogger which seem to me to be the same complaint (confirmed in his second comment). So I am now uploading a tall vertical picture to see how it appears. The photo is that of the Petronas Twin Tower, which used to be the tallest building in the world, but now I suppose can only claim to the the tallest twin tower in the world. BTW 2007 is Visit Malaysia Year with lots of things going on. 2007 will be a good year to visit Malaysai.

Now I am going to do a further test. I am going to use Irfanview to orientate the picture horizontally and upload it and see how it turns out. Here goes:

Petronas Twin Tower orientated horizontally

Update: Well, the image is published as it is orientated, so in conlusion, Blogger does not tamper with the orientation of your picture. His second comment said he didn't understand why it was different for me and for him. I am also wondering why, because I don't face the same problems that are often reported in the Google Blogger Help group. I wonder if having one's blog in a different server makes any difference.

Saturday, February 03, 2007

Testing embeding table via Google spreadsheet again

A reader commented in this post:
"Hi, how did you remove the published via Google Docs & Spreadsheets - updated automatically every 5 minutes
title. Can't seem to fgure that out."

So testing embeding Google spreadsheet again due to reader's comment to see if anything has changed. Sample spreadsheet Blog*Star 2006 (alphbatical order) embedded below:

The method used was exactly as described in the post Testing embeding Gooogle spreadsheet in New Blogger (formerly beta) post.There is no "Published via Google Docs... or anything of that sort.