Mostrar mensagens com a etiqueta Tutorial. Mostrar todas as mensagens
Mostrar mensagens com a etiqueta Tutorial. Mostrar todas as mensagens

19 de setembro de 2019

Tutorial como adicionar um Sitemap versão Grid/Flipcard no Blogger


Tutorial super fácil com video, como adicionar uma pagina ao seu blog de um sitemap na versão Grid/Flipcard:

Tutorial adicionar sitemap ao blogger (ALT)


Mais um tutorial super simples que descobri no blog da Elaine Gaspareto excelente blog aconselho a sua leitura clique AQUI, adoro o blog da Elaine, este meu template é um dos templates que ela oferece gratuitamente, não deixe de visitar. 

Vou deixar aqui uma nova forma de compartilhar o sitemap numa pagina estática.  

A exibição pode ser feita por categoria, autor ou pelos posts mais recentes. 

Para fazer a sua pagina do seu sitemap basta criar uma nova pagina, depois na barra lateral da pagina em opções clica em NÃO Permitir Comentários, não existe necessidade de tal para este tipo de pagina de seguida dá um nome a pagina eu coloquei somente Sitemap mas você pode escolher o nome que mais lhe agradar e por ultimo do lado superior esquerdo na barra do editor clica em HTML E VAI INSERIR O CÓDIGO QUE VOU DEIXAR ABAIXO.

Código:

<style type="text/css"> 
 .grid-sitemap { 
  overflow: hidden; 
  position: relative; 
  height: 565px; 
  margin: 20px 0 40px 0; 
 } 
 .grid-sitemap iframe { 
   display: block; 
   width: 100%; 
   height: 680px; 
   margin-top: -115px; 
   margin-left: -5px; 
 } 
 </style> 
 <div class="grid-sitemap"> 
  <iframe src="https://www.blogueiraportuguesa.online/view/flipcard"></iframe> 
 </div> 




Onde tem o meu URL a vermelho você troca pelo seu URL e esta feito.

Depois deve adicionar a sua pagina Sitemap a barra de menu superior, inferior na barra lateral, onde achar melhor.

Por Ultimo fica aqui um video deste tutorial espero que gostem.



Nota ainda não adicionei a este blog a pagina Sitemap porque 1 experimentei no meu blog de testes pode ver Aqui Testes and Blogger a minha pagina esta na barra lateral



Não se esqueça de fazer pin:

Tutorial adicionar sitemap ao blogger (ALT)




Assinatura da Blogueira Portuguesa (ALT)

Quero ler o post completo

18 de setembro de 2019

post como adicionar botão pin it personalizado no blogger.

Personalizar Botão Pin It Blogger (ALT)



Post como adicionar botão pin it personalizado no blogger.
Mais código HTML para introduzir no corpo do blog
Tutorial completo

Antes de fazer a configuração do meu botão Pin It fiz no meu blog de testes para ver se estava certo e deu certo e extremamente fácil de personalizar o seu botão pin it nas imagens do seu blog.

Também vou deixar aqui alguns exemplos de botões personalizados se quiser fazer copy paste:



Aqui vai encontrar o código para personalizar o seu botão pin it:



Depois vai ao Tema clica em HTML :


No corpo do blog clica em CTRL F, vai abrir uma caixa de busca vai escrever a tag dentro da caixa </body> 

E faça Enter vai aparecer a tag a amarelo aí vai copiar o código que eu deixei nesta meu blog de teste Basta copiar o 1 código abaixo da tag Body Clique AQUI

Este código é do blog da Elaine Gaspareto Clique AQUI para ver o seu posts



Não esqueça de fazer pin:

Personalizar Botão Pin It Blogger (ALT)



Quero ler o post completo

Como Fazer Uma Pagina Personalizada de Erro no Blogger Tutorial Passo A passo


Hoje trago um tutorial muito simples de executar no blogger:

Como fazer uma pagina de erro personalizada no blogger.



como personalizar pagina erro no Blogger (ALT)

Abaixo fica os passos que deve dar para ter a sua pagina de erro personalizada no blogger:

A pagina de erro serve também para o SEO medir as suas métricas. Quando um Leitor clica num artigo que você já removeu ou alterou o endereço vai dar a uma pagina não encontrada, se você tiver uma pagina de erro personalizada com os links devidos o leitor não abandona o seu blog e volta a navegar noutros posts.

Esta a imagem da minha pagina de erro mas abaixo da imagem na minha pagina deixei links para os leitores navegarem, vejam Aqui a minha pagina de eroo completa Clique AQUI

pagina de erro


Deixei aqui outra ideia se quiser levar consigo de uma imagem de pagina de erro AQUARELA:

IMAGEM PAGINA DE ERRO OFERTA (ALT)

1 Passo Criar a sua pagina e imagem da pagina de erro:

Abaixo a imagem foi eu que fiz no editor do Canva CLIQUE AQUI, abaixo da imagens deixe os links para os leitores clicarem e assim não abandonam o seu blog.

Importante, atenção ao tamanho da pagina pois o blogger só aceita até 10K



2 Passo depois que criou a sua pagina clica no canto superior esquerdo em HTML:

3 Passo basta só copiar o texto todo da pagina em HTML.


4 Passo e ultimo vá em configurações preferências de pesquisa em erros e redireccionamentos clica na opção pagina não encontrada.

Clique em EDITAR e copia o texto em HTML para dentro da caixa e guarda as suas configurações.


Pronto a sua pagina de erro personalizada está feita, para verificar se está tudo correcto clique num link seu que alterou e se estiver tudo bem feito vai aparecer a sua pagina de erro.

Espero que tenham gostado deste tutorial.



Não se esqueça de fazer pin:

como personalizar pagina erro no Blogger (ALT)




Quero ler o post completo

13 de setembro de 2019

Psicologia e significado das cores Imagens paletes de cores e os significado de cada cor com links directos a outros sites


O artigo de hoje é sobre o significado das cores, trago também imagens com paletes de cores e o significado de cada cor.

Significados psicologia das cores


No meu anterior blog eu fiz um artigo sobre o significado e psicologia das cores, como as cores influenciam no marketing digital, quais as paletes de cores que deve escolher para o seu blog.

Este artigo é bastante complexo e comprido pois as cores são uma parte fundamental de todo o ser humano, todos os dias nos rodeamos de diversas cores, cada cor tem um significado e as cores libertam emoções diferentes para cada ser humano...

Para não ficar um artigo muito massudo e comprido eu vou dividir este artigo em 3 partes, começando sobre o significado e a psicologia das cores o artigo de hoje.
De seguida as cores e as suas influências como usar no seu blog, tanto a nível de design como a nível de marketing digital. 

Nesta 1 parte deixo o significado de cada cor

No segundo artigo vou indicar varias paletes para escolher e como deve escolher para a sua identificação visual do seu blog e da sua marca.

Na terceira parte vou falar sobre o significado das cores no marketing digital e como vai influenciar os leitores.

Deixo aqui uma dica visto que abaixo tem as imagens de paletes de cores e os significados de cada cor, para elaborar uma palete para o seu blog não deve escolher mais do que 3 cores. 

A minha palete de cores está dividida entre o rosa, o cinza e o azul, todas elas cores em paletes suaves.

Fica aqui só um pequeno exemplo como combinar uma palete para uma estratégia digital aqui já se usa duas cores como pode ver abaixo:


Significados das cores:


Significados psicologia das cores

Ficam aqui duas paletes de cores e os seus significados, pois as cores tem diversos significados e influência em cada pessoa.


psicologia_cores3



A cor depende da luz e a forma como é absorvida e reflectida em uma determinada superfície. Os olhos vão captar as ondas electromagnéticas que são reflectidas e dependendo dos seus comprimentos de onda, vemos cores diferentes. No nosso cérebro, as cores podem despertar certas sensações e por isso as cores têm significados diferentes.
A cor azul está relacionada com a nobreza e costuma ser usada para transmitir harmonia, tranquilidade e serenidade. Sendo uma cor fria, por vezes é associada à monotonia e depressão.
Esta é a cor mais associada à natureza e ao sentimento de esperança, mas também está relacionada com conceitos como saúde, dinheiro, vitalidade e juventude. Muitas vezes é usada em ambientes para ter um efeito calmante.
Utilizada para passar a sensação de luz e calor, o amarelo estimula o raciocínio e a criatividade. Também pode ser usada para representar alegria, otimismo e jovialidade.
O significado da cor roxa está muitas vezes associado à espiritualidade, mistério e misticismo. Esta cor é obtida através da mistura do azul e vermelho e costuma ser usada para transmitir melancolia.
É a cor do romantismo e da delicadeza, sendo mais associada ao mundo feminino. Os diferentes tons podem ter significados diferentes, mas normalmente esta cor é usada para se referir ao amor e à inocência.
Esta cor quente transmite muita energia e simboliza a paixão e amor. É uma cor forte e por isso muitas vezes também pode ser associada ao poder e violência. É conhecida por estimular a circulação e melhorar a autoestima.
É criada misturando vermelho e amarelo e transmite alegria e vitalidade. Também pode significar sucesso e prosperidade. Transmite entusiasmo, mas quando usada em exagero pode causar ansiedade e desgosto.
Considerada a cor da terra, o marrom expressa segurança, maturidade, conforto e simplicidade. Além disso, também é relacionada a produtos naturais e ao estilo de vida saudável.
Esta cor neutra corresponde à estabilidade, solidez e ausência de emoções. Muita vezes é usada para representar elementos sofisticados. Apesar disso, para algumas pessoas associam o cinza à solidão, depressão e tristeza.
Representa a paz, a purificação, inocência e a clareza. Também é reconhecida como uma cor que transmite calma e ajuda a atingir equilíbrio. Na cultura ocidental representa alegria, enquanto na oriental está relacionada com o luto.
A cor preta é obtida quando ocorre a absorção de todas as radiações do espectro solar. Esta cor está relacionada à morte, solidão e isolamento. Além disso, também é considerada uma cor sofisticada e elegante.

Cores primárias, secundárias e terciárias

Além das sensações que as cores provocam, elas são divididas pela forma como se relacionam entre elas. As cores primárias são as cores puras, que não têm origem a partir da combinação de outras, são elas: o amarelo, o vermelho e o azul. As secundárias resultam da mistura de duas cores primárias, do amarelo e o vermelho se dá o laranja, do vermelho e o azul, o violeta e do azul e o amarelo, temos o verde. As cores terciárias derivam da união de uma cor primária e outra secundária.
Há ainda as cores neutras, compreendidas entre os tons de marrom e cinza. Por serem derivadas do branco e do preto, essas cores não possuem muito reflexo e não estão presentes no círculo cromático, que pode ser visto abaixo.
Cores primárias, secundárias e terciárias

Cores complementares

Cores complementares
São as cores que aparecem em lados opostos no círculo cromático. A mistura de cores complementares dão origem a tons de cinza, ou preto, quanto combinadas em igual proporção. Quando duas cores desse tipo são colocadas muito próximas uma da outra, apresentam um alto contraste.




Não se esqueça de fazer pin:



Psicologia e o Significados das cores





Quero ler o post completo

9 de setembro de 2019

Configurar SEO no Blogger Tutorial passo a passo

Tutorial bastante importante para que o seu blog seja encontrado com facilidade pelo Google 

Para o seu Blog ter uma boa posição no Google a que trabalhar o SEO NO SEU BLOG, nas suas Postagens etc

Aqui neste artigo vou deixar um tutorial passo a passo com imagens como configurar o SEO no seu blog, artigos, imagens e mais veja abaixo o passo a passo: 



Configurar SEO no Blogger Tutorial passo a passo


Como configurar preferenciais de pesquisa:

Este processo deve ser configurado nas suas próprias descrições vai a parte de Definições, no Básico onde diz Descrição você coloca as suas palavras chave que melhor definem o seu nicho e o seu blog pode usar até 500 caracteres.

Assim quando alguém for a procura do seu blog no Google e escrever o seu URL vai aparecer o seu link de blog e por baixo as palavras chave que escreveu nas MetaTags.

Veja abaixo o Passo a Passo:

Tutorial configarar SEO no Blogger ALT

Descrição da Pesquisa Individual para cada post:


Ao fazer a descrição da pesquisa na barra lateral do seu artigo é muito mais provável ser visitada, isto porque quando aparece um artigo seu no google o 1 trecho que escreveu no post é o que aparece abaixo do seu link, mas pode não ser apelativo ao leitor fazendo está etapa de pesquisa da descrição vai ajudar a chamar mais a atenção e assim mais visitas.




Tutorial configarar SEO no Blogger ALT

Propriedades da Imagem e a sua Optimização:

O Google não lê as imagens daí é de extrema importância indexa-la ao as propriedades da imagem ao abrir a sua imagem vai aparecer propriedades e Titulo e texto alternativo da imagem é aí que você vai descrever a sua imagem com as palavras chaves mais usadas e escritas no inicio do artigo. A propriedade mais importante é o texto alternativo (Atributo ALT) É ATRAVÉS DESSE TEXTO QUE É FEITA A INDEXAÇÃO DA IMAGEM.

Veja abaixo nesta Imgem:

Tutorial passo a passo configurar SEO

Próximo Tutorial: COMO FAZER UMA PAGINA DE ERRO SUPER FÁCIL ACREDITE


Não se esqueça de fazer pin:


Configurar SEO no Blogger Tutorial passo a passo







Quero ler o post completo

5 de setembro de 2019

Tutorial Configurar menu horizontal no blogger com abas e sub abas mais o código fonte e video.

Tutorial como criar Menus com sub abas ou sub menus.

Tutorial menu com abas e sub abas para o blogger ALT





Eu acho este tutorial de bastante interesse, isto porque o Google da bastante importância as paginas do blog e claro como estão construídas.

Leia este post: Como Construir a sua Pagina Sobre

O template que estou a usar é da Elaine Gaspareto Visite aqui o seu blog, ela oferece mais templates e tem tutoriais fantásticos é um dos meus blogs favoritos.

O meu blog ainda não esta todo configurado porque tenho dificuldade em mexer em códigos, principalmente se tiver de configurar os códigos na raiz do blog:

Ou seja quando você vai ao tema depois clica em HTML e é aí que tem de introduzir alguns dos códigos eu morro de medo, mas estou a aprender.

Por isso mesmo deve fazer um blog de teste para ficar lá todos os erros e com os erros vai aprendendo, como eu estou a fazer, veja aqui o meu Testes e Testes HTML, é uma vergonha, clique aqui.

Leia este post:Oferta de links Templates Grátis e porque deve fazer um blog de teste

No inicio eu sofri muito para conseguir configurar a barra do meu menu no topo do blog e as suas sub abas, finalmente descobri:

Para configurar as abas e sub abas na barra do menu:

Basta ir ao tema

Clicar em E ditar HTML

Vai encontrar um código como este:

<style type="text/css">
#NavbarMenu {
background: #F20767; /*--cor do menu--*/
color: #FFF; /*--cor da fonte do menu--*/
font-size: 13px; /*--tamanho da fonte--*/
font-family: Arial, Tahoma, Verdana; /*--tipo da fonte--*/
width: 100%;
height: 35px;
font-weight: normal; /*--estilo da fonte--*/
margin: 0;padding: 0;
}
#NavbarMenuleft {
width: 100%;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; /*--edite cor do link--*/
display: block;
font-size: 13px;
font-family: Arial, Times New Roman;
font-weight: normal;
text-transform: nine;
margin: 0;
padding: 9px 15px 8px;
border-right: 1px solid #fff;
}
#nav li a:hover, #nav li a:active {
color: #FFF; /*-- cor do link em estado hover--*/
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
background-color: #AA07F2; /*-- cor do menu em estado hover--*/
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
width: 150px;
color: #ffffff; /*--cor do link--*/
font-size: 13px; /*--tamanho da fonte--*/
font-family: Arial, Times New Roman;
font-weight: normal;
text-transform:none;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF; /*--cor e tipo da borda esquerda--*/
border-right: 1px solid #FFF; /*--cor e tipo da borda direita--*/
background-color: #0795F2;/*--cor de fundo das sub abas--*/
}
#nav li li a:hover, #nav li li a:active {
color: #FFF; /*--cor do link--*/
padding: 7px 10px;
background-color: #F2F007; /*--cor da sub aba ativa--*/
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover
ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
</style>
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href=ENDEREÇO DO BLOG'>PÁGINA INICIAL</a></li>
<li>
<a href='#'>NOME DA ABA 1</a>
<ul>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
</ul>
</li>
<li>
<a href='#'>NOME DA ABA 2</a>
<ul>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
</ul>
</li>
<li>
<a href='#'>NOME DA ABA 3</a>
<ul>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
</ul>
</li>
<li>
<a href='#'>NOME DA ABA 4</a>
<ul>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO LINK'>NOME DA ABA</a></li>

</ul>
</div>
</div>
<div style='clear:both;'/></div>

Tem que já ter as suas paginas criadas e depois é só trocar os links


Na parte em que o corpo do código em que eu sublinhei a rosa é onde você vai inserir as URLS das suas paginas e onde diz nome da aba dar o nome das suas categorias 

Fácil não acha?

Supondo que está a usar um tema nativo do Blogger basta inserir o código acima eu vou repetir novamente aqui o código:



COMO PODEM VER ABAIXO DO MEU lAYOUT TEM UMA BARRA A ROSA É UMA TENTATIVA DE CRIAR UM MENU, LOL

Mas ao clicarem no meu menu no topo como eu indiquei acima basta trocar os links.








Não se esqueça de fazer pin:


Tutorial menu com abas e sub abas para o blogger ALT



Quero ler o post completo
Related Posts Plugin for WordPress, Blogger...


Parceira da Marca Desigual Clique na Imagem

Parceira da Spartoo.PT clique na Imagem

Produtos Adidas em Spartoo.pt


Atualizações do Instagram

Topo