Tried It Tuesday-Social Media Buttons!

So, a Tuesday after a looonnng weekend is a bummer.  I am still in total weekend mode but need to get my act together quickly!  We have four weeks left with students (can we say countdown?!?) and I don't even know where to begin.
Tried It Tuesday is here and for all of you on summer vacay catching up on blogging while drinking your morning coffee, I am pretty jealous.  I know my turn will be here soon though:)  The summer is when I started blogging I can't wait to be able to read more blogs on a regular basis soon!

If you are new to Tried It Tuesday, read more about it here.

<center> <a href="http://fourthgradeflipper.blogspot.com/"><img src=" http://i593.photobucket.com/albums/tt15/04fallingstar/3AM%20Blog%20Design/3am_triedittuesday_3_zpsd7a240d4.png" width=225 height=225 border="0" alt="Photobucket" /></a></center> My Tried It: Making Social Networking Buttons! As you may know, I finally started a facebook page for my blog.  I tried unsuccessfully last week to install a facebook pop up for new visitors to my blog.  I'm pretty sure that was a failed attempt at HTML code.  However, my "testers" were not visiting my blog for the first time, so I don't know if there is a way to know for sure since it is only supposed to pop up for new visitors.  I agree that pop ups are annoying but I wanted to spread the word somehow especially since I didn't have those nice little social media buttons on my sidebar.  I have been admiring  these little buttons on everyone's blogs for awhile and then thought it was time I tried to figure out how to do that! Do you see my little buttons now on my right sidebar?  I made them all by myself!   (Can you tell how proud I am?!?  Sometimes it's the little things!)  

And NO, I did not design my blog!  That just scares me! I have virtually no blog designing experience or computer based design experience period.   My blog was designed by the amazing Diana at Custom Blog Designs and the talented Michelle at The 3AM Teacher designed my threaded comments:)  However, if your blog design is lacking these little buttons, keep reading to see how I created my own! 1.  First, I created the pictures using Powerpoint.  For more detailed instructions on using Powerpoint to create layered images, see this post by SThomping Ground.  The images I took from my blog design package, Misty Cato's I Can Fix It.  Here is a screenshot of the PPT creations:

I did not use the "e" for email yet because I am not sure how to link it.  When I click on other blogs' "email button" I get a new email application trying to walk me through the setup process and it doesn't show their email until I complete that.  So, for now, I just have my email still listed on my "About me and contact" page at the top of my blog.  I also didn't use the "normal" P for Pinterest but I figured that most readers would know what the "P" stands for. :)

2.  I grouped the images in each picture by selecting all the images and right clicking (control click on Mac).  Select Grouping and "group".  

Save the grouped image as a picture by right clicking again.

3.  I uploaded my images to photobucket and copied the "Direct Link" for one photo at a time to add to my blog.  

4.  I selected "Layout" and "Add a Gadget" from blogger.  Then, select the add "HTML" option.  I used the code I found from SThomping Ground.  

<div class="separator" style="clear: both; text-align: center;"><a href="YOUR LINK" id="twitter-link" target="_blank"><img border="0" src="YOUR DIRECT LINK FOR IMAGE" /></a></div>

I replaced "YOUR LINK" with the link for my button and replaced "YOUR DIRECT LINK FOR IMAGE" with the direct link code I copied for that image from photobucket.

5.  Little problem!  My buttons appeared HUGE on my blog!  I searched for an answer and found this post by Olivia at My Favourite Things.  The "70 width" worked for my blog with the first try!  This is the code that I pasted in the HTML add a gadget box (minus my direct links for sites and pictures in purple).  This is the code for all FOUR buttons.  All four codes were pasted in the same box and came out horizontally in my right sidebar with the code like this. 

<a href="YOUR LINK" id="twitter-link" target="_blank"><img border="0" src="YOUR DIRECT LINK FOR IMAGE" height="70" width="70"/></a><a href="YOUR LINK" id="twitter-link" target="_blank"><img border="0" src="YOUR DIRECT LINK FOR IMAGE" height="70" width="70"/></a><a href="YOUR LINK" id="twitter-link" target="_blank"><img border="0" src="YOUR DIRECT LINK FOR IMAGE" height="70" width="70"/></a><a href="YOUR LINK" id="twitter-link" target="_blank"><img border="0" src="YOUR DIRECT LINK FOR IMAGE" height="70" width="70"/></a>

Here is the code for ONE button:

<a href="YOUR LINK" id="twitter-link" target="_blank"><img border="0" src="YOUR DIRECT LINK FOR IMAGE" height="70" width="70"/></a>

I hope this may help someone who would like to add some easily accessible buttons to their sidebar!  You will be so pleased with yourself after it actually works!