When I started blogging, or rather, reading other people's blogs, I saw those cute little icons for email and Facebook (I didn't know what RSS or Twitter really did yet). I thought, "Those are nice! I'll have to figure out how to add those someday." The more I delved into the blogosphere, I found that I NEEDED those icons. I had my site evaluated by the amazing minds at Eli Rose and that was one of their top suggestions. Pressure was mounting; it's not just me who wants them, it's my fans! Must add!!!
I searched high and low for the HTML that was needed. Lots of people had adorable icons to share, but no one could tell me how to make them work? I finally got an RSS icon hooked up, but that was it. And then... then the sweet Kate at Mommy Monologues not only created adorable icons - that she's sharing for FREE if you click here - but she also gave away the secrets to making them work in the comments section! I decided to create a post about it in case anyone else is having the same issues.
(Please note: I know NOTHING about HTML. I realize that at some point I really should take a class on it, but I'm living in denial about it. That said, I can only tell you how to follow these directions to make it work with Blogger. If you are on WordPress or something else fancy, I'm of no help whatsoever.)
Ten Steps to A Cooler Blog
1. If you do not already have a Photobucket account, get one because they are all kinds of awesome at making this job easier.
2. Create an album and upload your icons into it. You can either use ones you already have or some of Kate's adorable creations from the link above. After the upload is complete, click "Save and continue to my album."
3. When you roll your mouse over one of the icons, it brings up a menu. Click the box to select that icon (see below). Do that for all of the items you want to include. Selected items will have a blue box around them.
4. At the bottom of that screen is a drop-down menu that says "Choose action." The last item on the list is "Generate link codes for selected." Choose that.
It will bring up something that looks like this:
5. Click in the top box, "Clickable Thumbnails." Just clicking in it copies.
6. Open a separate browser window. Login to your Blogger account. Click on "Design, " then "Add a Gadget" and select "HTML/Javascript" which brings up this window.
7. Paste the code from Photobucket here.
8. Click on "Rich Text" and instead of code, you'll be able to see your images.
9. Click on the first one so it has the handled border. Then click on the link icon and add the corresponding link information.
For the email icon link information, type in:
mailto: youremailaddress
10. Click "Save." Once it finishes updating, view your blog. The functioning icons should be there!
Check out my new pretty ones on the right side of this page. I need to finish updating all the format so it all goes together - the pink looks too dark on these icons compared with what I used in the header - but I lost the header artwork when our server crashed. SO SAD! Thanks for your patience while I wade through all this technical stuff to get my designs uploaded. Best of luck to you!
