Como alinhar o título da slidebar (barra de menu) do novo blogger


Nesse post estou atendendo ao pedido do amigo cláudio do site DownAge, primeira coisa a ser feita antes de começar o tutorial é fazer um backup, para poder voltar ao formato anterior caso você faça alguma coisa errada.
Para backup do template acesse:
1) Painel, 2) Layout, 3) Editar HTML, 4) Baixar modelo completo

Interpretação do pedido:
Como faço para centralizar o menu de títulos do template do meu blog, tem blogs com o template igual ao meu, só que com o alinhamento do título da slidebar centralizado, olha essa imagem link
ele modificou a barra de título da coluna e centralizou o nome.

Tutorial centralizando a slidebar da lateral do blogger:
1) No painel de controles do blogger depois de ter feito o backup descrito acima marque a opção:

Expandir modelos de widgets

1) Logo após clique dentro do quadrado onde se encontra o código do template do seu blog e precione a tecla (Ctrl) + (F) do seu teclado, para abrir a pesquiza.

2) Localize o trecho de código /* Sidebar Content , abaixo deste trecho, encontra-se o código que é responsável por toda a formatação da slidebar do blog, o qual pode ser um pouco diferente do mostrado abaixo.

Assim:

/* Sidebar Content

----------------------------------------------- */

.sidebar h2 {

margin: 1.6em 0 .5em;

padding: 4px 5px;

background-color: $sidebarTitleBgColor;

font-size: 100%;

color: $sidebarTitleTextColor;

}

3) Nesse trecho podemos alterar tamanhos, cores e margem do slide bar, mais para alterar o alinhamento é necessário acrescentar o trecho
text-align: center; antes do fechamento das chaves " }" ficando assim.

trecho modificado ----

/* Sidebar Content

----------------------------------------------- */

.sidebar h2 {

margin: 1.6em 0 .5em;

padding: 4px 5px;

background-color: $sidebarTitleBgColor;

font-size: 100%;

color: $sidebarTitleTextColor;

text-align: center;

}

Acima eu mostrei um exemplo centralizado mais você pode alterar a para

text-align: left; = alinhado a esquerda
text-align: right; = alinhado a direita

trecho modificado ----

4) Agora clique em salvar modelo e clique em visualizar e pronto pode curtir as modificações deseijadas.

----------
Agora para modificar a imagem que fica de fundo você vai ter que localizar o aquivo de imagem responsável e trocar o endereço da imagem, fazer isso em um tutorial é muito arriscado já que cada template usa um método diferente de exibir uma imagem de fundo no blog, mais no dicadedica a tag responsável é:

background-image:url(http:\\endereço_da_imagem.gif);

Já no template do meu outro blog essa tag simplesmente não existe mais pode ser acrescentada no trecho (1).

É isso, espero ter atendido ao pedido do Cláudio e de outros blogueiros aventureiros como eu e o Cláudio. Abraços e mandem perguntas, a medida do possível, vou atendendo a todas!!! Obrigado!!!



Gusto? Então copie esse post para seu Blog:



3 comentários

Postagens mais visitadas