Saturday, December 29, 2012

Tutorial - Add my button to the sidebar of your blog

How do you get my fancy button on the sidebar of your blog? 

This is for blogger.  Other platforms is not included in this post. If you are working through WordPress Melissa over at Sew BitterSweet Designs has a tut for you.

#1. Find post with a "grab my button" box under it.  . . .

like this one

A Lovely Year of Finishes
<a href="http://fiberofallsorts.blogspot.com/p/lovely-year-of-finishes.html" title="A Lovely Year of Finishes"> <img src="http://4.bp.blogspot.com/-lqljBHhCZpQ/UNO3qzThzrI/AAAAAAAAASY/Osvir1xGqwk/s400/2013btn600.gif" width="180" height="180" alt="A Lovely Year of Finishes" style="border:none;" /></a>


Now you have to highlight ALL the text in the box.  Sometimes it's difficult but just copy all of it. I usually use the keyboard shortcuts Ctrl-C. 




#2. Now for the fancy part.

Go to the layout section of your blog.




Now Click on the little "Add a Gadget" in the area you want to add a button.  In my example my side bar is on the left, yours may be different depending on the template you are using.



A new window will come up, with many options. Find and choose HTML/Java Script



A new box will come up
Paste the text from the previous 'grab my button' box. I usually use the keyboard shortcuts Ctrl-V.



If you choose you can add a title, but it will also show up on your blog.  It will also be easier to find if you want to move it up or down.

This will show up on top, and you can drag and drop it where you want.  

Voila - button should be in your sidebar. You can see if you got the entire code in preview.

You see that "grab my button" code not only has a pointer to the image but also has a link to a web page that once it's clicked . . it will whisk you to the page associated with it.

There you have it. 

Melissa and I will have a tutorial for adding our button to your blog posts tomorrow.  

For much more uber cool information about blogger go see Jenelle over at Echinops and Aster.  She's my technical hero with this whole series of awesome information, I still refer to this series monthly!


7 comments:

  1. Thanks so much! I'm joining in the fun!

    ReplyDelete
  2. I'm soooo excited about this!

    ReplyDelete
  3. Cool :o) Don't forget you can also < center > it (without spaces) and resize if you like by changing the height/width (sorry, I do, all mine are 130)

    ReplyDelete
  4. Thanks so much for the techi help. Now I am not so afraid to join in!

    ReplyDelete
  5. I am going to join in on this fun!! I'm a new follower and this seems like a great idea!!

    ReplyDelete
  6. Shanna - Do you happen to know of any tutorials on how to 'make' a button? I thought I found one about a year ago, but now I can't locate it. Thanks!

    ReplyDelete
    Replies
    1. For sure! Check out Jenelle's post near the bottom. http://echinopsaster.blogspot.com/2012/07/spruce-up-your-site-part-1-tech-help.html

      Delete

I {love} comments. . .
Don't worry if you're comment doesn't show up - I approve all comments before they are published {it forces me to read them}