FBC Member Blog Badge (and how to install it!)

You've been asking, and we've been promising!   So here we have it, the FBC Member badge for your website.

The badges aren't mandatory - blog's are very personal and everyone is different.  But many of you have asked if you can show your "colours" so to speak, and we're happy to oblige!

Installing Your Badge

Installing the badge is quite simple and some of you won't need a tutorial at all.  If that's you, then carry on! And if you're using WordPress, just scroll down to get the code you need.  For the rest of you, here are instructions for both WordPress and Blogger.  All you need to do to get started is right click on the badge to your left and save it to your computer.  The badge won't have the grey border around it - that's just how our site formats images.

For WordPress

If your blog is in WordPress you will probably want to install it in your sidebar, using a text widget.  The first step is to upload the image to your Media library.  In your Dashboard, click on the Media button in the left hand menu.  When the Media Library page comes up, click the Add New button:

Upload the image just like you normally would and when the screen comes up asking you to fill in the title, alternate text, etc, copy and paste the File URL into a text editor like Notepad (PC) or TextEdit (Mac) - you'll be needing that shortly.

Next you'll add a widget to your sidebar.  In your Dashboard, select the Widget menu item (located under Appearance) in your left hand menu.

Different WordPress themes may have different widget options for you but to keep it simple, the best choice is to use a standard text widget that's always available.

WordPress has a nice drag and drop functionality for widgets so just click on the Text Widget choice and drag it over to the right, to your sidebar list.  This will allow you to put in whatever type of text or HTML  you like, which is exactly what we want.

Now, open up the Text Widget you just added to your sidebar by clicking on the small down arrow in the right corner.

You don't need to add a title.  Instead, you are going to want to paste in that File URL that you saved earlier.  But you're also going to need to add some code around it so that it shows as an image and not a line of code and links back to the Food Bloggers of Canada site for all those curious people who stop by your blog.   Here's what you'll need:

[box]<a href="https://www.foodbloggersofcanada.com"><img title="FBC Member" src="https://www.yourblogname.com/wp-content/uploads/2011/11/white_member.png"></a>[/box]

Make sure you swap out yourblogname with your actual blog name.

And there you go!  Now, you might notice that this doesn't neatly centre your badge in the sidebar.  If you want to fix that, you need to add a little bit of CSS.  But, that's not hard.  I'll show you how:

[box]<div style="padding-left: 75px;"><a href="https://www.foodbloggersofcanada.com"><img title="FBC Member" src="https://www.melissahartfiel.com/wp-content/uploads/2011/11/white_member.png"></a></div>[/box]

By adding the style div we can "pad" the image so it's forced to move over to the right.  The 75px amount may need to change depending on the width of your sidebar.  My sidebar is 300px wide.  The badge is 150px wide.  300-150=150 so that means I have 150px of space still available to the right of the badge.  To centre it, I need to divide that in half again, giving me 75px.  So I added an extra 75px of padding to the left of the image and there you have it!  You can go check out my blog to see it in action if need be.  Make sure you add the ending div tag at the end of your code!!  You can use this little trick for centering other badges you might have in your sidebar as well.

For Blogger

Now, I'm a WordPress girl so I'm not as familiar with fine tuning Blogger.  But the easiest way to add the badge is to go into your Design tab in the Blogger Dashboard and select Page Elements and then Add a Gadget

When the Add a Gadget window opens, select the Picture option and follow the instructions for uploading an image.  In the link window, add the www.foodbloggersofcanada.com link.  Make sure you also add a title!

You won't have the fine control to place the image exactly how you would like, as you do in WordPress, but you do have a much quicker way to upload it!

And there you have it! A new badge and a little tutorial on how to add a little bit of CSS to fine tune your sidebar.  A two for one!

FBC Member Blog Badge (and how to install it!) was written by Melissa Hartfiel, FBC co-founder and author of the food photography blog Eyes Bigger Than My Stomach where she sometimes put her tutorial writing skills to work by writing Adobe Lightroom tutorials.  She is a web and graphic designer, WordPress addict,  photographer and the resident FBC geek.  Melissa lives just outside of Vancouver, BC.  Twitter: @mhchipmunk

SUBSCRIBE TO GET YOUR FREE SPICE BOX EBOOK

Email

SUBSCRIBE HERE

You are subscribing to the FBC Food Lovers Newsletter.
You can unsubscribe any time!

Click Me