it's designed

Resource/ Free social icons & how to use them

If you’re a tumblr user, you already know that there are tonnes of great themes available to apply to your page. But the best thing about tumblr is that they let you customize those themes very easily, to make your blog your very own.

This tutorial explains to html/customization beginners how to create icons that pin to the side of their blog for added usability…

imalwaysaround asked:

Hi ! :)

Can you tell me how to add the icons you have on the right side of the page to my tumblr? I wanna add my links to my page the same way, and would love if you get back to me .Thank you, and so sorry for disturbing. I hope to hear from you :)

Kind regards,Marta

First of all,

Thanks for the question! We love to hear from you guys! Feel free to ask questions or give us suggestions anytime :)

To answer your question Marta, the first thing you need is to create the icons you’d like to use.

For our blog I just went into illustrator and made three simple jpegs.

You can create your own using any graphics program or you can find free ones online.

Here are two lists with a heap of really nice ones or just scroll to the end of this post to find more great icons:

30 Amazingly Creative Social Bookmarks Icon Sets

The Best Social Media Icons All In One Place

Once you have the icons you wish to use, you need to host them online somewhere. If you have your own webhosting you can upload them there. Otherwise you might like to use a service such as photobucket.

Personally I sug gest you use dropbox.

So you’ve got your icons uploaded and have the url for them.

Now you need to customize your blog and select custom html under the “theme” tab if you haven’t already.

On our blog the code that goes after the <BODY> tag looks similar to this:

<div id=”social”>

<a href=” INSERT URL TO YOUR RSS FEED / TWITTER / FACEBOOK “>

<img src=” INSERT IMAGE URL FOR THE ICON “></a><br>

<!— For Example, these are two icons below. One links to facebook the other to twitter… —>

<a href=”http://www.facebook.com/pages/Its-Designed/213752839692?ref=ts”>

<img src=http://www.itsdesigned.com/blog/social-06.jpg ></a><br>

<a href=”http://www.twitter.com/tiffjane”>

<img src=http://www.itsdesigned.com/blog/social-05.jpg ></a>

</div>

Here we have a div called “social” which holds all our icons together. Now we have to style this div so we can control where the icons display and how they behave.

Past this code in the html area between <STYLE TYPE=”TEXT/CSS”> and </STYLE>

#social {

position:fixed;
right:0px;
padding-top:200px;

}

POSITION:FIXED;
This code “sticks” the icons where they are on the page so they stay put when you scroll up and down.

RIGHT:0PX;
This positions the icons to the right side of your blog. If you want them to stick to the left, top or bottom just specify “left” or “top” instead. 0px means it will be put zero pixels away from the right edge. If you want some room from the edge just specify more pixels like say right:10px;

PADDING-TOP:200px;
This places the icons 200 pixels from the top of your blog. You can specify more or less. Again, you can also specify top, left, right or bottom.

#social img {

/*for IE */
filter:alpha(opacity=60);

/* CSS3 standard*/
opacity:.6;

padding-top:5px;

}

This sets the transparency of the icon to 60% and creates a space between the icons of 5 pixels.

#social img:hover {

/* for IE */
filter:alpha(opacity=100);

/* CSS3 standard */
opacity:1;

}

And this sets the transparency of the icons to 100% when you hover over them. This creates a simple hover effect that highlights the icons when you move the mouse over them. The transparencies can be reversed depending on your blog or removed entirely if you prefer no hover effect.

And there you have it. You should have icons that you can place on any edge of your blog and will be fixed there.

If you need more icons these may be helpful to you: