Oct 18, 2008

Fitting Images In Your Header

One simple way to make your garden blog stand out is to add an image to the header of your blog. It is easy enough to do but I've noticed that several garden blogs have images that don't fit within the wrapper of the header. If you've performed the modification to add gadgets and widgets to your blog's header this one should be really easy.

This is a screen capture of the garden blog A Succulent Life and as you can see the image that Julie added to personalize her blog's header doesn't fit within the constraints of the header. If you have this problem on your own blog there are two things you can do to fix this.

Step #1: Save or Test
Whenever you're going to perform any modifications for your blog the first thing you should do is backup and save your template. To achieve this click on Layout>Edit HTML and click "Download Full Template." If anything should happen you can always upload your template and restore your blog. Another option I like is to create a test blog where you can perform these modifications and get your feet wet and comfortable with the process before you do it to your garden blog. You can never be too careful.

Step #2: Locate header wrapper
A Succulent Life is using the standard Minima template without any modifications that I can see. This is what the header wrapper currently looks like:

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


The reason that the image doesn't fit within the borders of the header on A Succulent Life is because the image is too wide for the 660 pixels that have been assigned for the header. We have two options available to us to fix something like this.

Option A:
Re-size the image so that it fits within the constraints of the header. When uploading an image to your header make sure that it isn't as wide or wider than the width that has been allotted to it. In this case the image shouldn't be wider than 660 pixels.

Option B:
If you don't want to go through the trouble of resizing the image again then just add enough pixels to the header wrapper so that your image fits comfortably. Change the width (660 pixels) to whatever the width of your image is and then Save your template.

Oct 8, 2008

Q&A: Colleen Vanderlinded

One of the things I want to attempt to do with this blog is to create conversations about garden bloggers as a whole and specific individuals along with the mechanics of garden blogging. As of now I don't have a criteria for choosing a garden blogger to interview but I hope to develop one soon. Colleen Vanderlinden was gracious enough to accept my request and be my test subject, I hope you enjoy this short Q&A with Colleen.
Make sure to look at the Announcements page for topics you can give your thoughts on. If your feedback on a particular subject in the Announcements page is printed here you'll receive a link to your blog along with your quote.


In the Garden Online, Colleen Vanderlinded, Garden Blogger

Q:You maintain three gardening related blogs/sites. Do you spend more time garden blogging or actually gardening?

A:I spend more time writing and blogging about gardening than actually gardening lately. But, I make time to get out there every day, even if it's only to take a stroll through the garden and pull a few weeds. It helps keep me calm and focused. I did manage to completely renovate my front garden over the summer, so I'm very happy with that.

Q:I see you're the Guide to Organic Gardening on About.com. How did you land that gig?

A:I've wanted to write for About for a long time. There's this long, intensive prep, tryout thing you have to go through before they decide whether to give you the job or not. You spend three weeks working on your site, competing with up to five other writers for the job. It was my second time going through the process (I went through prep to be the Guide to Detroit a few years back and didn't get it) so I think I was more comfortable this time around. They wanted someone who knew their stuff, was comfortable with the technology, and maintained high standards without an editor looking over their shoulder. Apparently, they decided that person was me (much to my surprise---I was sure that I wouldn't get the job!).

Q:What is Mouse & Trowel? Where did the inspiration for it come from?

A:The Mouse & Trowel is the annual awards program I started to get some recognition for garden bloggers. When I started blogging seriously in 2005, I saw immediately that it takes a lot of work to publish a high-quality garden blog. Everything from the text to the photos to the design is important, and either enhances or detracts from the experience of our readers. That year's Bloggies gave awards to sites like "My Boyfriend is a Wanker" or something like that, and it struck me that for all the work garden bloggers do (the blogging plus the actual gardening), we're such a small niche that we're unlikely to get any love from any of the bigger, more mainstream awards programs. I didn't do anything at first, because I kind of thought "who the hell am I to start something like this?" but then I finally thought, "why not?"

"who the hell am I to start something like this?"


Q:I once judged a photo competition on a photography website. A couple of the non-winners PMed me to tell me I had no taste. Do gardeners that don't get nominated or win ever get "snippy" with you?

A:Oh, yes. I've had my share of snippy emails. I've been accused of rigging the results so that only female bloggers win the awards (ridiculous) and I've had a couple of emails telling me that the whole idea is stupid. One person claimed that I was ruining garden blogging by making it a competition. And of course, there are plenty of critiques of the way I run things. It's impossible to make everyone happy, so I try not to let the negativity bother me too much.

Q:Is your blog self-hosted? What advice would you give to a garden blogger thinking about hosting their own blog(s)?

A:Yes, my blog has been self-hosted from the beginning, but it would not have been so if I didn't have a technology guru for a husband. He deals with the hosting, the design, coding---all the stuff I have no expertise (or interest) in dealing with. I just write. It comes down to figuring out your own comfort level. If you like dealing with all of the technical issues, then go for self-hosting. If you just want to write and post photos of your garden, and you just want it to work, go for a blogspot or free wordpress account. I've had people ask me if it's important to have a self-hosted blog if you want to use your blog as a sample when applying for writing jobs. Publishers don't care where or how your blog is hosted. They read what you've written, and they determine the level of your professionalism based on that.

Q:What are you most proud of in relation to your garden blog/site?

A:I'm most proud of the fact that I have a core group of readers who visit every time I post, who email me with questions or comments, and who have used my advice in their own gardens. I'm still humbled every time someone says, "I've got this problem in my garden---help me!" Besides that, my blog led directly to me being considered for the About job, which led directly to me co-authoring my first book, "Edible Gardens for the Midwest," which will be published in Spring 2009 by Lone Pine.

Q:What should more garden bloggers be doing (in terms of Social Networking) to grow an audience for their garden blogs?

A:You know, I've tried it all: StumbleUpon, Digg, Reddit, Propeller, Twitter, Plurk---and none of them take the place of good writing, attractive design, and clear photos. I've seen modest temporary traffic increases from every method, with StumbleUpon being the big winner in terms of giving me any kind of sustained traffic increases. I've gotten bored with just about all of them. They were fun at first, but quickly turned into a chore and took time away from actually writing and posting. But it all depends on the person. Some people get motivated to post more when they use one of these tools or services, and if it works for you, do it! My traffic comes mostly from Google searches, followed closely by referrals from other blogs and websites. SU, Twitter, etc. are fairly low on the list of referrers.

Q:If you could change one thing about your garden blog/site what would it be?

A:I wish I posted more. There just aren't enough hours in the day. I've got lists full of post ideas, but paying work (I'm a full-time freelance writer and editor) and being involved with my family are my priorities right now. We're redesigning the site this winter, so I'm very much looking forward to that. Maybe it will even motivate me to post more often!

Q: Finally, What blog do you really admire and for what reason?

A: Without a doubt, Kathy Purdy's "Cold Climate Gardening" is my favorite blog. Kathy amazes me---she's been at this longer than just about everyone, and she never seems to write a bad post. To me, her blog is everything a garden blog should be: informative, well-written, attractive, and well-organized. Her personality really comes through, as does her enthusiasm for plants and gardening. She's the best.

Colleen is a freelance writer/gardener from Suburban Detroit. She's the Guide to Organic Gardening at About.com and the founder of Mouse & Trowel. Mouse & Trowel was the first award dedicated to recognizing the talent of garden bloggers. Her personal garden blog is In the Garden Online.

Oct 7, 2008

Easy Recent Comments And Posts In Blogger

One of the simplest things you can do on your blog to increase page views or encourage comments in your blog is to add a gadget or widget that displays recent comments and posts in your sidebar of your blog. There area a number of coders out there who are doing great things with hacks for Blogger that display your recent comments and posts in fancy ways. I'll probably link to those later but for the mean time you can get easy recent comments and posts in Blogger. You don't need to know any code or do anything to your template you just need to add a gadget/widget page element with the appropriate feed URL.

Step #1: Allow a Feed/Configure
For this to work your blog has to publish a feed. There are drawbacks to publishing a feed but there are also benefits like adding interactivity to your blog with these kinds of gadgets and widgets. If you want to add a list of recent comments to your blog click the Settings tab/link. Once there click site feed and configure your feed setting and click Save. Now go to Layout and click Add a Gadget in the sidebar or footer of your choice and choose Feed.


Easy Recent Comments And Posts In BloggerCopy and paste the following code next to where it reads Feed URL:

http://yourgardenblog.blogspot.com/feeds/comments/default


Remember to change "yourgardenblog" to the name of your garden blog. If you're using Blogger with the custom domain feature add the URL of the custom domain. For example:

http://www.GardenBloggers.com/feeds/comments/default


Is what I added for this blog since I'm blogging with a custom domain.

Step #2: Edit Title/Displays and Save


Easy Recent Comments And Posts In BloggerIn the next window the Title of the gadget/widget was www.GardenBloggers.com but I changed it to "Recent Comments." You can get creative with your title if you like and customize it for your garden blog. Some examples could be: "Gardeners Visited," "Seeds Sown," "Pollinators Landed," you get the idea. The max number of items (items here being the # of comments) is 5 because of a Blogger limitation. You can choose to show the date and the source/author or leave it blank, I like that option so I used that one. When you're done hit Save and move the gadget/widget up and down your sidebar to wherever you like.

If you're half as bright as I think you are you probably already figured out how to add Recent Posts to your sidebar too. Just repeat the process in a new feed gadget/widget but this time add the feed URL of your garden blog. If you're using a feed delivery service like FeedBurner your feed URL looks something like this:

http://feeds.feedburner.com/wwwgardenbloggerscom


The section in red will be whatever you named your feed.

If you aren't burning your native feed it should looks something like this:

http://yourgardenblog.blogspot.com/feeds/posts/default?alt=rss


If you copy and paste these remember to change the sections in red to the name of your garden blog.

Notes
On my personal garden blog I use the recent posts tip above to advertise the recent posts on all of my garden blogs in my sidebars. If you host more than one garden blog direct visitors among all of your blogs by using this tip. Sometimes the recent comments feed get stuck or jammed. If that happens either wait it out until Blogger fixes it or try reinstalling it.

Oct 5, 2008

Creating a Contact Form in Blogger

As I mentioned in creating custom pages in Blogger one of the biggest disappointments is not being able to have real custom pages that we can use for our blogs. Since blogspot blogs can be set to create a new page for each blog entry there is a little bit of a work-around this limitation. But even then there is no native contact form in Blogger that we can add to our post page through which people can send us a message like on so many other blogging platforms. A post page that says "Contact" doesn't really cut it.

For a while now there have been options available like Contactify and Web Form Designer. I'm sure they're great products but I'm always weary of add-ons like this for Blogger. I don't know what happens to the personal information that people submit so I choose to stay away from them and hope that Blogger gets around to it one day. Last night when looking for help with a problem with another Google product I came across a contact form where I had to enter my information to get help. After I submitted my information I noticed the URL was something like spreadsheets.google.com. I thought it was odd and thought to myself that I wished we users of Google products could do something similar. Then it dawned on me to Google spreadsheets+contact form+Google docs and I came across the Google Docs blog which informed me that one could build a contact form with a spreadsheet to collect information.

So, I signed up for Google Docs and fumbled around for a few minutes before I figured out how to do it based on the instructions from the blog link above. Hopefully my instructions will be a little clearer and easy to understand for those who, like me, have never used Google Docs or haven't seen a spreadsheet in years.

Step #1: Sign up or log into Google Docs
On the left hand side click New>Spreadsheet then on the right side of your screen locate the Save button. Name and save your spreadsheet something similar to "Contact Me". Once you've saved it click Form and a new window pops up where you fill out the answers you want answered on your form. If there are any questions already there you can delete them and add your own by clicking Add question.

For single word/sentences fields like; Name, Email & URL choose "Text" as the Question Type. For a long message choose "Paragraph Text." Once your form is completed click save then click More Actions>Edit Confirmation to customize the confirmation message. Once that's done you can again click More Actions>Embed and copy the code provided.

Step#2: Paste & Publish
If you haven't already created the "Contact Me" post in your blog go ahead and do so then paste the code we copied above into your post. If you don't want people to be able to comment in the comment section of Blogger at the bottom of the screen you compose your post in click Post Options> Don't allow. This will keep this particular post from being commented on. If you don't want your contact form post to show up on the main page of your blog change the date to a date in the past, now publish your post and you're done. See my Contact Form in this blog for an example. When people fill out your form the information they provided will be saved into the spreadsheet we created when we began. When you get notified that your spreadsheet has been modified simply log into Google Docs and click on the name of the spreadsheet to see the information that has been left for you.

Note
If you're anything like me a spreadsheet looks to be the most confusing thing in the world and you're wondering how you're suppose to see the messages that are wider than the cells. At the top of each cell (column) there is a letter, next to those letters are lines, just put your mouse over one of the lines and drag it to the left or right to make the cell large enough to read the text. I used this same method to create the contact page in the Google Sites that I combined with this blog.

Oct 4, 2008

How To Widen The "Main" Blog Area

I've noticed that a lot of gardeners like to, understandably, go heavy on the pictures in their blog posts. Garden photography is a big part of garden blogging and the use of photos to illustrate the accompanying text on plants, bugs and flowers is to be expected. Sometimes a lot of pictures placed poorly on a blog post detract from the blog and can look a bit confusing. On my personal garden blog I got into the habit of centering the majority of the photos I upload in the blog post. When I have more than a couple of photos I will justify them to the right but as a rule I center them because the text can look bunched up on the left when there are a lot of photos on the right.

Another reason why I prefer to center my images below blocks of text is because I like to try to maintain a word count per line that falls somewhere between 10-15 words so that sentences are easy to on the eyes. One thing that you could do with your blog is to widen the main blog area so that there is ample room for pictures and text. If you performed the modification on how to widen your sidebar this one should be easy.

Step #1: Backup and Save
I can't stress how important this is because there may come a time where you'll regret not doing this, trust me. Download a copy of your template in the event that anything should go wrong. If you do something that you don't like or know how to fix you can always upload your template and go back to how you originally were. To do this go to Layout> Edit HTML then click Download Full Template. My favorite option is to create a test blog where you can perform these modifications first and then do them to your garden blog once you feel comfortable enough with the process. Now lets look at the section of the template we'll be working on.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
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 */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}


This is a section of code for the Minima blog template. Lets begin with the outer wrapper. Think of the outer-wrapper as like a girdle or a belt holding your blog in place. The outer-wrapper holds the main area, sidebar, header and footer in place. In this case the outer-wrapper is 660 pixels wide, the main area takes up 410 of these pixels and the sidebar another 220 pixels. In Minima the header and footer are each 660 pixels wide. 410 pixels + 220pixels =630 pixels that leaves us with 20 pixels (subtract 10 pixels for the "padding" in the outer-wrapper) of room to play with here which really isn't enough for our needs.

Step #2: Make Room
If you've ever had a big meal chances are that you've probably loosened your belt once or twice for comfort-that's similar to what we're going to do here. For this example we'll add 100 pixels to your outer-wrapper by changing 660 to 760 but you can add more if you like. Now the outer-wrapper is 750 pixels wide (minus the 10 pixels for the "padding" in the outer-wrapper) giving us some room to play with. 630 pixels (410 for the main + 220 for the sidebar) from 750 pixels gives us 120 pixels we can add to the main blog area. If you changed these numbers your code should now look like this:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 760px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 530px;
float: $startSide;
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 */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 only changes we've made so far are to the numbers in red. The outer-wrapper width to give us more room and the main-wrapper width to take advantage of the new space we created. At this point you can click preview to see your handy work and if everything went smoothly you can click save. Before you're done you have one last step. Remember above when I said the header and footer are generally the same width as the outer-wrapper? You probably noticed when you previewed that your header wasn't as wide as your main area and your sidebar combined. To keep things balanced find the header-wrapper near the top of your template. It looks like this:

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


and change the 660 to 760. When you've done that scroll down your template and do the same for the footer wrapper that looks like this:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Change the 660 here to 760 also. Whatever changes we do to the outer-wrapper have to be done to the header and footer as well. There is no critical issue that will arise if you don't add the extra pixels to the header and footer- it is mostly cosmetic and to keep things looking balanced. Once again hit preview and if everything went well go back and hit save. And now you're done.

Consider This
In this example I only added 100 pixels to the outer-wrapper and to the main-wrapper but you can add as many as you like, to a point. The outer-wrapper for www.GardenBloggers.com is 1010 pixels wide to accomodate the additions I made to this template. If you enlarge your main blog area by a couple hundred pixels you may have to make the font size for your blog larger too if you'd like to keep your sentences to 10-15 words per line. To do this go to Layout>Fonts and Colors. You can't make these changes to templates that use images for backgrounds and borders without creating more work for yourself. If you widen or shrink any area in a template like that you'll have to resize and replace those images, it isn't hard to do but it can be for someone who doesn't have experience with editing or creating graphics.

If you've been garden blogging for a while you probably use a service that provides you with stats on visitors to your garden blog. Among those stats you may get information on the browsers and screen size of visitors to your blog. When making changes to your blog consider how it will impact the majority of your visitors. The stats for my personal garden blog indicate that the majority of visitors use rather large computer monitors. I'll probably redesign my template (larger main area) for my personal blog soon because of this to make visiting my blog a more pleasant experience for readers.

Oct 3, 2008

Widening Your Sidebar

If you've been garden blogging for a while chances are that you have badges, awards, photos, widgets/gadgets or ads up and down your sidebar. Sometimes these items we use to decorate our garden blogs are too large to fit properly into the space they're allotted and so don't display properly. If this is the case and you just have to put up the picture of your cat doing his impersonation of Tina Turner there's a simple fix.

Make a note of the size(s) of the widget/badge/award/ad/photo you want to use. Either write down or remember the width of the largest item because we're going to modify the sidebar so that it fits without being cropped off. If you performed the modification that covered how to add color to your sidebar background this should be very easy.

Step #1: Backup & Save
The first thing you should always do when modifying your template is to download a copy of your template in the event that anything should go wrong. If you do something that you don't like or know how to fix you can always upload your template and go back to how you originally were. To do this go to Layout> Edit HTML then click Download Full Template. My favorite option is to create a test blog where you can perform these modifications first and then do them to your garden blog once you feel comfortable enough with the process. If you do something you can't recover from you can always delete your test blog and start over, an option that isn't really available with your real garden blog. I can't stress how important this is because there may come a time where you'll regret not doing this, trust me.

Step #2: Find your sidebar
The same area we modified before is the area we're looking for now. When you're at Edit HTML scroll down your template until you come across the sidebar wrapper. It looks like this:

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}


In this case the sidebar is 220 pixels wide so anything over that will be cropped off and won't display properly. Change the width of your sidebar to the same width of the largest item you want to add in your sidebar. Hit preview and if everything went well you should see the changes on your blog and if everything fits properly click save. Alternately if you have minimal items in your sidebar or you think it is too wide you can always lower the number to make your sidebar narrower.

Note
This works the best for templates like Minima that don't use any images to create the background or border of the sidebar. If you do this to templates like Rounders that use images to create the rounded corners you'll just throw off the margins and you'll have to resize and replace the little images that create the rounded corner effect. This isn't hard to do if you have a photo editor like Photoshop but it can be difficult for some.

Inline Comments for Blogger

One of the features of Blogger blogs that has needed a revamp for a long time is the comments section. In the comment section we had the option of either having comments in a pop-up window or they switched to a whole new page. Along came HaloScan and they provided a commenting system we could install in our templates that mimicked the inline comment feature that we blogspot users saw in other blog platforms like WordPress. Most recently IntenseDebate has popped up to provide an inline comment form for blogs and websites.

Blogger has decided to try out an inline comment for for blogspot users that doesn't require the modification of any code in the template. It is currently in the testing phase but I use it here and on my personal garden blog and I have to say I really like it. To try it out visit draft.blogger.com while you are signed into your Blogger account. You're in the testing area for features that Blogger is developing for blogspot users. If you look closely you'll see that the top of the dashboard is different from the dashboard you're accustomed to seeing. That's how you know you've signed into the draft area. Since you're there why not try out the inline comment feature? Go to Settings>Comments> and choose embedded below posts then scroll down and save.

Finally, a more sophisticated comment form for us Blogger users who always wanted this feature and who didn't like that vistors had to leave our blogs to leave us a comment. At this point you can sign out of draft.blogger.com or just go Blogger.com when you're done and go see what the new comment section on your blog looks like. You may notice that in the comment section here the comments are numbered. That is not a feature of the embedded below posts comments, I added that with a modification I read about. The numbers don't have any real purpose they're mostly just there for decoration.

Add Color To Sidebar Background

The easiest Blogger template to modify and style to fit your needs is called Minima. It comes in a few basic colors but the sidebar, headers, footer and main blog area are all the same color. A simple modification you can do to your template to make it look less like all the other garden blogs using Minima is to add a different color to your sidebar. Say you're using the white Minima template but you'd like your sidebar to have an ochre color (or any color you'd like) to make it stand out. You can do achieve this in two simple steps.

Step #1: Backup & Save
The first thing you should always do when modifying your template is to download a copy of your template in the event that anything should go wrong. If you do something that you don't like or know how to fix you can always upload your template and go back to how you originally were. To do this go to Layout> Edit HTML then click Download Full Template. My favorite option is to create a test blog where you can perform these modifications first and then do them to your garden blog once you feel comfortable enough with the process. If you do something you can't recover from you can always delete your test blog and start over, an option that isn't really available with your real garden blog.

Step #2: Locate Sidebar
In the same page where you downloaded your template scroll down until you find this section of your blogger template:

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 only thing we need to add some text to dictate what color the background of the sidebar should be displayed as.

Step #2: Add Color
As I said above in this example the background color is white but I want an ochre color for my sidebar so I just add the section in red:

#sidebar-wrapper {
width: 220px;
background: #DDDD99;
float: $endSide;
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 */
}

Hit preview and if you like what you see go back and save your template and your done. If like me little things bother you then you may notice that the text in your sidebar is really close to the edge of the color you added. When your sidebar and background color are the same you don't see this but when you add a color it becomes obvious and a little annoying. All we have to do is add another line that dictates the padding between the text and the edges where the color begins and ends. Again, find the same section of your template by scrolling down and add the section in red:

#sidebar-wrapper {
width: 220px;
background: #DDDD99;
padding: 6px;
float: $endSide;
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 */
}


Hit preview and if you're happy with this hit save. By adding padding: 6px; we've given the text in the sidebar six pixels of breathing room from the edge of the colors. You can add more if you like but I find this to be a good starting point.

Choosing colors
Like I said above you can add whatever color you like I chose ochre just as an example. There is a lot of information available on picking colors or places where you can get color codes. So as not to confuse you I'll make a separate post on that and just show you a simple way I like to find color codes. This is where having a test blog where you can experiment comes in handy. In your test blog go to Layout>Fonts and Colors and play around with the color chart. There you'll find the colors used in your template along with suggestions for colors that match your blog. Experiment with the Page Background Color and find a color you like from the suggested colors or from the color chart. Keep in mind that a color that looks garish as your whole background color may look pretty good just as the sidebar color, just like in the garden what we're doing is picking an accent color. As you play around with the colors of your page background write down the color hex code of colors you do like. For example #ffdfbf is pink, #cc6600 is a orange.

Oct 2, 2008

Creating custom pages on Blogger

One of the limitations of blogging on Blogger is that as of now we don't have specific custom pages for things like an "About" page on your blog. Even if the option is now yet available there are a couple of things you can do to make your own custom pages.

Post Pages option
If you take a look at the navigation bar at the top of this blog you'll see that I've managed to create some custom pages for various information I want to highlight. This option is simple and can be achieved using the settings of your blog. Go to Settings and select yes where it asks you if you should enable post pages. What this does it make each post on your garden blog a specific page that you can use to create a custom page on your garden blog. This is the method I employed to create the pages you see in the navigation bar above. When you're composing your specific page click the Post Options link at the bottom of the window you're typing your post in. There you'll be able to remove the comments option from these specific posts. If you have an established blog date your specific pages to a date in the past and they won't show up as current entries on your blog.

External options
If you've set up your blog with a custom domain your domain registrar may have given you a package that includes a small website option. For example you can create static pages such as about.yourgardenblog.com or contact.yourgardenblog.com page. If you don't want to pay for bandwidth or deal with setting up a small website you can try one of the many free options that are as simple as Blogger to set up and maintain. Google has a new product called Google Sites that you can use to set up a website or wiki to accompany your garden blog or create custom pages. I've also used this option to create the announcements page you see in the header.

Garden Blogging With A Custom Domain

In Naming Your Garden Blog I touched on what makes a good garden blog name. If you already have an established garden blog you may be hesitant to change to a new blog if you're not happy with the current name of your garden blog. Fortunately most blogging platforms allow you to blog with a custom domain and will redirect your old links to the new address.

Dot Com your garden blog
For the price of two visits to your favorite coffee shop you can register a domain and blog with a custom domain. If you chose a really long name for your blog or you're just not happy with the current name and don't think it fits you get a custom domain.

Benefits
Blogger allows you to use a custom domain and they'll continue to host your content and everything remains basically the same and they'll even redirect the old links to your new URL. Your domain registrar may provide you with free e-mail but if it doesn't you can register your domain with Google Apps and get e-mail through them. Some people put more weight on e-mails that come from a .com .org .net than one that comes from a free e-mail provider, your e-mail address connected to your custom domain will lend you credibility with some.

Where to register a domain
I hesitate to recommend a domain registrar since there are too many variables but you can conduct an internet search for "domain registrar" or "domain registration" and shop around. Just remember that you get what you pay for and it would be a good idea to look at some of the review sites out there. When I registered GardenBloggers.com a year ago I purchased mine through Google Apps because it was inexpensive and I wanted the other products available through them. At this point I don't recommend buying your domain through Google Apps or Blogger because of a glitch in their domain redirecting. Links to this blog must be formatted as http://www.gardenbloggers.com same thing if you are entering the url by hand. If the link or URL doesn't contain the www you'll get an error page instead of landing here. Until Google/Blogger resolves this issue I don't recommend purchasing your domain through them. I'm going to wait it out and see if they fix this but if they don't I'm going to transfer my domain to another registrar so I can avoid this problem. You don't have to purchase your domain through Google/Blogger to use their blogging with a custom domain feature.

Custom domain garden blogs
Here are some examples of gardeners blogging using the custom domain feature on Blogger.

Garden Desk
Danielle Copeland
Garden Punks
QC Garden

Oct 1, 2008

Naming Your Garden Blog

The names of garden blogs are as diverse as the plant life in the garden they document. For my personal blog, MrBrownThumb, I lucked upon a name that is easy for people to remember. I think if I had given the name of the blog a lot of thought I probably wouldn't have been able to come up with a blog name that was as memorable.

It's a blog!
Like with children, choosing a name can be difficult or it can be easy. Some names just fit people and some garden blog names just seem to fit the blog. Lets take a look at some blogs on Garden Voices for inspiration. If you're just starting out blogging and you don't have many visitors or readers you're in a good position to pick a name that fits you and your blog.

The location name
A good choice to go with when naming a garden blog is to name it after the place you garden. The location can be a good choice because it stands out and people in your area who may search the internet looking for local gardening information may stumble across your blog. If you ever happen to get lost you won't need to tattoo where you live on your body to remember where home is. Lets take a look at some location names to give you an example of what I mean.

Alameda Garden
Iowa Garden
Flatbush Gardener
The Vermont Gardener

You as a brand
A few years ago when Martha Stewart was heading to the slammer a number of pundits on the television were wringing their hands over what would happen with the Martha Stewart "brand." In short they were saying her company would crumble because she was going to the slammer and she had built an empire around herself and without her around or with her image tarnished the company couldn't survive. I don't read a lot of gossip rags but I have yet to hear that she's standing in a soup line-so go ahead and be like Martha or Oprah and name your garden blog after yourself. All the cool kids are doing it. Lets look at some self-titled blogs for inspiration.

Ilona's Garden
Ewa in the Garden

Size matters
If you ask me, not that anyone did, I think that short garden blog names are the best. But sometimes a long name can be very effective and easy to remember. Here are a couple of blogs that have long names. You may need to pause for a breath as you type out their long URL.

Plants Are The Strangest People
Leave Me Alone, I'm Digging
Sweet Home and Garden Chicago
An Obsessive Compulsive Plant Collector

Simply unique
Some names are just easy to remember either because their funny, weird or cute. You can't help but remember these garden blogs even if you only visited once before.

Water When Dry
Real Mud Garden
Seedling Adventures
Wicked Gardener
Damn Plants
My Skinny Garden
Weeder's Garden
Cannas and Bananas
Garden Fool

A, an, the, uh?
Sometimes I find it difficult to remember a garden blog that I haven't bookmarked because I forget there is an "a," "an," "the" in the URL. Extra characters in your blog's name can lead to some confusion so it is best to avoid them. If you need to add extra words or letters to the blog's name because someone already has the name you want the best option is to look for a better- catchier name. I came across three gardeners with some variation of 'obsession' in the URL in researching this post. I'm going to forward those blogs to the first 'therapist' gardener I come across.

Another thing that hinders my memory are the garden blogs where the URL and the blog title in the header don't match up. When reading a garden blog a visitor is more likely to see your header more times than your URL. If there is a difference in the name in the header and the name in the url there is bound to be some confusion. If, for example, you named your garden blog 'Bulb Garden' don't title it in the header "Musings of a cranky guy with five cats." Save the descriptive stuff for the description of your blog that goes below the blog title, keep the title the same as the URL.

Part 2
Garden blogging with a custom domain.

Adding Widgets and Gadgets to the "Main" area

After I learned how to add gadgets & widgets to your header I started to wonder if it was possible to apply the same modification to the "main" area of our blogs. I Googled around and from my readings I figured it was possible to do.

If you performed the modification I linked to above this one should be easy to do. Here is the bit of code in the template we are looking for:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

As you can see it is very similar to the div that controls the header that we modified to allow us to add many new elements to the header area. The only difference is that it doesn't have maxwidgets='5' but we can add that in then change showaddelements='yes' and locked='false' and you'll be able to add widgtes and gadgets above and below the main post area. This is what it looks like after the modifications.

<div id='main-wrapper'>
<b:section class='main' id='main' maxwidgets='5' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
</div>


I added maxwidgets='5' (since the maxwidgets was not there) and changed no to yes and true to false. Once you've added and changed the necessary bits hit "Preview" and if you did it correctly you'll see a preview of your blog. You won't be able to see any changes but a positive preview lets you know you didn't make a mistake. Click "Save" and you're done. You can then click the link above labeled "Page Elements" to see the change you just made.

In the screenshot above I added a Video Bar gadget above and a Picture gadget below the blog post. Once you've made this modification you can add whatever you want above or below your blog posts and it will show up on every posts whenever people visit your blog. This would be a good place for ads or for a custom message for your blog or a list of links of popular posts on your garden blog.

Hiding Blogger's Navigation Bar

Blogger's navigation tool that rests atop the template of your Blogger is a useful tool to discover blogs or to sign into your Blogger account when you're visiting your blog. Unfortunately it is a useful tool but one that is a distraction to the overall look of your blog especially if you've taken the time to redesign your template and customize your blog. A lot of people who use Blogger just pull out the piece of code that displays Blogger's navigation bar but I like the purpose that it provides and worry about removing any future functions Blogger may possibly incorporate into the navigation bar.
Step #1: Copy/paste
As always make sure to Download a copy of your template and save it to your computer. Or if you don't feel comfortable editing your template create a test blog and try it there and then do it on your blog and you're sure you won't damage anything. If you look at the top of this blog you shouldn't be able to see it because I've inserted two lines of code into my template that hides the navigation bar until someone hovers their mouse over the area. This is the code you can copy/paste into your template:

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}


You have to place it between the <head> </head> tags in your template. A good place to put it that is easy to find is right after this line in your template:

/* Use this with templates/template-twocol.html */


Scroll down a little bit from the top of your template to find the line of code. Here are two scrceenshots to help you with the placing of the code.




Step #2: Preview & Save

Once you've pasted the code into your template click "Preview" and if you did it right you should get a successful preview of your blog without the Blogger navigation bar displaying. After that you can click save and continue with your blog.

h/t: Bloggeratto

Memes for Garden Bloggers

It appears every group of bloggers has a meme or two and each one has rules and conditions that have to be followed in order to participate. It should come as no surprise that Garden Bloggers also have memes. Here are a few that I've come across.

Green Thumb Sunday
Was started by Tricia and bloggers post a gardening related post the first Sunday of the month. If you're interested in participating see this post which explains in detail how to participate in the meme.

Garden Bloggers' Muse Day
Was started by fellow Chicagoan, Carolyn Gail, and gardeners post a poem the first day of the month. If you're interested in participating see this post and contact the originator of the meme.

Garden Bloggers' Bloom Day
Was started by Carol and to participate you have to post pictures or a description of what is blooming in your garden. If you're interested in participating see this post and contact the originator of the meme.

Blooming Tuesday
Was started by Jean and participants post pictures of what is blooming in their gardens on a Tuesday. If you'd like to participate see this post and or contact the originators of the meme to get started.

Why Participate in a garden blog meme?

The most obvious benefit of participating in a meme is to gain traffic to your blog and incoming links. But ultimately it is about you getting to "meet" gardeners you otherwise may not come across in the blogosphere. It is about the experience of people commenting on your flowers or plants or sharing their flowers and plants with you. After all what kind of misanthrope takes up blogging let alone garden blogging? If I missed your meme contact me and let me know and I'll add it to this list.

See also:
Memes on Wikipedia
Cecil, on memes

Adding Gadets and Widgets to your header

The header is the top portion of your garden blog where your blog's name is located or maybe where you've added a picture. On the templates provided by Blogger the only thing there is room for there is for adding a picture or text. But there is a simple modification that you can do that will allow you to add all of the same gadets and widgets in your header that you can add to your sidebars or footers.
Step #1: Save or Test
To reach the area where you will modify your template to achieve this click on Layout>Edit HTML. At this point it would be a good idea to backup and save your template by clicking on the link that says "Download Full Template." You can save a copy of your template to your computer in case you make a mistake and need to revert back to it. I suggest you do this every time you are about to modify your template. The other suggestion I can make here is to create a test blog where you can practice these modifications out and get comfortable doing them before you do it on your blog.
Step #2: Locate and Change
At the "Edit HTML" page you'll see a lot of confusing and intimidating text which is the code that makes up how your blog looks and operates. Scroll down your template until you come across this bit of code:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Garden Bloggers (Header)' type='Header'/>
</b:section>
</div>


The first time I undertook a modification for my blog I was very nervous and scared I would do something to damage my garden blog. If you're feeling like this at this point, relax. You only have to change the sections in red. Where it says maxwidgets='1' change the 1 to 5 then showaddelement='no' to yes and where it says locked='true' change true to false. That's it.
Step #3: Preview and Save
Click "Preview" and if you did it correctly it should preview what your blog looks like. You won't be able to see any changes on the blog but if it previews without an error warning click "Save Template" and you should get the message that reads "Your changes have been saved." Now at the top of the page click "page elements" and take a look at your handy work.


Adding Gadets and Widgets to your blog headerYour header should look like the image above. Before we did this modification all that there was room for in the header was the title but after the modification as you can now see we can add more gadgets to the header. What you add is up to you, you could add an image below your blog title or you can add ads under your blog title or any combination.