Archive by Author

How to Add an Image to Your Sidebar

Posted on January 24, 2012 by in How-To

I get this question a lot, so I thought it would be helpful to write up a little primer on HTML and some quick instructions on how to add an image to your sidebar.

A Quick HTML Primer

HTML stands for “Hypertext Markup Language,” and is the code for most webpages that tells your web browser what to display. HTML uses “markup tags” to tell the browser what to do.  Tags are indicated by angle brackets. Most tags are “wrappers,” which means there’s an opening tag and a closing tag, with something in between that they’re modifying or acting upon (they can also be called “start” and “end” tags, if you prefer).

For example, if you want to make something bold, you can use the <b> tag. That tells the browser to make the text after that tag bold. You then use the </b> tag to tell it to stop bolding. (The forward slash is the part that indicates it’s a closing tag).

Some tags, like <b> are very simple and have no options (it’s either bold or not).  Other tags allow you to set various attributes for them, such as the location of a file or height of an image. When you set an attribute, it’s indicated within the opening tag.  The structure for an attribute is simply:  attribute=”details”.  You use a specific attribute code, an equals sign, and then enclose the details of the parameter within quotation marks.

The Image Tag

The image <img> tag doesn’t require a closing tag. It starts with “img”, and then you simply specify the location using the “src” (source) of the image to be displayed, which is the web address of the location of the image file.

The Anchor Tag

In many cases, you’re probably going to want to make the image link to something else. To do this, we use the anchor tag (also called a “link” tag). It’s indicated simply by an <a>, and the “href” parameter tells the browser where the link goes.

Combining the Anchor and Image Tags

The anchor tag can wrap around more than just text; you can wrap it around an image.  When you do that, the image becomes the clickable link.  Important to note that some browsers will add an ugly blue border around the entire image when it’s clickable, so you’ll want to tell the browser explicitly not to display the border (unless that’s what you’re into, of course).

In this example I’ve put each tag on a separate line, which is fine because HTML doesn’t care about line-breaks.

A Few Other Attributes

Strictly speaking, the code above will work just fine, but there are a few other attributes that are helpful to know about before we continue.

It’s always a good idea to specify the height and width of an image.  That tells the browser, before it even loads the image, what size image it should expect.  This helps speed up page load times, and keeps the page from shifting around as everything loads into place. Although you can use the height and width attributes to get the image to display at a size other than it’s actual size, this is not a good idea.  When the browser resizes an image, it’s not going to do as good a job as your image editing program (like Photoshop), so it may look a little fuzzy. And if you tell it to display larger than the actual size, then it’s definitely going to look fuzzy. Equally important, if you’re having your readers download large images and then using the browser to scale them down, it takes extra time to download all that unnecessary data.

If you’d like to center the image within the sidebar, you can use a little bit of style code to make that happen. The best practice for doing this is to use a “div” tag and then apply some styling to it: <div style=”text-align:center”> will do the trick.

It’s also a good idea to use an “alt” tag, which specifies alternate text, should the image not be displayed — and it also lets search engines know what that image is about. (It’s not a huge factor in search engine optimization, but it helps.)

Finally, if you’d like the link to open a new browser window, you can specify target=”_blank” (note the underscore, that’s not a typo). Most browsers will respect that, and open a new window when the link is clicked.  Note that you should use target=”_blank” sparingly — you don’t want most links on your site to open new windows!

Upload Your Image

So you’ve got an image file you’d like to display.  Before you can set up the code, you’ll need to know the location of the image file.  If the image is on someone else’s server, you should have permission before linking to it directly (“hotlinking”) — otherwise you’re stealing their bandwidth.  (Additionally, if they ever move the image you’ll be stuck with a broken link!).

A better practice is to take the image and upload it to somewhere else you control.  That can be your blog itself, or a free image hosting service, like Flickr.

If you use Flickr, once you’ve uploaded the file to that service and are viewing it, you can right-click on it and then open the image in a new window.  From there, you’ll see the URL (at the top) of the image location.  (Your browser may also let you “Copy Image URL,” which copies the location it to the clipboard, saving you a step.

 

If you want host the image on your own site:

For WordPress, go to your dashboard and then select Media –> Add New. Once you upload the file (just as you would when adding an image to a post), WordPress should show you the file location.

On Blogger, there is no image upload tool unless you’re writing a post. So the quick way to do it is to create a draft of a post, upload an image, and then preview the post (you don’t have to publish it). That will get the image onto Google’s servers.

Putting it All Together

Depending on which blogging software you use, the way to get the code onto the page varies a little bit, but the basic idea is the same: Create a “widget” or “gadget” for your sidebar and plunk the code into it.

For WordPress, go to your dashboard and then select Appearance –>Widgets.  Drag a “Text” widget into the sidebar area on the right, and then put the code into the larger field.

For blogger, go to Layout, then click “Add a Gadget,” and choose the “HTML/JavaScript” gadget, then put the code into the larger “Content” field.

A Few Final Tips

  • The order of the attributes within a given tag does not matter, as long as you start with the specific tag code (a, img, div, etc.).
  • If it’s not working, make sure you’re using straight double-quotes, not the little curly ones that some word processing programs use (it’s the regular double-quotes — this will usually only be a problem if you’re typing in Word).
  • Be sure there’s a space before each attribute.
  • If you want to have several images in your sidebar, you can put them all in one text box — you don’t need multiple widgets/gadgets. If you use a separate <div style=”text-align:center”> tag around each image, it will stack them nicely centered, one on top of the other.  If you want a bit more vertical space between them, you can put a linebreak between each block of code, and check the “Automatically add paragraphs” option at the bottom… Or change your opening div tags to <div style=”text-align:center;margin-bottom:20px”>

And that should do it!  Any questions?

 

Plan Your 2012: Food & Health Blogging Conferences

Posted on January 1, 2012 by in Strategies

IFBC 2011 Goofballs Dr. Jean Layton, Jameson Fink, and me at IFBC 2011.
Photo by James Collier, used without permission (but I’m sure he won’t mind).

Happy New Year!

With the holidays and crazyness of December behind us, it’s time to crack open the calendar and start planning 2012′s travel adventures!

Many of my getaways in the past couple of years have been for food blogging conferences. They’ve been some of the most enjoyable, enriching, and rewarding aspects of blogging for me. Most importantly — and this is the real reason — I’ve met so many wonderful people who I am now incredibly fortunate to call friends.  In short, I’ve become a blog conference junkie.

There are so many conferences coming up that I actually started losing track.  To get a handle on all the different events, in November I put together a Google Spreadsheet of all the relevant conferences I could find.

I got some good feedback when I shared it on Twitter, so I thought I’d take it one step further: I’ve just created a Google Calendar with all the events dialed in.  If you use Google Calendar (or another program that can interface with it, such as iCal), then you can simply add this to your own calendar, and it’ll automatically add all the events. No muss, no fuss!

Click this link to add it to your own Google Calendar.

If that doesn’t work, try clicking the little ”+Google Calendar” button in the bottom right of the embedded calendar below. And if that doesn’t work, open up your Google Calendar in a web browser, click on the little down-triangle next to “Other Calendars” (in the left sidebar), choose “Add by URL,” and paste in this iCal link.

That oughtta do it!

Anything I missed? Please let me know.

Also, here’s a big hat tip to Dianne Jacob: Her terrific conference round-up helped me fill in a few gaps in my list.

Get a Gravatar

Posted on December 6, 2011 by in Best Practices

Gravatars

Ever wonder why some people’s profile pictures show up alongside comments they leave on other blogs?

Those folks are using a free service called Gravatar — which simply means “Globally Recognized Avatar.”

Gravatar associates your email address with your profile pic. Other sites (such as WordPress blogs) can then query the Gravatar service and say, “Hey, I have this email address…you got a picture to go with it?” Some WordPress themes and plugins, such as many of the ones from WooThemes, use them, too.

Setting this up takes just a couple of minutes, so head on over to Gravatar and create a free account. (If you already have a WordPress.com account, you can use that to log in). Then follow the steps to specify an email address and a profile pic to go with it. You can set up multiple email accounts (each with a different picture, if you want), so you only have to create one Gravatar account. Nice.

Even if your own site doesn’t use Gravatars (I’m looking at you, Blogger), it’s still a good idea to set this up for yourself — so when you leave comments on other blogs, your smiling mug will show up right along with them.

Three Twitter Tips

Posted on November 30, 2011 by in Social Media

Three Twitter Birds

Here are a few useful Twitter tips, just in case you haven’t heard of them before. My eyes are still bleary from putting together my lengthy holiday gift guide at Eating Rules, so I’m going (attempt to) to be brief.

1. Keep it to 120

That “RT @username: ” takes up quite a few characters, which all count towards the 140 limit.  So make sure that your tweet is short enough that it won’t be truncated or edited when someone retweets you. 120 should be fine, but if you have a particularly long username, you may want to keep it to 115.

2. Put something before the @ if you want others to see it

If you “at reply” to someone — meaning that their @username is the very first part of the tweet — then the only people who will see that tweet in their timelines are you, the person you’re mentioning, and anyone who is following both of you.

This is really important. Your tweet will still be visible to other people if they go to your profile page — but it won’t show up in their home feed (or other list feeds) unless they’re already following both of you.

This is pretty smart on Twitter’s part, since it allows you to reply to people and have a side conversation without cluttering up everyone else’s stream. If  you want other people to see the tweet, there needs to be any other character in front of the @ sign. Many folks will simply use a period at the start of the tweet.  Or you could make it a little more natural.

For example, most people won’t see this:

@blogtutor These are three totally terrific Twitter tips! http://bit.ly/3twittertips

Much better to say this:

Hey @blogtutor, thanks for these three terrific Twitter tips! http://bit.ly/3twittertips

(Thanks to Jeff Potter, @cookingforgeeks, for teaching me this one.)

3. RT vs. MT

If you’re retweeting someone verbatim, then “RT @username:” is the standard format to use (or use the built-in retweet function).  If you modify their tweet, it’s becoming common practice (perhaps common courtesy) to use “MT @username:” instead.  It simply means “Modified Tweet” instead of “Retweet.”

That brings up the question of how much modification warrants going with MT instead of RT.  Since not everyone knows what MT means (yet!), it does have some potential to cause a little confusion.  Personally, if I just change a couple of characters to save space, but don’t change the tweet substantively, then I’ll usually stick with RT.  If it’s a long tweet with two sentences, I might just RT one of the sentences if I’m not tweaking the remaining sentence.  But if I start cutting out whole words, or tweaking it more than just for efficiency’s sake (correcting grammar, perhaps), I’ll use MT instead.

–

Do you have a favorite Twitter tip? Share in the comments!

Cartoon by Scott Hampson, used under the creative commons license.

Has Food Blogging Jumped the Shark?

Posted on November 20, 2011 by in Thoughts & Observations

Marge Simpsons' Sous Vide Turkey

It finally happened: Marge, Bart, and Lisa created a food blog. It was a brilliant satire in a way that only The Simpsons can do, poking fun at just about every foodie-ism out there.

The episode came right on the heels of the International Food Blogger Conference. There’s also BlogHer Food, TechMunch, Camp Blogaway, Food Buzz Festival, Eat Write Retreat, and a half-dozen others. (I’ve actually started a list - please let me know if I’m missing any!) Many of these conferences are now in their third year, and are already selling tickets for their fourth.

My friend Irvin just did a terrific IFBC wrap-up post on How to Start Food Blogging.  I found myself nodding as I read his “Holy Trinity” of food blogging:  Gorgeous photography? Yep. Wonderful writing? Check. Rock-solid recipes? Absolutely.

Here’s the thing: That’s not nearly enough. Sure, if you started your blog in 2006, it might have been. But now?

Irvin claims that the photography/writing/recipe trifecta is 95% of what determines success in food blogging. Though I completely agree that new bloggers should be focusing almost all of their energy on those areas, getting those three things right is just the foundation.

(To be clear: Irvin’s post was filled with much more excellent advice than just that, and I hope everyone was taking copious notes on what he had to say.)

The trick is that food blogs have become ubiquitous. The Simpsons episode certainly drives that point home — we should definitely sit up and take notice. You’re going to need a heck of a lot more than just those three to stand out from the pack. If we’re all doing the same thing, our days our numbered.

Wikipedia defines “Jump The Shark” as “the moment in its evolution when a brand, design, or creative effort moves beyond the essential qualities that initially defined its success, beyond relevance or recovery.” (In case you hadn’t heard the term before: It comes from the Happy Days episode in which Fonzie tries to, well, jump a shark, in a failed attempt to bolster their sagging ratings.)

I’m fearful that if we’re all just focusing on food photos, writing, and recipes, we’re going to move “beyond relevance” – particularly as corporations are building recipe websites with huge databases that dwarf our our blogs.

The good news is that the things you need to do on your own site to distinguish yourself from the pack are the very things that are going to save us all from Happy Days’ fate. If you want to stand out to readers as unique and valuable, you have to be, well, unique and valuable. Being creative and contributing in new, exciting, and useful ways will lift all of us and keep us moving forward as a community.

The challenge, then, is to find a way to stand out and to add to the conversation. I believe that every post (and every tweet) should add value. Yes, a recipe is something of value, but at this point, do we really need another recipe for Kale Chips? (Guilty!)  How can you take those kale chips and turn them into something more than kale chips?

Another way to think about this is the simple “Who Cares?” test.  Ask yourself, “Who is going to care about this post?” You should have a good answer before you hit “Publish.”

Every one of us is different, of course, and we should all play to our strengths. I’m not the best recipe developer (not even a good recipe developer), so I don’t actually have that many recipes on Eating Rules. However, I’ve discovered that I’m good at researching a topic and synthesizing the information into a concise and approachable presentation, such as my two-part series on sugar.

Another example? Irvin’s Wordless Recipes. He uses those gorgeous photos to walk the reader through each step of a recipe. In so doing, he’s elevated his recipe above the “typical blog post” by inventing a way to present information in a compelling, enjoyable (and still eminently useful) way. That’s the extra 5%.

We’re approaching a tipping point, and it has the potential to take us in one of two directions. We can go up, lifting each other and our own blogs, continuing to add value to the conversation in our own unique ways. Or we can go down by saturating the market with stale, repetitious posts. I certainly hope we’ll tip in the right direction.

So ask yourself: What is it that can set you and your blog apart? I’m not talking about a gimmick; I’m talking about real, lasting value that you’re going to give to your readers and to the community.

Once you figure that out, your blog will find success – and you’ll help keep us from jumping the shark.

–

Simpsons screenshot grabbed from this annotated slideshow of the The Simpsons Food Episode.