Mostrando postagens com marcador Personalizações. Mostrar todas as postagens
Mostrando postagens com marcador Personalizações. Mostrar todas as postagens

Personalizar citação em destaque o Blockquote no Blogger

 

Personalizar citação em destaque o Blockquote no Blogger


Blockquote, em português citação, você já deve ter reparado que muitos blogs usam o Blockquote para diferenciar alguma parte importante do texto.


Na sua grande maioria a citação, (Blockquote), são personalizados conforme o layout do blog, gosto do autor e intenção de destacar o trecho abordado.

QUERO LER O POST COMPLETO

Como adicionar Font Awesome no Blogger

 

Como adicionar Font Awesome no Blogger


  • Atualmente, é impossível encontrar um blog\site que não tenha pelo menos uma conta de mídia social associada a ele.

  • Twitter, Facebook, Instagram, Pinterest, YouTube, etc. 

  • Com o tempo, as mídias sociais aumentaram cada vez mais sua presença online.

  • Um item obrigatório para blogueiros que nunca deve ser esquecido são os ícones de mídia social que usamos para compartilhar e fazer com que nosso público nos siga de mais maneiras.

  • Indispensável na atualidade para realizar nossas divulgações, de postagens, brindes, itens a venda e prestação de serviços.

  • Depois que suas contas de mídia social estiverem configuradas, você não pode simplesmente ficar a espera que elas sejam descobertas.

  • Claro, você pode usar #hashtags para se encontrar e se comunicar com nichos semelhantes, você precisa de algo mais em seu blog.

  • Dessa forma faz com que o público, marca de interesse em seu blog tenham outras formas de atualização e novidades que você publique.

  • Como fazer?

  • Simples, através dos ícones sociais.

  • Cada rede social possui seu ícone e cor representativa, sua marca, sempre inconfundível.

  • Como funciona?

  • Font Awesome, oferece ícones vetoriais escaláveis que podem ser personalizados imediatamente.

  • Tamanho, cor, sombra projetada qualquer coisa que possa ser feita através do CSS, funcionando como um kit de ferramentas onde você obtém acesso a mais de 500 ícones para usar em seu blog gratuitamente.

  • Porque usar o Font Awesome?

  • As outras formas de imagens demoram a carregar, com o passar do tempo tendem a perda sua qualidade a medida que a resolução do computador aumenta. 
  • Usando Font Awesome seus ícones iram carregar mais rápido com aparência nítida e limpa.

  • Uma grande coleção de ícones tanto de para uso das redes sociais como tradicionais.

  • Suporte CSS onde permite que ajuste os ícones conforme o melhor adequação ao seu blog possibilitando muitas personalizações.

  • Carregamento rápido e é gratuito.
  • Adicionando Font Awesome em seu Blogger.

  • Vá ao seu editor do blogger em tema, clique na seta ao lado de personalizar, editar HTML assim que seu editor abrir você logo verá a tag <head> abaixo dela cole o código que faz com que os ícones funcionem:

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

  • Após essa etapa o blog já está pronto para adicionarmos o Font Awesome, adicionando os links dos ícones das mídias sociais ao HTML do Blogger.

<div id="fawesomeicons">
<a href="URL-AQUI" title="Facebook" target="_blank" rel="nofollow"> <i class="fa fa-facebook"></i> </ a>
<a href="URL-AQUI" title="Google Plus" target="_blank" rel="nofollow"> <i class="fa fa-google-plus"></i> </a>
< a href="URL-AQUI" title="Twitter" target="_blank" rel="nofollow"> <i class="fa fa-twitter"></i> </a>
<a href="URL-AQUI" title="Pinterest" target="_blank" rel="nofollow"> <i class="fa fa-pinterest"></i> </a>
<a href="URL -AQUI" title="Instagram" target="_blank" rel="nofollow"> <i class="fa fa-instagram"></i> </a>
<a href="URL-AQUI" title=" Bloglovin" target="_blank" rel="nofollow"> <i class="fa fa-heart"></i> </a>
<a href="URL-AQUI" title="Tumblr" target="_blank " rel="nofollow"> <i class="fa fa-tumblr"></i> </a>
<a href="URL-AQUI" title="RSS" target="_blank" rel="nofollow"> <i class="fa fa-rss"></i> </a>
</div>
 
 
  • O Font Awesome funciona em qualquer lugar com a tag <i>, porque é projetado para funcionar em elementos inline, embora possamos usar <span> a documentação oficial prefere a opção <i>.

  • Os ícones podem ser adicionados em qualquer lugar usando o prefixo CSS "fa" com o nome do ícone.

  • Para saber o nome dos ícones e conhecer os modelos no site Font Awesome.

  • Incluindo o ícone na lista:

  • Copie qualquer linha que comece com "<a href" e termine com "</a>" do código acima, cole onde desejar que ele aparaça e substitua o código que começa com "<i class="fa" e termina com "</i>" com o ícone escolhido.

  • Onde instalar?

  • Você pode adicionar os ícones em Gadget HTML\Javascript, o código disponibilizado acima.
  • Em personalizações específicas como perfil da autora, rodapé de postagem, perfil da autora ao final da postagem, menu, rodapé de créditos. (Para saber os códigos dessas personalizações basta procurar no menu do blog a postagem correspondente).

  • O código das personalizações deve ser adicionados acima da tag de fechamento ]]></b:skin>.

  • Para visualizar todos os ícones visite o FontAwesome.

  • Caso você deseje alterar tamanho, altura, largura  acrescente o código abaixo e teste para visualizar como fica.

#fawesomeicons a {
    tamanho da fonte: 16px; (tamanho do ícone)
    largura: 30px;
    altura: 30px;
    altura da linha: 30px;
}

  • Personalizar o ícone individualmente com suas respectivas cores.

#fawesomeicons a . fa-fa-pinterest{
background: #background-color ;
cor: #font-color ;
}

  • Agora é só você testar com as combinações desejadas em seu blog, não esquecendo de sempre realizar primeiro no seu blog de testes, se ainda não criou um é hora de fazer.

  • Dúvidas, sugestões e pedidos deixe aqui nos comentários, que rapidinho respondo.

  • Até mais!
QUERO LER O POST COMPLETO

3 Modelos para personalizar as postagens populares

 Bom dia, amigos leitores!


Hoje vamos a mais uma personalização para blogs do Blogger, é dia de deixar o gadget das postagens populares mais atraente e elegante.


Como o nome já diz, postagens populares do blog, ou seja, as que são mais vistas pelo seu público.


Personalizando as postagens populares do blog, 3 modelos para você escolher

QUERO LER O POST COMPLETO

2 Estilos de personalização do menu nativo Blogger, fácil e simples

 

Duas formas para personalizar o menu  nativo do Blogger, fácil e simples

Quem cria um blog no Blogger, e ainda está sem poder comprar um tema recheado de personalizações e recursos, e deseja deixar seu tema limpo, leve e fácil para navegação do usuário.


Vou ensinar vocês a  personalizar de duas formas o menu nativo do blogger, fácil e simples de aplicar e deixa-lo combinando com seu layout.


Borá lá, conferir o tutorial!

QUERO LER O POST COMPLETO

Box curtir fanpage do Facebook, fácil de instalar


Box curtir fanpage do Facebook, fácil de instalar


  • Hoje a postagem é curta e simples, duas formas de adicionar box do Facebook.

  • Os códigos para instalar um box para seguir e curtir do Facebook estilo pop up e outras duas formas de adicionar simples e elegante para você adicionar em seu blog.

  • O que seria de nossos blogs sem as redes sociais para divulgarmos nossos artigos, ganhar visibilidade, compartilhamentos e seguidores?


  • O box de curtir e seguir do Facebook é bem útil para a finalidade de atrair compartilhamentos, seguidores e curtidas.

  • Confira como fica o box do Faceboock:


  • Agora vamos ao código, não tem segredo, siga as instruções abaixo:


  • Vá à aba layout do blogger;
  • adicione um gadget, HTML;
  • insira o código do box;
  • salve.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#fbox-background{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#fbox-close{width:100%;height:100%}#fbox-display{background:#fcfffe;border:5px solid #fffafa;width:340px;height:230px;position:absolute;top:32%;left:37%;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}#fbox-button{float:right;cursor:pointer;position:absolute;right:0;top:0}#fbox-button:before{content:"CLOSE";padding:5px 8px;background:#c2946d;color:#eaeaea;font-weight:700;font-size:10px;font-family:Tahoma}#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:5px}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/universoblogueira/ &width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="https://www.universoblogueira.com/2014/12/facebook-popup-like-box-blogger-widget.html" rel="nofollow">UniversoBlogueira</a></div>
</div>
</div>



Outra forma de instalar o plugin do Facebook no blog é indo à página do Facebook developers, além do plugin de página você também tem acesso aos botões para adicionar no blog.




  • Acesse a página de plugins, configure da forma que achar melhor para seu blog e clique em receber código, onde você verá duas opções para a instalação.

  • Como no exemplo abaixo:

exemplo dos códigos para instalação do plugin de página do facebook



  •  Caso sua opção seja pelo primeiro código, o primeiro deve ser incluído acima da tag de fechamento </body> no HTML do seu template, após isso adicione um gadget HTML\Javascript e cole o segundo código e salve. 

  • Troque o endereço da página do Faceboock do Universo Blogueira pela do seu blog, e pronto.


  • Para alterar as cores e deixar combinando com seu tema, consulte a tabela de cores.


  • Aproveite para curtir e compartilhar a página aqui do Universo Blogueira.

  • Dúvidas e sugestões deixe nos comentários abaixo, até breve!

QUERO LER O POST COMPLETO

Como organizar as categorias, tags do Blog e personalizar

 

Organizar e personalizar categorias do blog


  • Marcadores ou categorias e tags do blog, são importantes quanto a organização das postagens e um excelente forma de facilitar o leitor a encontrar o conteúdo que procura.
  • Você sabe qual a diferença entre eles?
  • Como o nome sugere, as tags (etiquetas) são usadas para classificar os assuntos relacionados que podem aparecer nos temas  classificados por categoria. 

  • Categoria dá, o tema e a tag o assunto no mesmo.

  • Os marcadores ou categorias nativo do Blogger são muito simples não dando nenhum destaque a esse gadget.


  • Aqui apresentarei 4 estilos de personalização, podendo alterar cores e alguns outros itens.

  • Pois, além de ficarem mais atrativos e combinarem com o blog, os marcadores, categorias ou tags possuem uma função importante que além de auxiliar a organizar melhor o blog ajuda o leitor a navegar melhor entre os assuntos do seu interesse.

  • Vamos aos códigos e instruções, leia bem siga tudo com atenção todos já foram testados por mim nos temas do Blogger.


  • Os marcadores ou categorias são extremamente importantes para o blog: 
  • Eles ajudam a organização dos assuntos, pois quando um leitor clica em cima do marcador/categoria ele é direcionado para a página contendo todos os assuntos identificados com aquele marcador.
  • Porém, você para usar essa função em benefício do SEO do seu blog dever estar atento à escolha de categorias relevantes para a postagem.

  • Darei um exemplo, você coloca um marcador, dicas, ele é muito abrangente, dicas de quê?
  • Moda, beleza, marketing, etc...
  • Tente não adicionar mais que 16 marcadores.
  • Ficando assim:
  • https://www.universoblogueira.com/search/label/feminino
  • E aparecerá assim: 

exemplo de pagina

  • Então organize seus marcadores por assunto tente não colocar em excesso para não confundir o leitor, na configuração do seu gadget  marque para aparecer só os selecionados por você em cloud  e ordem alfabética o que facilita muito.

  • Agora vamos personalizar os marcadores/categorias deixando eles combinando com o seu blog, eu separei três estilos de personalização diferentes e simples para vocês executarem, ao final da página tem uma tabela de cores para que vocês querendo, possam fazer suas próprias combinações na mesma pagina você também encontra as explicações de como usar o gradiente.

Personalizando marcadores ou categorias 



  • Abra o blog em tema editar HTML e procure por ]]></b:skin> acima dele cole o código escolhido visualize estando correto salve. 
  • Pronto, marcadores/categorias personalizado.
  • Primeiro  (Modelo  gradiente  com borda quadradinho em hover) código:

.Label a{
 background:linear-gradient(ivory,azure,floralwhite);
 padding:4px 8px;
 margin:4px;
 font-family:Pacifico;
 font-size:14pt;
 font-style:bold;
 color:#778899 !important;
 display:block !important;
 text-decoration:none;
border:groove;
border-color:mistyrose;
border-width:6px 6px 6px 8px;
float:left;
}
.Label a:hover{
 background:#fffff3 ;
 color:#dd2c72!important;
}

  • Abaixo dos códigos vou deixar um print para vocês terem uma ideia de como vai ficar os modelos em gradiente:


Modelo 1




  • Segundo (modelo arredondado gradiente em hover) código:

.Label a{
     background:linear-gradient(Pink,lightcyan, Peachpuff);
     padding:4px 8px;
     margin:4px;
     font-family:Pacifico;
     font-size:14pt;
     font-style:bold;
     color:#403c52 !important;
     display:block !important;
     text-decoration:none;
     border-radius:10px;
     border-width:12px 12px 12px 0;
     float:left;
     }
    .Label a:hover{
     background:#ccccff ;
     color:#b0c4de!important;
     }


Modelo 2
modelo arredondado de categorias

  • Terceiro (modelo em caixinhas) código



.Label a{
 background-color:#b37987 ; /*cor do fundo*/
 padding:4px 8px; /* distancia entre as caixas*/
 margin:4px;
font-family:pacifico;/*fonte*/
 font-size:14pt;
font-style:italic;
 color:#fffff3!important; /*cor do texto*/
 display:block !important;
 text-decoration:none;
 border:ridge;6px !important; /*estilo da borda*/
 float:left; }
 .Label a:hover{
 background:#faf0d4;/*cor do fundo ao passar o mousse*/
 color:#b37978!important;}/*cor do texto ao passar o mousse*/



  • Quarto  (modelo etiqueta) código:



.Label a{
 background-color:#ff00ff; /*cor do fundo*/
 padding:4px 8px; /*distancia entre as caixinhas*/
 margin:4px;
font-family:Altura;/*fonte*/
 font-size:14pt;
font-style:italic;
 color:#ffffff!important; /*cor do texto*/
 display:block !important;
 text-decoration:none;
 border:dotted;16px !important; /*estilo das borda*/
 float:left; }
 .Label a:hover{
 background:#fffafc;/*cor do fundo ao passar o mousse*/
 color:#b37978!important;}/* cor do texto ao passar o mousse*/

  • Esses três modelos são simples de colocar testei em vários temas do blogger não tive problema em nenhum, todos ficam em hover ao passar o cursor, você pode trocar as cores se desejar, estou deixando um link com algumas combinações de cores.
  • Aqui você encontra algumas combinações de coresPaleta de Cores   e como usar o gradiente.
  • Por hoje é isso. Gostou do post?
  •  Deixe seu comentário, pedido, querendo peça o tutorial que gostaria de ver, compartilhe espalhe o link por aí isso ajuda o blog a crescer.😉

QUERO LER O POST COMPLETO

Como personalizar o rodapé de créditos do Blog

Como personalizar o rodapé de créditos do Blog


O tema do Blogger é super personalizável, o que nos permite modificar todos os códigos do tema.

Hoje eu trouxe mais uma personalização para seu blog. 

Não há nada mais chato do que customizar todo o template e não poder colocar nosso nome no rodapé, então hoje daremos uma olhada em como deletar a assinatura do Blogger (atribuições), e colocar um crédito rodapé com um design legal e seu nome.

QUERO LER O POST COMPLETO

Páginas numeradas para Blogs, fácil de instalar 4 modelos

 

Páginas numeradas para blogs, fácil de instalar


  • Falando de temas para blogs uma das coisas mais importantes além de um tema responsivo são as páginas numeradas que ajudam a deixar o blog mais organizado.

  • Para quem gosta de personalizar seu próprio tema um dos itens que não podemos deixar  de incluir, eu trouxe quatro estilos de páginas numeradas para vocês usarem podendo personalizar as cores e fonte numérica.
  • Quando configuramos o nosso blog possa definir quantas páginas irão aparecer na “Home”, do blog, assim quando adicionamos numeração as páginas do blog ele fica com um ar mais profissional e organizado.
  • Por padrão o blog possui os links, página inicial, postagens mais recentes, postagens mais antigas ao adicionarmos numeração as páginas o leitor terá mais facilidade e agilidade em navegar dentro do seu blog.

QUERO LER O POST COMPLETO

Perfil da autora com ícones sociais personalizado

Perfil da autora com ícones sociais personalizado



  • Um perfil da autora (o), na lateral (sidebar) do blog é uma boa pedida trazendo a sensação de maior proximidade entre o leitor e quem escreve o blog.

  • Um breve resumo sobre a pessoa que escreve os artigos, seguido pelo objetivo e finalidade, do blog que está visitando. 

  • Finalizando com um “leia mais” ou apenas o sinal (+), para que se desejar siga para se aprofundar na sua página 'sobre'(link da página), acompanhado de suas redes sociais incentivando a interação.

  • Confira como deixar o perfil da autora mais atrativo chamando a atenção de seus leitores. 


  • Você pode variar bastante trocando o formato dos ícones e as cores das personalizações, combinando com seu blog ou seguindo a cor de cada rede social espero que gostem.

  • No blog modelo Any você pode conferir como fica uma das personalizações.



  • Para adicionar o perfil da autora personalizado, no painel do blog vá em layout e adicione um gadget HTML\Javascript insira o código abaixo, título e salve.

  • Simples assim!
  • Código:

<style>
.profile-pic {
text-align: center;
font-size: 14px; /*TAMANHO DA FONTE DO TEXTO*/
}
.profile-pic img {
width: 250px; /*LARGURA DA FOTO*/
height: auto;
opacity:1
}
.profile-pic img:hover {opacity:0.7;
}
#socialmediaiconsside {
font-size: 22px; /*TAMANHO DA FONTE DOS ÍCONES*/
margin: 0;
padding-right: 10px;
text-align: center;
position:relative;
}
#socialmediaiconsside a {
color: #80ced6; /*COR DOS ÍCONES*/
display: inline-block;
line-height: 40px;
padding: 0 5px;
}
#socialmediaiconsside a:hover {
color: #618685; /*COR DOS ÍCONES EM ESTADO HOVER*/
}
</style>

<div class="profile-pic"> 
<img src="sua foto " border="0" alt="profile"/> 
<p align="center">Descrição<a href='link da ´pagina sobre '>(+)</a>
 </p> </div>

<div id="socialmediaiconsside">
<a href="https://www.facebook.com/suapágina " target="_blank"><i class="fa fa-facebook"></i></a>
<a href="https://twitter.com/seunome" target="_blank"><i class="fa fa-twitter"></i></a>
<a href="https://br.pinterest.com/seunome/ " target="_blank"><i class="fa fa-pinterest"></i></a>
<a href="https://www.instagram.com/seunome/ " target="_blank"><i class="fa fa-instagram"></i></a>
<a href="https://www.linkedin.com/seunome" target="_blank"><i class="fa fa-linkedin"></i></a>
<a href="mailto:e-mailcomercial "><i class="fa fa-envelope"></i></a>
</div>

<center>
<div style="display: inline;
width:auto;
background: transparent;
font-family:'Copse';
font-size: 20px;
color: #618685;
padding: 5px 5px;
margin-top: 0px;
text-align: center;">


  • Onde você deve alterar?

font-size: 14px; /*TAMANHO DA FONTE DO TEXTO*/
width: 250px; /*LARGURA DA FOTO*/
font-size: 22px; /*TAMANHO DA FONTE DOS ÍCONES*/ aumente se desejar
color: #80ced6; /*COR DOS ÍCONES*/
color: #618685; /*COR DOS ÍCONES EM ESTADO HOVER*/
color: #80ced6; /*COR DOS ÍCONES*/
color: #618685; /*COR DOS ÍCONES EM ESTADO HOVER*/


  • O Gadget também pode ser personalizado sozinho usando um background para diferenciar dos demais.

  • Código para Gadget personalizado deve ser adicionado acima de ]]></b:skin>:

#ID do gadget{background:linear-gradient(to right,floralwhite,lightcyan,peachpuff);font-family:lobster; /*Fonte do título do Gadget Separado*/text-align:center;color : #708090 /*Cor do título do Gadget Separado*/font-size: 18px; /* Tamanho do título do Gadget Separado */}#ID do gadget a:hover {background:linear-gradient(to top,right,pink,lightcyan);color:ffedff;}


  • Se desejar incluir mais alguma rede social é só acrescentar esse mesmo código trocando o nome da rede social e o ícone.

  • <a href="https://www.facebook.com/páginadoblog/ " target="_blank"><i class="fa fa-facebook"></i></a>

  • Para saber mais como instalar os ícones sociais Font Awesome, para visualizar várias combinações e background para personalizar o Gadget confira a Tabela de cores.

  • Dúvidas sugestões e pedidos deixe nos comentários abaixo, atenderei o mais breve possível.
QUERO LER O POST COMPLETO

Formulário de contato em página estática personalizável


Furmulário de contato em página estática personalizável


  • O formulário de contato é um item essencial em nosso blog, afinal temos como objetivo realizar contatos com marcas e futuros parceiros, clientes para gerarmos renda com nosso blog.

  • Dessa maneira esse item é indispensável ao nosso blog, além de disponibilizar um formulário o mais profissional possível ele deve estar sempre visível no menu facilitando que sejamos encontrados.

  • O template do blog possui um widget de formulário de contato nativo que pode ser customizado, mas a ferramenta estará localizada na barra lateral ou rodapé do blog, o que na minha opinião não torna o blog tão profissional.

  • A boa notícia é que podemos transferi-lo para uma página estática, personalizá-lo e até mesmo incluir nossas informações de contato das redes sociais, deixando tudo bem profissional.

  • Deixarei tudo bem explicado, primeiro como desativar a visualização do formulário na barra lateral (sidebar), depois como inserir na página estática por último personalizar.
  •  
  • Lembre-se sempre de que você instalar algum código novo no blog antes  testar no blog de teste, e realizar um backup antes de instalar no blog oficial, caso algo dê errado.


  • Confira  com ficará o seu formulário, na página abaixo escolhi o segundo modelo. 
 

  • A primeira etapa é abrir o painel do blog, ir ao layout e instalar o widget do formulário de contato.

  • Agora, use ctrl + f e digite o assunto na caixa de pesquisa aberta, personalizar, editar  HTML e digite o seguinte trecho:

]]> </ b: Skin>

  • Cole o seguinte código acima desta observação final:

 

# ContactForm1 {Display: Nenhum! importante;}


  • Salve e volte ao painel página estática, adicione uma nova, nomeie a página, no lado esquerdo do editor de postagem, você verá um clique de lápis para expandi-la, e seu formulário será instalado na visualização escrita de HTML.

  • Bônus três personalizações diferentes para você deixar o formulário combinando com seu layout, confira!


Primeiro modelo de formulário


Demonstração formulário modelo color


<style type="text/css">

  .contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:0}hr{position:relative;height:.75em;border:0;overflow:hidden;margin:0}hr:before{content:"";display:block;position:absolute;top:0;left:0;height:.75em;width:5.1em;background:#C71585;box-shadow:5em 0 0 0 #fffafc,10em 0 0 0 #ff1493,15em 0 0 0 #d09080,20em 0 0 0 #c71585,25em 0 0 0 #d09080,30em 0 0 0 #ff1493,35em 0 0 0 #ff00ff,40em 0 0 0 #c71585,45em 0 0 0 #FDCD78,50em 0 0 0 #ED786F,55em 0 0 0 #D99DBF,60em 0 0 0 #C39EDC}.contactf-name,.contactf-email{float:left;width:49.25%}.contactf-name{margin-right:1.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:25px 0 0;padding:10px;font-size:15px;color:403c52;border-color:#6e688d;border-width:2px 2px 4px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:40px;font-size:15px;color:#fffafc;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.25);background:#de817d;border:0;border-bottom:2px solid #c71585;outline:none;cursor:pointer;-webkit-box-shadow:inset 0 -2px #D4685C;box-shadow:inset 0 -2px #D4685C}.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none !important;box-shadow:none !important;padding:0 !important;height:11px !important;width:11px !important;}

</style>

<div class="widget ContactForm" id="ContactForm22">

  <div class="contact-form-widget">

    <hr />

    <div class="form">

      <form name="contact-form">

        <div class="contactf-name">

          <input class="contact-form-name" id="ContactForm1_contact-form-name" name="Name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}" onfocus="if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Name" />

        </div>

        <div class="contactf-email">

          <input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" onblur="if (this.value == &quot;&quot;) {this.value = &quot;E-mail address&quot;;}" onfocus="if (this.value == &quot;E-mail address&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="E-mail address" />

        </div>

        <div style="clear: both;"></div>

        <div class="contactf-message">

          <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." onblur="if (this.value == &quot;&quot;) {this.value = &quot;Type your message here...&quot;;}" onfocus="if (this.value == &quot;Type your message here...&quot;) {this.value = &quot;&quot;;}" rows="5" type="text" value="Type your message here..."></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send Message" />

          <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div>

          <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form>

    </div>

 </div>

</div>



Segundo modelo de formulário


exemplo do formulário personalizado


<style type="text/css">
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%}.contactf-name,.contactf-email{float:left;width:50%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 15px;padding:10px;font-size:14px;color:#cdc9a5;background:#f7f9f8;border:1px solid #f7f9f8;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.contact-form-name,.contact-form-email{height:33px}.contact-form-email-message{height:130px}.contactf-message{position:relative}.contactf-message:after,.contactf-message:before{border-bottom:50px solid transparent;border-left:80px solid #cdc9a5;bottom:-32px;content:'';position:absolute;right:50%;margin-right:-100px}.contactf-message:before{border-left:80px solid #eee9bf;bottom:-34px;right:50.3%;margin-right:-101px}.cbluebutton{margin-top:25px;width:30%;height:35px;float:right;font-size:15px;color:#fff;display:inline-block;text-align:center;background:linear-gradient(to bottom,#cdc9a5 0%,#eee9bf 100%);box-shadow:0 1px 1px rgba(205, 201, 165);border:0;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.cbluebutton span .contact-form-button-submit{background:linear-gradient(to bottom,#cdc9a5 10%,#eee9bf 80%);font:bold 16px "Helvetica Neue",sans-serif;height:35px;width:100%;color:#FFF;text-shadow:0 1px 1px #f7f9f8;display:inline-block;box-shadow:0 1px 1px rgba(205, 201, 165) inset;cursor:pointer;outline:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;}
</style>
<div class="widget ContactForm" id="ContactForm22">
  <div class="contact-form-widget">
    <hr />
    <div class="form">
      <form name="contact-form">
        <div class="contactf-name">
          <input class="contact-form-name" id="ContactForm1_contact-form-name" name="Name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}" onfocus="if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Name" />
        </div>
        <div class="contactf-email">
          <input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" onblur="if (this.value == &quot;&quot;) {this.value = &quot;E-mail address&quot;;}" onfocus="if (this.value == &quot;E-mail address&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="E-mail address" />
        </div>
        <div style="clear: both;"></div>
        <div class="contactf-message">
          <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." onblur="if (this.value == &quot;&quot;) {this.value = &quot;Type your message here...&quot;;}" onfocus="if (this.value == &quot;Type your message here...&quot;) {this.value = &quot;&quot;;}" rows="5" type="text" value="Type your message here..."></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send Message" />
          <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div>
          <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div>
        </div>
      </form>
    </div>
  </div>
</div>

Terceiro modelo 


modelo simples



<style type="text/css">
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:40px 0}.contactf-name,.contactf-email{float:left;width:48.25%}.contactf-name{margin-right:3.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 20px;padding:10px 15px;font-size:12px;letter-spacing:1px;color:#b5cbcc;background:#f2fcfe;border:medium none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:37px}.contact-form-email-message{height:170px}.contact-form-button-submit,.contact-form-button-submit:hover{width:13%;height:30px;font:normal 12px Arial;letter-spacing:1px;color:#ffffff;display:block;outline:none;margin-bottom:20px;text-align:center;background:#b5cbcc;border:0;cursor:pointer}.contact-form-button-submit:active{outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px !important;width:11px !important;}
</style>


<div class="widget ContactForm" id="ContactForm22">
  <div class="contact-form-widget">
    <hr />
    <div class="form">
      <form name="contact-form">
        <div class="contactf-name">
          <input class="contact-form-name" id="ContactForm1_contact-form-name" name="Name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}" onfocus="if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Name" />
        </div>
        <div class="contactf-email">
          <input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" onblur="if (this.value == &quot;&quot;) {this.value = &quot;E-mail address&quot;;}" onfocus="if (this.value == &quot;E-mail address&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="E-mail address" />
        </div>
        <div style="clear: both;"></div>
        <div class="contactf-message">
          <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." onblur="if (this.value == &quot;&quot;) {this.value = &quot;Type your message here...&quot;;}" onfocus="if (this.value == &quot;Type your message here...&quot;) {this.value = &quot;&quot;;}" rows="5" type="text" value="Type your message here..."></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send Message" />
          <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div>
          <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div>
        </div>
      </form>
    </div>
  </div>
</div>


  • Agora, basta seguir as etapas para definir o formulário de contato de sua escolha.

  • Se você tiver alguma dúvida, deixe  nos comentários e responderei o mais breve possível.

  • Para escolher as cores consultem a tabela de cores.
QUERO LER O POST COMPLETO

Personalizações úteis para Blogs


Personalizações úteis para blogs


  • Ainda não citei aqui o quanto adoro a plataforma Blogger, admito que em alguns aspectos ela tem desvantagens e dá um pouco mais de trabalho em relação ao Wordpress, por exemplo.

  • Mas o fato de poder ter liberdade de personalizar praticamente todo tema, ou construir um tema da forma que imaginamos!

  • É simplesmente excelente.

  • Quando começamos a blogar, nos concentramos em muitas coisas para ter sucesso, nicho, nome do blog, conteúdo para publicar, iniciar técnicas de SEO, divulgação, entre muitas outras coisas.

  • Uma delas é a construção dos títulos do post, que menciono em alguns outros artigos.

  • No entanto, além de adicionar um bom título à sua postagem, você também precisa organizá-los em sua ordem de importância. 

  • Eles são tags de título ou de cabeçalho. 

  • Geralmente são confusos no modelo do Blogger, mas você pode personalizá-los para ver o título h1, h2 e h3 os mais importantes.

  • Nessa postagem mostrarei como personalizar as heading tags que agregam melhorias no SEO, além de destacar melhor suas tags de título.

  • Mostrarei  como configurar e personalizar uma página de erro para o blog, assim evitando que o usuário abandone o mesmo quando não encontrar o link que digitou ou clicou.
  • Também personalizaremos os links que incluímos ao longo dos artigos, para se destacarem entre o texto chamando a atenção do leitor.

  • Conferindo essas  personalizações úteis.


  • Aqui no blog você já encontra a personalização do  como fazer uma página sitemap uma excelente personalização para você incluir no seu blog além de organizar suas postagens proporcionando ao leitor fazer uma busca nos demais artigos do blog, ajuda o Google a indexar mais rapidamente seus posts.

  • Você também encontra as widget de postagens relacionadas para blogger, bem organizados indicando as postagens relacionadas entre si, indica novas leituras que poderão interessar ao leitor, com várias opções para ser personalizado.



A  Importância das Heading Tags


  • As heading tags \ tags de cabeçalho, são usadas como divisores de conteúdo e para diferenciar títulos, subtítulos em grau de importância.
  • Geralmente quando personalizamos o  blog já personalizamos o título das postagens, mas quando inserimos os  títulos, subtítulos, títulos secundários, os H2, H3, H4, para não nos confundirmos (pois, troca sua ordem é muito ruim para a saúde do seu SEO), e também dar um destaque especial a cada um deles.
  • Aproveitando que personalizaremos as headings tags vamos checa-las também usando o SEO REVIEW TOOLS, um ótimo site para checar se estamos usando as headings tags na ordem e quantidade certa, ele é gratuito, é só digitar seu URL no campo e clicar em checar. 
  • As headings são o que os buscadores usam para otimizar os assuntos mais importantes, se alguma dessas marcações for pulada o buscador não entenderá o título e irá em busca da próxima heading tag.
  • Confira como é fácil personalizar:

  • Vamos ao painel do blog em tema, editar HTML abra o painel, e de um ctrl + f  aparecerá a caixa de pesquisa, digite ]]></b:skin>, acima dessa tag cole o código verifique se está tudo certo e salve.

/*----estilos para heading tag h2-------*/.post-body h2 { color:#b0c4de; /* edite cor da fonte */font-family:crafty Girls;/*tipo da fonte*/font-size: 26px;  /* edite tamanho da fonte */}
/*----estilos para heading tag h3-------*/.post-body h3 {  color: #708090; /* edite cor da fonte */font-family:crafty girls;/*tipo de fonte*/font-size: 20px;  /* edite tamanho da fonte */}
/*----estilos para heading tag h4-------*/.post-body h4 {   color:#94a8c5; /* edite cor da fonte */font-family:crafty girls;/*tipo de fonte*/font-size: 16px;   /* edite tamanho da fonte */}

  • Edite o tamanho e tipo  da fonte conforme o que desejar, coloque as cores combinando com seu blog e pronto, suas headings tags estarão personalizadas.

  • Para escolher outra cor consulte a Tabela de cores, como usar background e grayscale  você encontrará cores variadas e seus respectivos códigos.
  • Segunda Personalização Importante.

Personalizando Página de Erro 404


Personalizações úteis para blogs



  • Nada mais chato do que digitar um endereço de uma página ou no próprio blog você se deparar com aquela frase
  • Pagina não encontrada, essa é uma das personalizações muito importante para o SEO do blog, pois ajuda o visitante a se reencontrar o blog a não perder a visita, dando opções de ler outras postagens.
  • Então bora lá, no painel do blog vá em configurações, preferencias de pesquisa, está lá erros e redirecionamentos, página não encontrada, abra a caixa editar e cole o código abaixa, teste digitando uma página que não exista em seu blog.

  • <div id="page">
  • <h1>

  • Página não encontrada</h1>

  • Pedimos desculpa, mas a página que acessou não está mais disponível! Poderá ter sido removida ou alterada.
  • Já verificou na barra de endereço do seu browser de internet se o URL está correto?.
  • Se estiver tudo OK, por que não tentar fazer uma pesquisa em nosso site pelo conteúdo que está procurando?
  • Se não encontrar aquilo que deseja, recomendamos-lhe também alguns dos nossos artigos diversos:
<ul>
<li><a href="LINK DA PÁGINA">TÍTULO DA Página</a></li>
<li><a href="LINK DA PÁGINA">TÍTULO DA PÁGINA</a></li>
<li><a href="LINK DA PÁGINA">TÍTULO DA PÁGINA</a></li>
<li><a href="LINK DA PÁGINA">TÍTULO DA PÁGINA</a></li>
</ul>
Se desejar, poderá também saltar para a nossa <a href="PÁGINA INICIAL">home page</a> ou <a href="http:/SEU BLOG/archives">navegar em nossos arquivos</a>

Se desejar reportar esse erro, <a href="mailto:SEU E-MAIL AQUI">contate-nos</a>, para  podermos resolver. Obrigado!</div><span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space: normal;">
</span></span>


  • Tomando cuidado para não apagar nenhum dos caracteres de funcionamento.
  • Você pode trocar a mensagem, depois coloque o link para as páginas do seu blog que considerar mais relevante e seus títulos, depois o link da página inicial  e o de arquivo do blog, por último não se esqueça de incluir o seu e-mail para contato.
  • O código está bem explicadinho não tem erro.
  • Nossa terceira personalização e muito interessante

Personalizar os links do Blog


Personalizações úteis para blogs




  • Então vamos ao código, que deve ser acima de ]]></b:skin>:

a:link {
color: #ff7fb2;     /* -------- COR DO LINK ----------*/
text-decoration: none;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;
}
a:visited {
color: #ff7fb2;   /*------ COR DOS LINKS VISITADOS -----*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
a:hover {
color: #FF82AB;    /*----- COR DOS LINKS AO PASSAR O MOUSE -----*/
text-decoration:underline;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
  text-decoration:underline;
  color: $(link.hover.color);
 border-bottom: 1px dashed #FF82AB;    /*----- COR DO TRACEJADO -----*/
}


  • Troque as cores conforme a combinação do seu blog, desejando trocar border-bottom você encontrará mais opções em códigos HTML e CSS fáceis para aprender.

  •  Ufa terminou espero que tenham gostado e até a próxima.

  • Não deixem de comentar, compartilhar e dar os créditos caso repostar.

QUERO LER O POST COMPLETO