Yesterday we learned how to make blog buttons here.
It's only fair to share the secrets of how to link the blog buttons, right?
Put your party hats on, people. It's time to learn...
Let's get started with a website to host your images.
Log into your account.
If you don't have one, we suggest Flickr.
Hit the upload button (you'll find this at the top of the page).
Click "Choose photos and videos to upload" in the middle of the screen, select your blog button files and open those beauties.
Your page should look a little something like this:
Now you're ready to rock 'n roll.
STEP 1:
Because we don't like for our Flickr page to be filled with all of our bloggin' elements, we click the privacy button for these images. Hit "Only visible to you" and "Hidden from public searches" if you'd like to do the same.
Click the "Upload Photos" button at the top of the page and the buttons will begin publishing to your Flickr account.
STEP 2:
Click on a blog button from your photostream. Hit the "Share" button and choose the "Grab the HTML/BB Code" tab. You will see your code as well as options for the image size. We went with the small size as it measures 200 x 200. Just the size we need for our sidebar.
Click on the code, right click and hit copy.
We're finished with Flickr for now. Let's move to your blogger dashboard.
STEP 3:
Hit the Layout button on the sidebar menu.
Click "Add a Gadget".
P.S. Sorry for the overwhelming Layout template on the example. It's a little overcrowded...
STEP 4:
Scroll down and click on the "HTML/JavaScript" button.
STEP 5:
A box will pop up like the above image.
Paste your code from the Flickr account inside of the box.
We're going to mess around with code a little now...
STEP 6:
Replace the first link with the link to the page you would like the button to direct. For safe measures, delete only what is inside of the first set of quotation marks. (Although, I also like to delete the title gibberish too. If that's not too confusing, go for it!!)
For example, we want our France button to direct our readers to a page that shows all of our travels from France (which we haven't written about yet... note to self: need to get on that).
We replaced "http://www.flickr.com/photos/jitneysjourneys/8509521400/" title="CircleBlogButtonFrance by jitneysjourneys, on Flickr" with
"http://jitneysjourneys.blogspot.com/search/label/France"
Leave the second link alone, as that is the link of the original image.
Now we get something that looks a little like this:
Click "Save" on the HTML box.
Click "Save arrangement" on your dashboard.
Boo-yah.
You just linked up a blog button to a website.
You're awesome.
If everything went well for you, carry on, good friend! Otherwise, we've written up a couple of questions that we felt may be brought up among our readers and wrote the answers below. If we don't cover your question(s), write your question in the comment box of this post just in case others have similar inquiries and we will answer to the best of our abilities. :)
***
What is a label?
A label is a word you can use to identify a series of posts. You will find a box in which you can enter labels in the Post Settings toolbar. For example, we would write the word "tutorial" as a label for this post. Other labels could be "DIY" or "how to". On our sidebar, you will find a Tutorials button that will link you to all of our tutorials. The link for that is:
http://jitneysjourneys.blogspot.com/search/label/tutorial
If you have labels for a series of posts, you can use the same link format.
http://YOUR-DOMAIN-NAME-HERE/search/label/NAME-OF-LABEL
Use that link if you want to link a blog button to a series of posts.
***
Why does your new code have the dimensions of 170 x 170?
We decided that we wanted our sidebar to be smaller than 200 x 200 after seeing the finished product so we made the dimensions smaller to fit our ideal blog size. If this happens to you, you can change the dimensions in your code but be sure to keep the sizes consistent to the original dimensions (i.e. changing 200 x 150 would be 100 x 75 if you wanted to decrease the size by half).
