So, you've got yourself a blog, and you have distinct categories about which you post. You are looking to create some click-able banners or buttons to place on your sidebar to get people to the posts in that category easily.
On my blog I have several examples of this. We've got these label banners:
 |
| This is just a photo of my banners. The click-able ones are to the right! |
and also these guys (which I need to update because I don't love the design anymore):
 |
| Also just a photo, find the real buttons to the right. |
I am going to attempt a step-by-step post to show you how to create banners like these in the way I have found easiest. There are other ways to go about it that are perhaps better if you are more skilled on the computer (aka a Photoshop guru, etc.), but here's how I have taught myself to get the job done.
Note: This may seem like a TON of steps. Sorry! But I promise you, once you do it once, you will be able to create labels faster and faster, and the process will not seem so tedious or like such a mystery. You gotta start somewhere, right?
Here we go.
To create banners for categorization of posts on your blog (for Blogger):
1) Label your posts strategically using the category name you want the big pretty label to have. If you want the post to show up when people click your banner for that category, it needs to carry that label.
The red arrow shows you where to click to add your label for each post. You should get in the habit of labeling them strategically as you write them so they will show up when people click the banner you will ultimately create.
You can also go back to all your old posts and add the labels. Go ahead and do that if you need to do so.
2) Decide how you want your buttons to look. Let's say you want simple ones like the first ones I have in this post. You are going to create the image that will be your button.
a) Find a color for the banner background simply by searching google images. You might type in "pink background". Don't worry about the size of the image you save on your computer to upload, you will change that later. Let's say I find this one:
b) Right click on the image and save it to your computer. Name it something like "pink background".
c) Go to
PicMonkey.com - you will turn that background into a banner here.
d) Upload your pink background image.
e) Resize your image. Resize is on the left at the bottom on the main edits menu. To create banners a little shorter than mine (mine are a little on the long side), I suggest resizing the box to 375 x 75. (You have to uncheck the "keep proportions" box in order to create the shape you probably want). Play around with the sizing until you find a size you like. You might want your banner to look more like a square, so it's up to you.
f) Now click on the "P" on the far left vertical menu. (The 4th one down).
g) Choose a font and type what you want your banner to say. If you are a food blog, you might create one like this. You can easily resize your word using the floating formatting palette.
h) Save your finished product to your computer. Label it something like "Banner 1 appetizers". Label the next one you make "Banner 2 _____" etc. This way when you go to find them in your saved files you can easily find all the banners that you have made.
. . . Now that you have created the IMAGE of your banner . . .
3) Upload your image to
Photobucket or
TinyPic. You need to do this step in order to get what's called the "Direct link" to your picture. Don't get scared, it's easy!
4) Once you have your image uploaded, click "View Album" (if you are using Photobucket).
5) Hover over your image, and a box will appear below it. Move your mouse over the "Direct Link" code (2nd one down) and click. It will say "copied". You now have a code copied.
6) Open a Word document and paste the code there.
7) Now, you will highlight the following code and place it in the same word document, just space down the page so the code doesn't paste anywhere near the "Direct Link" code you just pasted.
 |
| This is a photo of the addess. I wasn't able to publish this post without the code distorting into something different. |
|
** Go HERE to highlight and copy the code. Scroll to where it says "Paste the following code". Only highlight the top portion of the code - the one that looks like what I have above. The bottom chunk of code is for making a scrolling text box beneath your button or banner, and you don't want that for this purpose!
8) You now need to replace the colored sections with your
own Blog's Information. This is the code that tells the banner where to
go when it is clicked.
a) Replace http://YOUR
WEB ADDRESS/ with the link to the labels
page for that banner, NOT your blog's home page.
To find this web address, go to your blog, and
click on the labels that should be currently showing up somewhere on
your blog that have just not been "beautified" yet! Find the
page that shows the posts under the label you are working on. Copy the
url once you are on the right page.
The web
address you are looking for will look something like this:
http://www.amynjesse.com/search/label/Appetizers
copy that
url and paste it into the web address place (pink)
*Note: If your labels are not currently displaying on your blog for you to click and find the pages showing all posts with that label, go back to your dashboard, click "Design", then "Layout", then "Add a Gadget" (anywhere, doesn't matter where, since you will remove them later), then scroll down to "Labels". This will display the links to the pages displaying posts labeled in what you've decided.*
b) Replace BLOG TITLE with the name of your blog. (i.e. Sugar and Spice)
c) Replace http://IMAGE WEB ADDRESS with the Direct
Link url you got from Photobucket and pasted at the top of the page.
d) Your finished product code should look
something like this:
9) You are now ready to take this code you just created and
insert it into your blog to display the button.
a) In your dashboard, click on "Design", then
"Layout". You will see something like this:
b) Click "Add a Gadget" in the area you'd like your banner to appear.
c) In the gadget list, scroll down to "HTML/JavaScript".
d) In the box that appears, paste your completed code. (No title necessary). Click "Save".
e) Your click-able button should now appear on your blog.
10) Repeat this process for all the label banners you want to create. You can also create banners or buttons to link to pages you've created. Some people like to do this instead of having a "pages" menu bar across the top of your blog, since there are only so many variations of that you can create using the pages gadget.
