LostBob's Test Blog (sort of)

Adding a flickr SlideShow Part 2

2009-04-27T01:15:00.030-04:00

My Juhu Neighbors SlideShow

Here's the code I use for this one:

<div style="text-align:center; width:500px; height:500px; margin:auto; border:20px ridge #c0c0c0"> <iframe src= "http://www.flickr.com/slideShow/index.gne?user_id=79139412@N00&set_id=72057594078004688" width="500" height="500" frameborder="0" scrolling="no"> </iframe> </div>

The difference between this and the previous post is use of an <iframe> instead of the flash object code. The user_id field is your flickr User ID and can be found at this link under Useful Values. The set_id can be found in the URL of the Flickr set page.

I discovered this method at flickrSLiDR while looking for an answer to a strange cursor behavior problem. I never solved that one. This is a simple alternative SlideShow with slightly different appearance and features. FlickrSlidr will automatically generate very similar code for you allowing you to create a slideshow based on your flickr photostream, sets, tags or groups.

Adding a flickr SlideShow

2009-04-17T01:55:00.036-04:00

So I’m asking a question about posting flickr Slideshows on Blogger? Have I ever seen a Flickr slideshow? Did I see that Share this link in the upper right corner? Or the big Share this ICON at the end? Duh! Not me.

Mianyang & Chengdu 1997

I wasn't lost then

Flickr gives you the code. Cut & paste. That’s it. Your done!

If you got here from a link on Blogger Help Forum about strange cursor behavior with Flickr slideshows, I never solved that. Didn’t need to. This is so much easier and it doesn’t screw-up your viewer’s browser. If I ever solve it (i.e. if someone else posts a response on the thread with the answer) I’ll update here with due credit.

Here’s the code. Just the way it comes from flickr.

I put the flickr code inside the <div> tag with the frame around it while figuring out how to center things. I like the way it looks but the border isn't needed. The code in black is cut & paste from Flickr. The code red! is my own. Take that as a warning.

You can change the size and aspect ratio of the show and control other features too. I will give you an example shortly but that post is still in draft form.

Embed & Center Video

2009-04-14T17:05:00.001-04:00

I needed help ! I wanted to center this player on the page. I submitted a question to the Blogger Help Forum here Just three hours later, TED provided the solution.

See more funny TBT Videos at
Today's BIG Thing.

Disney Templates

This clever clip shows that Walt Disney understood templates.

You can see from above that it now works, I could not figure out how to center the player without TED's help. Thanks.


<div style="display:block; margin:10px auto; text-align:center; padding:10px; width:480px; border:20px ridge #c0c0c0;" 
title="Today's BIG Thing Video">
<object type="application/x-shockwave-flash" 
data="http://www.todaysbigthing.com/betamax/betamax.swf?item_id=1427&fullscreen=0" width="480" height="360">
<param name="allowScriptAccess" value="sameDomain" /> <param name="allowfullscreen" value="true" />
<param name="movie" quality="best" value="http://www.todaysbigthing.com/betamax/betamax.swf?item_id=1427&fullscreen=0" /> </object>
<div style='padding:5px 0; text-align:center; width:480px; margin:auto;'>
See more funny TBT Videos at 
<a href='http://www.todaysbigthing.com/' target="visitwin" title="to TodaysBigThing.com">Today's BIG Thing</a>.
</div> 
</div>

Adding Background Image to Header

2009-03-31T15:37:00.016-04:00

I wanted to add an image to the header of this blog.

I wanted the image on the left side of the header with Title and Description to the right.

When I used the Configure Header widget from the Add & and Arrange Page Elements page it did what you see on the left. Close, but not exactly what I want.

Modification of my Rounders Template was required to meet my objective. That was less straight forward than I expected.

Using View Source I could see a pointer into where the problem was to be found:

<div id='header-inner' style='background-image: url("http://4.bp.blogspot.com/_Sb0DWz3ieT0/SdJVp-DwVwI/AAAAAAAAAos/WY8HPqkNbC0/S1600-R/Compass_200x200_P3020035.jpg"); background-position: left; width: 200px; min-height: 200px;_height: 200px;background-repeat: no-repeat; '>

The division with ID, header-inner which acts as a container for the Title and Description has been forced to 200 Pixels, the width of my image. OK, easy enough, change it to 990 Pixels, the width of the blog.

Except, this portion of the source is generated in the following code which is in the 'hidden' portion of the template (visible only when you check the "Expand Widget Template" box on the Edit HTML screen.

Changing all the text seen in red above to: width: 990px; yielded this.

Almost there.

Just two more template edits are needed to give the title and text some margin on the left and move it away from the image.

A little bit farther down in the same 'hidden' portion of the template two more lines of code need to be changed.

The lines are seen below with the added text in red.

< div class='titlewrapper' style='background: transparent; margin-left: 200px '> < div class='descriptionwrapper' style='margin-left: 200px' >

This may not be the most elegant way to add the image since I am not really using it as a background but it does work. Only thing to keep in mind is if you use the Configure Header widget to change the image, you will have to re-enter the changes into the template.

Addendum: April Fool's Day

Be careful when doing clever things like changing font within your post. One little forgotten </code> and I changed the font on the subsequent posts and sidebar widgets too. Blogger is usually pretty good at flagging unclosed tags but it didn't complain about that one.

Sidebar Cosmetic Surgery

2009-03-29T16:10:00.015-04:00

I didn't like the dotted line border that the Rounders template placed below my sidebar widget titles. I like the little graphic image that the Harbor template uses instead. It's a simple fix and this post serves as a way to document it.

In the template, change the following:

#sidebar h2 { color: $postTitleColor; border-bottom: 1px dotted $postTitleColor; }

To:

#sidebar h2 { color: $postTitleColor; background:url("http://www.blogblog.com/harbor/divider.gif") no-repeat center bottom; padding-bottom:7px; }

In the rounders template, the lines to change are found directly above:

/* Footer ----------------------------------------------- */

These images of the top sidebar show that things are not quite so easy there.

The image on the left shows that the .gif image is a poor color match and appears distorted.

On the right you can see my effort to modify the image.

The modified image is dark and appears OK except that I have introduced a light background. This, I'm sure is due to my lack of ability with Photoshop Elements.

If someone can tell me how to properly change the divider.gif image to black without messing up the background, I will make the template changes and post them here for all to see.

Altering Time with Blogger

2009-03-27T08:59:00.007-04:00

Adventures with the Blogger’s not so secret virtual time machine.

A couple of folks on the Blogger Help Forum were asking about reordering the sequence of posts in their blogs. That’s easy enough but there’s potential for much much more.

But I am getting ahead of myself. First let me show you how.

I’ll bet that little arrow and Post Options link at the bottom of your Post Edit window barely caught your eye before.

Go ahead, click on it. Let me show you what it does.

Then come back and we’ll talk about predictions of getting rich.

Yeah, it really is that easy.

Now go and write a post predicting Secretariat's record breaking run for the roses.

You can also edit and change the date on existing posts. This let’s you change the order that posts appear in your archive. You can edit just the time of post too. Say one day you publish a post about that Porsche you have your eye on before you write the one about your wedding anniversary. You can fix that.

It works in future time too. Say you have a general interest blog sharing news and stories about family and friends. Get out your address book, write a month’s worth of "Happy Birthday to You posts" and schedule them for posting on the appropriate day. Blogger will prompt you for confirmation when you click 'Publish Post' then schedule posting.

One little gottcha to point out. Compare the January 2006 Archive listing from the sidebar of my other blog seen below with the actual post URLs seen to the right.

http://lostbobsblog.blogspot.com/2006/01/
girls-of-mumbai.html

http://lostbobsblog.blogspot.com/2006/01/
my-room-in-st-kilda.html

http://lostbobsblog.blogspot.com/2009/03/
neighborhood-bar.html

http://lostbobsblog.blogspot.com/2006/01/
maastricht-reflections.html

http://lostbobsblog.blogspot.com/2009/03/
day-at-races-in-dubai.html

Each of those posts was created in March of 2009 by copy and paste from an older blog. I used the method described above to give the posts the same date as the original post in the old blog. However, twice I clicked on Publish before changing the post date. That is reflected in the URL which is assigned the first time the post is published. I subsequently changed the post dates and the posts and archive reflect the change. On the two where I was careless, the URL gives me away.

Sea View Hotel, Juhu Beach, Mumbai

Don’t make the same mistake when you write that Kentucky Derby prediction post.

Addendum March 30^th

Blogger Help Forum questioner lisabiziou made an important discovery. If you set a future date using Post Options BEFORE you click 'Publish Post' for the first time, the post is scheduled for future publication. If instead, you edit and change the date of a previously published post to a future date, that post will move to the top of your blog and archive. If you want a specific post to always appear at the top of your blog, create it, publish it then edit and change the date to say, Dec 21, 2012 (beyond that, all bets are off).

Thanks Lisa!

P.S. Check out Lisa's My Ceramics blog.

Add & Arrange Page Elements fixed

2009-03-23T10:04:00.036-04:00

Thanks! Add & Arrange Page Elements is Fixed
(See addendum at end of post.)

This post was a follow-up to an earlier post about increasing the column width in a blog using the Rounders Template. You can see from the appearance of this blog that I have accomplished that goal. I had however, introduced a minor problem on the "Add & Arrange Page Elements " page.

This issue is the subject of a Blogger Help Forum discussion thread:
Add & Arrange Page Elements changed after increasing Col width

(With a timely and succinct response from TED posted to my earlier discussion thread:)
Add and Arrange Page Elements has moved

Refer to the screen shot images below.

The changes made to increase the blog column widths have resulted in the Blog Posts section of the A.&A.P.E. page increasing as well so that the sidebar elements now appear below the Blog Post section.

Compare that to the image below from my other still unmodified blog.

The changes that I have made to the Rounders2 Template can be seen in the box below.

Your browser does not support iframes.

If I add the additional lines:

body#layout #main-wrap1 { width: 485px; }

Directly below:

body#layout #sidebar-wrap { width: 240px; }

The A.&A.P.E. page appears as below. This is problematic however, because the sidebar elements are now on top of the Blog Posts section, covering the Edit link. This also makes it difficult to edit the view by moving sidebar widgets as they have a tendency to drop into the Blog Posts section.

I suspect that a similar "body#layout" tweak is required to force the Blog Posts box back to 485 pixels on the A.&A.P.E. page. I have not been successful by trial and error. With a little luck, some knowledgeable reader will stumble here and provide the needed tweak. When that happens, I will update this post.

Thanks in advance (and after the fact, to TED from Blogger Help Forum) for the help.

Addendum 24 March:

Once again TED has come through on the Blogger Help Forum. The corrected A.&A.P.E. page is seen below. The appearance of the right hand side border on the Blog Posts section is even a visual improvement over the default unmodified template.

The code changes provided by TED are seen in green text in the scroll box above.

Update: March 27^th

I see that the appearance of the Blog Posts box on the A.&A.P.E. page changes depending upon Internet Explorer-8’s ‘Compatibility Mode’. It does not appear to be a simple, it looks one way with CM on and the other when off. It seems to be sequence dependent.. Sometimes the box is left justified and appears as expected. Other times it is centered in the overall wrapper with the right side under the sidebar elements. I have seen it both ways in both modes. IE-8 seems to have a mind of its own. I see the same thing happening on a blog with an unmodified template it’s just more subtle.

I’ll let you know more when I figure it out (or someone tells me).

The following Blogger Help Group discussion threads are relevant to problems encountered while increasing column width using the Rounders Template:

Add & Arrange Page Elements changed after increasing Col width

Add & Arrange Elements Page compromised

Add and Arrange Page Elements has moved

Moving rounded corner images in Rounders template

Refer also to my earlier post: Increase Col. Width, Rounders2

Increase Col. Width, Rounders2

2009-03-11T23:44:00.042-04:00

This Blog was created as a test platform for template changes prior to incorporating them into my active (sort of) LostBob’s Blog. The template used is Rounders2, a fixed width, 2 column format with rounded corners. With this post I am going to work through increasing the width of the main section and sidebars. The Blogger Help Group Forum folks provided some valuable help here.

Rounders2 has header and footer blocks that are 740 pixels wide. The main portion of the blog is 485 pixels wide while the sidebars are 240 pixels. There are 15 pixels of blank space between the main column and the sidebar. All sections have rounded corners formed by overlaying fixed width GIF images. The tricky part about changing the column widths is that these GIF images need to be modified so that they fall correctly on the new wider columns.

The necessary template edits can easily be accomplished in the edit template window but I recommend that you first save a copy of the existing template.

Find the following lines of template code and make the indicated changes to adjust the column widths:

/* Page Structure ----------------------------------------------- */ ... #outer-wrapper { width:740px; (change to 990px) ... #main-wrap1 { width:485px; (change to 700px) ... #main { background:url("http://www.blogblog.com/rounders2/rails_main.gif") repeat-y $startSide; padding:0; width:485px; (change to 700px) ... #sidebar-wrap { width:240px; (change to 280px) ... .main .widget { margin-top: 4px; width: 468px; (change to 683px) padding: 0 13px; ... .main .Blog { margin: 0; padding: 0; width: 484px; (change to 699px) ...

Changes to this point adjust the column widths but if you stop here you will see that the rounded corners and the main text border bar are not correctly positioned. To fix these you must modify a total of nine .gif images. The following images must be downloaded, modified and then saved in an accessable location.

http://www2.blogblog.com/rounders2/corners_cap_top.gif http://www.blogblog.com/rounders2/corners_cap_bot.gif http://www1.blogblog.com/rounders2/corners_main_top.gif http://www.blogblog.com/rounders2/rails_main.gif http://www1.blogblog.com/rounders2/corners_main_bot.gif http://www2.blogblog.com/rounders2/corners_prof_top.gif http://www.blogblog.com/rounders2/corners_prof_bot.gif http://www.blogblog.com/rounders2/corners_side_top.gif http://www1.blogblog.com/rounders2/corners_side_bot.gif

The first two above must change from 740 pixels wide to 990 pixels, the next three from 485 pixels to 700 pixels and the last four from 240 to 280 pixels wide.

One easy way to download the images is to open a browser window and paste the images URL into the address bar. When the image opens, right click on it and use ‘save picture as’ and place it wherever you like. I then used Photoshop Elements to stretch the images and then placed them in a Picasa Web Album (the album also contains the unmodified images). To use my modified images edit your template to replace the URLs above with those below.

http://lh4.ggpht.com/_Sb0DWz3ieT0/Sb6UtG_1SeI/AAAAAAAAAfA/pdsDBumoJJA/corners_cap_top2.gif http://lh3.ggpht.com/_Sb0DWz3ieT0/Sb6UttV6jpI/AAAAAAAAAfI/IP_AbHqdRak/corners_cap_bot2.gif http://lh5.ggpht.com/_Sb0DWz3ieT0/Sb6Ut2ZrbBI/AAAAAAAAAfQ/cj5QVclfgmg/corners_main_top2.gif http://lh4.ggpht.com/_Sb0DWz3ieT0/Sb6UueyIYrI/AAAAAAAAAfY/KB9Gehmx4as/corners_main_bot2.gif http://lh3.ggpht.com/_Sb0DWz3ieT0/Sb6UurHW9NI/AAAAAAAAAfg/b-LyZ9_PXbc/rails_main2.gif http://lh5.ggpht.com/_Sb0DWz3ieT0/Sb6VA7xjs8I/AAAAAAAAAfo/p3VbIIf7tVM/corners_prof_top2.gif http://lh6.ggpht.com/_Sb0DWz3ieT0/Sb6VBWWiK_I/AAAAAAAAAfw/fIhh0fsJiew/corners_prof_bot2.gif http://lh5.ggpht.com/_Sb0DWz3ieT0/Sb6VB0NXItI/AAAAAAAAAf4/1zhphAlg78E/corners_side_top2.gif http://lh3.ggpht.com/_Sb0DWz3ieT0/Sb6VCDLE8uI/AAAAAAAAAgA/DhPuZ8G1BAs/corners_side_bot2.gif

For example change the line:

background:$mainBgColor url("http://www1.blogblog.com/rounders2/corners_main_bot.gif") no-repeat $startSide bottom;

to:

background:$mainBgColor url("http://lh4.ggpht.com/_Sb0DWz3ieT0/Sb6UueyIYrI/AAAAAAAAAfY/KB9Gehmx4as/corners_main_bot2.gif") no-repeat $startSide bottom;

Note that lines calling the images 'corners_cap_top.gif' and 'corners_cap_bot.gif' appear twice each. A total of eleven URLs must change. Note also that the image colors are the default template colors. If you change your blog default colors, the corner image color must change too.

Also, I don't know why there is the 17 pixel and 1 pixel differences between 'main .widget' and 'main .Blog' with respect to '#main-wrap'. If any reader has answers to these please leave a comment.

Update: Friday the 13^th:

When I opened this post on my Vista laptop I saw immediately why setting the width to 1024 pixels was a bad idea. When I have time I will correct the post, images and text above for a more practical width. My objective is max size with no need for a horizontal scroll bar in a 1024px wide window. By setting the blog to 1024 wide, the need for a vertical scroll bar forces a horizontal scroll bar and clipped edges. I need to reduce the blog width by the width of the vertical scroll bar.

Meanwhile, as I figure this out, I have commented out the template calls to the header and footer corner images and reduced the total width from 1024 to 1010 pixels. This eliminates the background space between the main text and the side bars but is as narrow as I can go without need to modify more images.

Update: The Ides of March

I have found that the maximum width for the outer-wrapper is 1003 pixels before a horizontal scroll bar appears on my 1024 pixel wide laptop. I am setting this now to 990 Pixels and changing the sidebars to 280 pixels. The code section above now reflects that. This has decreased the margin between the main section and the side bar and has provided a little margin on the left and right. The images have been modified accordingly.

Saint Patrick’s Day Update:

I have successfully modified the corner image GIFs. I think the result looks pretty good.
There remains one minor problem. The Add and Arrange Page Elements page does not appear as expected as a result of increasing the column widths.

I have sought some help with that issue HERE. When I have more, I will update here or create a new post with the findings. For now, I can only say that the ‘problem’ in the portion of the Rounders Template below the line:

 /** Page structure tweaks for layout editor wireframe */

Happy St. Patrick’s Day !

Update: March 24:

See my post Add & Arrange Page Elements fixed where the solution to the A.&A.P.E. page is documented. The complete set of changes to the Rounders2 template are also better seen there.

Embed & Center YouTube Playlist

2009-03-10T20:40:00.011-04:00

This post was just an effort to figure out how to embed a YouTube playlist, scale its size and center it in the post.

Easy enough. Do this:

<div style="text-align: center"> <strong>LostBob's YouTube Playlist</strong> <object width="400" height="321"><param name="movie" value="http://www.youtube.com/p/FD8B6A8EBE8EF978&hl=en"><embed src="http://www.youtube.com/p/FD8B6A8EBE8EF978&hl=en" type="application/x-shockwave-flash" width="400" height="321"></embed></object></div>

The image can be scaled just adjust the width and height in both places above. Maintain the proper proportions. (e.g., width 400, height 418)

LostBob's YouTube Playlist

It don’t get much better than that.

And here's another useful tip:

Dont't put code to insert these < > < > < > like above and then switch between Blogger's 'Edit Html' and 'Compose' windows to do something useful like spell checking. You will regret it. Save the <'s and >'s for last.

Old Blog gets New Life

2009-03-09T22:58:00.016-04:00

This post grew out of trying to solve a table width problem. The table appeared much wider than expected, extending out of view to the right. The Google Help Forum discussion was Controlling Table Width in a Post. The time travel hint is useful too.

Once upon a time in a blog much like this one, incompetence and circumstance led to duplication (sort of). A few old posts languishing in the blogosphere. Stories about Hillary Clinton, the girls of Mumbai and an apartment in Kazan. Pictures of a bar in India and some Churches in Rome. All gathering digital dust with nary a virtual viewer.

Such was the fate of LostBob’s Old Blog (sort of). until the discovery of bloggers magic cut-and-paste time machine. That little ‘Post Options’ drop down in the edit window. Suddenly it's 2006 again. My old posts can re-appear in a blog that wasn’t even around then. They have been reincarnated.

Most of what was once there has moved here. So if you’ve stumbled here or there via some wayward link or if Google has lured you here for something that was once there but is no longer. It’s probably here. So there you are.

Actually, it’s here

The pictures are links to the most popular old posts
The Car of the Beast?	Seaview Hotel
Loading Oil in Dubai	The Girls of Mumbai
Ponte Vittorio Emanuele	Santa Maria Maggiore
The pictures are from the old posts. The links take you to the post's new home. The post about "The Car of the Beast" was revised and is now the most popular post in the new blog.

Update: Friday the 13^th

I thought the problem was solved until I opened the page on my vista laptop. Looks the same as it did before on my XP desktop (both with IE=8) I will update here after I figure out the Vista problem. Meanwhile, if anyone has any ideas…

Update, March 28^th

I am using Internet Explorer 8 with its new Compatibility View feature and that feature impacts the appearance of the table above. The default view, with Compatibility View OFF causes the table to be against the left margin. Switching ON Compatibility View centers the table. IE-8 Help tells me this about Compatibility View:

Websites that were designed for earlier versions of Internet Explorer might not display correctly in the current version. However, you can often improve how a website will look in Internet Explorer by using a new feature called Compatibility View.

When you turn on Compatibility View, the webpage you're viewing— —will be displayed as if you were using an earlier version of Internet Explorer.

The fix was to change the way I centered the table.
Previously I placed the table between:

<div style="text-align: center" > and </div> tags.

I have changed the opening div tag to:

<div style="position:relative display:block; width:400px; margin:0 auto;">

That seems to make IE-8 happy. Compatibility View is no longer required to center the table.

Who am I ?

2009-03-09T22:57:00.003-04:00

For many years, I was a telecomm engineer. I lived and worked all over the world.

I put satellite communications equipment on planes trains and automobiles; I installed equipment in the White House and the Pentagon and designed stuff for the folks at Fort Meade. My name is on patents for the satellite telephone system used by the Taliban and Osama bin Laden.

I was paid to play in private jets, high speed chase boats, railroad locomotives and over-the-road trucks. They paid me to fly over Juneau Alaska in a float plane and over Utah’s canyon lands in a helicopter. I flew over the great salt lake and Colorado Rockies in the cockpit of a Lear Jet. I drove from Tuscan to Tucumcari and Tehachapi to Tonopah (and from Berlin to Paris. And Melbourne to Sydney to Brisbane). I drove jeeps over sand dunes in the Arabian Desert. It was a magic carpet ride.

Told differently, I was away from home 50 weeks a year, working 60 – 80 hours a week and living in hotels. I got close to a lot of really nice places with little time to see them.

Either way, I loved what I did but came to dislike the folks I did it for so we parted company . I’m whittling away at my savings and bored out of my mind. That’s still a better than working for thieves, even thieves with magic carpet rides.

This blog is an attempt to put it all in some perspective and help me decide what I want to be when I grow up.

I’m too old to become a postal employee