Como dividir o cabealho do blog em duas partes

J recebemos alguns pedidos e agora vamos mostrar como fazer para dividir o cabealho do blog em duas partes, assim podemos colocar mais alguma coisa ao lado do titulo do blog em vez de ter que usar alguma imagem gigantesca para ocupar espao. Publicamos uma atualizao deste tutorial mostrando como dividir cabealho do Blogger em dois nos novos templates (Design do Modelo). Portanto se o seu html for diferente deste mostrado aqui, veja no link.

Esse procedimento simples, mas leia essa explicao at o final antes de comear, pois ser necessrio fazer algumas alteraes no cdigo antes de colocar no seu blog, entre na pagina editar html e procure por: <div id='header-wrapper'> <b:section class='header' id='header' showaddelement='yes'> <b:widget id='Header1' locked='true' title='Frases Curtas (Cabealho)' type='Header'/> <b:widget id='HTML7' locked='false' title='' type='HTML'/> </b:section> </div> Depois substitua por: <div id='header-wrapper'> <div id='header-column-container'> <div id='header2' style='width: 74%; float: left; margin:0; '> <b:section class='header-column' id='header-column-left' preferred='yes' style='float:left;'> <b:widget id='Header1' locked='true' title='Frases Curtas (Cabealho)' type='Header'/> </b:section> </div> <div id='header3' style='width: 25%; float: right; margin:0; '> <b:section class='header-column' id='header-column-right' preferred='yes' style='float:right;'> <b:widget id='HTML7' locked='false' title='' type='HTML'/> </b:section> </div> <div style='clear:both;'/> <div id='header-bottom'> <b:section class='header' id='header-column-bottom' preferred='yes'> </b:section> </div> <div style='clear:both;'/> </div></div> Como j dissemos antes modificar qualquer coisa no seu blog repare nas linhas que esto em negrito no cdigo, no seu blog elas sero parecidas com essas no exatamente iguais e dependendo podem ter at mais do que duas linhas desse tipo, ento voc precisa copi-las e substitu-las neste cdigo antes de colocar no seu blog. Voc pode notar que a parte onde est a linha <b:widget id='Header1' locked='true' title='Frases Curtas

(Cabealho)' type='Header'/> a parte mais larga do cabealho(74%) e a outra <b:widget id='HTML7' locked='false' title='' type='HTML'/> na segunda parte que tem 25%, ento coloque que esto neste trecho no seu blog como desejar e depois ser fcil mud-las de lugar pela pagina layout somente arrastando como qualquer outro gadget. Para alterar as larguras ou lado das colunas do cabealho s modificar essas partes do cdigo: width: 25%; float: right; width: 74%; float: left; Voc notou que a soma dos valores no chega a 100% isso para evitar que em alguns navegadores uma coluna fique embaixo da outra devido falta de espao. E para trocar as colunas de lado s precisa mudar de lugar as palavras left e right nos cdigos. Espero que essa dica seja muito til e ajude a melhorar o visual do blog.