{Crafty blogger tip #2} Make a badge (and why!)

Badges are everywhere!

To sew-a-longs;                                                        

Like Gertie’s Lady Grey Coat Sew-Along                                      Or, the Chanel Jacket sew along

To wear-a-longs:

Me Made March                                                                            Self Stitched September

They are a two-way thing. Like wearing a real badge, the maker is trying to promote or spread something. And the wearer wants to express their allegiance or appreciation for that very thing. In the blogosphere that two way exchange takes place between two places on the web  - between a blog and another site.You may use other blog’s badges to show you are joining in a sew-along. If you want to start your own, then you will need to make a badge other’s can use to show they are sewing-along.

Another use, is a form of recognition or reward. Like when you give out a badge for being a beautiful blogger. You can generate all manner of awards here , for anyone you deem worthy!

In this entry, I will be making a badge I can give to other blogger’s when I’ve featured them. Milena , the coolest vintage hairdresser I blogged about asked for one for her. So, here it is



    1. Make your artwork

Like making a button on your blog, you will need a graphic.  

See {Crafty blogger tip 1}  for making a
artwork. Here’s a graphic I made
in powerpoint following
that tute.



     2.  Host your artwork

Hosting is placing your badge artwork in one place on the web that is publicly shared so that everyone that uses your badge doesn’t have to download and upload the artwork file themselves. By hosting it in one location, everyone that uses the badge just references that one location. There are plenty of sites that offer image ‘hosting’ for blogs. Some free sign-up hosting sites are listed here. Sign up, upload your artwork and make a note of the url it is shared at - you will be inserting that url into the html below, where the purple text is.

3. Decide on your destination url

      The destination is where people who click on the badge will be taken, wherever the badge appears. For my "Golly, Passiona blogged about me badge" I have a generic link to my blog - this can be updated to the exact blog post where I blogged about the bearer. For my "Project Runway Sew-a-long" badge, the destination url is the flickr group where the sew-a-long garments are uploaded. Choose your url and make a note of it - you will be inserting it into the html below, where the burgundy text is.

       Now you're all ready to make the gadget. 
 

    4. Make the gadget
How do I make the code available for someone else to post on their blog? Make a little html script like this one to place in an html/java script gadget on your blog. The first part of the code is a sample of the button, the second part is the code they copy to get the button - paste it all into the one html/java script gadget.

      <a href="insert your destination url here"><img src="insert the url of your hosted artwork here" border="0"/></a>

<div style="width:180;background-color:#FFFFFF;border:1px solid #663300;">
&lt;a href="insert your destination url here"&gt;&lt;img src="insert the url of your hosted artwork her" border="0" /&gt;&lt;/a&gt;</div>

    It will appear in a frame so anyone can cut an paste the html directly into a gadget on their own blog. 

I wonder where I get my inspiration!

{Crafty blogger tip #1} Add a button to your blog

So, you’re crafty but not codey?

At the last BurdaStyle Sydney catch up dearest Molly asked how to add a clickable button to her blog. Here, I will show you how. The button can link to a distinct page on your blog or to a page of search results on a particular theme (blog label). This step-by-step is illustrated with “Sewing Through the Decades” as an example.

If you are hi-tech…

 (or wannabe and don’t mind deep-ending it), look at a button on a blog you like and right click to either “View Source” (in IE) or “Inspect Element” (in chrome rocks) or similar action available on your browser. That will give you access to how that button was coded. 

One of Molly's favourite blogs, Tilly and the Buttons has  neat buttons and this picture shows inspecting the element in chrome. Voila the source code of Tilly’s  button will appear for you. Copy the code and replace the elements (image source url with one to your own picture and replace the destination page url to your own url) before pasting it into a gadget on your blog.

If you aren’t…

Here’s your step by step guide:


       

 1. Create your artwork

To make your button you will need an image to appear as the clickable graphic on your blog. If you’re using a straight photo (without any writing on it) than that is easy – go straight step 2. If you want to layer some words over your picture, you can do this easily  in powerpoint or keynote by i) dragging your picture onto the slide.; ii) inserting a text box onto the picture and writing what you want (e.g. “Sewing through the Decades”); iii) Save the finshed product as an image (jpg or png file). In power point you do this by, selecting both the image and the text box, right clicking and “Save as Picture” . In Keynote you can share or export the slide as a jpg or png. And you’ve made your graphic!

        2. Decide on your destination url

If you are linking to a web page (e.g. another page on your blog), that is easy. Just keep the url to that page at the ready. If you would like to link to an auto-generated page that lists all your blog entries with a particular label, then it is a two step process. First, click on the label you want to be the basis for your button on any of your entries that have it. Second, you will now have been taken to an auto-generated page that lists all your blog entries with that label. It would look something like this

http://lecoutureve.blogspot.com/search/label/%22sewing%20through%20the%20decades%22 now, keep that url to the new page at the ready.

Don't have any labels on your blog entries?! It’s never too late. You can easily go back into each one and add a label (or three)!

That’s the hard lifting out of the way. Now you’re ready to put it on your blog.

The steps to follow:

1. Create your button artwork
2. Decide on the destination for your button (either a distinct web page or an auto-generated results page)
3. Go to Blogger "Dashboard"
4. Click on the “Design” link
5.  Close to where you’d like the button to appear, click on “Add a gadget”
6. Choose the “Picture” gadget
7.  Upload your button artwork (that you made in step 1) using the file chooser
8.   Paste your destination url into the “link” box

Happy crafty blogging!