playing, by Denise

Friday, December 18, 2009

Photo placement left & right

This is an example of a blog post where a photo floats to the left of the blog entry and the text is started to the right of the photo, wrapping below the photo if more room is needed.

Sometimes you want a photo to stand alone, but sometimes there is a desire to have words wrap the photo. This technique is implemented by defining a CSS element that specifies that images are to be floated to the right or to the left. The CSS element is then referenced in the blog entry.

I have defined two CSS elements in this blog, one to float the image to the left, and one to float the image to the right. They are:
#floatRight img {
float: right;
margin: 0 10px 3px 10px; /* top right bottom left */
}

#floatLeft img {
float: left;
margin: 0 10px 3px 10px; /* top right bottom left */
}
In order to create a blog entry with a photo floating to the left, I would start the blog entry with a div referring to the floatLeft entry.

The text of this blog entry, including the reference to the div, can be found on the page http://sites.google.com/site/denisegoldbergplays/Home, in the file titled wrapPhotoWithText.txt.

Monday, September 7, 2009

A photo with a border

I've just played a bit with putting a border on an image. The first example below was done with CSS + HTML, and the second was done with HTML. I much prefer the look of the second example which uses a single-celled table.

The first example uses CSS that defines a div called photoBorder. In this case the border is placed around the entire width of the blog entry.


The second example is done with HTML, placing a border around a cell within the table. This has a much more pleasing look to me.





The code for these two examples can be found on the page http://sites.google.com/site/denisegoldbergplays/Home, in the file titled placeBorderAroundImage.txt.

Friday, April 24, 2009

Feed me!

Sometimes I'm a bit late to things... I finally woke up this week and added a feed to my blog so that my faithful readers could subscribe to receive blog updates.

Blogger has feed gadgets available for use, but it turned out those widgets weren't exactly what I wanted. I suspect the available gadgets may change since blogger recently acquired feedburner, but I think I'll add some notes here in case anyone else wants to follow down the same path that I did.

First, I wandered over to http://feedburner.google.com. I created a feed for my blog (my everyday blog, not this one).

Then I popped into to my blog layout, selected Add a gadget. I pasted in the code that I picked up from feedburner, and my feed was active.

Here's what it looks like:
.....Click to subscribe

Sunday, February 15, 2009

Flipping a blog on its head

Have you ever wanted your blog to read from oldest to newest?

Blogs are usually presented with the newest post on top, which makes sense for most blogging purposes. But sometimes... sometimes I just want my blog to read upside down. I keep journals when I travel. While I'm on the road I find the newest first organization acceptable. That allows people who are following me to open my blog and find my latest entries immediately. And since I'm traveling, that makes sense (well, it makes sense to me at least).

It's after I've stopped moving each day that the upside-down format really doesn't work for me, so I've used a fairly easy technique to turn it into an oldest post first format.

First, if you look at any of my travel stories, you will see that they match the look and feel of my photography site, www.denisegoldberg.com. Blogger can be highly customized, and I have changed the template I use to match my own site. If you haven't attempted to go in that direction, the first post in this Digital Grin forum thread may help - HOW TO match your blog to your smug site (blogger-specific). The reason I say should? It should give you some ideas on how to change the look of your blog, and it should be useful even if you are not trying the match your blog to a SmugMug site look & feel. The purpose of this post was to explain how to match a blogger blog to an existing site; maybe you'll find it helpful, maybe not.

I have recently moved all of my travel journals to blogger, and most of them still need to be flipped on their heads. But here's a screen shot from a journal that is completely changed...



OK, OK, you're absolutely right. It's really much easier to look at the page directly. You can jump to my A return to death journal in this window, or in a new window if you want to see the journal plus this post side by side.

Back to flipping a blog on its head...

Building a Table of Contents
The first thing that I did was to collect the URLs of each page in my journal. I used these to create a Table of Contents page for the journal. I also used the same entries to create a Table of Contents sidebar entry. Oh, you're right - I really don't need both. But I wanted the sidebar entries to support easy navigation, and it just didn't feel right not to have a Table of Contents in the overall flow.

>>> I used a href= statements to build the Table of Contents in both places.
>>> I used blockquote statements to indent sections of the Table of Contents entry, and a series of dots (...) to indent sections of the Table of Contents in the sidebar (since I didn't have the room in the sidebar to nicely support the blockquote-style indentations.

I can't include the two variations of my Table of Contents entries here because blogger will render the html and you will see the results of the html instead of the actual code. That wouldn't be helpful at all, so I have uploaded the code to this site - sites.google.com/site/denisegoldbergplays/Home.

Files available related to this blog post are
>>> PageByPage_sidebarEntry.txt, and
>>> TableOfContents_forTravelJournal.txt.

Right click on the desired file, select Save Link As..., and save it to a text file on your computer. That will give you the source I used to create the table of contents for the journal I linked to above. Clearly you will need to change the page references to your own URLs, but I find it much easier to look at a working example.

Removing Blogger's navigation
I removed Blogger's normal "newer post" and "older post" entries because I found them confusing after I set the blog to read from oldest to newest. If I could flip the action of those entries that would be preferred over removing them, but I couldn't figure out how to do that. If anyone reading this has a solution - please let me know!

To remove these entries, I added this CSS to my blog html:
.blog-pager-older-link,
.blog-pager-newer-link {
display: none;
}

I also removed Blogger's Blog Archive from the sidebar by simply clicking on the tools to edit the entry, then selecting Remove. There would be nothing wrong with leaving the Blog Archive entries; that would give your reader two ways to navigate through your journal.

Adding page to page links
Once I created the table of contents, I then took the next step and added next page and prior page links to the bottom of each blog page.

I added a div in my CSS so I could control the look & feel of next/previous entries. This is absolutely not necessary from a functional standpoint, but in case you want to do something similar, here's the CSS I used:
#myPageFooter {
font-family: Verdana;
font-weight: bold;
font-size: 110%;
color: #068481;
text-align: center;
}
Again, the code I placed at the bottom of the journal pages is html, so I can't just paste it here. I've placed a sample of the code at sites.google.com/site/denisegoldbergplays/Home, in the entry pageNavigation_forTravelJournal.txt. Use right click, Save Link As... to save the sample as a text file.

Did I miss anything?
I hope not, but anything's possible. Feel free to contact me with questions or corrections. If you have corrections, I would be happy to correct this blog post, giving you credit for any corrections that you supply.