Change Gadget Icons in Blogger Dynamic Views

Iskandar Blogger 7:44 AM
Before
After
This seems to be a popular question around ever since the launch of gadgets in Blogger's dynamic view. I'm kind in a rush so I'm gonna make this quick. Basically, I'm gonna show you how you can replace the default icons that come with the gadgets. It uses CSS3, which means it'll work on all browsers except IE. Now, let's cut to the chase.

Step 1:

Have your icons prepared. If you're naughty, you can just steal images from the Internet, but that is not cool. If you have your own images in your computer, you need to upload them to the Internet and get their direct links. Here's a simple tutorial on how you can obtain direct links from Blogger uploaded images.

Depending on your preferences, you might wanna scale down your icons to fit the gadgets properly. The gadget's icon area is approximately 50 x 50px. It is not a must to scale down, but if you wish to do so, check out the 'Bonus' section in the link I posted above.

These are the icons that I will be using (just for reference, you don't have to do anything about it):
https://lh6.googleusercontent.com/-3_aVIlnWwcA/T19uvyUvECI/AAAAAAAAADQ/r2t7d7xUFo4/s150-c/photo.jpg
https://lh4.googleusercontent.com/-jXzpcw0yZOU/T19utLJsO2I/AAAAAAAAADI/nobrgC1r6-Q/s150-c/photo.jpg
https://lh5.googleusercontent.com/-vxylmZD5KZk/T19uEE4F3II/AAAAAAAAAC4/JtPgJGh7Jqw/s150-c/photo.jpg
https://lh5.googleusercontent.com/-NKf7XUAVJDQ/T1eNKg-zTiI/AAAAAAAAABg/hmNT4lcLqLw/s150-c/photo.jpg

Step 2:

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog. 
.ss, #gadget-dock>div:nth-of-type(1) .gadget-icons img, 
.ss, #gadget-dock>div:nth-of-type(2) .gadget-icons img, 
.ss, #gadget-dock>div:nth-of-type(3) .gadget-icons img, 
.ss, #gadget-dock>div:nth-of-type(4) .gadget-icons img{
display: none !important;
}

#gadget-dock>div:nth-of-type(1) .gadget-icons{
background: url(https://lh6.googleusercontent.com/-3_aVIlnWwcA/T19uvyUvECI/AAAAAAAAADQ/r2t7d7xUFo4/s150-c/photo.jpg) no-repeat center !important;
}

#gadget-dock>div:nth-of-type(2) .gadget-icons{
background: url(https://lh4.googleusercontent.com/-jXzpcw0yZOU/T19utLJsO2I/AAAAAAAAADI/nobrgC1r6-Q/s150-c/photo.jpg) no-repeat center !important;
}

#gadget-dock>div:nth-of-type(3) .gadget-icons{
background: url(https://lh5.googleusercontent.com/-vxylmZD5KZk/T19uEE4F3II/AAAAAAAAAC4/JtPgJGh7Jqw/s150-c/photo.jpg) no-repeat center !important;
}


#gadget-dock>div:nth-of-type(4) .gadget-icons{
background: url(https://lh5.googleusercontent.com/-NKf7XUAVJDQ/T1eNKg-zTiI/AAAAAAAAABg/hmNT4lcLqLw/s150-c/photo.jpg) no-repeat center !important;
}
Replace Lines 9, 13, 17 and 22 with the direct links of your icons, and click on 'Apply to Blog'. View the actual change on your blog (don't depend on Template Designer's preview because it is broken at the time this is written). You're done. Enjoy..

Extra

If you have more than 4 gadgets, you need to add a few extra lines. You could probably figure this out by yourself. This is how your code should look like if you have 6 gadgets. I have highlighted the new lines to show you what changed from the previous code:
.ss, #gadget-dock>div:nth-of-type(1) .gadget-icons img, 
.ss, #gadget-dock>div:nth-of-type(2) .gadget-icons img, 
.ss, #gadget-dock>div:nth-of-type(3) .gadget-icons img, 
.ss, #gadget-dock>div:nth-of-type(4) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(5) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(6) .gadget-icons img{
display: none !important;
}

#gadget-dock>div:nth-of-type(1) .gadget-icons{
background: url(https://lh6.googleusercontent.com/-3_aVIlnWwcA/T19uvyUvECI/AAAAAAAAADQ/r2t7d7xUFo4/s150-c/photo.jpg) no-repeat center !important;
}

#gadget-dock>div:nth-of-type(2) .gadget-icons{
background: url(https://lh4.googleusercontent.com/-jXzpcw0yZOU/T19utLJsO2I/AAAAAAAAADI/nobrgC1r6-Q/s150-c/photo.jpg) no-repeat center !important;
}

#gadget-dock>div:nth-of-type(3) .gadget-icons{
background: url(https://lh5.googleusercontent.com/-vxylmZD5KZk/T19uEE4F3II/AAAAAAAAAC4/JtPgJGh7Jqw/s150-c/photo.jpg) no-repeat center !important;
}

#gadget-dock>div:nth-of-type(4) .gadget-icons{
background: url(https://lh5.googleusercontent.com/-NKf7XUAVJDQ/T1eNKg-zTiI/AAAAAAAAABg/hmNT4lcLqLw/s150-c/photo.jpg) no-repeat center !important;
}

#gadget-dock>div:nth-of-type(5) .gadget-icons{
background: url(https://lh6.googleusercontent.com/-3_aVIlnWwcA/T19uvyUvECI/AAAAAAAAADQ/r2t7d7xUFo4/s150-c/photo.jpg) no-repeat center !important;
}

#gadget-dock>div:nth-of-type(6) .gadget-icons{
background: url(https://lh4.googleusercontent.com/-jXzpcw0yZOU/T19utLJsO2I/AAAAAAAAADI/nobrgC1r6-Q/s150-c/photo.jpg) no-repeat center !important;
}
If you're not sure, leave a comment :) Cheers.