Separando Widgets em Caixas

Nesta postagem venho compartilhar com vocês um modo de colocar cada Widget em uma caixa. O código pode ser bem útil no blogger, pois, assim tudo fica mais organizado.

Para Fazer isso... Entre em "Modelo" - "Editar HTML", dê um Ctrl + F e procure ela tag

]]></b:skin>

Tendo encontrado a tag, cole ACIMA dela o seguinte código

.sidebar-wrapper{width:320px;font-size:13.3px;float:right;word-wrap:break-word;overflow:hidden}
.sidebar h2{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAKRDs2846TVX9B2fwOTw8RRu9hD5ZA8G_lfXT3cp74x_NI7Vd3nbFTB9ObOZcY8-f7st0WQyJq5mVXtTtNo6gbwpOYv4LmXVUUOTPGAjMnCa2ZCLhrPnj_mkC_PPMxQaE250EV2Ji72E/s5/bottom-line1.png)repeat-x bottom left;color:#333;text-shadow:0 1px 0 #fff;font:14px Oswald;margin:0 10px;padding:10px 0 13px;text-transform:uppercase;}
.sidebar{color:#999;line-height:1em;margin:5px 0;}
.sidebar li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAKRDs2846TVX9B2fwOTw8RRu9hD5ZA8G_lfXT3cp74x_NI7Vd3nbFTB9ObOZcY8-f7st0WQyJq5mVXtTtNo6gbwpOYv4LmXVUUOTPGAjMnCa2ZCLhrPnj_mkC_PPMxQaE250EV2Ji72E/s5/bottom-line1.png)repeat-x bottom left;line-height:1.3em;margin:0;padding:5px 0 4px;}
.sidebar li:last-child{background:none}
.sidebar .widget{margin:10px 3px 10px 1px;padding:0;background:#f0f0f0;border:1px solid #ddd;border-bottom-color: #ccc;-moz-box-shadow: 0 -1px 0 #fff, 0 1px 1px rgba(0,0,0,0.06);-webkit-box-shadow: 0 -1px 0 #fff, 0 1px 1px rgba(0,0,0,0.06);box-shadow: 0 -1px 0 #fff, 0 1px 1px rgba(0,0,0,0.06);}
.sidebar .widget-content{margin:0 auto;padding:0 10px;}
.sidebar a:link,.sidebar a:visited{color:#777;text-decoration:none;font-weight:600;text-shadow:0 1px 0 #fff;}
.sidebar li a:hover{color:#0088b2}
.sidebar ul{list-style:none;margin:0;padding:5px 0}

Tendo feito isto, basta salvar e pronto!!!