Southern Listeners

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

Sunday, March 31, 2013

Gadget Dock Overlaps on Static Page Scrollbar in Blogger Dynamic Views

Before
After
If you have gadgets in your Dynamic View blog, you would have noticed that the dock overlaps on top of the scroll bar when you view one of your static pages. This is especially annoying if the page is lengthy and you need to click on the scroll bar for an easy navigation. Actually, this isn't much of a bug. If you study the structure of static pages in Dynamic Views, you'll understand why this design accident is happening. Personally, I don't see this getting fixed, as it will require some degree of restructuring on Blogger's end. Worry not, here's what you can do on your part to get it (somewhat) fixed.

Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
.viewitem-open #gadget-dock{
position: absolute;
overflow: hidden;
margin-right: 14px;
}
.viewitem-open #gadget-dock:hover, .viewitem-open #gadget-dock.gadget-notifying,.ssyby, .viewitem-open #gadget-dock.gadget-opening{
position: absolute;
width: auto !important;
margin-right: 14px;
overflow: visible !important;
}
I have not fully tested the tweak on all gadgets. If you happen to notice a bug, do let me know.

63 comments:

  1. Great post! I'm definitely going to apply this one since it sure is annoying at times when you want to scroll down.

    Sarah
    PrettyGloss - makeup, beauty & a lil gibberish

    ReplyDelete
  2. Merhaba Yoga; Kod calismiyor.
    Thanks

    ReplyDelete
  3. Yoga kod " END CUT " şablon en üst ekledigimde oldu.
    Thanks

    ReplyDelete
  4. hi Yago
    I'm sorry?
    Turkish equivalent;
    You and I do not want gürüşmek
    I do not understand
    I do not want to answer
    Sorry diplomatic answer
    The literal meaning of Sorr it!
    You have chosen which option?
    Thanks Yoyo
    The above code does not work post sorr you say?
    Google Tanslate what does it do?

    ReplyDelete
    Replies
    1. My name is yoga. Not yago or yoyo. And I don't understand a single thing you wrote.

      Delete
    2. Thanks Yoga, I understand your writing.

      Delete
  5. Ditched Dynamic Views a while back because so many of my readers complained that they could not view or comment. I really liked DV but felt that Google/Blogger dropped support for it. I will probably go back if they announce improvements for it.

    That said, I always love reading your posts here Yoga! Your blog is one of the best! And you are so helpful!

    Hope you are having a great week!

    ReplyDelete
    Replies
    1. Yeah the comment form disappearing was annoying. I heard that it has been fixed ever since. Not quite sure myself as I couldn't replicate the issue in my blog. Anyways have a great day Bob..!

      Delete
  6. This has been bugging me for a while now. Thanks for the fix.

    While I'm here can you help me get rid of/reduce the gap at the top of my static pages?

    http://mygoldengreek.blogspot.co.uk/

    Thanks also for all the blogger tips you provide, nearly all my blogger knowledge has been from here.

    ReplyDelete
    Replies
    1. Hey there,

      Try this:

      .viewitem-inner{
      margin-top: -100px !important;
      }

      Cheers..

      Delete
    2. Perfect! Thanks very much Yoga, you're a star!

      Delete
  7. Just what I came looking here for! Works like a dream :) Thank you!

    ReplyDelete
  8. Hello! I need your help. Earlier I asked you to help me add post tags to my blog post titles - I no longer want them and I tried to erase that part of CSS, but it stayed there. Could you help me remove it completely?

    ReplyDelete
  9. Thank you for another great script :)

    ReplyDelete
  10. Excellent. I had not noticed this defect. Good job. :)

    ReplyDelete
  11. Hey Yoga,

    I tried using this CSS and had a bit of a problem. Seems like part of the gadget dock isn't appearing, here is a picture.

    http://snag.gy/GH3Yx.jpg

    And here's my blog link if you need.

    http://a-shared-thought.blogspot.ca/

    Thanks!

    ReplyDelete
    Replies
    1. Hi Kiara,

      Looks like the code isn't there anymore. Could you re-insert the code and get back to me to see what's going wrong?

      Delete
    2. Sorry I didn't reply earlier, but I've re-inserted the code .

      http://a-shared-thought.blogspot.ca/p/about-me.html (One of my static pages)

      Thanks!

      Delete
    3. Hi Kiara,

      This code is not compatible with the code to keep the gadgets unhidden. Im still working on a possible fix for the two tweaks to co-exist. Please remove either one of them in the meantime.. Cheers..

      Delete
    4. Thanks for your help! But do let us know if you find a fix :)

      Delete
  12. Hello, Yoga! You helped me a lot of times before, thank you so much!
    I was just wondering if you could help me with this too.
    Here's what I want to put on my blog: http://i603.photobucket.com/albums/tt119/AngelStar483/bloghelp_zpsbb300816.png

    These are all pictures, but I can't figure out how to put them there and make them link to my other blog pages. Could you tell me how to do that?

    ReplyDelete
    Replies
    1. Hi Jelena,

      I'm not quite following. Are you trying to replace your tab menu with picture icons? If yes, I'll be able to help you better if we bring this discussion to the Help Forum. Have you started a discussion thread yet?

      Delete
    2. Yes, I am. Just like in the picture.
      But I didn't start a topic yet - I'll do it straight away!

      Delete
    3. Do gimme the link to your discussion thread..

      Delete
  13. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. What's your blog's address? Just to be on the same page, are you saying your gadgets are not visible in the mobile view?

      Delete
  14. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. As far as I can remember, Dynamic View gadget wont work in Mobile devices. In order to show gadgets in mobile devices, you need to force desktop view instead, by turning of your mobile template (Dashboard - Template - Mobile Preview Gear Icon)

      Delete
  15. Good morning. Use dynamic visualization magazine. When I open the post I open a page containing the entire post without the name of the Blog. And 'possible to overcome this problem adding us in the name of Blo? thanks

    ReplyDelete
    Replies
    1. Hi Fancesco,

      Let's see if we're on the page. Are you looking for a way to add your blog's title next to your post's title?

      Delete
  16. how to post information in static pages ?? as you said on the post left side you should create like label and then where should link there i didnt find and that too
    i have one doubt
    if suppose if we click onA.b..c......z
    if we click on a
    like in songs
    with A name of songs displayed
    and then it should go to post relevant to that what is the process
    ???
    help me out

    ReplyDelete
    Replies
    1. Hi Ajay,

      This should help you out:
      http://www.southernspeakers.net/2010/10/customised-menu-bar-with-link-list.html

      As for the process you're talking about, you're referring to 'Anchor Links', or 'HTML Anchors'. Here's a tutorial on it:
      http://www.southernspeakers.net/2010/11/jump-to-content-anywhere-in-page.html

      Cheers..

      Delete
  17. Please take a look at my blog (techtocore.blogspot.com). The home page is itself a static page. Notice how the dock malfunctions.
    Please help........
    -Akash

    ReplyDelete
    Replies
    1. Hi Akash,

      Sorry for the late reply.

      Is this happening after adding the code in the tutorial above? Was it functioning properly before?

      Delete
    2. Yes. It wasn't malfunctioning before. I have also followed your tutorial to make the dock to show itself permanently. Could this cause the problem ?
      Please help.....
      -Akash

      Delete
    3. That could explain things. Could you remove the code to keep the gadget permanently unhidden and see how things go?

      Delete
  18. How to make (gadget-dock) for body in blogger template? css code is easily found in the website example.

    ReplyDelete
    Replies
    1. Hi there,

      Are you referring to a non-dynamic-view template?

      Delete
  19. Excellent tips. Thank you.

    Your comments sections also have very useful information.

    I have used many of your tips at my blog: dougburke.blogspot.com.

    ReplyDelete
  20. I hadn't even noticed the overlap until I read this - thanks once more!

    ReplyDelete
  21. Just what i was looking for.....great help man

    ReplyDelete
  22. Hi Yoga,
    in my site, it is working nicely only on home page. When I open some other page or tab, it starts to hide. Only a static line remains which expands itself when you hover around it. What could be the issue?

    ReplyDelete
    Replies
    1. Hi Abhiroop,

      You mean your gadget dock starts to hide? Could you get a screenshot of what you're seeing?

      Delete
    2. I think he has the same problem as myself: https://i.imgur.com/sHRmZQg.jpg In article pages if you click the gadget - it is hidden behind the article.

      Can you help with a fix?

      Delete
    3. Interesting.. And sorry for the late reply.

      Is this still happening? I couldn't replicate this issue in my blog. I've tried visiting your blog but looks like you've taken your gadget dock down. Could you restore so that I could have a look (or replicate the issue in a dummy blog or something?)

      Delete
    4. Hi Yoga,

      This is the issue that I mentioned on a previous comment. you can check the website if you want www.geologia101.com

      The dock starts to hide in all static pages other than the home page.

      Thanks again

      Delete
    5. Hello Pedro,

      Go find the following lines in your CSS:

      .viewitem-open #gadget-dock{
      position: absolute;
      width: 10px !important;
      overflow: hidden;
      margin-right: 56px;
      }

      And change them as shown below (remove the width line and change 56 to 14)

      .viewitem-open #gadget-dock {
      position: absolute;
      overflow: hidden;
      margin-right: 14px;
      }

      Delete
  23. If i want my gadget dock to be as other templates with my profile pic(the about me) showing like a sidebar so on is that possible?

    ReplyDelete
    Replies
    1. I'm afraid not - the dynamic templates and it's predecessor are a world apart.

      Delete
  24. You are such a HERO! You've helped me (and obviously, MANY OTHERS) in so many way. I CANNOT BEGIN TO THANK YOU ENOUGH. (But, I'll think of something)

    You are, indeed, a blessing on us by your generous, ingenious help -- and standing with us -- as we progress toward figuring out how best to use this magnificent Internet for the common good.

    Nothing tops goodness!

    David

    ReplyDelete
    Replies
    1. You have just made my day :) I don't write much but trust me when I say I appreciate you taking the time to leave me some words. Means alot. Thanks again! :D

      Delete
  25. Hi Yoga, you're awesome!!! But some part of my gadget was disappeared after paste the code, eg follower missing
    http://malaysiainvestorstock.blogspot.com/p/blog-page.html

    ReplyDelete
    Replies
    1. Hello Ku Fwu Haur,

      Could you send me a screenshot of what you're seeing?

      Delete

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