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

Spoken by at 7:06 PM
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.
Labels: ,

62 comments:

  1. Pretty GlossMarch 31, 2013 at 9:40 PM

    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. Adnan GüneyApril 2, 2013 at 8:41 AM

    Merhaba Yoga; Kod calismiyor.
    Thanks

    ReplyDelete
  3. Adnan GüneyApril 2, 2013 at 9:04 AM

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

    ReplyDelete
  4. Adnan GüneyApril 2, 2013 at 7:40 PM

    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. YoboyApril 2, 2013 at 9:55 PM

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

      Delete
    2. Adnan GüneyApril 2, 2013 at 11:51 PM

      Thanks Yoga, I understand your writing.

      Delete
  5. kc bobApril 4, 2013 at 12:47 AM

    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. YoboyApril 4, 2013 at 3:04 AM

      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. UnknownApril 5, 2013 at 2:38 AM

    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. YoboyApril 5, 2013 at 3:37 AM

      Hey there,

      Try this:

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

      Cheers..

      Delete
    2. UnknownApril 5, 2013 at 8:09 AM

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

      Delete
    3. YoboyApril 6, 2013 at 1:08 AM

      Lol.. thanks! :)

      Delete
  7. UnknownApril 5, 2013 at 3:31 AM

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

    ReplyDelete
  8. Jelena DimićApril 6, 2013 at 2:36 AM

    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. BirgittaApril 6, 2013 at 1:33 PM

    Thank you for another great script :)

    ReplyDelete
  10. Soraya LambrechtsApril 8, 2013 at 9:52 PM

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

    ReplyDelete
  11. HardiApril 9, 2013 at 1:20 PM

    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. YoboyApril 10, 2013 at 2:45 AM

      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. HardiMay 22, 2013 at 1:23 PM

      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. YoboyMay 23, 2013 at 1:32 AM

      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. HardiMay 23, 2013 at 6:34 AM

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

      Delete
  12. Jelena DimićApril 10, 2013 at 5:12 PM

    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. YoboyApril 11, 2013 at 1:29 AM

      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. Jelena DimićApril 11, 2013 at 4:30 AM

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

      Delete
    3. YoboyApril 11, 2013 at 5:37 AM

      Do gimme the link to your discussion thread..

      Delete
  13. UnknownApril 21, 2013 at 9:40 AM

    This comment has been removed by the author.

    ReplyDelete
    Replies
    1. YoboyApril 23, 2013 at 10:04 PM

      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. UnknownApril 24, 2013 at 2:05 PM

    This comment has been removed by the author.

    ReplyDelete
    Replies
    1. YoboyApril 26, 2013 at 1:36 AM

      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. FscoMiscMay 5, 2013 at 2:42 PM

    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. YoboyMay 10, 2013 at 2:23 AM

      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. UnknownMay 13, 2013 at 6:57 PM

    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. YoboyMay 15, 2013 at 11:53 PM

      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. Akash RaviMay 13, 2013 at 9:13 PM

    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. YoboyMay 15, 2013 at 11:49 PM

      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. Akash RaviMay 19, 2013 at 4:35 PM

      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. YoboyMay 22, 2013 at 12:24 AM

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

      Delete
  18. AnonymousAugust 4, 2013 at 2:13 AM

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

    ReplyDelete
    Replies
    1. YoboyAugust 14, 2013 at 5:56 PM

      Hi there,

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

      Delete
  19. Doug BurkeAugust 14, 2013 at 11:35 AM

    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. AnonymousSeptember 8, 2013 at 8:39 PM

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

    ReplyDelete
  21. Sindhu Devi KDecember 11, 2013 at 6:44 PM

    Thanks again! I did it!

    ReplyDelete
  22. AnonymousFebruary 10, 2014 at 4:55 AM

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

    ReplyDelete
  23. YoboyFebruary 28, 2014 at 12:10 PM

    Hi Abhiroop,

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

    ReplyDelete
  24. SusanApril 16, 2014 at 5:10 AM

    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. YoboyApril 17, 2014 at 6:18 AM

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

      Delete
  25. nihasaMay 5, 2014 at 5:08 PM

    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?

    ReplyDelete
  26. YoboyMay 18, 2014 at 5:57 AM

    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?)

    ReplyDelete
  27. Civic MentorJune 7, 2014 at 11:47 AM

    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. YoboyJune 9, 2014 at 7:01 AM

      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
  28. kufwuhaurOctober 3, 2014 at 6:52 PM

    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. YoboyOctober 6, 2014 at 12:40 PM

      Hello Ku Fwu Haur,

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

      Delete
  29. UnknownNovember 13, 2014 at 4:45 AM

    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

    ReplyDelete
  30. YoboyNovember 13, 2014 at 5:59 AM

    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;
    }

    ReplyDelete
  31. AdminJanuary 16, 2017 at 10:34 PM

    Hi, how are you? Thank you for the help you give us.
    I have a query, these gadgets can not be seen in mobile, is there any solution?

    ReplyDelete

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

Subscribe to: Post Comments (Atom)