Blogger Pages Gadget No-Stretch

If you're using Awesome Inc template, you'll know what I'm talking about. The Pages Gadget menu stretches from left to right horizontally. Though this might be one of the distinctive features of the Awesome Inc template, it might seem out of place for some users. In this tutorial, I'm going to show you how you can quickly convert this stretching gadget to a decent one that adapts to the width of your main posting area.

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close -  Edit HTML - Proceed - 

Find for /* Headings ----------------------------------------------- */ - Paste the following code directly above it (see the screenshot):

/*--Pages Gadget No-Stretch Starts--*/
.tabs-outer {
background: transparent !important;
}

.cap-top, .cap-bottom{
border: none !important;
}

.tabs-inner .widget li a{
border: none !important;
border-right: 1px solid $(tabs.border.color) !important;
}

#crosscol{
background: $(tabs.background.color) $(tabs.background.gradient);
border: 1px solid $(tabs.border.color) !important;
}
/*--Pages Gadget No-Stretch Ends--*/

The code in place (ending portion)

And that would be it. Have fun!