Hey there friends! Tudo bem? Sim? Espero! Hoje eu vou mostrar 3 modelos para sidebar diferentes.
Clique em Ver Mais para seguir o tutorial.
Primeiro, vá a Modelo - Editar HTML no blogger, aperte CTRL + F e digite Widgets na caixinha que aparecer. Logo abaixo vai ter esse código:
.sidebar .widget {border-bottom: 2px solid $(widget.border.bevel.color);padding-bottom: 10px;margin: 10px 0;}.sidebar .widget:first-child {margin-top: 0;}.sidebar .widget:last-child {border-bottom: none;margin-bottom: 0;padding-bottom: 0;}
Apague tudo e copie um dos códigos abaixo. (Nota: não apague .sidebar .widget:first-child { se você quiser que o primeiro widget da sidebar seja transparente ou .sidebar .widget:last-child { se você quiser que o último widget da sidebar também seja transparente.)
1º Modelo
.sidebar .widget {padding-bottom: 21px;margin: 10px 0;border: 4px double #660000; /*borda da caixa*/box-shadow: 0px 0px 5px #ddd; /*sombra da caixa*/background: #fff; /*fundo da caixa*/padding:12px;}.sidebar .widget h2 {text-align: center; /*alinhamento do texto*/background:#660000; /*fundo do rentangulo*/border: 4px double #fff; /*borda do retangulo*/font-family: 'Fjalla One', sans-serif; /*fonte*/color: #fff; /*cor da fonte*/text-transform: uppercase;font-size: 23px; /*tamanho da fonte*/margin-top:-7px;margin-left:-10px;margin-bottom:10px ;padding:5px;width:101%;}
Resultado:
2º Modelo
.sidebar .widget {padding-bottom: 20px;margin: 10px 0;background: #fff;padding:12px;border-radius: 10px;border-left: 3px solid #00cc99;border-right: 3px solid #00cc99;}.sidebar .widget h2 {text-align: center; /*alinhamento do texto*/background:#00cc99; /*fundo do rentangulo*/-webkit-border-top-left-radius: 10px;-moz-border-radius-top-left: 10px;border-top-left-radius: 10px;-webkit-border-top-right-radius: 10px;-moz-border-radius-top-right: 10px;border-top-right-radius: 10px;font-family: 'Fjalla One', sans-serif; /*fonte*/color: #fff; /*cor da fonte*/text-transform: uppercase;font-size: 23px; /*tamanho da fonte*/margin-top: -12px;margin-left:-15px;margin-bottom:10px ;padding:5px;width: 235px;}
Resultado:
3º Modelo
.sidebar .widget {padding-bottom: 20px;margin: 10px 0;background: #fff;padding:12px;border-top: 5px solid #0086b3;border-bottom: 2px solid #0086b3;border-left: 2px solid #0086b3;border-right: 2px solid #0086b3;}.sidebar .widget h2 {text-align: center; /*alinhamento do texto*/background:#0086b3; /*fundo do rentangulo*/border-radius: 0px 0px 50px 50px;border-top-right-radius: 10px;font-family: 'Fjalla One', sans-serif; /*fonte*/color: #fff; /*cor da fonte*/text-transform: uppercase;font-size: 23px; /*tamanho da fonte*/margin-top: -17px;margin-left:-14px;margin-bottom:10px ;padding:5px;width: 235px;}
Resultado:
Atenção! Todos os modelos têm uma fonte que não faz parte do blogger, por isso se quiser ter o resultado exato das imagens, ainda no HTML, você terá que ir a <head> e colocar o seguinte código abaixo: <link href="https://fonts.googleapis.com/css2?family=Fjalla+One" rel='stylesheet' type='text/css'/>