30 junho 2015

Meu Blog de Cara Nova! -Parte 1

Oi gente, como o prometido, vim trazer o primeiro post da série "Meu blog de cara nova!". Toda blogueira quer um layout perfeito, ele é a 'porta de entrada' do seu blog, é isso que determina se seus leitores vão ser atraídos para seu blog, tantas blogueiras (como eu) não tem condições para pagar um layout feito por profissional, esse é o intuito dessa série de posts!

                                                    Cor no fundo da sidebar
Para colocar uma cor como plano de fundo da sidebar é bem fácil.
Vá no painel do blog  clique em "Modelo Personalizar
Na aba "Avançado", clique em "Plano de fundo da barra lateral" e mude a cor do plano de fundo. Deixe a cor da moldura transparente.

                                                    Gadgets separados em caixas
Para separar os gadgets em caixinhas, assim como é a sidebar aqui do blog, o processo muda.
A cor usada no modo acima deverá ser ambas transparentes. Feito isso, clique em "Aplicar ao blog".

No painel do blog, clique em "Modelo", depois em "Editar HTML".
Marque a opção "Expandir modelos de widgets". Depois aperte no seu teclado Ctrl+F ou F3.
Pesquise por:
/* Widgets
 Logo abaixo dele vai estar assim: 
sidebar .widget {
  border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;
}
Substitua todo esse código por esse:
.sidebar .widget {
margin: 0px 0px 15px 0px; /* margem entre uma caixa e outra */
background: #FFFFFF; /* cor de fundo das caixas */
padding:10px; /* espaço entre o texto e as margens */
border-radius: 10px; /* arredondamento dos cantos das caixas */
text-align: justify; /* alinhamento justificado do texto */
-webkit-box-shadow: 0 0 1em #c9c9c9; /* sombra nas caixas, apague esse trecho se não quiser sombra */
}
A parte em vermelho é a cor. Para mudar a cor visite esse site.
Visualize, se estiver tudo certinho, salve o modelo.
 Imagem nos títulos

Vamos agora aprender a colocar uma imagem no fundo do título, assim como eu uso aqui no blog.
Tenha sempre suas imagens hospedadas em algum site.
No painel do blog, clique em "Modelo", depois em "Editar HTML". Depois aperte no seu teclado Ctrl+F ou F3.
Pesquise por:
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}
Substitua por:
.sidebar h2 {
font-family: Century Gothic; /*Tipo de fonte*/
font-size: 16px; /*Tamanho da fonte*/
color: #000000; /*Cor da fonte*/
border-bottom: 2px solid #fff; /*Borda de baixo, apague se não quiser*/
background: url(URL DA IMAGEM) no-repeat center;
height: 30px;/*Altura da imagem*/
width: 200px; /*Largura da imagem*/
text-align: center; /*Alinhamento do texto*/
Faça as modificações necessárias. Quando estiver tudo certo, salve o modelo.

Título em caixinha


Vai ficar mais ou menos assim:


No painel do blog, clique em "Modelo", depois em "Editar HTML".
Marque a opção "Expandir modelos de widgets". Depois aperte no seu teclado Ctrl+F ou F3.
Pesquise por:
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

Substitua por:

.sidebar .widget h2 {
padding-bottom: .5em;
font-family: 'Arial', sans-serif;
text-transform: uppercase;
background: #B0C4DE;
margin-top: -20px;
margin-left: 6px;
height: 12px;
width: 150px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;


Entenda
Uppercase quer dizer que todas as letras do título ficarão maiúsculas. Em background coloque a cor de fundo da caixinha que fica o título.

Feito as alterações necessárias, visualize e salve o modelo.
Não coloquei uma imagem de como ficou o meu porque são diversos modos. Depende do que você vai usar.