Tuesday, April 3, 2012

Blogging 101 (Part Two)

A quick piece of info you all might find useful before I start in on Blogging 101 Part 2. My good friend Dion Dior is having a very excellent giveaway on her blog this week. She teaches an online course about how to use Twinkling H20's and she's giving away two spots in her course that starts soon. With the free course you also receive 6 mini jars of Twinks! YUMMY! I've entered and crossed my fingers, go look and enter, maybe you'll win. I'll be totally jealous if you do! ;o)

If you missed Part One of my Blogging 101 series, just click here to read about simple ways to make your blog more esthetically pleasing. Today I'm going to show you how to make your own blog button/badge that is actually copy/pastable by 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. 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 new 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 you write 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 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. You can use 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!!

I'll be back with Blogging 101 (Part Three) sometime soon, within the month. I think I'll teach you how to put pictures in a row in your blog posts. Wouldn't that be useful? I mean, now that you know how to make pictures smaller or larger, you can choose any sizes you want and then fit two or three pics in a horizontal line in your blog post! What else will I teach you? I'll leave that as a surprise! hehehe. You'll just have to come back and see what I'll be blogging about.

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

P.S. I would really appreciate it if all my visitors who are enjoying this series would join up using my Linky Follower tool in the sidebar, that-a-way ----->
(if you'd like a follow back please leave me a comment requesting one, I'm always thrilled to discover new bloggy friends.)

Pin It
I'm reading: Blogging 101 (Part Two)Tweet this Post


  1. Great post! I am actually in need for this particular info. .. thanks a lot for the share..

  2. OMgosh girl you are amazing! You should write a book or a zine! you are such a great teacher! Have on line classes or something. I am in awe!!!

  3. I am now happily Follwing your page as well! :)


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


Related Posts with Thumbnails
^ Scroll to Top