How To-zday: Blog Buttons & Swaps!

Today's How-To is gonna be a bit different.  I'm goin' digital, yo.  Kind of like when Dylan went electric, only far less awesome & earth shattering~*

In case you haven't figured it out already {lol} I'm a bit of a DIYer.  When I started blogging, it was only natural that I'd try to figure out how to do some design-type stuff.  I'm still trying to figure out background design & that sort of thing -- its amazing how many tutorials are available online.  I'm hoping to be able to create my own backgrounds soon {though I'm keeping my beautiful bloglovin/email/twitter etc buttons designed by Kristen at KV's Confessions}.

Anyway.

A while back I figured out how to make blog buttons for The Closet.  They allow readers & friends to grab a button to post on their blog {IE free advertising, ftw}.  The tutorial I used was a bit convoluted, so I thought for today's tutorial I'd do a simplified version as well as introduce a new button swap page I'm gonna get started.

First you'll need a picture you'd like to use to represent your blog.  As a blog reader, I've found that the best blog buttons are personal {a picture of the blogger for example} and clearly state the blog's name.  They just draw me in, what can I say.

If you are fortunate enough to have photoshop or some other photography program, you can use that to create your image {A Catlike Curiosity just did a great post on using photoshop}.  For those of us without advanced photo editing software, there is a great photo editor online, Pixlr-O-Matic, that not only adjusts your photo & has various effects, but also cuts it to a perfect square.  Be Funky, another photo editor, has an add text feature with a few fun fonts to choose from.  I cheat & use PowerPoint2010 to create the text & image {it has a "save as picture" option}-- I use PowerPoint for my classes & for creating graphics for my class websites too, so I am comfortable with it.
Here are some of the pics I've used:

I think its a good idea to change 'em up every so often to keep things interesting & I'm clearly still figuring out what works~*

Next, you need to upload your pic to an online album.  There are literally dozens of photo sharing sites: Flickr and Phototbucket being among the most popular. Google+ has limitless albums {awesome!} & they also have photo editing which will allow you to adjust the size of your picture easily.  Thats what I use.  No worries, you can keep the albums private if you like {so feel free to upload a metric ton of pics without your +followers thinking you are an ego maniac}.

I think 200x200 is a good size, but other bloggers may have a different preferred size-- once you've uploaded the finished button pic, you can size & resize as often as needed & save each size under a new name.  I've seen a lot of blog buttons that clearly were not resized to fit the blog on which they are posted-- much better to resize!  Most bloggers use PassionFruit {as I am about to introduce} even for free swaps, & the form indicates what size is preferred-- easy peasy to adjust your button pic to fit!  As a general rule, its a good idea to offer a few different sizes & looks of button so that they are blog friendly.

Now for the fun part.

Open up word, iWork,  notepad or some other document program & copy & paste the following code:

<a href="http://YOUR WEB ADDRESS/" target="_blank" title="BLOG TITLE">

<img alt="BLOG TITLE" src="http://IMAGE WEB ADDRESS"/></a>

<textarea id="code-source" rows="3" cols="13" name="code-source">

<a href="http://YOUR WEB ADDRESS/">

<img border="0" src="http://IMAGE WEB ADDRESS"/></a></textarea>

Where the red text is, paste your blog's address.  Where the green text is, paste your blog's name. Where the blue text is, paste the web address of your picture.  Like so:

<a href="https://aclosetintellectual.blogspot.com" target="_blank" title="The Closet Intellectual">

<img alt="The Closet Intellectual" src="https://lh3.googleusercontent.com/-hO7RCVT74bQ/UJ5UC2V5I6I/AAAAAAAAGOU/6jScWP3hti4/w234-h234-n-k/tjg4.jpg.jpg"/></a>

<textarea id="code-source" rows="3" cols="13" name="code-source"><a href="https://aclosetintellectual.blogspot.com/"><img border="0" src="https://lh3.googleusercontent.com/-hO7RCVT74bQ/UJ5UC2V5I6I/AAAAAAAAGOU/6jScWP3hti4/w234-h234-n-k/tjg4.jpg.jpg"/></a></textarea>

Now all you have to do is add it to the layout of your blog!  For blogger, its fairly easy:

Go to layout:

Click "Add Gadget":

Click "HTML/JavaScript":

Copy & paste the code you prepared & click "Save":

You can move the gadget wherever you like on your blog, & now your readers can add your button to their blogs!

If you use wordpress or another blog format, follow your blogs instructions for adding features.

Now that you've got your blog button, allow me to introduce you to my new SWAP page~*

One of my goals for 2013 is to get organized-- both at home & here at The Closet.

I've been getting a lot of requests for sponsoring &/or swapping lately, so I figured starting a swap page would be a good way to keep track of things.

I am NOT charging for this, but I am using Passionfruit-- its just a great way to keep track, give both you & me a little free publicity & allow buttons to go up without my having to go through the process of uploading them {I love instant results, don't you?}. I will phase out any buttons that are not through Passionfruit over the course of the month, so everyone has time to move over, no worries.

Here are the details.  I'll be running 10 swaps for right now, all 200 x 200px, all for 30 days.  If I get a lot of responses, I'll add more spaces &/or offer different sizes...but we will worry 'bout that later~*

If you are interested in doing a swap, here's what you do:

After clicking the $5.00 button, fill in the info & enter in the promo code

before you hit the Next: Payment button & the price for the ad will drop to 0.  In order to use Passionfruit, I had to pick a number {hence the $5.00} but I do not want to charge anyone so be sure to enter the code!
Complete the submission, then grab one of my buttons {just copy & paste the code under the picture below} & add it to your blog.  Once my button shows up on your site, your button shows up on my site & BLAMMO, free publicity!

Sweet, right?

<br /> <a href="http://www.aclosetintellectual.blogspot.com/"><img border="0" src="https://lh4.googleusercontent.com/-w2mphcdfX4s/UHmbZOnWp4I/AAAAAAAAEv0/0GLlKXOPPEM/w178-h178-n-k/ad200x200.jpg"/></a><br />


<br /> <a href="http://www.aclosetintellectual.blogspot.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggVmHy_lzJ-iTnsyW8dEiFdFZVl8492Hj9FZIAx-b_Jn9bguIXynqJMEf62CGv5BjMOBfMTtduVK5tIi7aqMSHZo7-Tht3mbJoT0_U3MfbC3RitA8dFJ_1lhljDeuGnfdLKPbe3QAyp6FW/s200/200x200me.jpg"/></a><br />
Obviously, I do reserve the right to refuse to swap should a blog come along that doesn't fit with the intent of The Closet-- so free online casinos need not apply~*

Anyone else being besieged by a plethora of online casino anonymous vague comments?  Well, casinos and real estate in Turkey.  Go figure.

Anyway.

I've added a SWAP page to the menu bar, so you can always load a button later.  Here's hoping we can help each other grow & meet more great bloggers in the process!

See you tomorrow for some web wandering & pics from school!