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:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIZufmBE97hpvQwCi-L3NCwPp55CavH1XB9gfUmdDS_IeDgrpDgdC25U9vytgcjzW6WIQRzX9rFIv1Ecj1fuT0gD24IHc2KFROAEaYprTsIsosBdR9trkFLRehKdlzuSGwVoY6NWIG6Sg/s1600-h/alinhando_novo_blogger.png"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIZufmBE97hpvQwCi-L3NCwPp55CavH1XB9gfUmdDS_IeDgrpDgdC25U9vytgcjzW6WIQRzX9rFIv1Ecj1fuT0gD24IHc2KFROAEaYprTsIsosBdR9trkFLRehKdlzuSGwVoY6NWIG6Sg/s200/alinhando_novo_blogger.png" alt="" id="BLOGGER_PHOTO_ID_5218433510875252370" border="0" /></a><br />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 <span style="font-weight: bold;">backup</span>, para poder voltar ao formato anterior caso você faça alguma coisa errada.<br /><span style="font-weight: bold;">Para backup do template acesse: </span><br />1) Painel, 2) Layout, 3) Editar HTML, 4) Baixar modelo completo<br /><br /><span style="font-weight: bold;">Interpretação do pedido:</span><br />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 <a href="http://img382.imageshack.us/img382/4580/lolexplicaosc2.jpg">link</a><br />ele modificou a barra de título da coluna e centralizou o nome.<br /><br /><span style="font-weight: bold;">Tutorial centralizando a slidebar da lateral do blogger:<br /></span>1) No painel de controles do blogger depois de ter feito o backup descrito acima marque a opção:<br /><span id="fullpost"><br /><span style="font-weight: bold;">Expandir modelos de widgets<br /><br /></span>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.<br /><br />2) Localize o trecho de código <span style="font-weight: bold;">/* Sidebar Content , </span><span><span id="fullpost">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.<br /><br />Assim:</span></span><br /><span id="fullpost"><blockquote><p>/* Sidebar Content<br /><br />----------------------------------------------- */<br /><br />.sidebar h2 {<br /><br />margin: 1.6em 0 .5em;<br /><br />padding: 4px 5px;<br /><br />background-color: $sidebarTitleBgColor;<br /><br />font-size: 100%;<br /><br />color: $sidebarTitleTextColor;<br /><br /><span style="color: rgb(204, 0, 0);"></span>}</p></blockquote>3) Nesse trecho podemos alterar tamanhos, cores e margem do slide bar, mais para alterar o alinhamento é necessário acrescentar o trecho </span><span style="color: rgb(204, 0, 0); font-weight: bold;"><span id="fullpost"><span style="color: rgb(204, 0, 0);">text-align: center; </span></span></span>antes do fechamento das chaves " }" ficando assim.<br /><br /><span id="fullpost"><span style="font-weight: bold;">trecho modificado ----</span></span><br /><p></p><blockquote>/* Sidebar Content<br /><br />----------------------------------------------- */<br /><br />.sidebar h2 {<br /><br />margin: 1.6em 0 .5em;<br /><br />padding: 4px 5px;<br /><br />background-color: $sidebarTitleBgColor;<br /><br />font-size: 100%;<br /><br />color: $sidebarTitleTextColor;<br /><br /><span style="color: rgb(204, 0, 0); font-weight: bold;">text-align: center; </span><br /><br />}</blockquote><p></p>Acima eu mostrei um exemplo centralizado mais você pode alterar a para<br /><br /><span style="color: rgb(204, 0, 0); font-weight: bold;">text-align: left; </span><span style="color: rgb(204, 0, 0);"><span style="color: rgb(0, 0, 0);">= alinhado a esquerda</span></span><span style="color: rgb(204, 0, 0); font-weight: bold;"><br /></span><span style="color: rgb(204, 0, 0); font-weight: bold;">text-align: right; </span><span style="color: rgb(0, 0, 0);">= alinhado a direita</span><br /><br /><span id="fullpost"><span style="font-weight: bold;">trecho modificado ----<br /><br /></span></span>4) Agora clique em <span style="font-weight: bold;">salvar modelo</span> e clique em<span style="font-weight: bold;"> visualizar </span>e pronto pode curtir as modificações deseijadas.<br /><br />----------<br />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 é:<br /><br />background-image:url(<span style="color: rgb(153, 0, 0); font-weight: bold;">http:\\endereço_da_imagem.gif</span>);<br /><br /><span id="fullpost">Já no template do meu outro blog essa tag simplesmente não existe mais pode ser acrescentada no <span style="font-weight: bold;">trecho (1).<br /><br />É 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!!!<br /></span></span>