Blog tip: inserting a blog button using html code

9:16:00 AM

Hi all!

With the upcoming blog hop I'm co-hosting with Mdm Samm, I thought I'd post a few blog tips to help out our participating bloggers whom might be having a bit of trouble with the blogging side of things.

One of the requirements of our hop is that you insert our blog button in your post.

You'll see this button and a bunch of mumbo-jumbo 'words' in a little box below it, like this:
!Sew WE Quilt!
<div align="center"><a href="http://www.sewwequilt.com" title="!Sew WE Quilt!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYn_srRHUa5-xkwxhRORT-SiuBYYVn6_RvNiWpO_J75cqUwgZXiG514Edzz-5lnQN9e29KP4dxXQ7NjL236putionvj8cHgi_X8ZDyllPWAbUxCshCNnhqfwMKdXCsyo-OqUddO6Eeycfz/s200/aprilshowerbutton.png" alt="!Sew WE Quilt!" style="border:none;" /></a></div>
The mumbo-jumbo in the grey box is called "HTML code". It's a language that's generated which all web browsers can read (Chrome, Firefox, IE, etc.). In all of that gobbledy-gook, there's information for the browser to 'read':

- the code or language distinctive to the button's image (tells the browser to display the umbrella)
- the code or language of the site that owns the button (Mdm Samm's SewWEQuilt site)
- the code or language of the website that, when you click the button/image, the browser will bring you to that site (Mdm Samm's site)

Now - what the heckadoodles do you do with it? How do you insert it into your blog?

Two ways to insert it:
1. into your post
2. into the sidebar on your blog

So. Let's go over first how to put it in a post.

1. You'll see the code in the little box under the umbrella listed for the April Showers hop either above in this post, on my blog post HERE or over at Madame Samm's blog HERE.

2. Put your mouse cursor over the text in the little grey box. TRIPLE click (so, three clicks) really quickly without moving your mouse - this will select all of the text in the box, like this:

IMAGE PROPERTY OF MDM SAMM: www.sewwequilt.com
OR, if the triple click doesn't seem to work for you, manually highlight the entire contents of the code from the top left and drag all the way down to the bottom of the box to highlight everything.

3. Click the RIGHT button on your mouse. A little window will pop up, like this:
Select, "Copy" (in RED below)
IMAGE PROPERTY OF MDM SAMM: www.sewwequilt.com

4. Head over to your blog post now that you're working on. Now we'll enter the code within the postp by 'pasting' it ( press CTRL and P at the same time)


Now if there are some unwanted spaces in the html, we'll have to remove those spaces, like this (**make SURE you don't delete any of the characters - only the spaces in the lines**):
(note - the code on my blog has no spaces so you can skip this step)


Last step: we have to make sure that Blogger knows that you want to display the image, and not the html language you've inserted. So! Beside your post box, click on 
"Options"

----Select: "Interpret typed html" (in RED below)

- - - - - Click "DONE" (in BLUE below)

Now, when you "Preview" your post, you should see your button image in your post:
!Sew WE Quilt!



Next - how to add the button to the sidebar of your blog.

(REPEAT steps 1-3 from above, then...)

1. Go to your Blogger Dashboard at www.blogger.com.

2. Select from the dropdown menu, "Layout"
3. In your Layout screen, select, "Add A Gadget"

4. In the pop-up window that appears, scroll down until you see "HTML/Javascript" and select
5. In the pop up that appears, paste the code you copied from above, no spaces (CTRL and P at the same time):
6. Hit SAVE button.

There! The button should appear in your sidebar now.


Please let me know if you have any problems or any questions!

You Might Also Like

5 comments

  1. Thanks Erin. I'm going to bookmark this because I always have to call my son and it makes him crazy!
    Happy day

    ReplyDelete
  2. Yes it works. I never knew how to get it in my posts. Thank you

    ReplyDelete
  3. Oh thanks so much! I new how to put it into my sidebar. But into the post itself I never managed to do. Will try this out!

    ReplyDelete
  4. You have been busy! These are great. Thanks Erin!

    ReplyDelete
  5. great job Erin! and definitely in "user friendly" terms so very appreciatated :) :)

    ReplyDelete

I ♥ to hear from you!

Thank you for taking the time to leave a comment or for asking me a question. Rather email me? Reach out at sewathomemummy@gmail.com.

I like to email everyone back when they've commented - so if you're a no-reply blogger, make sure to leave your email address in your comment so I can share the love back atcha!