Hosting a Blog Carnival

A great way to bring new visitors to your blog is to volunteer to host a blog carnival. Here are a few thoughts on successful carnival hosting. Please feel free to add your suggestions to the comment boxes.

Begin with a Subject you like
If you’ve been hesitant to volunteer to host a carnival try beginning with a carnival on a subject you are passionate about. Most likely, this is the main subject of your blog and the carnival will make a good fit with your overall theme. The carnival will be a win/win for you and your blog. You will find out about other blogs and posts on your favorite topic in addition to bringing readers to your blog.

Decide on a Theme
How will you organize the posts you receive from others?

Sherry at Semicolon used each day of the month for the Third Carnival of Children's Literature Poetry edition.

I used the virtues of Our Lady when hosting a Loveliness of Motherhood carnival.

Decide on Style
Will there be something that is frequently repeated?
Try to establish a consistent way of writing this.

For example Melissa Wiley at Here in the Bonny Glen hosted the Carnival of Children's Literature: Broken Toe Edition. All the posts are in bright blue links while the author's name and blog are in bold.

The group blog 10,000 Birds used green to highlight each of the posts for their carnival
Carnival of the Recipes: The Meatless Edition . If you stop by their blog be sure to check out their suggestions on hosting a blog carnival as well!

Badge or Clipart
Consider making a badge or simply using some free clipart which will be displayed proudly in each of the participants' posts. (antique clipart)

Dana, from Principled Discovery used airplane clip art for
Taking Flight, Week 37 of the Carnival of Homeschooling.
Dana also did a fabulous job of integrating all the links and crafting a carnival which read like a story.

Consider creating a mailing list
Respond to each entry via email. Create a list for this specific carnival in your address book. When the carnival is up at your blog, you can easily send a message via the list to each of the participants that the carnival is ready.

If you feel you might have missed a link, the email list can be a source for double checking the entries you received.

Try to Personalize
A blog carnival is basically a blog post with a lot of links. The goal of creating an inviting carnival is to try to integrate the links so that the whole reads like a narrative.

Mark Chu-Carroll of Good Math, Bad Math makes the Second Carnival of Mathematics: The Math Geeks are Coming to Town! read like slapstick comedy.

Try to read each entry and respond to the participant by making a small comment about the entry to the submitter. Sometimes, you receive feedback which helps to personalize your carnival.

The comment section offers a rich field for personalizing your carnival. Read the post and comments.

Photographs make any post leap off the page. Anne from Hawaii's Palmtree Pundit 72nd Carnival of Homeschooling is greatly enhanced by her use of photographs.


Encourage early submissions
Post plenty of reminders your blog and other blog meeting places.
Dawn at By Sun and Candlelight is very good at reminding her readers of her Nature Carnivals.

If you receive a few entries each day, it won’t be difficult to read each post carefully and make a personal reflection on the post. This will help to make your carnival stand out.

Practical preparations
Open a draft file for your carnival at your blog. Set the date on the post to reflect the scheduled date. Often the carnival time is set to midnight.

Be careful not to lose any links. I also like to keep a Word document going. I copy my blog post and paste it into word. (Helps with the spell check.)

Many bloggers have a practice blog where they try out new themes without alerting all their readers. Many blog sites offer free blog hosting, consider putting your carnival up at your practice blog and check through the links. Once satisfied, you can transfer the post (edit html to edit html) to your public blog and announce the arrival of the carnival. (In my last carnival, I used a lot of images. It was a great help to use my practice blog to iron out the placement of the pictures.)

If you don't have a practice blog, you can try out some theme/color variations in some of your regular posts before the carnival. Some alterations look different once the "publish post" button is pressed.

It's always great to have a proofreader. Ask a friend!

Try to have your carnival ready in advance so that you give yourself a little room in case your family needs you.

A final thought, if you like the idea of hosting a cocktail party but you don’t like to do dishes, hosting a blog carnival is a great option. With a little preparation and planning you can bring together bloggers, engage in stimulating conversation, get to know new people *and* leave the dish towel in the drawer!

Scrolling Blogrolls for the Sidebar (Blogger)

I'm answering my own question, thanks to some wonderful html work by Susan/Taffy of the 4 Real Learning Forums, who made a nice widget with 4Real blogs on it. :) Also thanks to Blogrolling, who is now giving out for free what they used to charge for - the ability to have several blogrolls under one account. With these two things in hand, I'm all set:

First, set up an account at Blogrolling.com and start one or as many separate lists of links as you like.

Now go into Blogger and click on "layout" for the blog you want to edit. Click on "Add a Page Element" on the sidebar, and chose "HTML/Javascript".


Now add the following html/javascript to the box that opened - changing all parenthesis ( ) to "arrows" i.e. > and < :

(div style="height:100px; overflow:auto;")
(center)
(The Javascript Link You Are About to Get From Blogrolling)(/center)(/div)


Go to your account at Blogrolling and click on "get code" for the blogroll you want to include on your sidebar. Chose the Javascript code (the first option) and copy and paste it above where I have "The Javascript Link You Are About to Get From Blogrolling")

Now don't forget to click save! :)

You can change the height in the first line of html to whatever you like. I like mine on the small side (100px) but that is just personal preference.

Since you can now have several blogrolls at Blogrolling.com, you can make more scrolling sidebar lists in the same way, for example you could have "Favorite Blogs," "Favorite Websites," "Books I'm reading (with links to Amazon)," etc.

Posting Audio and Video To Your Blog

Marianne asks:

I wrote a song and had it recorded a few years ago. It is an mp3 file. [snip] How do I do audio on blogspot?

The first thing you need is hosting for your mp3 file. You can find some by googling "mp3 hosting". Some hosting sites are Wiki Upload, Imeem, GabCast, and Garage Band. You simply sign up for an account, upload your audio, and you will be given the html code to insert into your post/site.
There are lots of options for videos as well, such as YouTube, Google Video, or PhotoBucket. The uploading-sharing process is similar to audio.

Two useful things to know:

• Many of the mp3 and video hosting sites allow content that is not suitable for kids. Be aware that if people click on the hosting link on your audio/video content, they will be taken to the hosting site, where other people's videos are displayed.


• If you want more privacy for your videos, choose a site that will allow you to keep them private and viewable only by the people you choose. One good example is Multiply, which is helpful especially if you want one place for all your stuff: music, video, photos, blog, reviews.

Both audio and video can be shared successfully on any blog, not just Blogspot/Blogger. Typepad makes it easy to insert content -- they have their own uploading tool; the tutorial can be found here. Wordpress users, click here for Lorelle's post on Video, Music, Podcasts, Audio, and Multimedia WordPress Plugins.
Image-, audio- and video-hosting services are popping up (and disappearing) all the time, so if I hear of any other noteworthy additions, I'll edit this post. Or, if you know of any that you'd like to share, please let us know!

Test Blogs

Over at the Moms Who Blog Discussion Group, Helen asked about a "test blog." I shared the following steps for setting one up.

I use my test blog to play around with my template, to learn about html, and to save a few photos.

Your test blog can be set up so that it's not visible on your profile page, if you follow these instructions (on Blogger):

Set up your test blog, then, go to "Settings."

Under "Basic", select "No" for "Add your blog to our listings?"

Under "publishing" select "No" on "send pings?"

Under "permissions" select "Only blog authors" or "only people I choose" under "Blog readers."

Also, from your Dashboard, there is an option for editing your profile. You can check to make sure your test blog is invisible from there. Take a look at "Select Blogs to Display." If you've answered all of the above as noted, your test blog shouldn't even show up as an option there.

All of the above has worked for me to have a test blog that is visible on my dashboard, but not visible in my profile to the public.

Blogging Etiquette: Giving Credit Where Credit Is Due

One of the greatest delights of blogging is the easy idea-sharing. Blogs allow us to peek into other families' homes, to see how other moms are making things work. From book reviews to recipes to craft ideas to housework management strategies, a vast treasury of ideas is right here for us at the click of a mouse. I have learned so much from my fellow mom-bloggers, much that has had a tangible effect on my family's home life.

But the very ease with which ideas can be shared online makes for some fuzzy lines regarding proper attribution. Blogger X posts a recipe, and Blogger Y links to it, and Bloggers A, B, and C link to Blogger Y's link, and before you know it, the recipe has entered the public domain, so to speak, and there's little chance it will ever be traced back to its original source.

Now, perhaps with recipes that isn't such a big deal. If you post a recipe online, you're sharing it with the world, and you probably aren't really expecting or desiring strangers in other countries to announce to their dinner guests, "This souffle was invented by Mrs. Jo Q. Blogger in Peoria, Illinois!"

Still, protecting intellectual ownership ought to be on our minds as we write posts. Unless you have assigned copyright to a third party, you own the words you post to your blog. You also "own" the ideas you share, though "ideas" is a murky term and ownership or origin of ideas is something much harder to pin down.

We will address plagiarism and copyright issues in future posts, but for now let's focus on simple blog etiquette. There are some simple steps bloggers can take to ensure that credit for a great idea is given to the person who "thunk it up."

Treat an idea the way you would a quote: Give it proper attribution.

Remember back in college, when you had to include certain information for every quote you used in a paper? Author's name, title of book, and publication info? We should be treating internet quotes the same way. If you're inspired by an idea in someone else's post, be sure to include the source in your own post—the more source info, the better. Include the other blogger's name and blog title, as well as a link to the post in question.

Put the attribution info in the link itself.

From watching my SiteMeter and MyBlogLog stats, I have learned that only 10-20% of readers actually click through to any given link. I was pretty surprised by these low click-through numbers! What this means is that you can't assume your readers will click a link to find out whose idea you are sharing. It's best to give as much source information as possible right in the link itself.

For example,

I love this idea for counting down the days of Lent—we're going to hang up a string of purple paper fish and pull one off every day until Easter!

attempts to give credit to Suzanne Temple, the person who came up with the original idea, but it relies upon click-through to do so. If a reader doesn't click the link, she won't know where the idea came from.

A better option would be:

Suzanne over at Blessed Among Men shared a great idea for counting down the days of Lent. You hang up a string of purple paper fish and pull one off every day until Easter.

Here, you see I have linked both to Suzanne's main page and the permalink for the post where she shared her fish idea. It's an extra step for the blogger, but provides the reader with two opportunities to visit Suzanne's site, and gives Suzanne (who, by the way, is going to be blushing like mad when she sees I've used her as an example!) a clear and thorough attribution.

Even better would be to add an enticing phrase that encourages your reader to click through— "You've got to see her gorgeous photos!" would do the trick. But again, don't assume that a teaser is going to make every reader click the link. Include as much source info as possible in the top layer of your post.

If nothing else, give a tip of the hat.

Hat-tipping is a common blogging practice; I'm sure you've seen plenty of examples. It is usually done when a blogger is sharing a quick quote or link, and looks like this:

HT: Blessed Among Men

You stick the hat tip at the bottom of a post. Remember, it's better to use the permalink to a specific post than to link to the main blog site. For example, using Suzanne Temple's fish post above, you'd want to link to:

http://blessedamongmen.blogspot.com/2007/02/shish.html

rather than just

http://blessedamongmen.blogspot.com

To find the permalink, try clicking on the post's title (not the blog title), or on the date-stamp at the bottom of the post. On Typepad blogs, of course, you can just click the word "permalink." (Clicking the post title works, too.)

If people unwittingly give you credit for someone else's idea, try to set the record straight.

One of my most popular and oft-linked posts is a piece I wrote on Bonny Glen about using the concept of "pegs" to organize our learning days. Even though I was careful to give credit to Leonie, the person who (on a yahoogroup long ago) introduced me to the idea of pegs, on more than one occasion I have seen references to "Melissa Wiley's great pegs concept" on other people's blogs. While I have appreciated the links to my post, I certainly don't want to take credit for Leonie's thoughts!

Whenever I discover such a case, I try to leave a comment on the other blog giving credit where credit is properly due.

Now, in this example, I don't have a specific post by Leonie to link to, since her thoughts on pegs were shared on a discussion list instead of a blog. But I can link to her blog, and thus hope that readers will encounter more of her wisdom in her own space.

Similarly, there have been many times that I have seen concepts I did originate incorporated into other people's posts with no mention of my name. It's not that I'm a credit-hog, nor are you when you wince at seeing your words or ideas used by someone else with no reference back to you. What we are is being properly protective against plagiarism.

Internet plagiarism is a big enough problem already; there are lots of people who don't care about stealing other people's words and ideas. Those of us who DO care can help keep the lines firmly drawn by being very careful to always give full credit wherever credit is due.

Blogger 101: Adding a Background Photo Border

This works better in a template that has post and sidebar areas that are separated from the background area such as this and this, but not this or this. (Because otherwise your photo will run behind your text and that could be awfully hard to read).

Suggestion: Even with a photo as a border, take a look at the overall effect and try to choose something that's not too overwhelming. I know I'm a little on the visually sensitive side - if something is too loud or dramatic, it makes it hard for me to comfortably read the text (I also don't like it when people have audio things playing on their site or flashing and moving characters - what my husband calls "dancing baloney" - I personally think opt-in is good for extra effects). You might also want to consider that some people have dial-up and/or slower computers and a lot of extra files to load can make it hard for them.

Anyway, on to the hacking...

Here's an example of the segment of text in which to insert your photo. This is from a rounders template (but with an already-tweaked background color):

body {
background:#C5B795;
margin:0;
text-align:center;
line-height: 1.5em;
font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
color:$mainTextColor;
font-size/* */:/**/small;
font-size: /**/small;
}

The way I figured out how to do this was to sneak some code from a scribe template (which has a background image) into a different template and plug in my own photo url. Here is the coding segment from the scribe template:

body {
margin:0;
padding:0;
font-size: small;
text-align:center;
color:$textColor;
line-height:1.3em;
background:#483521 url("http://www.blogblog.com/scribe/bg.gif") repeat;
}

This is the coding I used at Love2learn Moments.

body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: $mainTextColor;
font-size: small;
background:#666 url("http://www.love2learn.net/blog/rockybackground.jpg") repeat;
}

You can find photo suggestions in this post.

Happy Mother's Day!

How to Add a Signature to Your Posts, for Blogger

If you like the look and personalization of having a signature like this: at the end of your posts, try this:

Go to My Live Signature. Click on "proceed" and "create signature".

You can then either click on creating a new signature, or uploading a scanned image of your real signature. Let My Live Signature walk you through the steps to create a signature you are happy with. If you create one with their fonts, you can chose the look, size, slant, etc. (You also can waste way too much time and also feel a little crazy at the end because after seeing your name 120 times in different fonts it ceases to have any meaning, lol! That is the fun part. ;-) )

You can save the final product as an image to your hard drive by right clicking on the signature and choosing "save image as", naming it and placing it on your computer where you see fit. Or you can click on "Want to use this signature?" at the end of your process and it will create HTML code for you to place on your blog.

If you decide to use their HTML, copy it, then go into blogger. Click on "Settings" in your blog dashboard, and then "formatting". Scroll down to the bottom where it says "post template." Paste the code you just copied into that template. When you next go to make a new post, that code will already be in it. Just make sure you type your post *above* the code, or your signature will come first in your post.

If you would rather host your own image in a place like Photobucket, right click on the signature image provided by My Live Signature like I described above, save it to your computer, then upload to your hosting place. Copy the HTML they give you, then place this code in the "post template" section under "settings" in blogger like described in the last paragraph: (replace parenthesis with <> )

(img src="http://theURLyoujustcopied.png")

and save. Have fun!

Easy Online Photo Editing

An easy service for you to edit your photos online can be found at PXN8 (Pixenate).

Basic instructions:

1. Click on the "Choose Your Image to Edit". Navigate to the file you want on your computer and double click or press "Open" to upload.

2. The service will say "Uploading image, please wait", then it will open the editing tool. Resize, crop, enhance as you wish. I love the "fun effects" option. Note that there are UNDO and REDO buttons if you try something out and you don't like the result.

3. Click on "Save" when you're happy with your picture. This will open a download window (it automatically formats your pic as JPG) so you can save it to your PC.

A simpler service is also available at Snipshot.com.
Other similar services offering different capabilities are Cellsea, Online Image Editor and Fotocrib.

Blogger 101: Changing the Background Color

Find this segment of your template:

body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: $mainTextColor;
background: #692 url(http://www.blogblog.com/moto_son/outerwrap.gif) top center repeat-y;
font-size: small;

Look at the line that begins with "background:". You may or not have an image url in there. The number 692 is the bright green color that comes standard with the Son of Moto template. You can use Amy's links to find a good color online or find one in a program like Paint Shop Pro (sometimes I use the "medicine dropper" mode to pick up a color from a particular picture).

I used this color: #4aa1c2 on my test site which you can view here (I picked up the color from my t-shirt in the banner photo).

By the way, I noticed that in the "rounders" template, it looks substantially different, so I thought I'd add that example here:

body {
background:#aba;
margin:0;
text-align:center;
line-height: 1.5em;
font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
color:$mainTextColor;
font-size/* */:/**/small;
font-size: /**/small;
}

Here "aba" is the background color.

CSS Tutorial

As I've said before, I'm no expert at using CSS (cascading style sheets—a way of coding your blog template, like HTML but better). I've figured out a few things through trial and error. I'm still trying to work out some kinks in my Bonny Glen design (a Typepad blog).

This CSS Tutorial, recommended in Typepad's Knowledge Base, promises to be helpful. As I work through it (slo-o-o-wly, I'm sure), I'll share tidbits here.

Typepad is giving some good pointers also, like this explanation of how to add a background color to a Typelist header.

Typepad 101: Adding Widgets

KC asked:

There's widget that does this? [Automatically opens links in new windows.] Oh, my do you know the name?

If you haven't yet explored Typepad's Widget Gallery, you're in for some fun. Typepad has made it easy to add all sorts of content and shortcuts with dozens of widgets. When you click on the one you want, you'll be walked through the easy steps for adding a widget to your blog.

What's a widget?

A widget is a little piece of content or a tool provided by a third party that you can place in the siderail of your TypePad blog.

(Dear Typepad, since when are we calling them "siderails"? What happened to "sidebar"?)

Now, the weird thing is that I've been hunting through the gallery today, and I can't for the life of me find the "open links in new window" widget. But I know I've installed it on my Typepad blogs. This is very odd. I wonder if they discontinued it. Am I just missing it?

Other widgets I like:

MyBlogLog (Lets you see what links your readers are clicking on in your posts. I've noticed that only around 10% of readers actually click through to most links!)

SiteMeter (If you haven't installed one already, the widget makes it easy. Come on, you know you love to watch your traffic!)

Technorati (Links your blog to your Technorati profile. Technorati is a popular blog search engine. More about it in a future post. The widget also includes the option of a "search this blog" feature for your sidebar.)

Here's one I hadn't seen before: Evoca Browser Mic. This widget:

lets you capture you blog-reader’s voices in audio format. This simple widget allows anyone with a computer mic to leave you a voice recording which you then can decide to post to your blog to share with your readers.

How fun is that? I just might have to try this out.

When I figure out where the "open links in new window" widget is hiding, I'll let you know!

Adding strikethrough, bullet points, etc with HTML

I would love to gather ideas on how to make a blog post look more professional. I'm looking for the hand codes for things like strikethrough, bullets, different types of bullets etc.

What you're looking for are some HTML tags. You can add them in the "Edit HTML" window of your post. The WebMonkey cheat sheet is a good resource for this kind of thing.

Note: In the following examples, use pointy brackets instead of parentheses—if I put the pointy guys in here, the HTML converts to live code.

The tags for strikethrough are: (strike)word(/strike)

(hr) makes a gray horizontal line, nice for separating sections (it does not need a closing tag.

(h1)your text here (/h1) will make a

large headline

(h2)your text here(/h2) is a

little smaller

and so on down to

(h6)smallest headline (/h6) for the

smallest headlines

For bullet points, I just use option-asterisk (works on my Mac, at least). Hold the option key and the asterisk key down at the same time. PC users, chime in if you know the keyboard shortcut!

This site shows some other neat bullet options I didn't know about:

(type="square") makes square bullets

And there are open circles plus several different types of bullets for outlines. Nifty!

Blogger 101: Bullets in Blogger

This is pretty basic html and would probably work in other contexts as well (the question came up in terms of a blogger post):

Your coding should look like this example (easy to edit in "edit html" mode) EXCEPT - replace the parentheses with angular brackets:

(ul)
(li)one
(li)two
(li)three
(/ul)

Blogger 101: Widening Margins to Fit Your Photo

I used the Son of Moto template for this one (in order to work through Kristen's example). It should work in a similar fashion with other templates, though in some you have to change the width in several places. Some templates are very difficult to change the width on because they have image files that provide shading or borders. You might want to eliminate these files first, if you can. By the way, in Son of Moto, widening the borders automatically gets rid of some shading on the edges.

First find this segment in your coding:

#outer-wrapper {
margin: 0 auto;
border: 0;
width: 692px;
text-align: left;
background: $mainBgColor url(http://www.blogblog.com/moto_son/innerwrap.gif) top right repeat-y;
font: $bodyFont;
}

The "width:692px;" line indicates the width of your header and post/sidebar sections together. You can change 692 to 800 (to fit Kristen's example) or desired width. I've managed with a 900 width, but that might be pushing it.

Now find this segment in the coding:

#main {
width: 400px;
float: left;
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 */
}

The "width: 400px;" indicates the width of the blog post area (not including sidebar). You'll want to widen this too, or you'll have a big wide area in the middle of your blog. I would suggest a width of 528 in Kristen's example, but you can play with different numbers to see what works.
Hope this all makes sense. It's a little challenging to try to explain. :)

How to Make Links Open in a New Window

Most blog platforms let you use a button shortcut for adding a link in a post. You know the drill: you highlight the words you want to link, you click on the Link button, you paste in the URL. Easy-peasy.

But if you want the link to open in a new window, instead of having it take readers away from your page, you can click the "Edit HTML" tab and add a target tag to the link's code.

A link's HTML code looks like this (minus the spaces before and after the brackets):

< href="http://www.exampleURL.com">text text text< /a >

To make the link open in a new window, add target="new" between the URL's endquote and closing bracket. Like this:

< href="http://www.exampleURL.com" target="new">text text text< /a >

If you have a Typepad blog, you can install a widget that makes ALL links automatically open in new windows.

Browser Blues

Sometimes I have trouble with blogger hacks that don't work well in all browsers. I don't understand why this happens, but my daugher just noticed yesterday that the Dead Language Latin Club blog that we set up (and which looks rather nice in Internet Explorer) looks really strange in Firefox right now. The posts are up against the left side of the screen and the sidebar is all the way on the right. I think that the problem came about from widening the margins, but I'll have to dig in and experiment to try to fix it.

Any wisdom on why this happens and how to avoid it would be much appreciated. :)

Generating Blog Traffic: Visit the Carnival

Jennefer at Three Sons and a Princess is hosting a carnival today. The topic? How to generate more traffic for your blog. Lots of great information there. Enjoy!

Step-by-Step Blogger Customizing - Part II

Since last post, I have messed around a bit with the "fonts and colors". There are tons of options to try out here. For example, since I don't like all the dotted lines that were around the post and under each link in the side bar, I changed the "post border color" to white and they all disappeared. I also gave the "post title" and the "sidebar title" contrasting colors.

The other change I made this morning is a bit more complicated to explain. I took off all the rounded corners because they were somewhat incompatible with the photo at the top and will tend to interfere with background changes I'd like to make. You can just leave them alone if this seems too complicated. I'll explain how to do this in more detail in a later post, but the gist of it is to delete all of the image files imbedded in the template. They look something like this:

(http://www.blogblog.com/rounders/rails_main.gif)

but you have to take some coding with them and it's not always easy to identify which coding goes. Each line with this coding in it starts with "background:". If there are references to a background color or to margin sizes, then keep those parts of the line, otherwise you can delete the entire line. You can try this out if you check everything out in "preview" mode, but I'll give more detailed examples later.

Important Note: For now, I've left the image file alone in the "comments" section of the template as I haven't gotten comfortable with editing that yet.

Wordpress Theme Generator

For those of you who would love to have a custom-designed Wordpress theme, here's a really easy way to D-I-Y in just a few minutes:

The Wordpress Theme Generator

You don't need any HTML, CSS, JS, PHP, or CSS knowledge! Just click on the drop-down menus, play around with colors, and voila: your very own custom theme for Wordpress! There's a preview right there so you can see what you're doing while you're doing it. No need to upload and refresh.



When you're satisfied with everything, just press the "Save" button and you will be given the files to download, unzip and upload into your Wordpress Themes folder.

This is most useful for those running their own Wordpress installations, but the auto-generated css file can be used by anyone able to tweak their css stylesheets on any blogging service/software.

Blogger 101: Banner Photo

As I mentioned on the Cafe Mom Discussion board, I learned today that blogger now has an auto-insert picture function for the header background (e.g. the tulips above). In case you didn't pick up on the hints elsewhere, here are the directions...

You get to it by clicking on the "edit" button for the page header bar under "page elements" (which is under "template").

Add your photo and *presto*!

A couple of important tips:

You'll need to size your photo "just so" to fit with your template. Nothing like trial and error.

I would suggest keeping the photo size reasonably small - perhaps under 100 kb for the sake of those with slower-loading computers. (the tulip one is about 70 kb).

Try to get a picture with room for your title and description AND/OR adjust your blog title color so it's readable with the picture. I "photo-shopped" out two tulips to make this one fit better.

Warning: At the moment, adding the photo to the banner seems to gum up the preview mode in the "fonts and colors" window. Not critical, but annoying.

Customizing Your Banner in Typepad Pro

Before I start, let me just say that I am by no means an expert. I'm learning about CSS through trial and error—mainly error! I've figured out a few tricks for working with custom CSS in Typepad, but if you're more skilled than I am, by all means please chime in with advice/corrections/etc.

If you have a Typepad basic account, you can insert a banner image in the design feature, but your options will be limited.

If you have a pro account and want to customize your banner, the first thing you need to do is size the image correctly. You'll want to figure out how wide your blog is (this example assumes you want the banner to be as wide as the entire blog). One way to check that is through the "View Page Source" option in your browser menu. I use a Mac, and both Firefox and Safari browsers have a "View" option in the top menu bar. Go to your blog (the actual blog, not the Typepad panels), click anywhere on it (not on a link, of course), and then go to View in the menu bar and choose "Veie Page Source."

This pops up a window that shows the code for your whole blog page. If you scan through this, you should be able to see a line that tells the maximum width of your blog, probably something around 700px.

In whatever photo software you use, size the photo to the appropriate width. Now you're ready to upload it to Typepad.

In Typepad, click "Control Panel."
Click "Files."
On the right is the Upload Photo option.

After you've uploaded the photo, you'll need to know its URL. On your Files page, look in the list (at left) of file names. Click on the name of the photo you just uploaded. It'll open in a new window; highlight and copy the URL. It will be something like: http://mytypepadblog.typepad.com/myphoto.jpg

Now you can stick that photo at the top of your blog!
Click "Weblogs."
Click the name of the blog you want to customize.
Click the Design tab.
Scroll down and click on "Edit Custom CSS."

Now you need to paste some code into the CSS window. It will be a variation of:

#banner
{
height: 325px;
background-image: url("YOUR PHOTO'S URL");
background-position: 15px 15px;
background-repeat: repeat;
text-align: right;

}

Use the Preview button to check how it looks. You might need to adjust the height setting or the background position. Change the text-align setting to left or center if you like.

There are lots of other ways to tweak the CSS for your banner, depending on which Typepad template you're using, but this is a good place to start.

My favorite HTML Color Codes Sites

In customizing your blog template, you may find that you want to change the colors supplied by your blog provider. Color codes for HTML come in six digit codes made of numbers and letters. You may see it called "hexidecimal" - that is because they use the numbers 0-9, plus the letters A-F (giving you 16 possibilities) to create the "number" of the code.

The following are some of the sites I use to find the codes for the colors I desire:

http://html-color-codes.com/ This site contains 216 browser safe color codes on one small grid(**more on safe colors in a bit), along with the colors they represent

http://www.computerhope.com/htmcolor.htm Contains codes for the major colors and a separate chart of additional colors/codes to scroll through.

http://www.december.com/html/spec/color.html The hub for links to several pages of different color codes, arranged by hue (not all of which are "safe"):

The neutrals: http://www.december.com/html/spec/color0.html
The warms: http://www.december.com/html/spec/color1.html
The greens: http://www.december.com/html/spec/color2.html
The blues: http://www.december.com/html/spec/color3.html
The purples: http://www.december.com/html/spec/color4.html

And if that isn't enough there are even a large number of codes for the "nameless colors" here: http://www.december.com/html/spec/colorhues.html


http://www.siteprocentral.com/html_color_code.html This site contains a handy little tool for creating your own color. Adjust the red, green, and blue sliders to chose your color, then on the right you can use a pull down menu to find colors that match your color - complimentary colors, analogic, monocromatic, etc. Great when you want to totally redo a blog's "look" but aren't good at knowing "what goes with what" (like me).



**A "safe" color code is a code that is one of the 216 colors chosen as a web standard supported by all computers with color monitors. Today most new computer screens support more than the 256 colors that computer screens of old used, so needing a "safe color" is not as important.

Step-by-Step Blogger Customizing - Part I

For those who'd like the basics of working with a blogger template, I thought I'd make customizations to this blog one slow step at a time and explain what I did here.

Two general tips to start with:

Before working on your blog template, it's a good idea to save a copy of your current template in case you decide to go back. I copy and paste the entire template into a text file and save it for later. Alternatively, you can set up an alternate blogger site (for free) to test things out on. (You can see my rather messy test site here - I'm testing out a new feature I just found on blogger today to add a photo to the page header background using their automatic tools rather than having to change the coding).

Use the "preview" feature whenever you customize your template. You can always go back quickly if you make a disaster of things (and believe me, I've done that!).

My first change on this blog was to choose a new template that's a little easier to work with (particularly if I want a background photo around the edges later on). I chose the "Rounders" template (there are several different color options under the "rounders" template - choose whichever you like - I'm going to be changing a lot of colors anyway). Rounders also gives you a lot of options under "Fonts and Colors" (get to this with the "Template" option at the top of your customization page). There are wide option varieties between different templates.

What I've done so far is gone into the "Fonts and Colors" section and made changes to the following:

Page Header Background Color
Top Sidebar Background Color
Blog Title Font (you can adjust size, use bold or italics and change font styles here).

Customizations in the "Fonts and Colors" section are the easiest way to change your blog, since you don't have to dive into the "edit template" segment.

Finding Copyright Free Photos for your Blog

Be sure to give proper credit and check out the details on each photo just to be sure...

Flickr - you can do an "advanced search" here for photos under "Creative Commons License". If you find something you like, you can use it for a background or header on your blog, provided you give credit where credit is due. (read the details of the license for the particular photo, as some don't want any modifications made).

http://www.sxc.hu/ Stock exchange has lots of cool photos waiting to be used (as well as some that you have to pay for).

A couple of samples (I'll share blogger coding for backgrounds in a later post):

Here's an example of a portion of a photo used as a background. Appropriate place to give attribution would be in the sidebar - generally at the bottom (as shown in the example).

For this blog, I decided I wanted a Roman motif repeated in the background. I followed the flickr instructions above searching for things like "Roman", "Roman wall", etc. before finding something that I liked. (I think the end product might not be authentically Roman, but it works anyway). I did have to get special permission to modify the photo (I was using only a small portion of the photo). The photographer was actually quite pleased to give permission - it was a quick e-mail answered the same day.

Please share any of your favorite copyright free photo or clip-art sites.

Blockquotes in Typepad

Here's how to customize your blockquotes on a Typepad blog (Pro level only). Click the design tab, then click "Edit Custom CSS."

Paste in the following code:

/* general page elements */

blockquote {
border-left: 5px solid #D7F4CE ;
margin-left: 1.5em;
padding-left: 5px;
}

This will put a solid, narrow line on the left of your quote. (See this post for an example.)

Code like this—

blockquote {
width: 280px;
margin: 0px;
padding: 10px;
margin-left: 40px;
background-color: #fcffe7 }

—changes the background color of the whole quote. (Example here.)

Adding the line, "border:1px solid #0f491c;" will put a border around your quote.

All those px settings and the color choices are adjustable, of course. Tweak away.

Blogger 101: Blockquote Coding

Replace your current blockquote segment (under "posts") with this:

blockquote {
background:#fdf5e7;
font-size:100%;
padding:10px 15px;
border:1px solid #0f491c;
}

Here's an example of the blockquoting with the particular colors shown above.

Have fun tweaking the color numbers for the background and the border. It doesn't work automatically with all of the templates (one of the templates, at least, has a very simplified "posts" section). I use the palette in Paint Shop Pro to find the color numbers I want.

Hack Away, Please

I'd like this blog to become a resource for those of us trying to squeeze blogging between diaper changes and piano recitals. If you've got some good advice to share with other bloggers, or if you have a burning question you'd like answered, please drop us a comment!