How to put social icons on your blog

by - 1:44 PM

brown crumpled img
 
I feel very unqualified to be taking on this topic but since you asked I can simply tell you what I know. Or what I did. It may not be right, efficient or anything else.
 
Facebook Follow Me on Pinterest Twitter Gplus E-mail RSS
 
How to get these icons to appear horizontally in the sidebar like they are on my blog.
 
Well, I don’t know much about html,  so I can’t tell you the why and how or what part of it makes it vertical or horizontal.
I just found someone’s blog that some icons laid out horizontally, I highlighted, right clicked, view source, copied to notepad. At every “href” I changed it to my link, at every “src” I replace with the url to the icon I wanted displayed, at every “alt” I put a word describing the link.
 
Here’s what I did:
1. Upload icons to where ever you want to host them, photobucket, flickr, picasa, wordpress media library, where ever.
2. view the icon, right click on it, select ”view image” (Wordpress will give you the image url when you view images from your media library)
3. copy icon url from address bar
4.  paste icon url into YOUR_IMAGE_URL (see example below)
5. find page you want the icon the to click through to, copy address from address bar
6. paste address inside the quotation marks after the “href=”
 
7. in Blogger, layout, add gadget, HTML/Java script
7a. in Wordpress , Dashboard, appearance, widgets, add text, Arbitrary text or HTML
 
8. paste into gadget or widget save and see if your links work.
If it doesn’t, try staring at the html and see if you can spot something missing. If it just doesn’t make any sense take a break and go make some cookies. Come back the next day and start fresh it’ll make a world of difference.
 
 
It looks something like this.
 
<div id="social-icons">
<a href="https://twitter.com/#!/YOUR_USER_NAME"><img src="YOUR_IMAGE_URL" target="_blank" width="45" height="45" alt="Twitter" /></a>

<a href="http://feeds.feedburner.com/YOUR_FEED_URL" target="_blank"><img src="YOUR_IMAGE_URL" width="45" height="45" alt="RSS" /></a>

<a href="http://http://pinterest.com/YOUR_PINTEREST_NAME" target="_blank"><img src="YOUR_IMAGE_URL" width="45" height="45" alt="Pinterest" /></a>

<a href=”http://www.facebook.com/YOUR_FB_IDENTIFIER target="_blank"><img src="YOUR_IMAGE_URL" width="45" height="45" alt="Facebook" /></a>
</div>


 



I hope this helps.



Or at least inspires you to go read someone else's tutorial where they might explain it better. For more good reading Diythemes has a good tutorial on this and more.



 





If you like Brown crumpled paper icons they have more!

You May Also Like

1 comments

  1. Thank you! So helpful, and these buttons are beautiful! I added an Etsy button in case anyone wants to use it too, to add to their button collection: http://texasfarmersdaughter.com/

    ReplyDelete

Find me on

Facebook Taste spotting