Hoje vamos ver mais uma dica simples, mas que faz a diferença no layout do seu blog no Blogger (não pense que é porque você tem um blog que usa WordPress.org como CMS que esse tutorial não serve para você). Vamos aprender hoje como separar os links da sidebar (barra lateral) do blog com uma borda.

O processo é simples, mas não se esqueça, antes de fazer qualquer alteração no seu template, salve uma cópia do mesmo.

Aviso feito, vamos lá!

Entre na sua conta do Blogger e no painel, clique em Layout no blog que você quer alterar. Depois, clique em Editar HTML e clique em Baixar modelo completo para salvar uma cópia do seu modelo.

Agora, procure pelo trecho abaixo no seu código (atenção: eu uso o modelo minima, portanto, pode ser que o seu modelo seja um pouco diferente, aí você escolhe se usa o minima ou tenta adaptar o seu):

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:2;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

Copie o seguinte trecho:

border-bottom:1px dotted $bordercolor;

Cole logo abaixo de .sidebar li { o trecho que você copiou.

Pronto, aí é só visualizar para ver se está tudo certo e salvar o modelo.

Explicando:

Border-bottom = Refere-se a borda na parte de baixo dos links. Se você quiser, pode trocá-la de lugar:

border = Borda ao redor de todo o link.
border-top = Borda só em cima do link.
border-left = Borda do lado esquerdo do link.
border-right = Borda do lado direito do link.

1px = Refere-se a espessura da borda (você pode colocá-la mais grossa, basta mudar o número para 2 ou 3, etc...). Exemplo:

border-bottom:3px dotted $bordercolor;

Dottet = Refere-se ao tipo de borda (se você preferir pode usar ao invés dos tracinhos, uma borda sólida, basta trocar o "dotted" por "solid"). Exemplo:

border-bottom:1px solid $bordercolor;

$bordercolor; = Refere-se a cor da borda, que no caso, ficará com a mesma cor das bordas que você já usa no seu blog. Caso você queira usar outra cor, basta trocar o "$bordercolor;" pelo código da cor que você quiser. Exemplo:

border-bottom:1px dotted #000000; (nesse caso, a borda ficaria preta).

Se você quiser saber qual o código da cor que você usa no seu blog ou uma cor que você quer usar, basta dar uma olhada na tabela de cores e seus respectivos códigos.

Pode usar a que já publicamos aqui: Tabela de cores

Faça bom uso!

Imagem: MasterNewMedia