 |
Creating your own social media icons is actually a fairly simple process– it’s not much more complicated than creating an image you like and linking to the appropriate URL.
All you need is a good set of Social Icon Sillhouette images (which I will direct you to :) and a little Picmonkey know-how.
Using Social Icon Silhouettes and a Custom Image
This method is my favorite for creating social icons and has been a popular how-to question among my readers, so I think you’ll like it too! But I’ll touch on another method in a later post for those of you who don’t want to create your own image from scratch.
1. Find free social icon silhouette vector images online. My favorite set is here: http://theblogdesignernetwork.com/2011/08/free-social-icon-silhouettes/ I like this one because you don’t have to do a download! They’re just click and save images.
2. Right click on the images you want to use, and save them to your desktop (or an easily accessible folder).
3. Go to picmonkey.com and upload your white starter image. Size it just a little smaller than the width of your sidebar (mine is 300px) by about 300px (just to give wiggle room, you can crop later). So I would size mine to about 280x300px.
4. Here’s where you use that creativity a little bit– create the image for your social icon to go over. I would suggest keeping it simple– circles, squares, etc. I’ll show you a few different things that you could do…
4. Go into overlays (if you’re using Picmonkey), select YOUR OWN, and add the appropriate social icon images, one at a time, that you’ve saved to your desktop.
5. Adjust the size and color, and drag the icons over your images. (most of the time, you’ll want the color to be white, but in image #3, I chose to have the social icons different colors. I sent the image to the back and faded them out so that the words are the main focus of the image)
6. Crop the image down and save it (as .png) to your desktop…
Ta-da!
Now for something really fun… linking the URLs.
7. Go to http://www.image-maps.com (this site is AWESOME).
Time out. you will need an image URL to continue at this site (they can’t host images for you). So make sure to upload your image to a blog post, photo bucket, picasa, etc. so that you can have an “image location.”
8. Enter in your image location and click on “start mapping your image.”
9. Click on RECTANGLE
10. A.) Size the rectangle to fit over one social icon.
B.) Type in the corresponding URL (your FB page, your twitter profile, your RSS feed, etc), and click save.
C.) UN-CHECK THIS BOX.
11. Repeat for all social media icons (you only have to un-check the box once). Once complete, click on GET CODE.
12. Click on HTML Code
13. Copy the code and paste it into an HTML gadget box on your Page Elements (old blogger) or Layout (new blogger) page. I would recommend adding
|
I know what I will be doing this evening now! Thanks for the fab tutorial!
Alison
x
Great job!
Um, you had me until the “time out.” Then I got scared and confused. Good thing you did mine before you quit :) If I do ever want to change though, I know the perfect place to get some great tutorials ;)
LOL Aimee…I was the thinking the exact same thing…thank goodness Ashton did mine before stopping:-)
Whaaat?! Oh I am so doing this right now! Great Tutorial.
Girl you make it sound so super easy!!! I know if I sit down and work on it, I could do it. Oh wait I don’t need to because awesome you did such a great job already on mine! But when the time comes to change…you have the best and easiest to follow tutorials!!!
This is great information. Thank you!
Thanks Ashton! You rock. I love all that you did for me, but I know I’ll get the “itch” soon (you know the one, where you want to change everything :) so this will be great. The mapping, is that how you put your icons in your header? Because I’ve been wondering about that. SO cool!
Wow. It has taken me 10 DAYS to respond to this comment!!! Sorry :/ But, YES. That’s exactly how I did my header. I LOVE that site. Honestly, it does give some trouble every once in a while, but I honestly think the results are worth the occasional hassle.
I have been wanting to do this, but didn’t know how. Thanks so much for the tutorial!!!
Ok, so seriously I will need you address, to send you a box of cookies because this ROCKS! I can’t thank you enough for your tutorials! I love it!! xoxo
Thank you so much for this tutorial, I will be doing this to make sure all of my button match. If I can request another tutorial I would to be able to do my custom menu bar but really have no idea how. I would love to see something like that in the near future.
Thank you so much
Thanks for the suggestion! Look for it in the next few weeks :)
Thank you! Thank you! Thank YOU! I’ve been attempting this for a couple weeks now, and now I finally can cross that off my blog to-do list!
It’s as if you’ve read my mind…just yesterday at our Mother’s Day BBQ I was asking my stepmother if she knew how to put multiple links onto one image. You’re my hero, THANK YOU!
It’s funny, I spent MONTHS wishing I “had that kind of technology.” And then one day I just thought, why don’t I just google it? Just to see. And I literally googled “I want to put multiple images on one image and use different links.” IS there a more ridiculous search than that?? Anyway, found image-maps through that search, so I guess it works!
Thank you sooo much! This may be old news to some, but I have coveted custom designed social media tabs for so long. I’m implementing this!
I did it! I did it! You are da bomb!!!!
Yay!!
That is so helpful, thanks! I would love for you to share this (and any other creations) at Pin It and Win It Wednesday @ http://www.cheapcraftymama.com– where you can win free ad-space on my blog!
Such a great tutorial. That image maps site is great!
Oh wow! This is great! Thanks so much! Haven’t used PicMonkey yet and hadn’t heard of image-maps
Visiting from HoH
I love image-maps! Highly recommend. Sometimes the site gives me a little bit of trouble and I have to start over— but honestly, it’s worth the hassle. It’s an awesome service for free!
Great tutorial, but I cant figure out how to link up my email, any suggestions?
Ok, so if you want to provide a link to your actual email address, you’ll want the URL for that link to be: mailto:example@gmail.com
OR, you can link it to a standalone page, and embed a contact form on that page using 1-2-3 contact (you’ll have to google that, I can’t remember their URL).
Hope that helps!
Thank you so much!
oh wow…just noticed this linked up to our party and was looking for awhile on how to do this. Everything I came across seemed so confusing. This is great! I ended up having a friend send me the ones I have now, but I still have no idea how to group them. I am terrible at this stuff! I will make sure to share this…you rock!
Great tutorial! Would you consider linking it up at my Pinworthy Projects Party? I hope to see you there!
This is a great tutorial! Thank you so much! I have been trying to figure out social media icons forever!
Glad to help!
Wow! I have been wanting to do this for a long time and now I can thanks to you! I’d love for you to link up to our Finished Friday blog party.
what a great tutorial – I wish I hadn’t already paid a web designer:( you have all the tips I would have needed.
thanks
~heather
Well, they did an awesome job because your blog looks fabulous :)
Seriously, this was so easy. I spent much more time getting it how I liked it in picmonkey than actually getting it all linked up and on my blog. Come check out my new buttons.
You did such a great job! I LOVE it! Makes me want to redo mine :)
This is at the very top of my to do list this week! What a great tutorial! Can’t wait to get to this!!!
Found this site thru a google search, and it’s great. Thanks!!!!
I am so jazzed I found you! I know what I will be doing on my lunch break! THANKS so much for sharing!
New Follower!
Jen @ f5
Great info! Thanks! Just pinned it!
First of all I LOVE THIS! And am so thankful that I found it….BUT I NEED SOME HELP! I have put the center codes at the front and end of my html code, but it is still not to the left margin. Does it need to say something about the left?
I would love for you to stop by and look at the issue I’m having and see if you have any tips on how to fix it. I will leave it up (even though it is messed up for a bit) so hopefully you can stop by and help me!
Please email me: naturalnesters@gmail.com
Nevermind I figured it out! Thanks for all the help !
Great! What was the problem? Did you have to change the width of your sidebar a little? That was my only guess, and I actually haven’t even taken a look yet– I just got around to looking at my comments this morning!
This tutorial was amazing and awesome and easy! Thank you so much for sharing. :)
This is great! Thanks for the tutorial! If there is one request I could make it’s how to add the box at the bottom of your posts as to where you’ve linked up to. I just can’t seem to get that to work for me!!
OK, I just finished following your tutorial. It is AWESOME…thank you!!! I have one little problem. My finished product is too wide, even though I looked up the width on my blog layout (320 px). Would you take a look and let me know if you have a solution? Thanks again, Ashton! :0)
….and just when I thought I was going to walk away from the computer, lol! This tutorial is EXACTLY what I have been looking for! Thanks so much!
~Tanya
Mrs. Dwyer’s A+ Firsties
I have a question that is probably ridiculously simple but how do I figure out what the link is for my rss feed? Thanks! I can’t wait to update my blog layout!
I have been looking for this for ages
That’s for the fabulous tutorial!!!!!
oops, I meant Thanks!!!!
Thank you – Thank you – Thank you! Perfect timing. I am new to blogging and still getting my site all set up. I was just thinking about attempting my own icon designs on Picmonkey, this post will be so helpful. :)
I just tried to paste this to my page and it says it contains illegal charachters! can you help? thanks!
I got the same error! Let me know if you figure it out, thanks!
Hi! Can you walk me through exactly what you pasted to where? Like– were you able to successfully generate the code from Image-Maps? And then were you pasting it into a blogger gadget box?
Love it, thanks! I have been learning quite a bit – and learning to do it all on my own!
Thanks for the tutorial! I love picmonkey and now with you help I know how to make my own images!!
Thanks so much for this tutorial it was so easy and now my social media buttons are unique and professional looking Kxx
Thanks so much! This was just what I needed!
this is Awesome!! I just made mine! I have one question though, I am using the Mail picture and trying to link it to my email and I keep putting in my email address and it’s not working? Do I have to use the Send email I tried it several times several different ways and it wont work %-(
Thanks for the tutorial!!! Used it to create social media icons and credited to you on my blog. :)
This comment has been removed by the author.
Thank you thank you! My blog looks a million times better, and you made it really easy. If I could hug you, I would! justpeachy-darling.blogspot.com
I love you so much for this! And all of your tutorials! I used your tutorials to make my social media icons, to make a white blank photo, how to use image maps to link urls, and customized my horizontal navbar… all thanks to you! Seriously seriously thank you. I have tried googling help to no success and your tutorials are very easy to understand, and always easy on the eyes too. You’re the best :)
Awesome tutorial, just completed it for my blog and had to say thanks!!!
You are an ANGEL! The tutorial was fabulous and even I was able to follow it and just made some cute little social icon buttons! They need a little ‘tweeking’ but so much better than the clutter I had! Thank you so much! I’ll be doing a blog post when I can,singing your praises :)
I LOVE YOU. thank you thank you thank you thank you thaaaaannnnkkkk youuuuuu!
I just wanted to say thank you soooooo much for this post! This morning I had no idea how to do this and by this afternoon i have a full set of working custom media buttons that i made! you rock!!
I am so glad that I found you! I have been needing to revamp my social icons, but had no idea how I did them to begin with ;). Your tute was super helpful! Thank you! Please feel free to swing on by and check it out!
Amazing work dear……
Thank you so much for this! This is amazing!! I just have one question. How to I make the social icons button white? Thanks again! Youre a genius!
I AM NOW IN LOVE WITH YOU. PERIOD. END OF STORY. CUE HAPPY ENDING MUSIC.
I just found your blog via Google & I am SO glad I found it! I’ll be back later to fancy up my blog “all on my own” thanks to you!!!
XOXO,
Shayna
that was a lot of work! see for yourself and let me know if I can make any adjustments. i guess it’s set in stone!
http://www.shilohstaste.com
I have been trying to find a simple way to do this (one without learning lots of code!)for ages! Thank You!
I finally got around to following this tutorial– THANK YOU! I am jumping into social media a bit late in the game but your tutorial has me going in the right direction.
Many thanks!
Thank you so much. I have been trying to figure this out forever. You just helped me redesign my entire blog. I have one question – can you tell me how you got your recent posts to configure like that. I have the widget from blogger and I can only have it in my side bar. I just want the thumbnail like you have and to have it in the same location. Any help would be very appreciated. I am now a follower of your awesome blog.
Thank you SOOOOOO MUCH for this tutorial!!!!! This will be Such a great help when I design our social media icons!!
Thanks again!
Charlotte
boyerfamilysingers.blogspot.com
You just made me feel really, really smart! Thank you so much for this great tutorial!!! :)
Thank you so much for this tutorial! Everything worked for me the only slight problem is that when I put it onto my blog (WordPress) there is a little grey boarder that surrounds it. Not sure if this is normal or if I did something wrong? Any help would be great. Thanks!
Hi, Ashton
Just wanted to say thank-you for this tutorial. I walked my way through split screen of your blog and split screen of image-maps. I had already loaded my pic onto picasa after I tweeked it in photoshop elements 9.0 but, found picmonkey to be very useful for the future. I was not sure how to get the URL address then I right clicked on my photo when it was in picasa then went to properties and the location was right there. I just did letters than the squares and linked up my urls to each letter, then copied the html added to my blog and tada, it was beautiful. Can’t tell you how many times I have come across a blog and thought, man how can I get my links going across and not down, without taking to much space up. And you walked me through it. Yeah, I feel so proud of myself. I also made my own button and banner and my blog keeps getting better like a fine wine. Thanks again, oh and stop by to see how it turned out. Christina http://www.creativetizzy.blogspotcom
HIII! Mine is saying “untitled image map” underneath and that’s ugly. lol
help?
Ok, the good news is: easy fix. The bad news is: sort of a time consuming fix :P
You need to re-map the image, but before you finish and grab your code, look in the right hand column on the mapping page. There will be a check box that says “show text links.” Make sure that is UNCHECKED and you won’t have any problems :)
This is the best tutorial I’ve found! Thanks for being so descriptive.. but when I get through all of the steps at to the end, it appears on my page as a little photo bucket box that says “This is no longer supported by the site”
HELP!
:)
http://www.fashionablecents.blogspot.com
Okay My bad.. it actually says “Photo has been removed by the user” I dont know what that means? Thanks again for your awesome advice/ help :)
Did you host the image yourself? Or did you let image maps host the image for you (uploaded the image from your computer?
This is AMAZING! Thank you so much for posting this! It’s helped me finally figure out how to create my own social icons!! YOU ARE THE BEST!!!
Thank you! Thank you! Thank you!!
OMG you are amazing, followed your directions and it worked perfectly. I am now a follower:)
this is great-you’ve given me a project for today :) thank you!
Done! http://www.blyssjustbreathe.com
Wow. Nice.
THANK YOU for this guide! Love all your tutorials. Just finished adding my new icons to my blog.
Awesome!
Oh my goodness, you are a godsend!! I just followed this tutorial and it worked! So happy!!! Thank you ever so much for taking the time to write this post.
I’m so glad it helped!
Brilliant!!!!! Thanks so much. :)
OMG! Thanks so much! I found this through blogcon and it was so simple to follow. I have no blog design experience and I was able to get it to work with minimal issues. I have wordpress so finding where to put the code was a bit tricky, but I figured it out. Thanks SO much for sharing your wisdom with all of us newbies.
Hey! Any idea where we can find the outline of the Instragam Icon?
THANKS!
Julie @ Julie’s Eats & Treats recently posted..Microwave Caramel Corn
Yes! Will you email me on this? Otherwise I’ll forget to find the icon set for you when I get back into town and can sit down at the computer!
Thanks :)
Yaaaay! This is such a great post – I just make some awesome buttons for my blog. Thank you so much!
Rachel recently posted..Why I’m Not Using Etsy Anymore
URL contains illegal characters??? I go through everything exactly as you said but then I get this messge when I try to ad my own Gadget URL on my Blog??? PLease help! This was such a great tutorial and I really want to get it working.
Many Thanks
Sadly, the first thing I’m going to have to recommend is to just try it again! Occasionally, HTML code can just be a pain and one little mistake in typing or in copying and pasting can throw the whole thing off. So that’s the first thing you do, just try it again. If that still doesn’t work, send me an email with all of the links you are trying to use and I’ll take a look and see if I can help! somethingswanky [at] gmail [dot] com
Hi Ashton,
Thank you so much for your reply. So I’ve re tried the entire thing several time and was meticulous with the details however i just can seem to get it working?Darn, I’m so dissapointed I can’t simply figure this out. Any chance you’d be able to lend me a hand :)
Many thanks
Sarah
Hey! Email me the link to your blog and a description of the problem again, and I’ll take a look :)
Hey Ashton,
You told me to e-mail you back so you could take a look at my link problem. I’ve seriously tried it so many times since then, thinking I would be able to sort it out myself but it still continues to only work the first time and then shows an error or unauthorized message after that :( Would you send me an e-mail at photographybysarahanne@hotmail.com when you get a chance and let me know where I can message you the info.
Thanks again!!!
WOW This is amazing – thanks for these tutorials.
Thank you so much for posting this tutorial it was very helpful! I’m currently “re-vamping” my blog and now have awesome social media icons because of this post! Do you happen to know where I can get an Instagram silhouette? I’ve googled it, to no avail….
I think I got mine here: http://www.carrieloves.com/2012/03/free-social-media-icons-for-bloggers/
Awesome tutorial! it worked like a charm. I used picmonkey for the first time and coding for the first time! thanks! my navigation bar image on the blog is super blurry, but in picmonkey and picasa it’s fine. What could be the issue?
My first guess would be that you need to save the image as .png not .jpg . Could that be the problem?
hmmm… png or jpg seem to be really poor quality. and it seems nothing fits right either. lots more trial and error. If you have any other ideas, I am more than willing to try them. Thanks again!
tanny s. recently posted..first post
*cries* Thank you sooooooo much! I thought for sure I could do this, but I couldn’t figure out how to get the right “fonts” for each social media website. I also didn’t know how to map the image outside of FrontPage, which I don’t own anymore. This is a HUGE help!!!
Laura recently posted..Southwest Pasta Skillet – Recipe
I love your website and all the fabulous how-to’s! I just started blogging a few months ago and I’m trying to give my blog a face-lift. Your site will definitely help me there. I love your blog design…can you tell me if it’s a specific WordPress theme that you’ve used? I noticed a very similar design on portuguesegirlcooks.com and I’d like to do something similar. Thank you!
I’m running the genesis framework with the Craftiness child theme :) Good luck on your blogging journey!! It’s a lot of fun :) :) :)
Hi. This is a great tutorial, thank you! I’m in the middle of using it right now…but for the email social media icon, how do I link my email to that part of the image since it’s not a url? I was doing so well up until that point.
Hey there! The URL is mailto:youremail@gmail.com :)
What is the process for a ‘mail to’ link? LIke I have the interest and instagram set up, but I’m not sure how to make it bring up my email when people click the envelope??
The url for an email is: mailto:youremail@gmail.com :)
I luv U! Your tutorials are so helpful and user friendly! I just did this one and feel proud of my self for it. Couple questions… is it necessary to host the html other than on your own blog (in case you lose it later)? I want to do some fun stuff like your scalloped side detail on your blog and your custom background – got any tutorials coming for those?
Thanks again!
Kelly Reber recently posted..Jeff Lewis Paint
I have lots of tutorials coming up this year! I’ve just recently partnered officially with picmonkey, and part of that deal is writing lots of blog design posts!! :)
It is necessary for you to host the image SOMEWHERE, but it doesn’t ave to be on another blog. Lots of people host on photobucket or picasa. I just like to use my sample blog to host, because it actually keeps me a little more organized :)
Glad you liked this tutorial!
Thank you so much for this post!!! You are the best !! I can’t believe I did this on my own, but your post made it so easy!! Amazing! Thank you!
Heather @ The Unsophisticated Kitchen recently posted..Cheese & Corn Chowder
Hey ashton thanks for the tutorial. one quick question when doing the nav bar, for some reason I can’t see the HTML code to put before and after for it too center. It’s just showing up as blanks spaces in your post. Could you let me know what the code is. Thanks so much :D
Tash @ The Velvet Moon Baker recently posted..Chewy Flapjacks
What do I do to set up my social icon links to open up in a new tab or webpage?
You can’t do it in image maps :(
Would you happen to know where else I might be able to get the silhouettes? as the site links is under construction.
Thank you
Rachel, I found some fun ones HERE: http://www.carrieloves.com/2012/12/free-social-media-icons-updated/
Minou recently posted..Lowcountry Smothered Pork Chops (diabetic friendly)
i’m also looking for the silhouettes… the link below looks like it’s actually for icons that are already created….
searching, but not finding something like the link included in the tutorial so far!
Most amazing, thank you. If this “old dog” can follow your directions, ANYBODY should be able to! Thanks!
Thank you – thank you – thank you! Decided I had procrastinated long enough on fixing a mess I made of the nav-bar, googled, and voila! yours was the only one that made sense. Thanks so very much!!
Tammy recently posted..Preparing for Thundersnow
Hey, that link is broken for the social media sillhouttes. I found the updated link, if you want it :)
http://theblogdesignernetwork.com/free-social-icon-silhouettes/
THANK YOU!
Hi, Ashton! Thank you so much for your tutorials on blogging! I am a newbie and I think I have been on you blog now for at least 2 hours!! lol, I have one thing I am unsure of before trying this. You say to add at the start of the code, and at the end of the code. Not really sure what you mean. Are you actually typing “at the start of the code” in the HTML box before pasting?
Hey there! Sorry, someone just pointed out to me that the center tags disappeared from the post! I’ll have to add them back in (but I have to change the code a little so it shows up). What I’m trying to say in the post is be sure to add “center” tags. Add a center before the HTML and a /center after the HTML. But be sure to put each of the “centers” in these: <> (I can’t actually do it, or else they’ll disappear from the comment like the do in the post). Does that make sense?
My question is about the tag you said to add to the front and back of the html code to get it to be centered? it isn’t showing up on your blog post, and i think that i need it to make my stuff work! Help!
By the way.. this is the most helpful thing i have ever found online! You are awesome!
Add
Shoot! It did it again! I’ll try to email it to you!
hello! I love the tutorial! Also, love the font as I am typing this in haha! just one question… the blog design network silhouettes are not available anymore :( do you recommend any others?
I just saw that! So disappointing! Maybe I’ll post some here, but for the most part you can google and find them :)
What’s the code for the “Follow by RSS” link? I got FB, Pinterest & email all sorted out but can’t figure out that one. This tutorial is great and I’ll post when I get it all figured out. Thank you!! :)
I think I figured it out. Would love to have you come see. I used your tutorial to make my header AND nav bar! Is there a way to make my Header smaller & center it? I can make it smaller in PicMonkey but it automatically anchors on the left. It’s blurry when it’s stretched this big but that’s better for my OCD than having it off center. ;)
Little Miss Glamour Goes to Kindergarten
Kristin recently posted..reptiles & amphibians.
Maybe save your images as .png instead of .jpg to help with the blurriness! And if you change the width of your blog in template designer, that should help with the centering too :) But I think it looks GREAT! You did such a good job!!!
Hello there!
I wanted to take a minute and thank you for posting these instructions! I just created social buttons for my blog using your instructions. I am new to the whole blogging thing and have been working on making my blog prettier and more user friendly! I have got long way to go though.. :p
Thank you once again though!
Sukhi recently posted..The Princess and The Frog
Did you create your “My Favorite Posts” and “Reader’s Favorites” in the sidebar using Image Map Tool, or was that a plug-in?
Image-maps! :)
Thanks! Cheers.
Katie recently posted..Other Prezipes To Explore
Your tutorials are so great! :-) I am your newest follower as of now!
Anja recently posted..How To Truncate Your Blogger Posts
I just did this on Thursday I am curious if I did it wrong because I selected image upload from my computer instead of from a URL. Was that wrong? I am in the process of making a header, I saw on the comments I can add my icons to that as well? I like the position of them better at the top. This has been so helpful to a newbie!
Nancy P.@theittersideofsweet recently posted..Starfish Cream Cookies
Yes! You want to use a URL, NOT upload it. When you upload it, it’s like asking image-maps to host it for you. And they don’t like to do that. So they’ll delete your photo within 2 days. That’s why you have to host it yourself :) I have a tut on image hosting in my nav bar if you want to check it out!
I just put my icons up today. I followed your instructions but made my own icons from scratch. I love them!
Darcel ~ The Mahogany Way recently posted..Ride On Two Wheels
THANKS!!!
Holy cow!!! Thank you so much!!! Love the result and it was so easy!
Rita Marie recently posted..Viva Fiesta! Que bien suerta!
Thanks to you, my blog is starting to look great. Thank you for the easy to follow directions!
Shannon @ Pinstersisters recently posted..New Rug
Thank you so much for this!
Thanks for the very helpful tutorial. I use Picmonkey a lot but have never come across Image-Maps.com. Definitely worth looking into for social icons and perhaps even banner creation.
Ashton, this tutorial is so helpful! I kept wondering how people made all the gorgeous free social media icons around the web, and this made it simple for me to create them in my own colors and style. Thanks a lot for the clear, easy to follow guide. Can’t wait to check out more of your posts.
Alicia
Thank you so much for this post! Was so useful when I was creating my own little icons! Thanks again, so useful!
Katie <3
Katie recently posted..Tiffany Bracelets and a Burrito
Thank you so much for this tutorial! I just have one quick question…Is there a way to get rid of the ugly rectangles shape that appears on the mouse over of the links?
Hm… mine never have a rectangle mouse over! I wonder why that’s showing up for you?
Thank you so much for the tutorial! You can see the result on my site (www.apestaartje.net)!