Tutorial - bordas coloridas na sidebar do Blogger

Olá amigos do Mundo Informal! O tutorial que disponibilizo hoje, tem sido utilizado por muitos blogs pois fica muito bonito em qualquer modelo. O efeito é bem discreto e passa ao leitor um ar de profissionalismo.
Bom, não é preciso seguir muitos passos, mas siga com atenção para que não ocorram erros.

Alerta! Antes de fazer qualquer modificação, faça um backup do seu modelo.
Acesse modelo → Fazer backup/Restaurar → Fazer download do modelo completo.

1° passo: Acesse o painel do Blogger, escolha o blog que você deseja instalar, selecione a opção "Modelo" e clique em "Editar HTML".

2°passo: Agora usando o Ctrl + F, procure por:

]]></b:skin>

3° passo: Acima da tag encontrada, cole o código abaixo:

.sidebar .widget {background:#fff; /*--------Cor do fundo------*/border-top: 5px solid #d4bfb1; /*------------Cor da barra de baixo------*/ padding: 5px; /*------------Espaço interno------*/ margin-left: -13px; /*------------Espaço externo da esquerda------*/ margin-top: 0px; /*------------Espaço externo de cima------*/ margin-bottom:25px; /*------------Espaço externo de baixo------*/ border-radius:2px; /*-------------Arredondamento do gadget--------*/ border-bottom: 5px solid #b1d4b3;box-shadow: inset 0 0 6px #e2e1e1, 0 0 1px #ccc; }

Caso queira alterar a cor das bordas, altere #d4bfb1 com a cor desejada. Veja a paleta com os código das cores aqui.

4° passo: Caso você queira inserir esse estilo para apenas um widget, como exemplo o último, procure por:

.sidebar .widget:last-child {

Deverá aparecer desse jeito → .
sidebar .widget:last-child {border-bottom: none;margin-bottom: 0;padding-bottom: 0;


Cole o seguinte código abaixo de:
background:#fff; /*--------Cor do fundo------*/ border-top: 5px solid #d4bfb1; /*------------Cor da barra de baixo------*/ padding: 5px; /*------------Espaço interno------*/ margin-left: -13px; /*------------Espaço externo da esquerda------*/ margin-top: 0px; /*------------Espaço externo de cima------*/ margin-bottom:25px; /*------------Espaço externo de baixo------*/ border-radius:2px; /*-------------Arredondamento do gadget--------*/ border-bottom: 5px solid #b1d4b3;box-shadow: inset 0 0 6px #e2e1e1, 0 0 1px #ccc; }

 padding-bottom: 0;

5° passo: Salve e veja a mudança! 

Pronto! Salve e veja como ficou!

Share This :