Tuesday, October 16, 2012

Teach Me Thet Digi Technique Blog Hop (Part 2)

This is the second post from me for "Teach Me Thet Digi Technique" Blog Hop put on by Lissa Marie of SoManyCrafts.com. Hopefully you read and enjoyed my first tutorial in this hop on how to add HTML code to make your pretty new photoshopped social media buttons functional on your blog. Click Here if you'd like to read all about it. And if you also missed Lissa's tutorial, click here.

Today I'm going to show you how to make your own blog button/badge that is actually copy/pastable by your readers who are so inclined to add your badge to their site's sidebar. Of course, this same tutorial would work just as well to make any kind of badge or button. I've made several for my own site, my official blog badge, my Artist's Play Room badge, my "You've Been Featured" badge for the series on interviews with extraordinary artists and I also made a badge to help spread the word about The Butterfly Project put on by Holocaust Museum Houston.

In this tutorial I'll also tell you how to add a few cool functions to any linked picture or a blog badge. We'll learn how to make a statement show up when you mouse over your picture/badge. We'll also add the very useful function where when the picture or badge is clicked, the site it points to opens in a new tab or window!! This is such a useful feature because then your reader isn't taken off your site, the new site that the badge or picture points to opens in a totally new window or tab, still leaving your blog open.

Here we go...

First Let's Create A Basic Blog Button:
Use a paint program or Photoshop and make a picture that looks like you want your blog button/badge to look. I would recommend making it 150 x 150 pixels, they fit on blogs the best (although any shape is actually ok). So let's pretend I just created my new blog badge for my Blogging 101 series. If you don't own Photoshop or something similar, you can use the free Pixir editor to make a blog button, just upload layers of bits you want to amalgamate into a button then add text. 

Now we have the image of our blog button but we have to make a URL with this image. I use Skitch but it's for Mac users only, so many of you will use something like Tinypic so that's what I'll use this time. We therefore go to the uploader (Tinypic) site which will look like this...

...and we choose the button image that's on our computer. The file type is an image we're uploading and I leave the resize as default. Click "Uload Now". This is what you'll see when the uploader is done.

Beside the above info you'll see the image you just uploaded (here it would be the blogging 101 image). What we want is the Direct Link at the bottom, copy that URL. Now we want to add the HTML stuff to make it a clickable linked image. (after we do that we can add both cool features and make it copy/pastable)

So right now we have just the URL of our button image which looks like this. (just so you understand, if you put this URL link into your address bar above and clicked enter on your keyboard, your browser would go to the image of my blogging 101 button. Try it if you want... I'll wait, lol.)

See? Ok, now let's make this URL an actual clickable blog button...
If you remember from my Part 1 of this series, we want to first tell Blogger that we have an image. So we do this...

Then we tell Blogger where we want this image to point to. Let's make the Blogging 101 image point to my Part 1 blog post, the URL of that post is http://www.justaddwatersilly.com/2012/03/blogging-101-part-one.html.

So, this is what it would look like...

This is the most basic blog button. You would see the image below and when you clicked it you would go to my Blogging 101 Part 1 blog post. Go ahead, click the image, I'll wait...

Did you notice that when you clicked the button you were taken to a new tab or window? Cool feature, huh? Wanna know how to do that? Yes? OK! Here's how...

We want to add an extra piece of code right after the href= part, and the code we want to add is this...

So now the code for the blog button looks like this...

Ok, lets add one more cool tweak. What if when you hovered your cursor over the blog button it said something, like text showed up? (this is called mousing over, just so you know, lol) Here's the code tweak, it goes again right after the href= part, just like the target="_blank" above. The actual code we're adding will be title="Click Here to go to my Blogging 101 blog post!".

So the whole blog button code with the two new code tweaks will look like this...

REMEMBER: there is a space after each code tweak and DON'T FORGET to add both the open and close quotes where I showed you, if you forget just one it gets all screwed up!! If you always think of code stuff happening in pairs you'll be golden!

REMINDER: From the Part 1 lesson, you can add height and width functionality to our blog button which allows you to size the image to whatever you want to, and it looks like this... (Just in case you forgot, lol, and you can change the height/width to anything, changing the size/shape of the image.)

Ok, we have the cool blog button with extra functionality. NOW we want to add a text box underneath our button so guests can copy/paste our blog button code and add it to THEIR site. This lets us control how our button works on other people's site because WE provide the code for them to copy/paste.

So, here we go!

What we want to do is actually make a text box, just like all the little boxes you've been reading the code in above. You see, if you add code without putting it in a text box, Blogger will actually DO what the code says. So, instead of seeing the code for centering your picture you'll just see that picture centered. Frustrating, I know. But by putting all the code into a text box Blogger doesn't DO what it says, it just shows exactly what you typed in a little copy/pastable box. Now that we're clear as mud, let's continue.

A text box is actually called "text area" and what we're gonna do is basically put our blog button code BETWEEN "text area" tags. Like this... (I had to take a photo of this because when you put textarea code in a textarea box it does it twice, LOL. So this is what the actual code will look like finished, then I'll explain EACH PIECE, OK?)

The opening tag < with the  textarea after it tells Blogger we're creating a text box. Please notice the closing tag that looks similar at the end of all the type. It's just like the opening tag < but with the / added to indecate closing this tag.

* Next, we have the cols= , this tells Blogger just how wide in pixels the text box will be. For an average blog button I use 25 pixels as a good width.

* Next we see name= , this is just naming the textarea, it's not important, just pick what you want. For a blog button I use "link to site". 

* Now we see readonly= , I'm guessing that this makes it impossible to type in the text box, just put it in, it certainly won't hurt anything!

* Rows= refers to the number of rows that the textarea is going to show. If the picture of the textarea code above was actually a text box it would be 3 rows. (three rows of code show). On average, for an average blog button I use 4 rows, the text box allows you to scroll down to copy/paste the whole code anyway so you don't have to show ALL the code at once!

* Finally, we get to the actual code that will show in our text box under our blog button image. As you can see, it's just like the actual code for our blog button (although I forgot to add the title= , forgive me, lol)

So, the COMPLETE CODE for the blog button image + the copy/pastable textarea under it has to be amalgamated together. First, we want to show the blog button in completion, with all the cool tweaks, remember the code looks like this...

Now we have to add the textarea under the blog button image, so we add this code (below) to the code above...

So the FINAL CODE all put together looks like this...

Please take note of the little extras I added to make the button centered etc. We need center tags around the WHOLE code so the ENTIRE blog button + text box is centered in your sidebar. Then we also want when someone copy/pastes our code from the text box, when they add it to their site, the button that appears is also centered. That's why there are center tags around both the entire code and within the code.

I also added the line "(Copy/Paste into your sidebar HTML/Javascript Gadget!)" in between the blog button image and the text box below it. This text is there just to help the viewer know what to do. Finally, you'll notice the br / surrounded by the open and close tags < and >. This just adds a line break between the blog button image above and the text & text box below. It just puts the text below it on it's own line. Please note that there is a space after the br, then the / , OK?

This is what the FINAL BUTTON + TEXT BOX will look like on your blog sidebar

(Copy/Paste into your sidebar 
HTML/Javascript Gadget!)

With all that work I'm tired and sweaty! I need to go make myself a very large cup of hazelnut coffee!!

If you enjoyed these two lessons on how to improve your blog, you may want to read my whole series called Blogging 101, just click here and you'll get the whole series including this one that you just read! (it will be the first post shown, scroll down to read all the other Blogging 101 posts) And if you had fun here, you'll just have to come back and see what I'll be blogging about next time.

Tomorrow, you go to Jennifer Restivo's blog at Crafty Card Gallery to indulge in another tutorial!!(Addendum: I apologize, it seems the next hopper isn't posting her tutorial on Wednesday. You can just skip the Wednesday's post from Jennifer R and go directly to Ellen's blog on Thursday. Ellen's blog is CardMonkeysPaperJungle.com and I'm sure her tutorial will be GREAT!!) Enjoy the rest of the week's tutorials.

We'll talk soon,
(It's coffee time!)
Yippee! (oh, did I say that aloud? Sowwies.)
I'm out.

P.S. Remember, I have a BIG GIVEAWAY going on for the next two weeks, enter by clicking HERE. If you're looking for the latest Artist's Play Room, just click here and scroll down to the end of the post to enter your artwork for this week, the theme is "Stargazing".

I'm reading: Teach Me Thet Digi Technique Blog Hop (Part 2)Tweet this Post


  1. Thanks, Jenn. you make something difficult look simple. You are a great teacher, making sure we get it.


  2. Thank you Thank you Thank you for such an extensive tutorial... it looks overwhelming but I am printing it out right now so I can sit down and read through it slowly but surely I will learn a thing or two!

  3. It's good to see your tutorial is still here to come to! Thanks for all your hard work!


Please leave me a comment, I've sure missed hearing from you!


Related Posts with Thumbnails
^ Scroll to Top