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:





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.


COMENTÁRIOS

BLOGGER: 32
Loading...
Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: Personalizar cabeçalho nas visualizações dinâmicas
Personalizar cabeçalho nas visualizações dinâmicas
Aprenda a personalizar o cabeçalho nas visualizações dinâmicas do Blogger
http://3.bp.blogspot.com/-grwrNHEpChw/UM-XvWUx5GI/AAAAAAAAAuA/DzZknCAOYUA/s1600/visualdinamico.png
http://3.bp.blogspot.com/-grwrNHEpChw/UM-XvWUx5GI/AAAAAAAAAuA/DzZknCAOYUA/s72-c/visualdinamico.png
Bloggermin
https://www.bloggermin.cashmore.com.br/2012/12/personalizar-cabecalho-visualizacoes-dinamicas.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2012/12/personalizar-cabecalho-visualizacoes-dinamicas.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO PESQUISAR TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar