Wednesday, August 31, 2011

How to make your own Icon buttons {Tutorial}

You know it's the little things in life that make us all happy, right?  
Well today (besides successfully avoiding the paperwork another day) I made my own icon buttons for Email Me, Pinterest, Facebook, Twitter, and Flickr and I am just giddy about it!  So, I'm going to share with you how to do it!

 
I designed my buttons in my bead designing program, did a screen print and pasted them into Paint to save them as a jpg, and uploaded them individually to Photobucket. (You can use your own picture of your choice.)  Once I did that I clicked on each photo and then clicked on the "Direct Link" their site automatically 'copies' it for you (this is YourPhotoLocation).  I opened Word so I could paste that code for all the photos into Word (on separate lines).





For the code for the "Email Me" button I did a search engine search (Dogpile.com) and ended up at http://www.techknowl.com/how-to-create-email-me-button-in.html   In that posting they have this link which I also copied and pasted to my Word document so it's easier to work with:


<a href="mailto:coloriteman@gmail.com"><img src="http://img73.imageshack.us/img73/6152/emaillogoweb20rb0.jpg"/></a>

I then changed it... you can too!  It's EASY peasy!
For the orange you need to put in your own email address.
For the pink you need to put in the link just saved from Photobucket (this is YourPhotoLocation).

Then in Blogger / Design / Add a Gadget go to the one that says, "HTML/JavaScript"
Copy the code above that you just adjusted (make sure there are not any spaces between the parenthesis " " and the email address or the photo location you just changed) and paste it into the "HTML/JavaScript" box.  Click Save and go look at your blog!  Test it!  Click on it!  It should work.  If not double check your work.




I already had a Pinterest button but since I got all snazzy here I made one to match my others.  I went into edit the existing Pinterest button and simply changed the photo location for it.  So if you already have one as well you can just change the photo location for it (the "Direct Link" code you copied earlier).
Here is what you'll need to copy and change:
<a href="http://pinterest.com/YourName/"><img src="http://YourPhotoLocationHere" /></a>

If you'd prefer to copy the URL to be sure you get it right; after you login, click on your PROFILE name and then select the "Your Boards" option.


Before I pasted it into the SAME HTML/JavaScript box I put the email me into I put ONE space after the HTML code then I pasted the code for the Pinterest button.  Save and then go look at your blog again...  THIS IS GETTING EXCITING!!  




For the directions on how to make a Facebook button, I again hit Dogpile.com and came up with this site: http://www.brighthub.com/internet/web-development/articles/68907.aspx 

One thing about Facebook is that you HAVE to go to your PROFILE page to copy the link.  You cannot just go to Facebook.com and see your wall, you MUST click on "PROFILE" in order to send people to the right place.  The URL you copy from your PROFILE is the link you insert in the orange section below
After I scrolled down through all the blah, blah, blah I found this link:
<a href="PutYourFacebookProfileUrlHere.com"><img src = "http://YourPhotoLocationHere" border = "0"></a>

Once you have the adjustments made you once again open the same HTML/JavaScript box where the "Email Me" and "Pinterest" icons are.  Once again, enter a space after the Pinterest before you paste the code for the Facebook icon.



Remember how we had to go to our PROFILE page in Facebook? Well you have to do the same for Twitter.

Click on the PROFILE button on your Twitter account before you copy the URL.

Here's the link for you to adjust:
<a href = "YourTwitterProfileUrlHere"><img src = "http://YourPhotoLocationHere" border = "0"></a>
Does that look familiar?  It should, it is basically the same code as the Facebook link.

Once you have the adjustments made you once again open the same HTML/JavaScript box where the "Email Me", "Pinterest", and Facebook icons are.  Once again, enter a space after the Pinterest before you paste the code for the Facebook icon.




In Flickr in order to get to your PROFILE page you have to click "You"


Click on the YOU button on your Flickr account before you copy the URL.


Here's the link for you to adjust:

<a href="YourFlickrProfileUrlHere"><img src ="http://YourPhotoLocationHere"border = "0"></a>

Again, does that look familiar?  It should, it is basically the same code as the Facebook and Twitter links.

Once you have the adjustments made you once again open the same HTML/JavaScript box where the "Email Me", "Pinterest", Facebook, and Twitter icons are.  Once again, enter a space after the Pinterest before you paste the code for the Facebook icon.

Now... we can celebrate together!!
Pat yourself on the back!
Get all giddy!

You Go!! 


I've linked with:

Pin It Now!

3 comments:

  1. Wow...now if I could only learn to follow directions! LOL! Thanks for sharing!

    ReplyDelete
  2. This comment was emailed to me:

    Wow you are ambitious! Those turned out great!!!
    T

    ReplyDelete
  3. Hi there- found you through the hop and am a new follower. Thanks so much for the tutorial! I hope you have time to follow my life in South Africa by http://withoutcomplexities.blogspot.com

    I hope you have a great week!

    ReplyDelete

I would love to hear from you! As with anyone I love to read your comments! I respond to them all, via email unless you are a no-reply blogger. If you are a no-reply blogger please leave your email address. Thank you for stopping by and looking!

I reserve the right to remove any comments that I feel are inappropriate.