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

28 de outubro de 2019

Como colocar código Adsense no HTML do Blogger




Como Colocar o Código do AdSense Direto no HTML do Blogger
Além do Gadget do AdSense no Blogger você pode colocar o código do AdSense directo no HTML do Blogger. Isso é uma forma de colocar os anúncios em lugares como no inicio ou final da postagem ou ainda activar as Page-level ads no Blogger.

Colocar o Código do AdSense no HTML do Blogger;


Normalmente AdSense gera um código de anúncio assíncrono (resumidamente: o carregamento do anuncio não atrapalha o carregamento do resto da pagina). Além disso, o AdSense usa aspas em vez do sinal ' no seu código. Estes são dois motivos que geram erro na hora de colocar o código do AdSense directamente no HTML do Blogger.

Como inserir o código do AdSense no HTML sem Erro;


Primeiro faça login no AdSense, entre em Meus Anúncios > Page-level ads. Então quando estiver na pagina Page-level ads você pode activar vários formatos de anúncios:

Anúncios QuickStart: Os anúncios QuickStart são incorporados automaticamente à sua página. (para o Blogger não é necessário activar esta opção, mas se activar essa opção poderá aparecer mais blocos de anúncios no seu blog, portanto verifique para não passar do limite de 3 anúncios).

Anchor/Overlay ads: Anúncios para dispositivos móveis que ficam fixos na borda da tela do usuário.

Vignette ads: Anúncios em tela cheia para dispositivos móveis que aparecem entre o carregamento de páginas no seu site e que podem ser ignorados pelos usuários com facilidade.


Agora logo abaixo temos o código do AdSense, clique no botão ver código e copie o HTML do anuncio do Google AdSense.



Cole no bloco de notas e veja que o inicio do código fica desta forma:




style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXX"
data-ad-slot="XXXXXXXX"
data-ad-format="auto">



Apague a primeira linha
style='display:block'
data-ad-client='ca-pub-XXXXXXXXXXXXX'
data-ad-slot='XXXXXXXX'
data-ad-format='auto'>

-->

Onde colocar o código de anúncio no seu HTML;

Novamente na pagina tema > editar html, procure por data:post.body e cole o código que alteramos logo abaixo dele. Claro esta é apenas uma sugestão e você pode escolher outros lugares do html para colocar o código do AdSense.




Também é possível colocar anúncios AdSense no Blogger directamente num Gadget de Html/javacript ou no próprio gadget do AdSense.

Espero que ajude este tutorial a configurar o AdSense no vosso blog, pode parecer difícil, mas na pratica é bem mais fácil de fazer do que parece.

Abraços e boa sorte com seu site.

Não se esqueça de fazer pin













Quero ler o post completo

24 de setembro de 2019

Como combinar uma Palete de Cores no Template do seu Blog Saiba aqui as Tendências das Cores

Combinar cores para o template (ALT)


Olá eu fiquei de fazer um post sobre Paletes de cores para usar no design do seu blog.
Fiz o post sobre A Psicologia e o Significado das cores clique AQUI, mas a altura não deixei imagens com ideias para paletes de cores que deve combinar na construção do seu template.

Hoje neste posts vou deixar as ultimas tendências de paletes de cores, como combinar e usar no seu blog. Não se esqueça como eu indiquei no post sobre o significado das cores num template só deve usar 3 cores.

Color Pick Eyedropper adicione esta extensão ao seu google eu uso a sempre para saber os códigos das cores em qualquer local, Visite Aqui

Eu optei pelo rosa, cinza e azul, você faça a sua escolha espero que as minhas paletes de cores ajudem.

Se gostou do post compartilhe nas redes sociais e faça uma pequena doação para melhorar a qualidade deste meu espaço, Obrigado

Espero que gostem, beijinhos

As imagens de paletes abaixo são da autoria do site Haute Stock Visite Aqui, este site quando eu estava no wordpress era parceira dele visite e veja o tutorial construir Templates no Canva para a sua Marca.


Taupe, forrest verde e azul escuro se combinam para criar uma paleta sofisticada de imagens de ações para treinadores de negócios, blogueiras e mulheres criativas empreendedoras.  Clique para obter mais inspiração da marca!


Vermelho rubi, laranja queimado e amarelo mostarda criam uma bonita paleta de cores de outono nesta bela e ousada coleção de outono da Haute Stock chamada Saffron Flame.  Clique para ver mais!


Paleta de cores feminina do outono inspirada em dizer adeus ao verão e olá ao outono.  Essas imagens da área de trabalho e da área de trabalho da Haute Stock são perfeitas para mulheres empreendedoras, blogueiras e criativas com cores suaves da marca.  Clique para ver mais Inspiração da paleta de cores de outono!


Verde azeitona, laranja queimada e rosa quente fazem uma combinação única para uma nova rodada em uma paleta de cores de outono.


Cores de outono femininas em uma paleta quente e neutra.  Esta coleção apresenta elementos mínimos, orgânicos e rústicos e adota uma vida lenta e intencional.


Quentes e ousadas, essas cores do outono são perfeitas para marcas que querem se destacar nas mídias sociais nesta temporada!  Com uma mistura de imagens de estilo de vida e artigos de papelaria, a Coleção Falling Leaves pode ser usada para Instagram, Facebook, postagens em blogs ou atualizações sazonais do site!


Os Neutros da Warm Warm fazem desta coleção a perfeita para adicionar ao Instagram, Mídias Sociais, Blog Posts e sites, especialmente para blogueiros de moda e estilo de vida!


Blush e vinho fazem o emparelhamento perfeito para uma paleta de cores de outono suave e feminina.  Esta coleção apresenta imagens de papel de carta para empreendedores criativos, mulheres empresárias e blogueiras.

Se gostou do post compartilhe nas redes sociais e faça uma pequena doação para melhorar a qualidade deste meu espaço, Obrigado





Não se esqueça de fazer pin:

Combinar cores para o template (ALT)






Quero ler o post completo

23 de setembro de 2019

Tutorial com código como configurar a imagem de perfil icons sociais no Blogger Ofertas Imagens de Ícones

Configurar no blogger perfil redes sociais (ALT)

Olá a todos, hoje trago mais tutorial, os tutoriais são sempre bem vindos para ajudar nas configurações de um blog assim como eu aprendo com outras blogueiras também deixo aqui um post com dicas para o seu blog espero que ajude.

O tutorial de hoje é como configurar a sua imagem de perfil personalizada mais os icons de redes sociais também personalizados na barra lateral do Blogger.

No final do artigo deixo também umas ofertas de icons no caso de querer usar icons sociais personalizados, é só fazer copy paste.

Se gostou deste artigo compartilhe nas redes sociais e faça uma pequena doação assim ajuda a melhorar a qualidade deste meu espaço, Obrigado 




Eu andei bastante tempo sem conseguir fazer a alteração da minha imagem de perfil e configurar os meus icons sociais as minhas redes sociais, até que encontrei no blog da Elaine Gaspareto Visite AQUI, um tutorial a explicar correctamente e com os devidos códigos, visto que eu uso as ofertas dos seus templates fiz a alteração da minha imagem e linkei os meus icons as redes sociais com o código da Elaine Gaspareto e correu tudo as mil maravilhas.

É super fácil fazer a configuração da imagem de perfil e as redes sociais no blogger:


Use uma foto de qualidade para a sua imagem de perfil:

Para arredondar a imagem eu usei o editor fotográfico Canva clique AQUI:

Para fazer esta alteração basta copiar o código que vou deixar abaixo:

Para remover o fundo use este editor Fotográfico super simples e muito util o o Site Remove.bg clique AQUI:


Visite a minha Pagina de Recursos Gratis clique AQUI:


Eu usei está foto para a minha imagem de perfil:

Imagem de perfil (ALT)

Aconselho a fazer primeiro a alteração num blog de teste como eu tenho o meu Visite AQUI Blog Testes and Blogger

Depois de ter a sua imagem criada e arredondada  vai abrir o Layout e adicionar um Gadget a barra lateral, nas opções que aparecem escolhe Adicionar HTML/JAVASCRIPT.

Código do perfil+redes sociais


Views:
1438

CÓDIGO DA FONTE DOS ÍCONES
(colar abaixo de <head>)

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>



CÓDIGO CSS E HTML
(colar como gadget HTML/JAVASCRIPT)
<style>
.profile-pic {
text-align: center;
font-size: 14px; /*TAMANHO DA FONTE DO TEXTO*/
}
.profile-pic img {
width: 250px; /*LARGURA DA FOTO*/
height: auto;
border-radius: 1000px; /*GRAU DE ARREDONDAMENTO DA FOTO*/
-webkit-border-radius: 1000px; /*GRAU DE ARREDONDAMENTO DA FOTO*/
opacity:1
}
.profile-pic img:hover {opacity:0.7;
}
#socialmediaiconsside {
font-size: 25px; /*TAMANHO DA FONTE DOS ÍCONES*/
margin: 0;
padding-right: 10px;
text-align: center;
position:relative;
}
#socialmediaiconsside a {
color: #000000; /*COR DOS ÍCONES*/
display: inline-block;
line-height: 40px;
padding: 0 5px;
}
#socialmediaiconsside a:hover {
color: #FF9A4F; /*COR DOS ÍCONES EM ESTADO HOVER*/
}
</style>

<div class="profile-pic">
<img src="ENDEREÇO DE SUA FOTO AQUI" border="0" alt="profile"/>
<p align="center"> AQUI VOCÊ COLOCA UMA PEQUENA BIOGRAFIA SUA. </p>   </div>


<div id="socialmediaiconsside">
<a href="YOUR FACEBOOK URL" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="YOUR TWITTER URL" target="_blank"><i class="fa fa-twitter"></i></a>
<a href="YOUR PINTEREST URL" target="_blank"><i class="fa fa-pinterest"></i></a>
<a href="YOUR INSTAGRAM URL" target="_blank"><i class="fa fa-instagram"></i></a>
<a href="YOUR BLOGLOVIN URL" target="_blank"><i class="fa fa-heart"></i></a>
<a href="mailto:YOUR EMAIL ADDRESS"><i class="fa fa-envelope"></i></a>
</div>



Onde está marcado no código a rosa é ai que vai alterar o URL da Imagem para a sua Imagem de Perfil.

Mesmo no final do código marquei a lilás vai alterar os links para os links das suas redes sociais e está pronto, fácil certo?

Eu coloquei na barra lateral é onde fica bem a imagem de perfil com os icons sociais agora é a sua escolha, se tem mais duvidas consulte o blog da Elaine Gaspareto clique AQUI.

Como prometido fica aqui as imagens dos icons sociais se quiser consultar mais icons visite o meu Pinterest clique AQUI


Icon personalizado Facebook

Icon personalizado Instagram
Icon personalizado Pinterest
Icon personalizado twitter


Se gostou deste artigo compartilhe nas redes sociais e faça uma pequena doação assim ajuda a melhorar a qualidade deste meu espaço, Obrigado 



Não se esqueça de fazer pin:


Configurar no blogger perfil redes sociais (ALT)



Quero ler o post completo

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


Atualizações do Instagram

Topo