2 de janeiro de 2019

Iniciantes como Criar seu Blog

Primeiros Passos para Criar e Personalizar seu Blog


criando e persoanlizando um blog

Esse foi o primeiro tutorial do blog eu dei uma atualizada nele e acrescentei algumas coisas que aprendi.
A primeira etapa para a criação do seu blog é primeiramente saber quais assuntos irá abordar nele para não se atrapalhar depois ,decidido isso vamos a escolha do nome que de preferencia não deve ultrapassar 70 caracteres pois não irá ajudar no SEO mais adiante.


Também recomendo que deixe organizado de preferencia em uma planilha quais serão os temas do blog e será melhor se for adiantando alguns futuros posts.
Bom se você já possui um g mail é só seguir os passos mais abaixo , se não entre no g mail e crie uma conta que será a de administração do seu blog , feito isso vamos lá.
 Tudo preenchido pronto conta criada personalize siga os passos indicados pelo google após isso , vamos no painel á direita e clicamos no logo do blog , lá vamos preencher as primeiras etapas como:

Título

Endereço que é o seu http://meublog.blogspot.com , e tem já a opção de domínio personalizado depois.
Vá no menu do blogger lado esquerdo desça na opção configurações - Básico ;
Título coloque o nome do seu blog


Descrição faça uma breve descrição do que se trata o seu blog e seu futuro conteúdo , a descrição não deve passar de 200 caracteres.
Privacidade- por enquanto - não estar listado no blogger, não estar visível para mecanismo de pesquisa. ( enquanto você o prepara) , quando estiver tudo pronto é só ir em editar e reverter.
Em permissões - deixe privado até terminar sua construção .
Depois em preferencias de pesquisa preencha as metatags ( uma resumo curto e objetivo do conteúdo do seu blog ).
Na flecha pagina não encontrada você pode ver uma personalização simples aqui 
Exemplo de configuração do  blog

Agora vamos em layout escolher os principais gadgets que o blog deve ter e para você depois personaliza-los.

Principais gadgets:


1º Seu Perfil.
2º Caixa de pesquisa
3º Arquivo do blog
4º Marcadores /Categorias como aqui no Baú   Personalizando os Marcadores Três Modelos
5 º Seguir por e-mail
6º Feed   Criando e Configurando seu Feed
7º Postagens populares
8º visualizações de pagina

Feito isso para a escolha do tema :São 11 categorias diferentes com pelo menos 4 modelos cada , se você está começando com pouco $ para investir sugiro que sua escolha fique entre ,Simples ,Marca D'agua ou Celestial são os mais simples para personalizarmos e a internet oferece uma variedade enorme de blogs com dicas que nos ajudam a personalizar cada pedacinho dele , mesmo não entendendo praticamente nada de códigos html.
 Com o assunto que irá abordar no seu blog já definido , vamos lá.
Escolhido o tema a ser aplicado vamos na  personalização clique em avançado e vá personalizando cada parte, cor ,fonte ,larguras e tudo mais teste bastante se familiarize deixe com o seu estilo mas cuidado para não exagerar nas combinações.

Aqui tem dez modelos para diferentes temas de  blogs e as explicações de uso Cabeçalhos Grátis para Blogs


Ao escolher seu cabeçalho faça uploud da imagem e salve em png geralmente eu guardo no albúm de fotos do google ou no meu drive ,para editar o nome do blog e outras coisas mais eu gosto de usar https://pixlr.com/   acho ele pratico e simples de entender , cabeçalho escolhido e com nome do seu blog vamos em layout  vá em header  faça uploud da imagem e escolha ao invés do título visualise ,não se preocupe com a centralização veremos isso ,tudo certo salve.
Agora para centralizar o cabeçalho escolhido vamos ter que ir no html de um ctrl + F e procure pelo seguinte código:


<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 do código coloque <center>  e ao final  </center>.
Visualize tudo certo salve.
Agora vamos ver para aumentar subir ou descer o seu cabeçalho na pagina.
Procure por:

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

E substitua por:

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

Se você quiser pode mudar o px que é referente ao tamanho , aumentando ele sobe e diminuindo ele desce.
Se você quiser aumentar o numero de gadgets do cabeçalho  procure  pelo código:

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

em maxwidgets troque 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 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;'/> 
 


Agora vamos centralizar o título das postagens e personalizar ,de um ctrl+f e dentro da caixinha de código procure pelo trecho :

 h 3.post:title{

Se você desejar somente centralizar o texto acrescente :
text-align:center;} /*centralizar titulo dos posts*/

Agora para uma personalização mais completa :

h3.post-title { font-family: Calligraffitti; /* tipo de fonte do titulo */ color: #8B00FF; /* cor do título */ background: #FFFFFF; /* cor de fundo dos títulos */ font-size: 18px; /*tamanho da fonte */ text-align: center; /* alinhamento centralizado do texto */ } 


 Eu usei uma fonte já existente no próprio blog mas se você desejar algum outro tipo de fonte poderá baixar gratís no  Google web fonts , para personalizar as cores do blog você pode dar uma olhada na Paleta de Cores do Baú da Dri

Se desejar acrescentar um efeito sombra logo abaixo de:

font-family:calligraffitti;/*tipo de fonte do titulo*/
text-shadow 1px 2px 3px #0000;


Se você desejar trocar o estilo da borda que aqui está pontilhada é só trocar a palavra dotted por:

none - nenhum
solid - continua
double - dupla


Para mudar o lado do texto troque center por :

left -à esquerda
right - à direita


Para colocar uma imagem para ficar de fundo do titulo , substitua background-color por:

background: url ( 'URL DA SUA IMAGEM');
background: repeat :no-repeat;


Visualize tudo , estando certo salve.

Deixe seu comentário , curta , compartilhe ajude o blog a crescer desejando de sua sugestão ou pedido .

Até a próxima 😉







Nenhum comentário:

Postar um comentário

Gostou do Post , deixe seu comentário e sugestões .
Em breve responderei a todos.