Friday, October 12, 2012

Social Icons final

"We are not done, though" is PJ's next comment. She thought I might think I was done. She was right. I did.

A strategic placement of target="_blank" makes my link open up on a new, blank browser page, which is good. Very good.

So here's my real final:


<a href="http://feeds.feedburner.com/Colorimetry"target="_blank">
<img src="http://parajunkee.com/wp-content/uploads/2012/10/rss.png"style="margin-right: 2px;" >
</a>


Of course... after all that, she then gives me a pattern I can just fill in the IMG & HREF blanks with. This pattern is easier to use... but it's nice hearing all the scoop on what the different bits mean so I don't drop a crucial quotation mark, or something.

<a href="URL HERE" target="_blank">
<img src="IMAGE URL HERE" style="margin-right: 2px;" >
</a>


In case my explanation was even more confusing than html stuff... well... just follow this pattern. Or read PJ's post.

I will now attempt to repeat this over and over until I condense my sidebars down to cute, usable buttons!! Woop!!

Ok... this is what I got so far:


<a href="http://feeds.feedburner.com/Colorimetry"target="_blank">
<img src="http://parajunkee.com/wp-content/uploads/2012/10/rss.png"style="margin-right: 2px;" >
</a>
<a href="https://twitter.com/BurgandyIce" target="_blank">
<img src="http://parajunkee.com/wp-content/uploads/2012/10/twitter.png" style="margin-right: 2px;" >
</a>
<a href="http://www.facebook.com/BurgandyIce?ref=hl" target="_blank">
<img src="http://parajunkee.com/wp-content/uploads/2012/10/face.png" style="margin-right: 2px;" >
</a>
<a href="http://goodreads.com/BurgandyIce" target="_blank">
<img src="http://parajunkee.com/wp-content/uploads/2012/10/good.png" style="margin-right: 2px;" >
</a>
<a href="http://pinterest.com/burgandyice/" target="_blank">
<img src="http://parajunkee.com/wp-content/uploads/2012/10/pin.png" style="margin-right: 2px;" >
</a>
<a href="http://www.shelfari.com/burgandyice" target="_blank">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQHblQWIN_Nt64QxfZ1EmpFlEaSRhrHP2b9eTJLZgMdVFJEdHon" style="margin-right: 2px;" >
</a>
<a href="https://plus.google.com/111698920373164135983/posts" target="_blank">
<img src="http://1.bp.blogspot.com/-ELz3-FSiqNs/UHigwBgeQ5I/AAAAAAAAEao/2cjniUGcFKY/s1600/googleplus_48.png" style="margin-right: 2px;" >
</a>
<a href="http://www.linkedin.com/pub/laura-armstrong/46/451/265" target="_blank">
<img src="http://4.bp.blogspot.com/-Ct8HyZ9zQs4/UHigwkgMuUI/AAAAAAAAEaw/scTFf492nzo/s1600/linkedin_48.png" style="margin-right: 2px;" >
</a>

And it looks like this:



Holy Moley... my icons change sizes!!  Well... if that doesn't raw my hide. I need different icons, don't I? Matching itty-bitty ones. Hang on...




LibraryThing


Creating new web address for my itty-bitty icons...