02 janeiro 2019

Cabeçalhos grátis para blogs

🗨
Bom dia, amigos leitores!

Hoje vamos ver formas de instalar o cabeçalho do blog, retirar a navbar, e ainda tem alguns modelinhos gratuitos para você deixar seu blog bem bonito, afinal de contas o cabeçalho é a primeira coisa que o leitor visualiza, não é mesmo.

Bora! Lá.


Cabeçalhos Grátis para Blogs



Três formas de instalar cabeçalho no blogger mais modelos




Instalando o Cabeçalho no blog


A primeira maneira de instalar o cabeçalho e também a mais usada é, indo em layout, gadget cabeçalho, escolher arquivo do seu computador, posicionamento ao invés do título e descrição, salve  e pronto seu cabeçalho já estará aparecendo, mas talvez ainda não esteja da forma que você quer.


Então vamos aos ajustes:


Para que seu cabeçalho fique centralizado, vá em tema editar HTML de um ctrl + F e procure por:


<img expr:alt='data:title'expr:height='data:height'expr:id='datawidget.instanceled+&quot;_headering&quot;'expr:src='data:source url'expr:width='data::width'style='display:block'/>

Antes de <img , acrescente <center> e no fechamento acrescente </center>

Visualize estando tudo certo salve.

Para subir (ficar bem juntinho da página) ou descer (dando mais espaço para páginas ou banners), procure por:

<div class='region-innerheader-inner'>

troque por

<div style='margin-top:60px;'>

Para subir use -40px vá ajustando e vendo como fica antes de salvar até que esteja no topo se, desejar que desça use números positivos.

Agora podemos colocar-lo também pelo HTML, (usando uma imagem em png mais ou menos 1920px por 500px) , hospede no seu próprio blog e copie o link, agora vá em tema editar HTML de um ctrl + F e procure por:

body{

substitua por :

body {background: #ffffff url('Link do seu cabeçalho') no-repeat; /*cor do fundo do layout */    background-size: 100%; /*imagem do tamanho total do layout*/    background-position-y: 0;/*altura da imagem positivo desce negativo sobe*/    background-position-x: 0;/*numero alto imagem para direita - de 0 esquerda*/    background-attachment: scroll; }

O ideal é ter um blog de testes, pois é sempre bom ter um para testar antes todas as personalizações que desejar fazer em seu blog, além de fazer sempre um backup antes de mexer.


Terceiro código, substitua body{ por esse código:


body, html { height: 380px; margin: 0; padding: 0; }body {background: url("URL DA SUA IMAGEM ") no-repeat; }html{ background-color: #fff; }html body .region-inner { min-width: 0; max-width: 100%; width: auto; }


Antes de irmos aos cabeçalhos vou deixar aqui como retirar a navbar do blog porque muita gente reclama que ela é feita e atrapalha 😏, bom já testei esse meio de retirar a navbar em quase todos os modelos, até agora deu certo.

<b:sction class='header'id=header'maxwidgets='1'showaddelement='no'>

Em maxwidgets troque '1' por '2' ou mais como você achar que se faz necessário.

Em showaddelement troque 'no' por   'yes'.

Outra parte é mudar a Header 1 'locked='true'

Trocando "true" por "false" isso permite mudar o cabeçalho de lugar e arrasta-lo para as colunas criadas no cabeçalho.



Dividir o cabeçalho (header) em dois  


De um ctrl+f e procure por:


<div class='header-outer'> apague e substitua pelo codigo abaixo :<div class='header-outer'><div id='header-left' style='width:50%; float: left; margin:0; '><b:section class='header-left' id='header-left' preferred='yes' style='float:left;'/></div><div id='header-right' style='width:50%; float: right; margin:0; '><b:section class='header-right' id='header-right' preferred='yes' style='float:right;'/></div><div style='clear:both;'/> 



 No painel do blog vá em editar HTML abra e expanda a caixa ir para um widget, o primeiro será o da navbar troque onde está:

locked 'false' por 'true'

de um ctrl+f e ]]></b:skin>

e acima cole

.navbar{displaynone}




Cabeçalhos Grátis para Blogs


Cabeçalhos para blogs modelos variados os 6 primeiros modelos estão em png tamanho 1920 largura por 1080 altura, é só clicar em cima salvar no seu computador e levar ao Pixlr editor colocar o nome do seu blog e se precisar lá também é possível mudar o tamanho.


Cabeçalho para Blog Pessoal

cabeçalhos para blogs



Cabeçalho para Blog Pessoal 2

cabeçalho gratis




Cabeçalho para Blog de Moda

cabeçalho gratis




Cabeçalho de Moda 2



cabeçalho para blog de moda


Cabeçalho para Blog de Moda 3

cabeçalho gratis



Cabeçalho de Culinária 2

cabeçalho grátis


Os Cabeçalho Blog à seguir estão em png também no tamanho 1440 por 380 px .

Cabeçalho para diversas finalidades

cabeçalho grátis para blog feminino



cabeçalho grátis



Cabeçalho para Blog Masculino diversas Finalidades

cabeçalho grátis


Mais quatro novos cabeçalhos, clique no link abaixo e veja os novos modelos. Os novos modelos estão em PNG na medida 1360 x 460 px , 1440 x 380 px.


Baixe aqui o cabeçalho que escolheu do tamanho original.

Quer um tutorial, saber sobre alguma personalização?
Deixe seu pedido nos comentários que em breve procurarei publicar.

Se desejar um cabeçalho personalizado para blog, Facebook, Twitter, YouTube, destaque para Instagram, tudo combinando com o layout e logo do seu blog, entre em contato e faça seu pedido pelo formulário de contato.



Qualquer cabeçalho que usar não esqueça de deixar os créditos e seu comentário, não faça uso comercial nem repasse como sua criação.

Curta, compartilhe, comente sua interação é muito importante para o blog.

Atualizado 02/04/2020

Até à próxima 😉

Depositphotos [CPS] WW

2 comentários:

  1. Boa noite, amei cada detalhe de tuas explicações, vou utilizar com muito carinho e apreço. Obrigada por compartilhar. :)

    ResponderExcluir
    Respostas
    1. Fico extremamente feliz que tenha sido útil , precisando de algum tutorial ou personalização é só dizer .
      Obrigada Dri

      Excluir

Você leu uma postagem escrita com muito amor por mim Adriana autora do Baú da Dri. Gostou?! Deixe seu comentário, criticas e sugestões, elas são muito importantes para o blog crescer e melhorar. Curta, compartilhe, ajude o blog a crescer.
Sua mensagem será respondida o mais breve possível .
Muito obrigada pela visita e volte sempre.

Atualizações do Instagram