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

Before

After

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? 

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.

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. 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.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