A Nest for All Seasons A Nest for All Seasons: How to Make a Custom Bar of Social Networking Icons and Logos

All content on this site is my sole creative property and may not be reproduced. If you would like to feature, pin or otherwise refer to content of mine, thank you! Please clearly link back to 'A Nest for All Seasons' and only use up to two photographs. To purchase content, please e-mail me for rates and restrictions. Posts may contain affiliate links for trusted products. I receive a small percentage of sales when you purchase from these sites. Buttons courtesy of SOURCE

02 January 2012

How to Make a Custom Bar of Social Networking Icons and Logos

Pin It

You might have noticed a little update on the top of the blog. See these icons?







I've been stressing over them for a while now and finally figured out how to make them. Lucky you - I'm sharing the code today! You won't have to write it yourself!  Just to give you a wee bit of background...I am not good with code.  It has taken me a long, long time to figure out how to do the little bit of code writing that I can.  It is certainly not an easily learned skill for me.  Thus, creating and posting these buttons (that actually work!) is a kind of amazing feat for me.  I searched and searched for icons that I liked and I finally found what I was looking for.  Are you ready to make your own bar??  OK!  Let's go!

The making of the icons is a little labor intensive, so I'm giving you an easy option and a hard option.  If you would like the green buttons that I have on my site, simply skip this step and insert your links into the code I give you a bit further on.  (Go ahead!  Skip on down to the Purple BOLD TEXT and you can start there!)

If you would like to choose your own icons and colors, then your job gets a little harder, but it is not impossible.

1.  Go to dafont.com.
2.  Click dingbats, various and look for social networking icons and social networking logos.  I used both.
3.  Press Download.
4.  Open the folder, unzip the file and drag the file to your desktop. 
5.  Drag the font file into your fonts folder.
6.  Open photoshop.
7.  Create a new file (40 by 40) and press the T (text) button.  You should be able to find the icons in your fonts now.  Here is what your new file should look like.  Press OK.

8.  Choose your color now...anything you want!  When you type your "text", the icons will be white on that color background.
9.  You will have to cycle through the letters to find which correlate to the icons you want.  I usually just write abcdefghij...etc and then delete everything once I've got the icon I want.  It will look something like this:

10.  Once you have the icon you like, center it in your 40 by 40 file.  Make a new file for each icon and then save them all as high quality and high resolution files.  You will have several files that look like this:

11.  Upload your photos to flickr or another photo sharing site that will give you html.

12.  Click on each icon photo,  click "share",  click html,  then copy and paste the code.  (Use square for icons and thumbnail for the longer logos such as flickr and youtube above)

13.  Copy the code somewhere to save it (I put mine in a Microsoft Document while I was collecting all the other code).   Do this for all your icons.  It will look something like this:

CONGRATS!  You have made it past the first half!  
If you skipped the first half, CONGRATS!  Time to get to work on your code!

So you have the codes for your buttons, now you have to insert them and your links into this code.  This is my full code for my button bar:

" http://www.flickr.com/groups/anestforallseasons/">"http://farm8.staticflickr.com/7015/6617663447_543feb21dc_t.jpg" width="100" height="35" alt="flickr" />

"http://feeds.feedburner.com/blogspot/dDRCV">"http://farm8.staticflickr.com/7149/6617663265_798c1c757a_s.jpg" width="40" height="40" alt="feed" />

" http://www.facebook.com/pages/A-Nest-for-All-Seasons/123824237686104">"http://farm8.staticflickr.com/7175/6617663361_f41c7e2197_s.jpg" width="40" height="40" alt="facebook" />

" https://twitter.com/#!/allenaim2">"http://farm8.staticflickr.com/7033/6617663301_4efb4c7a5c_s.jpg" width="40" height="40" alt="twitter" />

"http://pinterest.com/amyk/">"http://farm8.staticflickr.com/7034/6617858585_989bfdb163_s.jpg" width="40" height="40" alt="pinterest" />

" http://www.youtube.com/user/ANestforallSeasons/videos ">"http://farm8.staticflickr.com/7159/6617663403_eab406b4ab_t.jpg" width="94" height="40" alt="youtube" />

IMPORTANT NOTE:  Change the FIRST quotation mark before the green text and before the purple text to a regular quotation mark instead of an italic for the code to work properly.

You need to replace the GREEN code with the link you want your button to go to (facebook homepage, twitter profile, etc).  You need to replace the PURPLE code with the html you copied from flickr.  If you want my green buttons, you only need to change the GREEN code to direct the buttons to your site.

Simply place the code in an html gadget on your blog and you are good to go!

Want to skip all this work?  If you would like the green buttons that you see here linked to your social networking sites and installed on your blog, I will write it up for you and install it for $7.50 -- just email me at anestforallseasons at yahoo.com

If you liked this tutorial, say thanks by clicking on one of my icons and liking or joining or PINNING!! :)



tiarastantrums Thursday, February 23, 2012  

you know, I went to dafonts and these icons are no longer available? Bummer - I would have loved to check this out

Amy Renea Thursday, February 23, 2012  

That stinks! You are right..they are no longer there?? There are still some various buttons in other categories (I found rss and twitter), but I'll look for a new source...

Related Posts Plugin for WordPress, Blogger...