Personalizar cabeçalho nas visualizações dinâmicas

Aprenda a personalizar o cabeçalho nas visualizações dinâmicas do Blogger

É verdade que nos novos modelos de Visualizações dinâmicas do Blogger, tenho gostado mais pelos efeitos que têm para mostrar os artigos/postagens e a maneira como navegar neles. Mas também é verdade que muitos tem decepcionado o não poder personalizá-los como gostariamos.

Siga o bloggermin no Twitter e no Google+ , e fique por dentro das novidades para o seu blog. E curta também a nossa página no Facebook.

Felizmente nem tudo está perdido, podemos colocar gadgets, e também personalizar determinadas áreas para que seu blog não seja igual ao demais. Então vamos ver como transformar as partes que podem ser; e começaremos a personalizar o Cabeçalho do Blog em modelos de visualização dinâmica.

Tutorial
O cabeçalho é basicamente o que definida a imagem do blog, assim podemos transformar isso:

Para isto:

Veja DEMO

A única coisa que precisamos é a imagem do nosso cabeçalho e nada mais. Se você não tiver um, aqui há 50 cabeçalhos para escolher.
Assim, escolhido a imagem, entre na seção Modelo | Personaliza | Avançado.
Então, onde diz Adicionar CSS acrescente o seguinte:

.header-bar {
background-color:#738a94 !important; /* Color do fundo */
background-image:url(URL da imagem) !important; /* Imagem de fundo */
background-repeat:no-repeat;
height:149px !important; /* Altura do cabeçalho */
border-bottom:25px solid #3b464b; /* Borda inferior */
}
#header .header-bar .title h1, #header .header-bar .title h3 {display:none;}
#header a:hover {text-decoration:none !important;}
#main {margin-top:115px !important;} /* Distancia entre o cabeçalho e o conteudo */

Altere a URL da imagem indicado em vermelho e personalizar os demais indicados em verde.
Algumas propriedades terá que descobrir por si mesmo, porque não há valores específicos, uma vez que depende de cada caso.Por exemplo, a altura deve ser de cerca de 20px menor que a altura da imagem, mas se a imagem é um padrão pequeno, então você pode definir a altura, na medida em que desejar.
Eu coloquei uma borda inferior, mas você pode removê-lo, torná-lo mais fino ou mais grosso, sendo é uma questão de gosto.

Como nós estabelecemos uma altura para o cabeçalho e temos (ou não) uma borda, então é muito provável que as entradas e o pequeno menu foram cobertos, para que isso não aconteça definimos uma margem em #main, aqui o valor você deverá descobrir, apenas uma questão de tentar vários valores até encontrar o adequado.

Simples? Sim, muito, mas o melhor de tudo é que, com esta pequena alteração, blog vai começar a ver com sua própria identidade.