Saturday, February 4, 2012

Adding Badges and Banners to Your Blog

Badge by Jeremy at Retro-Zombie

     The 2012 A to Z Challenge is off to an exciting start.  We are hovering around the 500 count right now and growing steadily.  I encourage each of you to continue promoting the Challenge on your blogs and in comments.  Let's aim for 1000 sign ups before the end of February.  We'll give some reasons why you might want more sign-ups in future posts.

       Alana Garrigues from Writercize did a nice job promoting the Challenge this past week. Check this out:    

Please show Alana your appreciation by stopping by her blog to say hello and thank you.   We'll probably hear more from Alana on this site in the weeks to come.  

       Have you seen the A to Z Twitter newspaper that Damyanti has been managing for the Challenge?  It's in the sidebar to your right if you want to click on it and see the full thing.  Damyanti has been doing an outstanding job keeping the Twitter buzz going with tweets and the newspaper.   If you're on Twitter be sure to follow the Challenge at @AprilA2Z.   The hashtag is #atozchallenge.  Since I'm not on Twitter yet I don't know exactly what this means, but those who are should know what I am talking about.  Keep the Twitter buzz coming.  Damyanti will be here on the A to Z Blog in an upcoming segment to talk more about this Twitter topic.  

        Jeremy from Retro-Zombie will be also providing you with some helpful information in an upcoming post.  In case you don't know him yet, Jeremy is one of the A to Z co-hosts.  I encourage you to stop by his blog and say hello.  He is a very creative guy.  Jeremy is responsible for the animated badges and banners you can find here on the A to Z Blog page and have probably been seeing popping up on blogs everywhere.  Have you added one to your page yet?

         We've had a number of folks wondering how to add badges and banners to their sites.  Today I'm providing a brief how-to for those of you who have Blogger blogs:      

    How do I add a badge or banner to my own blog? (old Blogger format)   

 Here is how to put the badge or banner that includes code on your site if you are using the old Blogger .

1. Copy the code beneath whichever badge or banner you prefer. The badges and banners  appear on the A to Z Blog page. The code is in a small text box beneath the badges and banners.

2. Click "Design" at the top right hand corner and you should be taken to a page where page changes can be made.

3. You should see a sidebar with a little box that says "Add a Gadget" at the top. Click that link.

4. A pop-up box should appear. Scroll down to "HTML/ Java Script" and click the plus sign.

5. A configure box should appear. You can give a title. In this case something like "Blogging from A to Z Challenge" or "I'm Blogging from A to Z in April". Then in the content box you will paste the code that you have previously copied. Click save and that box should disappear.

6. to be safe also click "Save" on the top right of the Page Element page. Then click view blog and you will be taken to the blog page again where you should see the badge if you've done it right.

How do I add a badge or banner to my own blog?

These directions are for installing the “2012 Blogging from A to Z” badge or the other badges and banners that provide code on a Blogger-hosted blog, using the newest version of the editor.

1) Choose the badge or banner you wish to add.
2) Copy the code from the box under the badge.  Make sure you scroll through that whole window because there's more code than is displayed in that small box.
2) Click "design" at the top, right of your own blog.
3) Click "layout" from the menu down the left side of the page.
4) Click "add a gadget" in the place where you'd like the badge
5) Scroll down the list of available gadgets until you get to "html/javascript" "add 3rd party functionality or other code to your blog", then click the blue plus sign.
5) Paste the code you copied in step one into the big, blank box.
6) If you want to add a caption, put it in the strip where it says, "title".
7) Click "save."
8) Now view your blog to see if it worked!

         Remember that whenever you have questions, you can ask in the comment section or click on the FAQ tab above to see if the question has already been answered.  If there is no answer yet, ask!

          Hope you're having fun visiting your fellow A to Z-ers.  If you're not yet, I encourage you to drop by some of them between now and April.

          Don't forget the Video Contest.  You can read about it by clicking on the appropriate tab at the top of the page.  If you missed it earlier this week, I leave you with the most recent entry sent in by Kathleen at Living 2012:



Thanks for the tips.


MISH said...

Thanks for the tech-lesson...
... and I love Johnny Bravo - he's soooo quirky... provides a good laugh with his antics...

Alex J. Cavanaugh said...

Jeremy has really created some cool banners and badges for us!

Ron Easton for Dads UnLimited said...

That's a great video btw! I'm enjoying the headstart on visiting peoples's blogs.

Marta Szemik said...

I'm pretty new to twitter as well so I'll be looking forward to some tips :)

Tina said...

Well done directions! I'm sure this tutorial will help a lot of folks. Thanks!

Tina @ Life is Good

Co-Host of the April 2012 Blogging from A to Z Challenge

Twitter: @AprilA2Z

Empty Nest Insider said...

Jeremy's badges are amazing and I also enjoyed Kathleen's video! Julie