Recent Posts

EASY HTML Social Networking Icons- and Giveaway!

Tara at Print Smitten makes some of the cutest social networking icons I've seen. And she is giving away a set of Social Networking Icons to one Clever Nest reader!
Each set is fully customizable- you can choose your own colors and combos. Visit her shop to see the other colorful blog candy she has to offer!

Would you like a set of these cute icons? Details on how to enter are at the end of the post, keep reading!

O, HTML, How You Taunt Me
Don't get me started, html makes me crazy!! It just looks like a jumble of letters and symbols thrown together. Am I suppose to know what this means??

Do you ever want to pull your hair out when trying to meddle with HTML? I'm slowly learning it's mysterious ways, but it's a awfully long, painful road, filled with rusty nails and flat tires. But I'm here to report a small step in the right direction.

Small Victories!
Last week I tried to add my own social network icons to the blog. After hours of Googling, searching, and trying it is finally accomplished! These fully functional beauties are now up on the side of the page. Success! Please click on them so we can connect!
I hope to spare everyone else the pain of what I just went through. I'm sharing the fruit of my labor, the fail-proof, HTML illiterate proof steps to code your own icons!

How To Code Your Own Icons 
In 3 Easy Non-Hair Pulling Steps

-Or-

HTML, You Will Taunt Me No Longer!

Step 1. Get your hands on some icons.
You need some sort of picture (icon) for your readers to click on, which will take them to your social media sites. You can buy, download, or make your own for free.

Some useful sites with free downloadable icons are TutvidDesign WoopOnbileSlodive.

After looking for awhile and not finding what I was looking for, I found Print Smitten on Etsy, bought a sweet looking set, and I'm loving them! I gave Tara the hex codes for the colors I wanted, so they would match Clever Nest's colors.

Step 2. Upload the icons to a picture hosting site.
Once you decide on a set of icons you like, it's time to upload them to a picture hosting site like Photo Bucket, Flikr, Snap Fish, and Shutterfly. I used Photo Bucket to upload my icons.
  • Click Upload

  • Click Select Photos

Now open your blog a new window to work the code. This is the instructions for Blogger, since that's what I use.

Step 3. Bust out the code!
You can do this! Below is the code you will need for each icon. This code works for all the icons, except you will substitute the red and blue parts with your own information.

<a href="URL Goes Here"><img src="Image Direct Link Goes Here" /></a>

You need two things for this code- the web address of the site you want the icon to go to, and the web address for the icon itself. Let's do this for the You Tube icon.
  • In Blogger, click on your blog title

  • Click on Layout
  • Click Add a Gadget

  • Choose HTML/ Java Script

  • Paste the code from above in the dialog box

  • Go to your photo hosting site and copy the Direct Link of the You Tube icon. Clicking on "Direct Link" will automatically copy it for you. 
Paste into the blue field of the code KEEPING THE QUOTATION MARKS IN PLACE.

<a href="URL Goes Here"><img src="http://i843.photobucket.com/albums/zz357/awine/6youtube.png" /></a>
  • Go to your You Tube page and copy the web address. Paste it into the red field of the code, keeping the quotation marks in the code.
<a href="http://www.youtube.com/CleverNest"><img src="http://i843.photobucket.com/albums/zz357/awine/6youtube.png" /></a>

Do this for each icon, pasting in it's own direct link and web address and click save. My code looks like this:

*For Feed Burner, you need to create an account. Go to feedburner.google.com and follow the steps to activate your blog's account. Once you've done that, the url you'll need will be feeds.feedburner.com/yourblogname.
*For Email, put mailto:youremailaddress@email.com in the red URL field.

To insert a break in the row of icons, add <br> where you'd like to start a new row.

There it is! No hair pulling necessary. Now visit your blog and try out all the buttons. If they don't work, check your code again. Or leave a comment on this post and I'll try to help! Although that may be a bit like the blind leading the blind... but I'll try.

And now for the giveaway! One set of social Networking icons to one lucky winner by Print Smitten. Giveaway closes 10/17/12 at 12:00am central time. 

Winner will be announced right here on the blog on 10/17/12! :)

UPDATE: Congratulations to Daniela! I'll be emailing you shortly about how to claim your icons. :)

<3 Alyssa
Let's connect!


:)
Related Posts Plugin for WordPress, Blogger...