Pancake Ninja: blog

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.

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!

1 comments

42 comments

No comments

<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>

Pros

Hello

recent posts

Popular Posts

Favorite Pie

Blog Archive

Followers

My Blog List

Labels

<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>