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