Sunday, March 10, 2013

Blogging Technology 101: Blog Badges

Blogging tech Badges

If I had a button/badge this is what it would look like!

Pop art badge gh 7

 Badges or buttons whatever you want to call them are all over blogs every where. They are used as advertisements, to grow your following, and to simply let folks know you exist in the blogging sphere! Now if you are just aching to have one, that's cool, and that is what I am going to show you in how to accomplish just that...your own button or badge.

Now I am sure you have noticed that there are two types of badges in the blog sphere. One is where the blogger says: "Grab my badge" or "Buttons for you" as seen in the photo from the Fat Quarter Shop. Then there are ones with an HTML code at the bottom of them for easy to use access as seen here in the photo by my fake blog of Isaboo & Blue. In this tutorial I am going to and show you how both of them come together and how you can use either or for your own blog.

grab badge 8

Let's get started, shall we!

The first button/badge I am going to show how to accomplish is the Grab my Button badge.
I remember when I first started blogging and came across these type of badges I was frustrated and had no clue on how to use them. To me they were not user friendly. As time has passed and I have gotten wiser to the ways of blogging I now know that grabbing these buttons/badges are an easy thing to accomplish.

Picture 2026

  • Right click on the image you wish to have on your blog
  • Hover your mouse to Save Image As and left click on Save Image As.
  • A pop up window will appear and either save it in My Pictures or My Documents or some file where you will be sure to find it. *Note: I am a Google Chrome user and Google Chrome will download this image first. Just and FYI!

Grab badge

  • Once you have it stored in the file where you know you will find it. 
  • Check to see if the image that you just saved will appear or work.
  • If it did...kudos!

grab badge 1

  • In Blogger go to your layouts page.
  • Click on add a gadget
  • Scroll down to Image on the pop up window

grab badge 2

  • Click on Choose a file 
  • In the next pop up window find the Fat Quarter Shop image and then click on the open button.

Grab badge 3

  • Your image should appear.
  • Next is to add a link.
  • See where it says "Link" add the Fat Quarter Shops URL (website address) then click on Save button.

Picture 2039

This is what it will look like on your page

Picture 2042

And if you click on the Fat Quarter Shops button it should take you to the Fat Quarter Shop website!

Picture 2041

FYI: If you do add the Fat Quarter Shop's badge to your site it is free advertising for them... kudos! However, if they are sponsoring (paying for ad space) your blog, make sure you state above the badge "Sponsors" or "Advertisers." This way folks know that you do take in ads and that they (FQS) are paying you to be there.

Making your own Badge for your Blog

If this is the first time you are reading the Blogging Technology 101 Series, please do take a moment to read through the How to Make Header in both FotoFlexer and PicMonkey to know what I am discussing in this section. Thanks!

Making your own Badge or button is no different than making your header, so I am not going  to go in to heavy details on how to get it done. For mine I used PicMonkey and went into make a collage. I choose the two ducks in a row and removed the second cell. I then shrank the cell down to 250 x 250 and then saved it. I got my background from Fhotoflexer and then came back to PicMonkey for the fonts.

Picture 2019

Once you have your own badge/ button made Save it.
I also store my badges/buttons at Flicker too and put all the settings for that badge on private so no one can see them except me.

Making your own Badge/Button with and HTML Code

Badges with HTML codes are much more user friendly for new bloggers or computer challenged web users. If you offer this type of badge on your page, all the person has to do is copy and paste the HTML code onto their website with out going through a three ring circus

Picture 011

This is where I could walk you through and show you how to make the HTML code but someone else has all ready been there and done that so I will hand it over to Shabby Blogs on this one. Go *here* to see how they put there badge/button together. The rest of what I have for ya here is if you do not understand what the heck it is that they are talking about. Since their tutorial was made up four years ago, its still good but Photobucket has changed a bit since the tutorial was last written.

When they say add a gadget (in Blogger) you need to be in your layouts page.
Then scroll down till you see HTML/Java script, and then click on it to open it.
Add the Shabby Blog's code in the Rich Text form.

grab badge 7

Remember in the very beginning of this series I said if you do not have a Flickr page please open one up!
This is one of the main reasons why I said that.

All right all this is mainly where all that scary HTML coding comes in.
It's all right if you get flustered or don't understand it a bit, please grab the nearest young person if ya can to help out...just joking!
Or keep rereading the Shabby Blog tutorial until it makes since.

In the mean time in your Flickr account upload your badge

Picture 001

Now in the Shabby Blog badge tutorial they say grab the direct link or the URL to your button. I am going to advise you not to do so. If you see in the photo below with using Flickr it will not work. You will get this little blip on your page.

grab badge 5

What you need to do in Flickr is to use the HTML code that Flickr provides for your Badge. Then follow the instructions given to you by Shabby Blogs. As you can see in the HTML will work.

grab badge 6

While we are talking about HTML Codes, did you know you can change the size of your badge?
If you notice in the HTML code if you read through it you will see a width and a height that equals a number.
By highlighting the number and press the backspace button on your keyboard you can then put in the number you want.
See in the photo below how it says width="228" and height="240".
In the photo beside it I then changed the width and height to 200 each.
*Note: you can change the width and height once you have it pasted in HTML

Width and Height

This will allow your badge to be a 200 x 200 square. (See the difference photo below)
One last thing, since Shabby Blogs ask you to paste the code twice be sure that you change both width and height numbers in the Flicker HTML code.

grab badge 4

Favecon Bonus

Favecons....What are favecons?

Favecons are the small icons at represents a website to which will appear in your favorites bar or page.

Now you can make your own favecon the same way you made you button or badge.
The only difference is that it has to be 100 x 100.
I suggest to use PicMonkey to accomplish it.

This is my favecon

gh 2

  • In Blogger go to your layout page and at the very top left side of the page you will see a box that says Favecon.
  • Click on edit to open the page and a pop up window will appear.
  • Then Click on Choose a File.
  • From your pictures or where you have you newly favcon saved click on that to upload it to the Favecon.
  • Click on save and there it is.
  • If your fave con is not 100 x 100 you will be told by Blogger!


Well that is all for this Blogging Technology 101 Tutorial!

Hope it helped!


1 comment:

Linda in Calif. said...

Yay! Yay! I'm so excited to learn this! Thanks

© 2012-2014 GH Quilting |
All Rights Reserved