 |
| Before |
 |
| After |
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):
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.
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:
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.
I think I glitched mine out... it works perfectly when viewing my blog in IE >.>
ReplyDeleteAnd sniffling time... I ish no longer speshal ;_;
And because I'm childish.... FIRST!!!
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..
DeleteI agree - a load of bull is IE.... I even told microsoft that when they visited the school >.>
DeleteIt would have been cool if they had taken a note..
DeleteThat 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.
DeleteThe 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
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
DeleteHi Hannah,
DeleteYeah 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;
}
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.
Deleteso 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.
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:
Delete1) 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;
}
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 >.>
DeleteVery nice! Thanks so much Yoga!
ReplyDeleteIs there a way to get rid of the visible separators between each gadget in the gadget bar?
Looking good there! Border? Yeah, sure. Add this to your CSS:
Delete.gadget-icons{
border: 0px !important;
}
Cheers!
I still see the separators Yoboy. Wonder if something changed? -Thanks, Bob
DeleteThe changed the handlers again.. Here, use this updated code to remove your icon border:
Delete.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 :)
That worked! Thanks Yoboy!
DeleteExcellent! :)
DeleteGood blog Yoboy ! It's xxxdepy :))
ReplyDeletehey...sorry its out of context......but is there anyway to have featured posts in dynamic views?
ReplyDeleteTo 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.
DeleteAny way to force specific links in a Link List gadget to open in the same page (instead of a new one) when clicked?
ReplyDeleteUnfortunately 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.
DeleteIs there a way to add the stumbleupon button my either my blog or my posts in dynamic view? I'm using magazine view.
ReplyDeleteI'm afraid adding HTML of any kind to the front page is not allowed at the moment. Sorry bout that.
DeleteHi,
ReplyDeleteThanks 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
Hi Gez,
DeleteFind and delete this line, and you'll be fine :)
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
Cheers..
Hi Yogaratnam,
ReplyDeleteYou are great !
Thank you, it works..
Regards
Most welcome :)
DeleteYoga.
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?
ReplyDeleteFirst, 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:
Delete.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..
Hello Yoga,
ReplyDeleteI 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
Hi Javi,
Delete1) 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.
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 :)
DeleteAnd 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
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.
ReplyDeleteScreenshot 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...
Thanks a lot Hannah, managed to change the order the gadgets thanks to your tip.
DeleteI 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,
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.
DeleteHi 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.
ReplyDeleteHi Jeremy,
DeleteThe 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..
Thanks. And is it possible to change the image inside the gadget instead of the background then?
DeleteActually, 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.
DeleteOk. I also have a couple of other questions:
ReplyDelete1. 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!
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?
Delete2) Try this..
.publish-info{
display: none !important;
}
Cheers :)
How about the sidebar gadgets that appear on the right. Like on googleblog.blogspot.com. How can I get that?
ReplyDeleteGoogle exclusive feature.. Still waiting for an official confirmation.
Deleteoptic- How is that, what is the confirmation for?
DeleteI 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.
DeleteHi, great job mate !
ReplyDeleteYour trick works but my image is at the BACKGROUND and the icon still at the firstground...
Any clue for me ? thanks a lot
Hi Adrien,
DeleteI 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..
My images are not showing why? please help.
ReplyDeleteI'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?
Deletehello there !
ReplyDeleteYour 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 ^^
Hi Morgane,
ReplyDeleteIt 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.
Thank you so much! This worked perfectly :) :)
ReplyDeleteNo problem at all! :)
DeleteHi Yoga,
ReplyDeletethanks 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 ='(
Hi Gaia,
DeleteDo you still have the code that you used? Copy and paste it here, I'll see if there's anything wrong with it.
Cheers :)
Hi Kath,
ReplyDeleteI could not find the blog. Have you changed the address of the blog or something?
Oh darn, sorry, I put an extra w in the www. - it's www.naturalkathshop.blogspot.com
ReplyDeleteThank you for any help! I'd love to get this fixed before I launch the site on Monday.
Hi Kath,
ReplyDeleteSorry 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?
Hi Yoga!
ReplyDeleteThat'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!
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:
Delete.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? :)
Hi there,
ReplyDeleteYou 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
Hello there,
DeleteYou 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
Great tutorials ! Thank you so much :)
ReplyDeleteHaving 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 !
ReplyDeleteYet 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
This should do:
Delete.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;
}
Thank u so much you're a genius !
DeleteI 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 :(
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.
DeleteHi 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 ?
ReplyDeleteThx !
By the way your article is top !
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.
DeleteHy 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/
ReplyDeleteI cannot get hover to work, unfortunately.
DeleteWorks perfect! Thank you dude!
ReplyDelete