Southern Listeners

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

Monday, July 30, 2012

Repositioning Gadget-dock from Right to Left in Blogger Dynamic Views


Before
After
A few months ago, Blogger (finally) introduced the ability to add gadgets to Dynamic View templates. As of the time of this writing, Dynamic View templates support up to 13 gadgets to be added to its gadget-dock. However, the gadget dock itself is very much fixed to the right of your blog, and there isn't an option to bring it to the left. When you can have left-sidebars in non-Dynamic View templates, why not have the same in Dynamic View templates? This is a respond to blog reader Richard.

IMPORTANT: There's a reported bug in the tweak that affects users with long list of Archive gadget (and possibly any other long gadgets that require a scrollbar).. If you have a long gadget, you should skip this tweak until the bug is fixed.

UPDATE2: As Blogger continues to update the contents of the gadgets, it is difficult to keep up with all the changes. Some of the recently supported gadgets will not work on the left hand side. Give it a try, and if something is off, kindly undo the tweak.

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-container {
-moz-transition: left 0.15s ease-in-out 0s, opacity 0.15s ease-in-out 0s !important;
-webkit-transition: left 0.15s ease-in-out 0s, opacity 0.15s ease-in-out 0s !important;
-ms-transition: left 0.15s ease-in-out 0s, opacity 0.15s ease-in-out 0s !important;
-o-transition: left 0.15s ease-in-out 0s, opacity 0.15s ease-in-out 0s !important;
margin-right: 100% !important;
right: -100px !important;
left: 0px !important;
}
.gadget-container:hover, .gadget-item.ss:hover, .gadget-item:hover .gadget-container, .gadget-selected .gadget-container {
right: auto !important;
}
#gadget-dock:hover, #gadget-dock.gadget-notifying, #gadget-dock.gadget-opening{
left: 0px !important;
}
#gadget-dock {
-moz-transition: left 0.15s ease-in-out 0s;
-webkit-transition: left 0.15s ease-in-out 0s;
-ms-transition: left 0.15s ease-in-out 0s;
-o-transition: left 0.15s ease-in-out 0s;
left: -40px;
}

Extra: Force gadget to stay visible

If you want your gadgets to remain visible, please refer to tweak in the following post:
Force Gadgets to Stay Visible in Blogger Dynamic Views

73 comments:

  1. Thank you!!! Looks like a lot of code >.> Will apply this to me own blogs later - the gadget bar is in the way of scrolling otherwise :D

    ReplyDelete
    Replies
    1. Ahh, the scroll bar obstruction - my initial concern as well! Let me know how it goes Hannah.. :)

      Delete
  2. Thank's again Yoga,

    One question still remains.

    How can I adjust the distance from the top. Your Gadget dock code does not work on the left side.

    On my blog "http://roadtoeverest202x.blogspot.de/" the gadget container don't have the correct height.

    Thanks in advance

    ReplyDelete
    Replies
    1. Hi Maththias,

      The code from the following page should work fine:

      http://www.southernspeakers.net/2012/03/adjust-gadgets-vertical-position-in.html

      Give it another whirl, and if it still doesnt work, leave the code in your template and get back to me. I'll have a look :)

      Cheers!

      Delete
  3. I will not have problems with the scroll bar and gadgets.

    You are a genius!!! ^^

    ReplyDelete
  4. thank you!!!!!!!!!

    ReplyDelete
  5. Hi Yoga,
    Thanks for your new modification.
    I mix it with "Force Gadgets to Stay Visible in Blogger Dynamic Views" in order to fix the gadget dock on the left and made some mofication on the marging to avoid overlay of the picture in the Snapshot view.

    http://testpiratageculinairetest.blogspot.de/?view=snapshot

    But some gadgets are not working anymore . . like "Hashtag"
    Many we need also to modify the gadget :(
    Any ideas?

    ReplyDelete
    Replies
    1. Hi Christophe,

      Was the gadget function when it was at its original position? Could you bring it back to its original position, and get back to me when its there so that I can inspect your blog?

      Delete
    2. I tried this, and it worked perfect. The only problem is that now that the gadgets are on the left- no one will know they are there- since no one will naturally click in that area. Is there a way to keep it visible on the left? Otherwise, how do I get back to the original format. I messed up and didn't save it.

      Delete
    3. Hi Shelly,

      Please refer to the following link to force your gadgets to remain visible:
      http://www.southernspeakers.net/2012/04/force-gadgets-to-stay-unhidden-in.html

      And it's easier to revert to your original position. Go back to your 'Add CSS' box, and remove the code that you've added from this tutorial. That's it :)

      Delete
  6. Hi Yoga,
    to see the gadget "Hashtag" working, you could have a look on http://www.piratageculinaire.com/ , the 4th gadget from the top with le name "Libellés".

    ReplyDelete
    Replies
    1. Hi Christophe,

      The label gadget works fine in my test blog, even when the gadgets are repositioned to the left:

      http://yoboy-12.blogspot.com/

      And yes, it loads fine in your primary blog. But it seems like your labels aren't loading at all in your test blog, and I need to know if this is caused by the repositioning code. Could you restore it to your original position (by backing-up and removing the code you added to reposition the gadgets) and see if the hashtags are loading in its original position?

      Delete
  7. This is great Yoboy, with this solution the scrollbar is now usable for direct links with the gadget to the left :)

    ReplyDelete
  8. Heh again Yoboy, One thing when moving the gadget to the left that i noticed, the blog archive is now truncated [http://s1054.photobucket.com/albums/s485/SaltGallery/?action=view&current=f6509308.jpg] and the last two gadgets do not function, have you experienced any of these issues? cheers, Rory

    ReplyDelete
    Replies
    1. Hi Rory,

      That's odd.. It appears fine from my end, including the last 2 gadget.. Here's some screenshots that I just took:

      http://i.imgur.com/tle7w.png
      http://i.imgur.com/nzvS7.png
      http://i.imgur.com/DkaiM.png

      What browser are you using?

      Cheers :)

      Delete
    2. I'm using Chrome, I'm not sure what is going on with those last two gadgets, i might try decreasing the number of thumbs in the centre at that should solve it!

      but the archive gadget, if you go a level into the archive to show the months, can you see the months truncated?

      cheers, Rory

      Delete
    3. Ah, thanks for spotting the bug. The following code should fix it:

      .blogarchive-tree.blogarchive-expanded{
      position: relative;
      left: -70px !important;
      }

      Cheers :)

      Delete
  9. Cheers for the code Yoboy, but inserted this and even played about with the px figure, but still not functioning correctly, then acts like the last two gadgets followers and subscribe.

    ReplyDelete
    Replies
    1. Hi Rory,

      My apologies for the bad fix. I've found the root of the problem, and I've re-coded the lines in the tutorial. Kindly remove the existing code that you have, and replace with the new one above in the post.. Do let me know how it goes..

      Cheers :)

      Delete
    2. cheers for the update Yoboy, That does lessen the truncation, but as soon as i click the last level of the archive, say go into March, the gadget re-docks itself, the followers and subscribe gadgets still acting like before, they dont appear when clicked

      Delete
  10. I just checked your testblog from above, and the blog archive works perfect, so maybe some code i have entered previously is interfering, perhaps the icon pics!

    ReplyDelete
  11. Also noticed on your test blog, you have manipulated the subscribe gadget to include "subscribe via email". what css code was added to achieve this btw? :)

    ReplyDelete
    Replies
    1. It's puzzling me as well, since it's working fine in my test blog.. I believe the re-docking problem is caused by some other tweak.. The only way to find this out is by re-adding your mods one by one, maybe on a dummy blog, and see at which point the issue starts to show up..

      As for the 'Subscribe via email', that is no sorcery :P It is a less-known feature in Dynamic View.. First go to feedburner.google.com and create a feed for your blog. Next go to your Dashboard - Layout - click on 'Add a gadget' - Follow by email - add your feed address there.. And that's it! :)

      Cheers Rory~

      Delete
  12. Good idea, I will give it a shot with the testing then.

    feedburner added, thanks for that, will keep you posted on the gadget fix soon, noticed the other people that commented here that implemented the gadget to the left had the same issues as my blog.

    Dynamic views: a lot done, a lot more to do :)

    cheers Yoboy.

    ReplyDelete
    Replies
    1. I'm wondering if it has something to do with installed browser add-ons.. Try giving Firefox a whirl and see if the issue remains.. And yes, do update me..

      Delete
  13. yeah was thinking it could be that, tried firefox, both recent clean installs of chrome and firefox, no difference

    ReplyDelete
    Replies
    1. You mentioned you're seeing the issues in some other blogs as well.. Im trying to collect data to compare.. But I can't find the re-docking issue so far in the blogs I've seen. Do you have a URL I could look at?

      Delete
  14. no probs, here are two blogs from above that i see the same issues:

    http://roadtoeverest202x.blogspot.co.uk/
    this one has very similar reactions to the gadget dock move to mine, the subscribe and followers gadgets dont function, the google badge, google profile and +1 work, the archive disappears prematurely.

    http://seashelldownbytheseashore.blogspot.co.uk/ this one does seem more stable, maybe because it only has 4 gadgets attached?? i think the blog archive on this one will work fine when the new code you provided is inserted.

    tried both of these and mine in chrome version: 21.0.1180.89 m & firefox version: 15.0.1

    hope this is of use, and let me know if you need more detail

    cheers,
    Rory

    ReplyDelete
    Replies
    1. That's funny.. The subscribe, follower and archive gadgets seem to be loading fine for the blogs above, with my Firefox 15.0.1 and Chrome 21 (except for the archive alignment issue):

      http://i.imgur.com/LqNfQ.png
      http://i.imgur.com/5m6Zk.png
      http://i.imgur.com/JQFjw.png

      I can't find the re-docking issue anywhere, except for your blog.. Then again, they have fewer mods than you do - could be an interference problem from other mod.. It must be one of these three:
      1) Overlapping code
      2) Browser's add-on incompatibility
      3) Bug in the code that's acting up to some specific circumstances (considering the code is working fine from my end)

      Tell you what.. When you get the chance, give the dummy-blog thing a whirl (re-add your mods one by one till the problem occurs), and get in touch with me via my email. You have my email, don't you? It'll be easier for us to communicate there.. Off to bed now.. Cheers Rory :)

      Delete
  15. This doesn't work when, for example, the blog archive list needs to scroll, like when there are too many items to list them all on the screen and there needs to be a scroll bar. It doesn't work.

    ReplyDelete
    Replies
    1. Looks like a bug. I still can't find the source of it.. I've placed a disclaimer in the post..

      Delete
  16. Hi Yoga,

    I tried this and it works. However, some of the gadgets do not work anymore (About me, Followers, Translate, +1, Subscribe).

    Have you tested those gadgets?

    It would be nice if this worked with all supported gadgets, especially because very often the Gadget Dock will cover the right scrollbar, which is very bad for usability. By the way, do you know if there is any solution for this bug, other than moving the dock to the left?

    Thanks!

    ReplyDelete
    Replies
    1. Hi Anon,

      I did test those gadgets and they were working fine in my test blog. However, i came to notice that gadgets that are long enough to require scrollbars are not displaying properly. I'm still trying to locate the source of this bug, and so far, not much luck..

      Other than moving the gadget to the left, you could have your gadget dock stay visible all the time. Can't think of a better way for now..

      Delete
    2. Thank you for your reply!

      Well, unfortunately the gadget dock still covers the scrollbar when one clicks in other pages (About, Contact, etc.)

      It is probably a bug on Google's end, since this started for me before I did any CSS tweaks. I do see that you and others have already alerted google:
      http://productforums.google.com/forum/#!topic/blogger/oCxn3oOQci4
      http://productforums.google.com/forum/#!topic/blogger/P30HZYMlnHg

      I hope this will be fixed. Seems to be the only major usability issue of an otherwise great template.

      In any case, thanks for the other link. I like the gadget dock to stay visible, better for usability.

      Thanks again.

      Delete
    3. More like a poor design decision. The thread has been some time now, and I doubt if anyone is working on it. But I will be sure to raise this issue up in the next Google summit.

      Cheers..

      Delete
  17. I gave the test blog a shot too to try and fix the blog archive listing correctly, it does pop out when clicked but as soon as the 3rd level is clicked it docks again.

    my email is roryjohnbuckley@yahoo.co.uk if you want to contact me directly about this yoboy. cheers

    ReplyDelete
    Replies
    1. Hi Rory,

      I came to notice that gadgets that are long enough to require scrollbars are not displaying properly. I'm still trying to locate the source of this bug, and so far, not much luck..

      Will spend more time on it..

      Cheers..

      Delete
  18. Hi Yoga!

    Is there a possibility to automatically open a tab from the sidebar when opening the page?

    For example, i've added an image-tab to the sidebar, and I want to have it open so when entering the page, you will see it, instead of first clicking it.

    Hope you can help!

    ReplyDelete
    Replies
    1. Hi Anon,

      I'm afraid it isn't possible. What you're going after requires some degree of javascript. Unfortunately, since the DV template is already running on javascript, running an external scripts is a challenge.

      Delete
  19. I was reading the comments and i saw this blog...
    http://testpiratageculinairetest.blogspot.de/?view=snapshot
    So...Yoga (...or Cristophe Rigaud)..i'm interested to know how can i put the Facebook like widget on the top of the header of the blog.Is there something like this for Twitter?And finally...can we put this Facebook gadget anywhere in the blog or only on the header?

    edit:Yoga any update of changing the default comment form?

    Thanks...:)

    ReplyDelete
    Replies
    1. Hi Morrison,

      Try this:
      http://bloggercode-blogconnexion.blogspot.de/2011/09/facebook-like-box.html

      What about the comment form? I'm sorry I must have forgotten about your initial query. Mind refreshing my memory? (I'm very forgetful these days)

      Cheers :)

      Delete
    2. i'm talking about replacing the default comment form in dynamic views by sompething like disqus or something else...

      to be honest, i didn't understand where i have to put the code for the Facebook like box.
      http://bloggercode-blogconnexion.blogspot.de/2011/09/facebook-like-box.html#fil05
      Any help?

      Delete
    3. I'm not quite sure if replacing the comment form with a third party one is possible - it doesn't look that way though, as the core code is still hidden from us.

      As for the facebook like button, go to the part that says 'Bonus : Ajouter dans les modèles dynamiques'. Enter your facebook url in Step 1. Copy the code in Step 2. Then go to Dashboard - Template - Edit HTML - Find for 'b:include data='blog' name='google-analytics' - paste the code directly above it.

      Cheers :)

      Delete
  20. Hi Yoga,
    How do I lower the gadgets-bar? i.e. placing it two centimeters (say) lower than its current position?
    Thanks,
    Ofer.

    ReplyDelete
    Replies
    1. Hi Ofer,

      See if this is what you're looking for:
      http://www.southernspeakers.net/2012/03/adjust-gadgets-vertical-position-in.html

      Cheers :)

      Delete
  21. hello... your tutorials are great, thank you! i used this fix and am now wondering if i can shift over the snapshot images on the entire page to align further to the right, making more room for the dock now on the left?

    http://wishstudiolife.blogspot.com/

    thank you!

    ReplyDelete
    Replies
    1. Hi Mindy,

      Sure.. Add this to your 'Add CSS' box:

      #main{
      padding-left: 20px !important;
      }

      Cheers :)

      Delete
  22. perfect! thank you!!! and happy new year :)

    ReplyDelete
  23. Hi Yoga, I was wondering if you could help me?

    I am using Sidebar Dynamic View in Blogger but the right bar (the retractable gadget bar) doesn't expand fully whenever i hover over it. The gadget bar chops off some of the words. So for example, instead of seeing the word "Archive" in full, you see "Arch". Is there any way to fix this?

    My blog url is http://www.diedrevialife.com/

    Thanks, in advance!

    ReplyDelete
    Replies
    1. That's odd. I've just checked your blog, and it appears to be loading fine for me, in full text. Here's a screenshot --> http://img201.imageshack.us/img201/5303/20130205042057capture.png

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

      Delete
  24. i've tried this one, but the bug is still there. i hope this will fixed soon. because i really wanted to move my gadget to left :(

    ReplyDelete
  25. hi! First of all let me thank you for your amazing work. I have improved my blog so much because of you. You are doing a great job! I know nothing about computers and still I managed to fix all these details so thank you! Now i have a small issue with the gadget-dock. it sticks a little out where the header image is (which i placed ) can you tell me how to fix it? Thank you!
    http://asecrettokeepblog.blogspot.gr/

    ReplyDelete
    Replies
    1. Hi Daniella,

      Sorry for my ridiculously late reply. In your case, you need to adjust the vertical position of your gadget. See the following link:

      http://www.southernspeakers.net/2012/03/adjust-gadgets-vertical-position-in.html

      Cheers :)

      Delete
  26. hello... i just found your blog. i'm a new blogger so every post you had was awesome. you have been really helpful. thanx a lot.
    i'm having flipcard... so,the Gadget-dock ''steps on'' the first posts of the left columns... i'm even thinking to force it to stay visible... but then, it will always hide my posts.
    how can i leave a little space from left to right. so that i can have my gadget dock visible?

    ReplyDelete
    Replies
    1. Hello there,

      Is your gadget dock placed on the left side? Can I have a look at your blog?

      Delete
  27. Hello Yoboy! I've been trying your customization, and everything is just great! Almost everything I complained about Dynamic Views is now solved.

    However, after using your gadget bar repositioning trick, the Subscrive gadget (and the Follow by email gadget) stopped working.

    Here's my complete CSS customization:

    .feedback
    {display:none !important;}

    #views{
    display: none !important;
    }

    #header #pages, #header #pages:before{
    border-left: 0px !important;
    }

    .blogger-gear, .overview-sspe {
    background-image: url('http://nintendo-papercraft.com/downloads/designers/gp/animatedscissors_19316.gif') !important;
    height: 100px !important;
    width: 85px !important;
    }

    .gadget-icons, #gadget-dock, .gadget-menu, .ss{
    background: #009db8 !important;
    }
    .gadget-item.gadget-selected .gadget-menu .gadget-icons, .gadget-content{
    background: white !important;
    color: black !important;
    }

    .gadget-container {
    -moz-transition: left 0.15s ease-in-out 0s, opacity 0.15s ease-in-out 0s !important;
    -webkit-transition: left 0.15s ease-in-out 0s, opacity 0.15s ease-in-out 0s !important;
    -ms-transition: left 0.15s ease-in-out 0s, opacity 0.15s ease-in-out 0s !important;
    -o-transition: left 0.15s ease-in-out 0s, opacity 0.15s ease-in-out 0s !important;
    margin-right: 100% !important;
    right: -100px !important;
    left: 0px !important;
    }
    .gadget-container:hover, .gadget-item.ss:hover, .gadget-item:hover .gadget-container, .gadget-selected .gadget-container {
    right: auto !important;
    }
    #gadget-dock:hover, #gadget-dock.gadget-notifying, #gadget-dock.gadget-opening{
    left: 0px !important;
    }
    #gadget-dock {
    -moz-transition: left 0.15s ease-in-out 0s;
    -webkit-transition: left 0.15s ease-in-out 0s;
    -ms-transition: left 0.15s ease-in-out 0s;
    -o-transition: left 0.15s ease-in-out 0s;
    left: -40px;
    }

    #gadget-dock{
    position: fixed !important;
    left: 0px !important;
    }

    And here's my website: http://gipipapercraft.blogspot.com/

    Thanks for the support, you seem more helping than Google/Blogger themselves!

    Gilles-Philippe

    ReplyDelete
    Replies
    1. Hi Gilles-Philippe,

      I wanted to delete this particular mod, as Blogger is implementing changes at an increasingly faster pace than I can follow. And some of these gadgets aren't working anymore once repositioned to the left - and sadly, I could not find ways to make them work without breaking the template.

      Delete
  28. hi
    i was about to reposition gadgets dock to the right side (close to list of post names) and keep it visible by your two posts:
    repositioning-gadget-dock-from-right-to
    force-gadgets-to-stay-unhidden-in
    but i couldnt :(
    i have only two gadgets (one for rss subscription and one for "follow by email")
    i want something like this:
    http://i.cubeupload.com/bg1r39.jpg
    can u help me? any idea? and changes in codes?

    thanks!

    ReplyDelete
    Replies
    1. Hi Shimaa,

      A number of gadgets wont work well if gadget is repositioned to the right - my advise, don't. That said, this should keep the gadget on the left:

      #gadget-dock{
      position: fixed !important;
      left: 0px !important;
      }

      Delete
  29. thank you!
    i found another way (with the help of your codes :) )
    at first i maximized post width (with your code) so that the white space on the left side, got filled
    and then with this code:
    .sidebar #content{
    margin-right: 50px;
    }

    i made space for gadget dock on the right side

    now the gadgets dock does not cover part of my post's text (and this was my problem that i didnt mention in my previous comment!)

    :) thanks
    i always visit ur weblog to solve such issues

    ReplyDelete
  30. hi again!
    you touched us to re-position gadget-dock from right to left
    how is re-positioning it from right to Top ( i mean where the pages are added)
    is it possible?

    thanks

    ReplyDelete
  31. hi again!
    you taught us how to re-position gadget-dock from right to left
    how is re-positioning it from right to Top ( i mean where the pages are added)
    is it possible?

    thanks

    ReplyDelete
  32. hell when i moved the gadget to left my labels doesn't show up (i have more than 140 labels) , what should i do ?

    ReplyDelete
    Replies
    1. I'd strongly recommend you to switch it back to the right. Blogger continues to make changes everywhere - even if you find the gadgets working today, things could get messed up the day after.

      Delete

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