Do you have pride?

Quick Links: How to add a button to your page. Make your own button. Make your own GIF button. Templates.

Hello, and welcome to my pride buttons.

I made this tumblr to house my button creations!

I got my starting idea and model for these buttons from http://dyke.web.fc2.com/, but it seems as though their website is down. So no more buttons from them. They also really only catered to gays and LGBT allies. I wanted to expand on that and include several more sub-categories from the LGBTQIA community, so I did. Then I had an awesome idea to even do some countries and zodiac signs! After that I got some requests to do basic religions and non-religions. I am wanting to keep expanding.

I do take requests but some flags and/or designs can be difficult to replicate in such a small area. Therefore, some designs may have to be modified or altered, sometimes drastically, to fit. <

How to add one of my buttons to your Tumblr page:
1. Copy the code provided with the picture you want.
2. Go to your Tumblr profile and click the “Customize” or “Edit theme” button.
3. Place the code copied earlier to the description box.

More detail on placing buttons:

Placing a button in the top left-hand corner:
HTML coding is not going to be the same for everyone. You will have to look through your own HTML coding to find exactly where to put the coding.
Start by going into edit/customize the theme. Click “Edit HTML” at the top left side if the page.

The HTML coding for your Tumblr page will pop up.

After that, hit the buttons “Ctrl” and “F” at the same time (or hold down the “Ctrl” button and quickly hit the “F” button and release both). For a Mac I believe you just use the apple key instead of the “Ctrl” key. A little bar will appear at the top of the HTML coding – as shown in the picture.
Or you can skip this step and the next step and scroll through the coding to search for the certain place/words in the next step (but that takes more time).

Remember each code is different. Type in “CustomCSS” in the search box. It should bring you to where the word(s) are located. It should be in blue lettering, like in the picture.

Scroll or look a few lines down in the coding and you should find a tag called “” (it’s highlighted in the picture).

Make a space after that tag (by hitting the enter button) and paste the coding for the button(s) that you want.

Update preview, save, and exit. You have your buttons!

Placing more than one button:

Beside each other:
If you have more than one and want to have them beside each other, place the coding for each of the buttons right after one another.
There will probably be an underscore or space between them. To get rid of this, get rid of the line breaks from the actual button coding. I break them with three line breaks to make it a little more organized for me.

What I have originally:
```
<a href="http://mypridebuttons.tumblr.com" target="_blank">
<img src="https://64.media.tumblr.com/07a98f3b2ce73ef9ac269bcf0d3df419/tumblr_mq82iyvGBR1s64k2wo1_100.png" border="0"  alt="Panda" />
</a>
<a href="http://mypridebuttons.tumblr.com" target="_blank">
<img src="https://64.media.tumblr.com/c7e4244642f0a0346e27add0f74a4ae1/tumblr_mq82d4U62K1s64k2wo1_100.gif" border="0"  alt="Kitties" />
</a>
```
What you should have:
```
<a href="http://mypridebuttons.tumblr.com" target="_blank"><img src="https://64.media.tumblr.com/07a98f3b2ce73ef9ac269bcf0d3df419/tumblr_mq82iyvGBR1s64k2wo1_100.png" border="0"  alt="Panda" /></a><a href="http://mypridebuttons.tumblr.com" target="_blank"><img src="https://64.media.tumblr.com/c7e4244642f0a0346e27add0f74a4ae1/tumblr_mq82d4U62K1s64k2wo1_100.gif" border="0"  alt="Kitties" /></a>
```
Over each other:
Placing your buttons over one another is not difficult at all. There is, however, a tag that you need to know. The <br /> tag. It breaks the line (like hitting the enter button in a word document). In coding, if you use the enter button to break lines then it won’t show up outside the coding, in the final product. So, you have to use this tag.

What I have originally:
```
<a href="http://mypridebuttons.tumblr.com" target="_blank">
<img src="https://64.media.tumblr.com/07a98f3b2ce73ef9ac269bcf0d3df419/tumblr_mq82iyvGBR1s64k2wo1_100.png" border="0"  alt="Panda" />
</a>
<a href="http://mypridebuttons.tumblr.com" target="_blank">
<img src="https://64.media.tumblr.com/c7e4244642f0a0346e27add0f74a4ae1/tumblr_mq82d4U62K1s64k2wo1_100.gif" border="0"  alt="Kitties" />
</a>
```
What you should have:
```
<a href="http://mypridebuttons.tumblr.com" target="_blank">
<img src="https://64.media.tumblr.com/07a98f3b2ce73ef9ac269bcf0d3df419/tumblr_mq82iyvGBR1s64k2wo1_100.png" border="0"  alt="Panda" />
</a>
<br />
<a href="http://mypridebuttons.tumblr.com" target="_blank">
<img src="https://64.media.tumblr.com/c7e4244642f0a0346e27add0f74a4ae1/tumblr_mq82d4U62K1s64k2wo1_100.gif" border="0"  alt="Kitties" />
</a>
```
Submission guidelines:
Use my template provided to make your own button. (I also recommend using the letters provided.) Once done, upload the finished product by going to my submission page and submit it to me.
If your submission is hurtful or hateful to anyone in any way, it will not be posted.

Submission templates:

This is the template for the actual button: The white like is where I start my letters.

Dimensions:
Total: 80 pixels x 15 pixels
Picture rectangle: 24 pixels x 11 pixels
Word rectangle: 51 pixels x 11 pixels

Since the letters I provide are only 5 pixels tall, there will be 3 extra pixels above and 3 below the letters/words in the word area.
I also start my words 3 pixels from the left side of the rectangle, unless there is a shortage of space.

This is the actual size of the letters:

This is an enlarged version of the letters:

HOW TO MAKE YOUR OWN (simple version)
First, open up the blank template in some image editing program. It doesn’t have to be a fancy program. I use Microsoft Paint.

I usually start with the picture. Mess around or whatever. Get a few images made up and pick your favorite.

Move on to the wording. Using the template is very easy. I keep the lettering 1 space apart.

Save the image. I usually save it as a PNG file.

You are finished! You could upload it to your own blog or, if you don’t know much about HTML, you can submit it to mypridebuttons’s submission page and the HTML will be done for you (as long as the item is not hurtful or harmful).

HOW TO MAKE YOUR OWN (GIF version)
If you can make the simple version, it’s not that much harder to do the GIF version.
You first need to make two (or more) versions of the picture and/or word(s) that will go together in a sequence. I made two.

I saved them with different names.
Go online and find a free GIF maker (They usually only allow up to 10 pictures to be put together). There are GIF makers that you can download but it’s just as easy to use the online ones.

Upload the files you want to put together. Change the speed at which the pictures change to your liking. Click create and download the file (or something to that effect, depending on the website you use).

Upload the file to tumblr or submit it to mypridebuttons.