Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Saturday, March 17, 2012

Change Gadget Icons in Blogger Dynamic Views

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.

73 comments:

  1. I think I glitched mine out... it works perfectly when viewing my blog in IE >.>

    And sniffling time... I ish no longer speshal ;_;



    And because I'm childish.... FIRST!!!

    ReplyDelete
    Replies
    1. You must be using IE9 then.. IE8 and below don't support CSS3.. IE9 isn't that great either.. Nothing but trouble if you ask me..

      Delete
    2. I agree - a load of bull is IE.... I even told microsoft that when they visited the school >.>

      Delete
    3. It would have been cool if they had taken a note..

      Delete
    4. That it would.. they just sorta stared at me. They asked me how I found windows 7 and whether I used any of the features shown in the trial like skydrive. I was nicely honest. "No.. I don't use Skydrive as I don't use Windows Live - I use Yahoo and Gmail for my emailing purposes. I don't use you picture editor as I have photoshop and your equipment for that is rather crappy. I would love to use Movie Maker, but you got rid of it for Windows 7 before bringing it back - I am waiting on an update, so have various free softwares instead which serve their purpose. You internet explorer features are a joke and you should take a look at some real browsers. Internet explorer is only good to download another browser - I use Google Chrome, some people opt for Firefox. Both are better.

      The woman just stared and then asked what I liked about IE. I said nothing... but overall, well done in Windows 7. I like that :p

      Delete
    5. Oh.. forgot to ask - is there any way to change the colour of the text which gives the comments count. I thought of it ages ago and kept forgetting to ask as with a black post background on dynamic views, the "add a comment" is pretty much invisible. And can the bubble with the number of comments colour be changed? I hate the whole grey thing blogger seems to love

      Delete
    6. Hi Hannah,

      Yeah sure. Add this to your CSS:

      .bubble {
      background: white !important;
      border: white !important;
      color: black !important;
      }
      .bubble .bubble-tail, .bubble.empty .bubble-tail:after {
      border-color: white transparent transparent;
      }

      Delete
    7. I can't remember if I already asked this. (my memory is crap, but I can never tell due to the moderationy thing). If I did, delete the other one as there is an extra question here that I only thought of today.

      so hey - thanks loads for this!!! Works a charm. Is it possible to change the text that comes after it ("Add a comment" or "x comments") to a different colour?

      Also, is it possible to change the background and text colour of the actual comments? (only a desire... the look isn't so bad as to bug me here)

      And just came to mind - can the arrows and x button at the top of the post be changed? Again - different background colours if possible. I'm guessing the arrow and x are images and not changeable themselves, but if they can, even better - so I can adjust background and colour.

      Delete
    8. You did. I've just been a little busy with my dissertation, couldnt find the time to reply to all comments before. To answer your questions:

      1) Yes it is possible

      .comments-header h3{
      color: white !important;
      }

      2) The bottom portion of code is for link colors

      .blogger-comments .comments-content {
      background: black !important;
      color: white !important;
      }

      .blogger-comments .comments-content a{
      color: white !important;
      }

      3) Yes you can, replace with another image.

      .kd-button img{
      display: none;
      }

      .kd-button.previous{
      background: url(http://i.imgur.com/Kz5G7.png2) no-repeat center;
      }

      .kd-button.next{
      background: url(http://i.imgur.com/Kz5G7.png2) no-repeat center;
      }

      .kd-button.close{
      background: url(http://i.imgur.com/Kz5G7.png2) no-repeat center;
      }

      Delete
    9. Thanks hun. My head was so ditzy I really couldn't remember. I hope your dissertation goes well... I'm dreading reaching my third year for that very reason >.>

      Delete
  2. Very nice! Thanks so much Yoga!

    Is there a way to get rid of the visible separators between each gadget in the gadget bar?

    ReplyDelete
    Replies
    1. Looking good there! Border? Yeah, sure. Add this to your CSS:

      .gadget-icons{
      border: 0px !important;
      }

      Cheers!

      Delete
    2. I still see the separators Yoboy. Wonder if something changed? -Thanks, Bob

      Delete
    3. The changed the handlers again.. Here, use this updated code to remove your icon border:

      .gadget-menu, #gadget-dock{
      border: 0px !important;
      -moz-box-shadow: 0px 0px 0px transparent !important;
      -webkit-box-shadow: 0px 0px 0px transparent !important;
      -o-box-shadow: 0px 0px 0px transparent !important;
      box-shadow: 0px 0px 0px transparent !important;
      }

      Cheers :)

      Delete
  3. Good blog Yoboy ! It's xxxdepy :))

    ReplyDelete
  4. hey...sorry its out of context......but is there anyway to have featured posts in dynamic views?

    ReplyDelete
    Replies
    1. To the best of my knowledge, there isn't any. You can however, set certain posts to be 'sticky' and appear at top all the time. You do this by editing these posts, and set its date to some time far in the future.

      Delete
  5. Any way to force specific links in a Link List gadget to open in the same page (instead of a new one) when clicked?

    ReplyDelete
    Replies
    1. Unfortunately no. We'd need to edit HTML to make a link to open in the same page. And we don't have access to Dynamic View's HTML at the moment.

      Delete
  6. Is there a way to add the stumbleupon button my either my blog or my posts in dynamic view? I'm using magazine view.

    ReplyDelete
    Replies
    1. I'm afraid adding HTML of any kind to the front page is not allowed at the moment. Sorry bout that.

      Delete
  7. Hi,
    Thanks for your notes, as I think your site is only one that describes something about editing dynamic view.
    But, I couldn't save anything while it is at dynamic mode.
    For example, I make minor change by delete a space line to test but, I can't save it. It says there is "nav1" more than one. But I couldn't change anything about it.
    My test site: http://antikyerler.blogspot.com/

    Thanks at advance
    Regards

    ReplyDelete
    Replies
    1. Hi Gez,

      Find and delete this line, and you'll be fine :)

      <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>

      Cheers..

      Delete
  8. Hi Yogaratnam,
    You are great !
    Thank you, it works..
    Regards

    ReplyDelete
  9. Your site is brilliant. Thanks for all your help, seeing as I can't quite find dynamic view help anywhere else. Quick question though, what do I do if I only want to edit one gadget?

    ReplyDelete
    Replies
    1. First, find out what is the position of the gadget that you wanna edit. Say it is third from top. That means this is gadget number 3. Your code will then look like this:

      .ss, #gadget-dock>div:nth-of-type(3) .gadget-icons img{
      display: none !important;
      }

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

      Cheers..

      Delete
  10. Hello Yoga,

    I want to ask you few questions, hope you can bear with me.
    1- So first of all, is there a way to change the order in which the gadgets appear? To be honest, I don't understand why only these are there. And I fail to understand the connection between the gadgets in layout view in template editor and the final result

    2- How to change the behaviour and content of the gadgets? I want to add my picture inside one of them, as they have in some blogs (I think you have it too) and when click it, take the reader to "about me" kind of page. In any case, I suppose this is what you explained here about adding pictures to the icons, but was wondering if it is possible that it takes it directly from the google profile picture automatically

    3- And last one, maybe not that important, but is getting me crazy, is how to change the font and color of the blog description so that it follows the same outlook as the blog tittle, maybe just smaller...I really cant make it work.

    Thanks in advance, and hope havent been too annoying with my questions.

    javi

    ReplyDelete
    Replies
    1. Hi Javi,

      1) I'm not aware of any way to re-arrange the gadgets. DV uses scripts to recognise what gadgets are present in your layout page, and it dynamically fetches these gadgets and place them on your actual blog. The order in which your gadgets are arranged in the layout page will not be considered during the fetching process.

      2) Nope, it isn't possible to automatically downloading profile picture from your Google plus. And yes, the tutorial tutorial is meant for you to add pictures to your gadget.

      3) Same as title but smaller? Try this:

      #header.header .title h3 {
      color: yellow;
      font-family: 'Helvetica Neue Light',HelveticaNeue-Light,'Helvetica Neue',Helvetica,Arial,sans-serif;
      font-size: 25px;
      text-shadow: 1px 1px 1px black;
      }

      Cheers.

      Delete
    2. Thanks a lot, that did the trick for the description part, I still dont understand how come it works, but as they say:If it works...don't touch it :)
      And thanks to Hannah comment I could rearrange the widgets, and just added the translation one that was the one missing :)

      Again, thanks a lot for wonderful and extremely helpful tutorials,

      Cheers

      Delete
  11. I changed the order of my gadgets using the layout page. The only one that doesn't move is the subscribe which is always at the bottom. You need to have all the gadgets under the header bar and pages gadgets and then order them whichever way you want and hit save.

    Screenshot here --> http://hanxa.webs.com/Blogger-%20Hannah%20S.%20Chacko%20-%20Layout.png

    As for the font and colour of the description, there should be a tab under advanced in the template editor... That's how I did mine, anyways

    Screenshot here --> http://hanxa.webs.com/Blogger%20in%20draft-Hannah%20S.%20Chacko%20-%20Template%20Designer.png

    Unless these features are only available in Blogger In Draft, or I missed the point somewhere...

    ReplyDelete
    Replies
    1. Thanks a lot Hannah, managed to change the order the gadgets thanks to your tip.
      I really love your blog, looks so really nice and elegant.

      By the way, as a side note, how did you managed to make that about me gadget and having the text you want? I selected "about me" gadget from the list of available gadgets and basically what it does is to display a list of contributors to my blog, which is weird. So how can I make it to have something similar to what you got? Is that a text gadget or how did you modified it :)

      Thanks again,

      Delete
    2. The about me will show your profile text, or G+ profile info if your accounts are linked. But only if you are the sole contributor. When there are multiple authors, it becomes a contributor list. When text/html gadgets are available on dynamic views, you can create a custom about me, but until then, it isn't possible.

      Delete
  12. Hi there, I wanted to know if it was possible to give a second image so that when you click on the gadget icon, you get the other image (as it does with the original gadgets)? Thanks in advance.

    ReplyDelete
    Replies
    1. Hi Jeremy,

      The original code has gotten so complex that it has reached a point of saturation. It is not possible to add the 'selected icon' at the moment.

      Cheers..

      Delete
    2. Thanks. And is it possible to change the image inside the gadget instead of the background then?

      Delete
    3. Actually, we're changing the image inside the gadget by changing the background. Since we can only make CSS changes, we're forced to make the most out of what we've got. The only feasible way to add an image via CSS (alone!) is by using the background property - and that's what the code above is using. Can't think of any other way to change the image.

      Delete
  13. Ok. I also have a couple of other questions:

    1. I'd like to make the left margin of the text in the header bar bigger (given that I already used your code to get rid of the whole menu/link of choices for the dynamic views)
    2. How do you get rid of the "posted x hours ago by x"?

    Thanks so much for your help, your site is brilliant!

    ReplyDelete
    Replies
    1. 1) It is best if I can have a look at your blog. Otherwise, it'll just be a shot in the dark. What's your blog's address?

      2) Try this..

      .publish-info{
      display: none !important;
      }

      Cheers :)

      Delete
  14. How about the sidebar gadgets that appear on the right. Like on googleblog.blogspot.com. How can I get that?

    ReplyDelete
    Replies
    1. Google exclusive feature.. Still waiting for an official confirmation.

      Delete
    2. optic- How is that, what is the confirmation for?

      Delete
    3. I asked for a confirmation from Blogger Community Manager about the availability of these features to normal end users.. It is a custom exclusive template, not available for normal users.

      Delete
  15. Hi, great job mate !

    Your trick works but my image is at the BACKGROUND and the icon still at the firstground...

    Any clue for me ? thanks a lot

    ReplyDelete
    Replies
    1. Hi Adrien,

      I don't see the code in your blog anymore. Could you restore the code and get back to me, so that I can inspect and find out what's wrong?

      Cheers..

      Delete
  16. My images are not showing why? please help.

    ReplyDelete
    Replies
    1. I'll have a look, but what's your blog's address? Where (and how) exactly have you posted these images that you could not view?

      Delete
  17. hello there !
    Your tips are amazing so thank you for sharing !
    I was wondering one thing tho.

    When you put an image as a new gadget, you can tell the image to lead to another url. Is there any way to tell blogger to open that other url in a new window instead of replacing your website?
    I don't know if I'm making any sense ^^

    ReplyDelete
  18. Hi Morgane,

    It is possible in non-dynamic blog. But for Dynamic View templates, unfortunately, we can't specifically make certain links to open in a new tab.

    ReplyDelete
  19. Thank you so much! This worked perfectly :) :)

    ReplyDelete
  20. Hi Yoga,
    thanks for this post.
    I tried to do this change on my blog, but, if I use your code (step2), my gadget's icons change with the image you used. if I try to change the url of your images, with mine, it doesn't work ='(

    ReplyDelete
    Replies
    1. Hi Gaia,

      Do you still have the code that you used? Copy and paste it here, I'll see if there's anything wrong with it.

      Cheers :)

      Delete
  21. Hi Yoga,
    This code worked perfect on my other blogs but on my most recent blog it went wonky. There's supposed to be another B at the top, and the original images are showing through for some reason. Thank you for any help! Here's the code - if you need all the code I've added to the blog in general, let me know. Thank you again!
    .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(6) .gadget-icons img,
    .ss, #gadget-dock>div:nth-of-type(7) .gadget-icons img,
    .ss, #gadget-dock>div:nth-of-type(9) .gadget-icons img,
    display: none !important;
    }

    #gadget-dock>div:nth-of-type(1) .gadget-icons{
    background: url(http://4.bp.blogspot.com/-DqJCg2pU-b4/Ujf84cIItgI/AAAAAAAAAMw/sYgS6gos6BQ/s1600/menuB.jpg) no-repeat center !important;
    }

    #gadget-dock>div:nth-of-type(2) .gadget-icons{
    background: url(http://3.bp.blogspot.com/-tiNMPrOYiYM/UjVuOHMbBQI/AAAAAAAAAIM/jl5pysFCpvI/s1600/menuF.png) no-repeat center !important;
    }

    #gadget-dock>div:nth-of-type(3) .gadget-icons{
    background: url(http://4.bp.blogspot.com/-DqJCg2pU-b4/Ujf84cIItgI/AAAAAAAAAMw/sYgS6gos6BQ/s1600/menuB.jpg) no-repeat center !important;
    }
    #gadget-dock>div:nth-of-type(4) .gadget-icons{
    background: url(http://3.bp.blogspot.com/-tiNMPrOYiYM/UjVuOHMbBQI/AAAAAAAAAIM/jl5pysFCpvI/s1600/menuF.png) no-repeat center !important;
    }
    #gadget-dock>div:nth-of-type(5) .gadget-icons{
    background: url(http://3.bp.blogspot.com/-adsX8ssjjo0/UjqrqMJpvpI/AAAAAAAAAOg/k68JLMw3urI/s1600/tiny+social.png) no-repeat center !important;
    }
    #gadget-dock>div:nth-of-type(6) .gadget-icons{
    background: url(http://1.bp.blogspot.com/-c0JV9R-kXHg/Uje_ntnWM_I/AAAAAAAAALA/JzEtie1CqfM/s1600/youtube+button2.jpg) no-repeat center !important;
    }
    #gadget-dock>div:nth-of-type(7) .gadget-icons{
    background: url(http://3.bp.blogspot.com/-wjQQ2bQbHa8/Uje2JX4uHVI/AAAAAAAAAKw/DAr53mceB3s/s1600/squrrel2.jpg) no-repeat center !important;
    }

    #gadget-dock>div:nth-of-type(9) .gadget-icons{
    background: urlhttp://3.bp.blogspot.com/-tiNMPrOYiYM/UjVuOHMbBQI/AAAAAAAAAIM/jl5pysFCpvI/s1600/menuF.png) no-repeat center !important;
    }

    The site:
    wwww.naturalkathshop.blogspot.com

    ReplyDelete
    Replies
    1. Hi Kath,

      I could not find the blog. Have you changed the address of the blog or something?

      Delete
    2. Oh darn, sorry, I put an extra w in the www. - it's www.naturalkathshop.blogspot.com
      Thank you for any help! I'd love to get this fixed before I launch the site on Monday.

      Delete
    3. Hi Kath,

      Sorry for the late reply. I cant quite see the issue you're describing from my browser (I don't see the original images showing through and I can quite tell where to see the 'B'). Anyways, could you send me an annotated screenshot of what you're seeing and what you want done?

      Delete
  22. Hi Yoga!
    That's ok, any help at any time is very much appreciated. I'm still not totally clear on how to share the screenshot, but I hope this is what you needed:
    http://2.bp.blogspot.com/-4TQrKbCSoy8/UlG8xEB9DgI/AAAAAAAAAaI/a0g6wE0xUlk/s320/shopscreensnip.PNG
    I highlighted a couple of the problems - the majority of them are either showing through or are missing. There should be a B at the top and an F second from the bottom, and you can see most clearly on the social media button how the previous image is showing through. I realized I'd put the wrong numbers with the wrong icons (in the code above) and I thought when I fixed that everything would look ok, but it actually made it worse. If the screenshot link isn't right, maybe I can email the image file to you?

    Thank you for the help!

    ReplyDelete
    Replies
    1. Yes, spot on, exactly what I needed to see. I get the whole picture now. I had a chance to look at the code you've used, and I spotted two errors in total. I corrected them and tested them on your template, and voila, things are working well again. Here's the corrected 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,
      .ss, #gadget-dock>div:nth-of-type(7) .gadget-icons img,
      .ss, #gadget-dock>div:nth-of-type(9) .gadget-icons img{
      display: none !important;
      }
      #gadget-dock>div:nth-of-type(1) .gadget-icons{
      background: url(http://4.bp.blogspot.com/-DqJCg2pU-b4/Ujf84cIItgI/AAAAAAAAAMw/sYgS6gos6BQ/s1600/menuB.jpg) no-repeat center !important;
      }
      #gadget-dock>div:nth-of-type(2) .gadget-icons{
      background: url(http://3.bp.blogspot.com/-tiNMPrOYiYM/UjVuOHMbBQI/AAAAAAAAAIM/jl5pysFCpvI/s1600/menuF.png) no-repeat center !important;
      }
      #gadget-dock>div:nth-of-type(3) .gadget-icons{
      background: url(http://4.bp.blogspot.com/-DqJCg2pU-b4/Ujf84cIItgI/AAAAAAAAAMw/sYgS6gos6BQ/s1600/menuB.jpg) no-repeat center !important;
      }
      #gadget-dock>div:nth-of-type(4) .gadget-icons{
      background: url(http://3.bp.blogspot.com/-tiNMPrOYiYM/UjVuOHMbBQI/AAAAAAAAAIM/jl5pysFCpvI/s1600/menuF.png) no-repeat center !important;
      }
      #gadget-dock>div:nth-of-type(5) .gadget-icons{
      background: url(http://3.bp.blogspot.com/-adsX8ssjjo0/UjqrqMJpvpI/AAAAAAAAAOg/k68JLMw3urI/s1600/tiny+social.png) no-repeat center !important;
      }
      #gadget-dock>div:nth-of-type(6) .gadget-icons{
      background: url(http://1.bp.blogspot.com/-c0JV9R-kXHg/Uje_ntnWM_I/AAAAAAAAALA/JzEtie1CqfM/s1600/youtube+button2.jpg) no-repeat center !important;
      }
      #gadget-dock>div:nth-of-type(7) .gadget-icons{
      background: url(http://3.bp.blogspot.com/-wjQQ2bQbHa8/Uje2JX4uHVI/AAAAAAAAAKw/DAr53mceB3s/s1600/squrrel2.jpg) no-repeat center !important;
      }
      #gadget-dock>div:nth-of-type(9) .gadget-icons{
      background: url(http://3.bp.blogspot.com/-tiNMPrOYiYM/UjVuOHMbBQI/AAAAAAAAAIM/jl5pysFCpvI/s1600/menuF.png) no-repeat center !important;
      }

      Now, for the fun part, can you spot the two errors, by comparing the old code to the new one? :)

      Delete
  23. Hi there,
    You have been so much helpful, appreciated.
    I wonder if there is any possibility to put links in the icons on Navigation bar.
    for example
    I put a Home Icon on Nav Bar and want to link with the homepage url. so if anybody clicks on Home button, it directs to homepage.
    is that possible?

    Thanks in Advance

    ReplyDelete
    Replies
    1. Hello there,

      You can place the links in your navigation bar, by adding the links to your Pages gadget. You can then change the text link into an icon:

      http://www.southernspeakers.net/2011/12/blogger-dynamic-view-picture-menu.html

      Delete
  24. Great tutorials ! Thank you so much :)

    ReplyDelete
  25. Having problems with my gadgets ... Stil have the previous image behind my new icon. How can I handle it ? It used to work but I've made a mistake with my HTML code and had to start it all back. Crap !
    Yet it doesn't work and the Facebook et Instagram widgets inside the gadgets don't show ...
    Here is the 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,
    display: none !important;
    }

    #gadget-dock>div:nth-of-type(1) .gadget-icons{
    background: url(http://4.bp.blogspot.com/-5-ols6ySNDY/UzfyIT4J5WI/AAAAAAAAEZI/nxq9BaYQVU8/s50/facebook-48.png) no-repeat center !important;
    }

    #gadget-dock>div:nth-of-type(2) .gadget-icons{
    background: url(http://4.bp.blogspot.com/-h8uLPyz062o/UzfyIWg84uI/AAAAAAAAEZQ/11zjqW7z3YE/s40/instagram-48.png) no-repeat center !important;
    }

    #gadget-dock>div:nth-of-type(3) .gadget-icons{
    background: url(http://3.bp.blogspot.com/-VVU5wASFkDo/UzfyIefAu-I/AAAAAAAAEZM/WOpYG3Evcws/s50/twitter-48.png) no-repeat center !important;
    }

    www.livingwithcolette.blogspot.fr

    ReplyDelete
    Replies
    1. This should do:

      .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{
      display: none !important;
      }
      #gadget-dock>div:nth-of-type(1) .gadget-icons{
      background: url(http://4.bp.blogspot.com/-5-ols6ySNDY/UzfyIT4J5WI/AAAAAAAAEZI/nxq9BaYQVU8/s40/facebook-48.png) no-repeat center !important;
      }
      #gadget-dock>div:nth-of-type(2) .gadget-icons{
      background: url(http://4.bp.blogspot.com/-h8uLPyz062o/UzfyIWg84uI/AAAAAAAAEZQ/11zjqW7z3YE/s40/instagram-48.png) no-repeat center !important;
      }
      #gadget-dock>div:nth-of-type(3) .gadget-icons{
      background: url(http://3.bp.blogspot.com/-VVU5wASFkDo/UzfyIefAu-I/AAAAAAAAEZM/WOpYG3Evcws/s40/twitter-48.png) no-repeat center !important;
      }

      Delete
    2. Thank u so much you're a genius !
      I have just one more question, how can I do so that when we click it the gadget icon, it shows all the images from the facebook and instagram widget ? Because before it made it very well and for now it's not working anymore: it just show a small square of the widget :(

      Delete
    3. I'm afraid there isn't a feasible way to do this. We could end up breaking your template when Blogger updates their code the slightest.

      Delete
  26. Hi I just have two gadgets, I don't want to change the icon of the others. When I erase the two last lines, the icons I don't want to change disappear, and when I erase the two last ".ss, ....." my new icons glitch but the icons I don't want to change are back... Any solution ?

    Thx !

    By the way your article is top !

    ReplyDelete
    Replies
    1. I see you have more than two gadgets now, and you have successfully changed the first gadget. I believe you have gotten this sorted - let me know if you still need help.

      Delete
  27. Hy Yoboy. can I make that all my gadget color (in dynamic view) is grey, but when you hoover it make it a different color. Or if it's possible to put one picture for each gadget, but when you hoover it it changes into different picture. Example: http://www.designfootball.com/

    ReplyDelete
    Replies
    1. I cannot get hover to work, unfortunately.

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.