 |
| Before |
 |
| After |
There, the title sounds straight-forward enough. So, Google decided to bring in the gadget feature to Blogger's Dynamic View. Finally! At the moment, it stays at one place. If you've added a
custom header to your Dynamic View template, your gadget dock might be too close to your header. In this tutorial, I'mma show you how to bring the gadget dock down/up the page. This is a response to
blog reader Marky Marc.
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.
#gadget-dock, .ss{
top: 300px !important;
}
Adjust the value '300px' accordingly. BTW, I've realised that the template designer's Live Preview function isn't working properly anymore after the last update. What does that mean? When you make changes, it is not instantaneously shown. What I'd do is, I'd click on 'Apply to Blog', and load the actual page to see if anything has changed. Troublesome, I know.
Very nice! Thanks!
ReplyDeleteMost welcome Bob :)
DeleteVery great tip! It was bugging me. Glad they suggested this to be done. It's ironic, I had just asked you about the follower widget then the next day or two they release this new box lol.
ReplyDeleteIt bugged the hell out of me as well. But what do you know, life goes on :)
DeleteSore more tweaks I disoverd, although I am not using dynamic views yet:
ReplyDeleteIt is possible to have the widget undocked by adding this css code:
#gadget-dock
{
right: 0;
}
And you can use this code to change the background colors:
.gadget-icons
{
background-color: red;
}
.gadget-title
{
background-color: red;
}
.gadget-selected .gadget-icons
{
background-color: yellow;
}
and this to change the icon color:
.gadget-content a
{
color: green;
}
I've been working on some tweaks myself to change the colors. Will publish it some time next week :)
DeleteGadget-content a changes the colour of the text in the gadget, not the icon colour...
DeleteThe only thing I have left that I want to change now is the icon colour... got all the backgrounds and text how i want them, but the icon colour seems elusive...
Yo Hannah,
DeleteThe icons are image files. Changing the color of image files isn't as easy as changing a CSS value. The only possible way I can see as of now is:
1) Download the icon to your computer
2) Change its color, using an image editing software. You need to make sure the edited icon must have transparent background.
3) Upload the edited icon somewhere online, and get its direct address
4) If you've gotten this far, I'll help you to do the rest. The idea is to disable the existing icon, and use the new edited icon that you have.
Gadget-dock does nothing for me. I would rather the gadgets not disappear when the page loads.. I would like them to be more visible and to say out. Is there a way to do this?
DeleteHi Shepherd,
DeleteIf you want your gadgets to remain unhidden, go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
#gadget-dock, .ss{
position: fixed !important;
right: 0px !important;
}
Cheers.
That did the trick! Thanks.
DeleteMost welcome :)
Deletewow.. great brother. thank you
DeleteI want to thank you so much for all of your great and easy instruction - you have helped our site soooo much. Not only are you extremely talented with computers but you have a great gift of being able to explain things well.... thanks again!
ReplyDeleteYou're most welcome Moore. Nice blog you got it going there. Keep up the good work :)
DeleteI know you have posted this in comments somewhere - I remember seeing it - but I cannot find it now
DeleteHow can I change the gray color on the back of flip card - I would like white. Also - if I change it to white will I need a code to change the title on the flipcard? Thanks in advance...BTW - I will tip you in your jar later this week - you should be getting paid for this
Going through the comments one by one, not knowing which post to look in, can be a laborious task. I know I posted it somewhere, but it's just much easier to re-invent the code. Here:
Delete.flipcard .back{
background: white !important;
}
.flipcard .back .overlay .title{
color: black !important;
}
.flipcard .back .overlay .date{
color: red !important;
}
The first code should change the background of your flipcard from grey to white. The second code should change the title in your flipcard from white to black. And the third code should change the date text from light grey to red.
Happy experimenting :)
Am working on the icons for each of my blogs - Noticed there is a selected and unselected picture so creating the two colours for my blog and whatnot...
ReplyDeleteWhen I have each icon, what format should I save them in? Using photoshop CS5 so what format and (if relevant) settings when saving so that they work?
Also, if anyone else wants icons, email me at hschacko13@gmail.com. Include hex code or rgb code and I'll email you the icons when I have them. :)
It doesn't matter what format you save them in, but it has to be of transparent background. PNG or GIF will be ideal for transparent backgrounds.
DeleteYeah I noticed the selected and unselected ones. Their placements in the script look sloppy I'd say.
Cool - will get back to you when I have them sorted... Had to zoom on the page to get decent images and then will reduce size again once I've edited them.... when they were normal size there were annoying pixel issues, while now I have biiiig pics, no annoying middle pixels :p
DeleteAnother quick question - it seems after after making a few tweaks on the blog that now I have to click on the flipcard 2 and 3 times to get it to pop up to full screen - is this something I did by accident? Is there something I can do? Or is this a Blogger issue that only they can fix? BTW you are a god send -
ReplyDeleteJust tested idatedthatdouche.com, and your flipcards appear to be absolutely fine. But I might have an idea of what happened. When you had to click your flipcard 2-3 times, how many side gadgets were you seeing (you have 4 gadgets installed)? And does it happen all the time or just every now and then?
DeleteI found that as well.. then it fixed itself a while... then it went again. Since I played with the gadgets code (keeping undocked and loads of colours) it's fine: http://hschackophotos.blogspot.com
DeleteI know for a fact that the gadget script has been unstable, at least in Firefox it is. If I keep Template Designer open, 3 out 5 times my test blog won't load its CSS properly. I'll have to hard refresh the page by pressing Ctrl+F5. Sometimes, it'll only work when I close my Template Designer. Not to mention, the Live Preview function in Template Designer is messed up as well.
DeleteYeah.... on IE (I view my blog on all browsers to be safe) it needs a refresh for it to display right... FF is hit and miss - sometimes first time, sometimes needs a refresh... Chrome is fine thus far
DeleteI don't suppose you know how to change the font colour for the profile text on the gadgets, do you? I can change all the other text except the profile info...
ReplyDeleteHi Hannah,
DeleteHere:
.profile-aboutme{
color: white !important;
}
And this for the location text:
.profile-location{
color: white !important;
}
Cheers!
This is an EXCELLENT tip! Thanks a ton for these handy tutorials. I have just one concern. I'm now applying the finishing touches onto my blog http://blog.infamousboutique.com and I am having difficulty centering the tabs on the header-bar. Everything else is perfectly aligned. If you could explain how to center the header-bar options, I'd greatly appreciate it!
ReplyDeleteThanks,
Hi Infamous,
DeleteIt looks centered now. Have you fixed it?
I read a comment in the "Centering Blog Title" post and applied the code to the blog, but the code only seems to work for wide computers (15 inch, 17 inch, etc.) On my 13" laptop, it isn't centered. It's more so right-aligned. Any suggestions?
DeleteRight. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
Delete.tabs{
width: 100% !important;
text-align: center !important;
}
Cheers.
The code condensed everything down under one tab called "Pages" in the header-tab. It didn't center the options. Take a look >>> http://blog.infamousboutique.com
DeleteKeep bringing the number (100) down till you see your links again. Try like 85% or so.
DeleteEXCELLENT! Thanks a lot.
DeleteThank you very much it's exactly what I needed :-)
ReplyDeleteMost welcome :)
DeleteMany Thanks!
ReplyDeleteHi Thanks for all your help. I was wondering how can I add pages to my menu-bar ..
ReplyDeleteRight now it's only "Magazine" & "Home" .. I know this is the code to makes them apear;
#header.header .header-drawer #pages.tabs ul li{
margin: 100000px;
}
But how can I add like "About", "Followers", "BlogLovin", "Facebook FanPage", "Twitter" in the menu-bar?
www.Taggingfashion.blogspot.com
Thnx
Hi Aram
DeleteLooks like you've got this figured, yeah?
Hi Sabrina
ReplyDeleteI get what you mean. Let's add a padding to your text area so that the gadgets will never overlap on it. Add this to your CSS:
.sidebar #content .article{
margin-right: 40px !important;
}
Cheers.
i'm sorry to post this in an article not related to this topic - I couldn't find an article where it was already covered - but you do seem like an expert in Blogger's Dynamic Template...
ReplyDeleteWhat are peole saying about how the dynamic templates views on mobile phones? My initial experience of trying to read my blog on my iphone (now i've switched to dynamic templates - magazine) is pretty poor. I probably wouldn't even try to read a dynamic template blog on my phone as its such hard work to scroll through / read the article. I think more and more people are viewing blogs on their phones these days so this is a real problem for me.
Also, there are certain things i love about the way dynamic templates looks and the continuous flow of articles with a thumbnail visual. However, I worry about the readers experience. How are readers responding to the experience of dynamic templates overall? Is the pop up window to read an article annoying to them?
I'll answer this based on what I've been seeing in the forum (I'm one of the Google-appointed TCs in Blogger Help Forum)
DeletePeople love Dynamic Views. I don't think the pop up box is an in annoyance for anyone. So far I've not seen any complaints about the box. People think using Dynamic Views is a huge win. It's just so shiny and awesome. And much work is being put into it to increase its awesomeness. I can't tell if people prefer a non-dynamic view template over a dynamic view template coz it all boils down to personal preferences. But we've been getting positive reviews from lots of users for Dynamic Views.
Now, for mobile. To be honest, the development of mobile features hasn't been much, and there isn't much happening in this field. Luckily, there's an option in Blogger to switch to mobile-friendly templates when a blog is being viewed with a mobile. See if you find this helpful. Go to Dashboard - Template - You'll see two previews, click the 'Gear' icon below the second preview box - Then choose 'Yes, show mobile templates in mobile devices'. Hope you find this option useful.
Cheers and God bless.
you're a doll. thanks so much. it's not perfect - but 80% better than it was! hopefully blogger will put some work into mobile as i think its becoming more and more important. This is a good article. Even though mobile browsing only represented 7% of all browsing (aug '11) that is a 1000% increase from 2009 and data is also showing how sites optimized for mobile are increasing traffic per user on their regular site (increasing engagement) - just food for thought... http://blog.kissmetrics.com/mobile-mania/
ReplyDeleteMake your voice heard. Leave suggestions/feedbacks to the Blogger team here. :)
DeleteExcellent blog and comments, very helpful, keep going and thanks a lot.
ReplyDeleteThank you for your feedback :)
DeleteHey Yoboy! Thanks for the shout out :)
ReplyDeleteHere's a couple more for you.
Is there a way to change the font color on the classic and mosaic views (the body not the title)? -I want to keep red on the pop up pages but red is not very clear on those two views. I am thinking white.
Also I noticed that now there is a Google +1 button at the bottom of the pop up pages, is there a way to remove the top Google +1 button only and leave the one on the bottom? Would look alot cleaner to me!
Thanks always for your help! What would we do without you :)
-Marky Marc
Yo Marky,
DeleteHere. For white font in Mosaic and Classic:
.mosaic .article .article-content,
.classic .article .article-content {
color: white !important;
}
And to get rid of the top +1 button:
.overview-header .share-controls {
display: none !important;
}
Cheers!
As usual your codes work perfectly! Thanks again!
DeleteCheers!
Marky
Anytime :)
DeleteEXCELLENT BLOG... JUST THAT
ReplyDeleteThank you Sabri :)
Deletehey yoga! amazing tips!
ReplyDeletei couldnt manage to fix this header
http://4.bp.blogspot.com/_r1Zr2DUiQTg/TORCqGgtl4I/AAAAAAAAAe4/XBS-YD6iu-M/S968-R/Untitled.jpg
could you help me, please? or even give some tips? i got lost with lines numbering.
cheers
Hi datokakava,
DeleteHere, use this :)
#header .header-drawer.sticky, #header .header-drawer {
top: 103px;
}
#header .header-bar{
height: 134px;
}
#header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
top: 134px;
}
#header-container {
height: 174px;
}
.viewitem-panel .viewitem-inner {
top: 69px;
padding-bottom: 89px !important;
height: auto !important;
}
#header-container #header.header .header-bar span.title{
background: url(http://4.bp.blogspot.com/_r1Zr2DUiQTg/TORCqGgtl4I/AAAAAAAAAe4/XBS-YD6iu-M/S968-R/Untitled.jpg)
no-repeat center;
margin-left: auto !important;
margin-right: auto !important;
height: 134px;
}
Cheers!
Your blog has helped me immensely! Thanks so much for taking the time to post all of this!
ReplyDeleteGlad you find the tutorials helpful. Appreciate it, thanks! :)
DeleteYour blog is fantastic! I go to it for help ALL the time. Sorry to comment on this so much later than it was posted, but I am having trouble keeping the gadgets from overlapping with themselves. (My blog: http://elementalcarbon.blogspot.com/) I have a few ads on my blog and the top 1/4 inch or so of the lower ads overlap on the top ad and I can't seem to fix it. In the "Layout" part of Blogger, they look overlapped as well but I can't get it to not look that way. Any ideas on how to fix that?
ReplyDeleteThanks!
Hi Alyssa,
DeleteIt sure does sound fixable, but I'm having a hard time finding the overlapping ads that you're describing. I could see some ads under 'Lovely Sponsors' but they all look fine to me. Could you help me pin-pointing the exact part where the overlapping is happening? An annotated screenshot could be extremely useful here.
Cheers :)
Site: www.toysaleboat.com
ReplyDeleteHi, I tried asking this question on Google's Blogger forum, but it doesn't seem like there's much help to be found there. I need to adjust the space between gadgets on my page, but when I enter this code
#HTML6{
margin-bottom: -30px !important;
}
not only does it move the gadgets, it also moves the edit buttons on my layout edit page, making it impossible to click the edit pencil icon!
This is especially annoying since I can't get the quick edit buttons to reappear on my page.
Hi Paul,
DeleteSorry for the late reply. I looked into your blog and I could only see one gadget. What am I missing?
Hey! I wrote to you a question before and I got to move the gadgets down so they wont "climb" the header but now not all of the gadgets are visable and when I scroll down they aren't visable either... Can you help me?? Thanks ALOT!
ReplyDeletehttp://asecrettokeepblog.blogspot.gr/
Hi Daniella,
DeleteSorry for the late reply. This is what I'm seeing in my browser:
http://i.imgur.com/MoIZDAH.png
Are you seeing something similar? What are the gadgets that aren't working?
Hi Yoga, your site & you helped me tweak a couple of things last year when I started my blog...I couldn't get an answer to whatever I was trying to do with it next so I've sort of made do & now I'm trying to get back to fixing my blog up. BUT first it seems Blogger may have changed how things work as what I learned from you about positioning gadgets doesn't seem to fit what I am now seeing in my HTML codes - and all the CSS I put in before is gone. I did click on the new little black arrows to unfold the HTML but the codes for right/left/top/bottom aren't there. One of my gadgets has moved to the top and is covering up one of my page tabs. On the template view it is on the right, but not on the website view. I found where the image code is in HTML and it says:
ReplyDeleteI hope you will help me again - I really want to learn the secret of repositioning my gadgets/widgets and keeping them in their place!
Also, and I can't find anything about this when I search, I know have a mysterious white bar stretching horizontally across my blog site. The bar stays in place near the bottom of the screen while the blog will scroll behind it. Can you tell me where that came from and how to get rid of it? Sorry to add a different issue to this thread.
My blog is www.GottaStampWithSuzanne.com
How will I know if you reply, BTW? do I keep checking here? I am going to subscribe by email too, in case that helps.
Hi Suzanne,
DeleteSorry for my ridiculously late reply. Yeap, clicking on the 'Subscribe by email' should notify you when there is a new reply. But it sounds like we need to take this to the forum. It'll be easier for me to help your there. Go to Blogger Help Forum and create a discussion there, and let me know its link once it's published.
Hi there! Thank you for your amazing website. It has helped me turn my newest blog into something I can be proud about. Every fix I have implemented has worked wonderfully, but I can't get the gadget to go lower down the page. I have tried entering different values, but nothing is working. I would appreciate it if you could look at my blog and see if you can help. Thank you so much!
ReplyDeletehttp://happymomcrochet.blogspot.ca/
Hello there,
DeleteI see you've managed to lower your gadget's position. Have you got this sorted?
hello i was wondering if i can have a navigation bar including my gadgets
ReplyDeletehere's an example : http://v1.realmofmetal.org/
http://astralforest.blogspot.com/ here's my blogspot i prefer to put them on that black sidebar under the header if possible , thanks in advance .
Hi Red,
DeleteNot quite sure what you meant by navigation bar, but if it is what I think it is, you should be able to get it done with Pages gadget. Have you looked into it?
I just like to say how much your blog has been a big help to me since applying my deaf blog to this template. I have been following advice you have shared here in your blog to make the necessary changes I needed. The latest tweaking of it what you have shared in this post, so now my gadget bar is lower down and in a perfect place. I would not have got the look of my blog to how I wanted it, if it wasn't for the helpful advice posts in your blog. I have recommended your blog to a friend of mine who is using the same template, so if she decides to take the courage an d change hers to her liking, then I am sure she will find it valuable as me.
ReplyDeleteHello Liz,
DeleteI really appreciate you taking the time to leave a comment here. Do know that your feedback made my day - and it means a lot to me. Glad I could be of help :) Thanks!
hi yogarathinam! i would like to know how to adjust the length of the side bar gadgets. i have posted abt me to the side bar gadget and it has taken the entire length of the page! i want to add view my complete profile link after few lines. how do i do that??
ReplyDeleteHello Rifaya,
DeleteSorry for the delayed reply. The gadgets' heights are dynamically set - there is not constant height to set to. But that doesn't mean you cant (though it is best to leave it dynamic). It'll be easier for me to suggest a fix if I could have a look into the blog you're working with. Mind pointing me to an URL?
thanks a lot for the reply! this is my url
Deletehttp://letssweatitout.blogspot.in/
if u see the about me in the side bar you will understand wat am telling. thankyou!
Hello Rifaya,
DeleteI get what you mean. What you want to do is replace your Text gadget (that has the profile content) with an HTML/Javascript gadget. We can then add a link to 'View Full Profile' from there.
Here's a guide. Let me know if you have any questions.
thanks yogarathinam for the reply,, i did change the gadget to HTML/ Javascript. but how to proceed after than. please let me know
ReplyDeleteSorry for the latey. I meant to include a link in my previous reply - just noticed it got missed out. Here's a guide to help you configure your HTML gadget to work as a customisable Profile gadget.
Deletehttp://www.southernspeakers.net/2011/01/blogger-custom-profile.html
i tried doing what you said. i have a problem.i can add the about me link but i cannot link it to a new page, if you see my profile you will understand. http://letssweatitout.blogspot.in/
DeleteHave you got this sorted? I can see a working link to http://letssweatitout.blogspot.in/p/about-me.html from your profile gadget.
Deletehey yogarathinam... thanks for the reply... hope you had a wonderful diwali celebration!!
ReplyDeleteno i haven't got it sorted out.. if i remove the about me page from top gadget and have only in the side gadget what i have to do?
Hope you've had a blasting celebration as well!
DeleteThat's easy. Go edit your Pages gadget by going to Dashboard - Layout - Pages - Edit and unmark your 'About Me' page. That should remove the link from your pages gadget (top gadget/menu).
How to make my header image fit to my blog width?
ReplyDeleteFirst, you need to determine what is your blog's width. Next, you need to come up with a header the same size. After that it is all about adjusting and re positioning your image. What's your blog's address btw?
Delete