How to change Gadget Menu from Right to Left

Blogger Dynamic View is supported by a floating menu for gadgets! Many gadgets are being added by blogger now a days! So it is necessary to concentrate on it! Usually blogger gadget menu is floating on right side! But when can use simple CSS and make the dock to float on left using right margin and padding of CSS! Don't think too much. Better use this simple piece of code and make your blogger blog feel good! Reposition Gadget Menu by following below given simple steps.

BEFORE

In image I mistaken this as LEFT! Sorry ;-)

AFTER

STEP:-
Go to Dashboard ('House' symbol) --> Template --> Customize --> Advanced --> Add CSS --> Paste the following code --> Press enter after the last character of the last line } --> Apply to Blog --> Done

.gadget-container:hover,
.gadget-item.ss:hover,
.gadget-item:hover .gadget-container,
.gadget-selected
.gadget-container {right: auto !important;}

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

For any cross-browser complaints comment below.