26 dezembro 2016

12 TUTORIAIS PARA BLOGGER QUE VOCÊ PRECISA TESTAR

TUTORIAIS PARA BLOGGER

Você vai conferir nesse artigo 12 tutoriais para blogger que vão te ajudar a melhorar o design do seu layout.

O manual da blogueira preparou um post recheado de dicas e mini tutoriais para te ajudar a melhorar o design do seu blog. São personalizações simples mas que fazem a diferença em qualquer template. Lembrando que todas são aplicadas somente na plataforma blogger.

1. Mudando o Favicon.
Favicon é a imagem onde fica a logomarca do blogger no topo da página e é muito fácil personaliza-lo. Basta criar uma imagem com o tamanho 180x180 em formato png ou jpeg, ir em layout > favicon em seguida clicar em editar e selecionar a imagem desejada. O favicon demora cerca de dois dias ou mais para aparecer.



2. Removendo o link "Assinar postagens (Atom)"

No painel do blogger vá em modelo > editar html e dentro da caixa de códigos aperte ctrl+f e pesquise pelo trecho abaixo e o delete:

<b:include name=’feedLinks’/>

3. Removendo Attribution "Tecnologia blogger"

Existe duas maneira bem simples de deletar esse link. A primeira é pra você que tem medo de mexer em códigos, por isso basta trocar true por false dentro da caixa de códigos do seu layout e em seguida excluir a attribution. Na segunda maneira basta selecionar o código e apaga-lo. Acompanhe o passo a passo ilustrado na imagem abaixo: 


TUTORIAIS PARA BLOGGER


4. Removendo Navbar

Acesse o painel do blogger, clique em modelo > editar html. Aperte ctrl+f dentro da caixa de códigos do seu layout e pesquise Navbar. Vai aparecer um código semelhante a este:

<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar' version='1' visible='true'>

Para deletar o navbar basta selecionar todo código desde <b:widget … a … </b:widget>. Esses trechos são as partes onde se inicia e termina o código, se faltar uma linha ou se selecionar algo a mais, o tutorial não vai funcionar. Após deletar todo código, visualize o modelo, se estiver tudo ok, salve.


TUTORIAIS PARA BLOGGER


5. "Leia mais" personalizado

TUTORIAIS PARA BLOGGER

Acesse o painel do blogger, clique em modelo > editar html. Aperte ctrl+f dentro da caixa de códigos do seu layout e pesquise por ]]></b:skin>  e acima desse trecho cole o código:

.jump-link {
float: right; /*Escolha para ficar alinhado á direita (right) ou esquerda (left)*/
line-height: 16px; /*Altura da linha, mude de acordo com o tamanho da fonte*/
background: #0D0E0E;
padding: 10px 10px 10px 10px;
margin-top: -18px;
}
.jump-link a {
color: #ffffff;
text-align: center;
font-family: Verdana;
font-size: 16px;
}
.jump-link a:hover {
color: #fafafa;
text-decoration: none;
}

Observação: Lembrando que para o hack funcionar é preciso inserir expansão de postagem que fica na área de edição de postagem do blogger.

6. Blockquote personalizado.


TUTORIAIS PARA BLOGGER

Acesse o painel do blogger, clique em modelo > editar html. Aperte ctrl+f dentro da caixa de códigos do seu layout e pesquise por ]]></b:skin> e acima desse trecho cole o código:

.post blockquote { 
background: #fafafa; /*Altere o fundo como preferir*/ 
border-left:5px solid #F88DE4; /*Altere a cor da borda como preferir*/ 
padding: 5px; 
margin: 10px 20px 10px 20px; 
font-size: 14px;
}

Observação: Lembrando que para o hack funcionar é preciso selecionar o texto e adicionar a citação que fica na área de edição de postagem do blogger.


7. Barra de rolagem colorida.


TUTORIAIS PARA BLOGGER

Acesse o painel do blogger, clique em modelo > editar html. Aperte ctrl+f dentro da caixa de códigos do seu layout e pesquise por ]]></b:skin> e acima desse trecho cole o código:




/*** Rolagem da Vertical da Página ***/

::-webkit-scrollbar-thumb:vertical {
background: #FFADD5; /*Cor da barrinha que se move*/
}
/*** Rolagem da Horizontal da Página***/
::-webkit-scrollbar-thumb:horizontal {
background-color:#FFADD5; /*Cor da barrinha que se move*/
}
/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
width:15px; /*Largura da barra de rolagem*/
background: #ffffff; /*Cor da parte fixa, que fica no mundo*/
}

8. Seleção de texto colorida.


TUTORIAIS PARA BLOGGER


Acesse o painel do blogger, clique em modelo > editar html. Aperte ctrl+f dentro da caixa de códigos do seu layout e pesquise por ]]></b:skin> e acima desse trecho cole o código:

::-moz-selection {
background:#FCD9EA; /*Cor do fundo*/
color:#BCBABB; /*Cor da fonte*/
}
::selection {
background:#FCD9EA;/*Cor do fundo*/
color:#BCBABB; /*Cor da fonte*/
}

9. Personalizando os links das postagens

No painel do blogger, clique em modelo > editar html. Aperte ctrl+f dentro da caixa de códigos do seu layout e pesquise por a:link{ e vai aparecer o seguinte código:



a:link {
text-decoration:underline;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:none;
color: $(link.hover.color);
}


Delete e cole este no lugar:

a:link {
font-family: Arial;
font-size: 14px;text-decoration:none;
color: #FBA9D2;
}
a:visited {
font-family: Arial;
font-size: 14px;text-decoration:none;
color: #FBA9D2;
}
a:hover {
text-decoration:none;
color: #A9FBF1;
}

10. Tooltip personalizado


TUTORIAIS PARA BLOGGER


No painel do blogger, clique em modelo > editar html. Aperte ctrl+f dentro da caixa de códigos do seu layout e pesquise por </head>  cole abaixo dele o seguinte código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'
type='text/javascript'/>
<script language='JavaScript' src='http://yourjavascript.com/1411249631/qTip.js'
type='text/JavaScript'/>


Agora pesquise por ]]></b:skin> e acima dele cole este código:

div#qTip {
padding: 3px; /*Espaço entre a borda e o texto*/
display: none; /*Não mexa*/
background: #FF7BE6; /* Cor de fundo */
color: #ffffff; /*Cor da fonte*/
font-family: Verdana; /*Tipo de fonte*/
font-size: 13px; /*Tamanho da fonte*/
position: absolute; /*Não mexa*/
z-index: 1000; /*Não mexa*/
}

11. Protegendo o blog de cópias

➞ BLOQUEANDO O BOTÃO DIREITO

No painel do blogger, clique em modelo > editar html. Aperte ctrl+f dentro da caixa de códigos do seu layout e pesquise por </head> cole abaixo dele o seguinte código:

<script language='JavaScript'> //Bloqueador de Botão Direito - iceBreaker http://www.icebreaker.com.br/ function clique() {if (event.button==2||event.button==3) {oncontextmenu=&#39;return false&#39;;}} document.onmousedown=clique document.oncontextmenu = new Function(&quot;return false;&quot;) </script>

Em seguida pesquise por <body e adicione o código abaixo depois dele:

oncontextmenu='return false' 

O código deve ficar assim: 

<body oncontextmenu='return false' expr:class='&quot;loading&quot; + data:blog.mobileClass'>

➡ BLOQUEANDO CTRL+C

No painel do blogger, clique em modelo > editar html. Aperte ctrl+f dentro da caixa de códigos do seu layout e pesquise por </head> cole abaixo dele o seguinte código:

<script language='JavaScript'> //Bloqueador de Tecla CTRL - iceBreaker http://www.icebreaker.com.br/ function checartecla (evt) {if (evt.keyCode == &#39;17&#39;) {alert(&quot;Sem copias aqui =)&quot;) return false} return true} </script>

Em seguida pesquise por <body e adicione o código abaixo depois dele:

onkeydown='return checartecla(event)' 

O código deve ficar assim: 

<body onkeydown='return checartecla(event)' expr:class='&quot;loading&quot; + data:blog.mobileClass'>

12. Efeito preto e branco nas imagens ao passar o mouse.


TUTORIAIS PARA BLOGGER

Acesse o painel do blogger, clique em modelo > editar html. Aperte ctrl+f dentro da caixa de códigos do seu layout e pesquise por ]]></b:skin> e acima desse trecho cole o código:

post img {
-webkit-filter: saturate(100%) ;
-webkit-transition-duration: .90s;
}
.post img:hover {
-webkit-filter: saturate(0%);
-webkit-transition-duration: .90s;

}


E se você gostou já sabe o que deve fazer: Compartilhe com os amigos, curta nossa página no facebook e siga o manual em "faça parte" que fica na lateral do blog. Um enorme beijo a até a próxima!

25 comentários:

  1. Uauu.. ameiii
    Parabéns
    Você ajuda muito as blogueiras
    Estou aguardando o seu contato... quero um layout próprio
    cacausilsan@gmail
    Só os Loucos Sentem

    ResponderExcluir
    Respostas
    1. Olá Queila, obrigada! Fico feliz em saber que gostou do post <3 Entrarei em contato com você sim, um grande beijo :*

      Excluir
  2. Amei todos. Voi testar esse de backquote (não sei o que é), os outros já tinha visto, mad você explicou muito melhor!!! Beijos

    https://www.boas-depapo.blogspot.com

    ResponderExcluir
    Respostas
    1. Muito obrigada Boas de papo <3 Depois me conta se seu certo =)

      Bjão :*

      Excluir
  3. Estava procurando o do Blockquote personalizado, muuuito obrigada!
    Tem postagem nova lá no blog, se puder da uma passadinha lá :) https://velhosoutonos1.blogspot.com.br/2016/12/dica-de-loja-internacional-romwe.html

    ResponderExcluir
    Respostas
    1. Eu que agradeço velhos outonos <3 Um grande beijo :*

      Excluir
  4. Respostas
    1. Depois me conta se deu certo Sara =)

      Bjão :*

      Excluir
  5. Deu certo sim! estou usando a seleção de texto colorida e o efeito Pb nas imagens! Amei!
    Beijos 😘 Feliz 2017
    Minhas Inspirações

    ResponderExcluir
    Respostas
    1. Que bom que deu certo Sara! Fico feliz em saber...
      Feliz ano novo 0/\0

      Excluir
  6. Adorei, vou testar todos mais tarde :3
    Boas Festas ♥

    Skull Minds |Twitter |Tumblr | Snap: maisaindia

    ResponderExcluir
  7. Amei as dicas, vou tentar fazer alguns... Deixa eu aproveitar e fazer um pedido rsrs. Faz um tutorial de como adicionar gadget embaixo do cabeçalho, pq no meu não consigo adicionar nada :(

    Beijos, Lorena, feliz ano novo pra vc e sua família <3

    https://nossaquevicio.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Pedido anotado Luana 0/\0

      Bjão e Feliz 2017!!!

      Excluir
  8. salvei sobre o Blockquote. Achei super legal
    Te convido a conhecer meu blog Contagious Conspiracy. Lá eu posto minhas fotografias > http://nataliasapienza.blogspot.com.br/

    ResponderExcluir
  9. Oiie Lorena,Tudo bem?
    Amei as dicas de verdade,já até usei algumas.Agora eu tenho uma duvida sobre o Layout que vc estava ensinando e tudo mais.É que eu gostaria de trocar a fonte do titulo da postagem e do titulo dos gadgets,eu já tentei da maneira simples (pelo personalizar) mas não muda de forma alguma.Vc poderia me ajudar?!
    Beijos amo seu blog.
    Obs:Continue assim,parabéns.
    http://versossimplesblog.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi Duda, tudo ótimo minha linda!!
      Fico feliz em saber que está gostando das dicas. Sobre como trocar a fonte: Ela é trocada em font-family. Primeiro você precisa instalar a fonte no layout e depois acrescentar o nome dela. O Google fonts é um ótimo site pra fazer isso. Grande beijo :*

      Excluir
  10. Olá, tudo bem Lorena?
    Tenho acompanhado seu blog que por sinal é ótimo! Tem me ajudado bastante a personalizar o meu blog.
    Mas tem 2 itens que não consigo corrigir, já testeis algumas formas mas sem resultado positivo.
    Espero que possa me ajudar.
    Ambas as falhas estão na pagina que contém todas as postagens
    "UNDEFINED UNDEFINED, UNDEFINED BY MICHELI FREITAS WITH 0 COMMENTS"
    "Read More"
    Não consigo encontrar o erro.
    Caso queira visualizar, segue o link: www.festamamae.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi Michele, tudo ótimo e você?
      Fico muito feliz em saber que está acompanhando o manual da blogueira <3

      Bom, sobre a sua dúvida eu acho que o UNIDEFINED é referente ao marcador da postagem que você não colocou.

      Já o READ MORE é um link que quebra o seu texto pela metade na página inicial. Para você retira-lo será preciso acessar o painel de códigos, clicar dentro da caixa, em seguida apertar CTRL+F no teclado e dentro da caixinha de pesquisa que vai aparecer, você digita o READ MORE e modifica ou retira o código que faz com que ele funcione. Não basta deletar a frase READ MORE, é preciso deletar o código que sempre começa com uma div.

      Delete o código, visualize e se não tiver erro, salve!
      Espero ter ajudado Micheli <3 Um beijo enorme :*

      Excluir
  11. Amo seus Tutorias me ajudam bastante... Você uma grande inspiração para mim uma Boneca linda!! Conheça meu Blog
    www.girlplanejada.blogspot.com

    ResponderExcluir
    Respostas
    1. Fico muito feliz em saber que você gosta dos tutoriais
      e que sou uma inspiração pra vc... Visitei seu cantinho,
      é um amor <3 Parabéns!

      Excluir
  12. Acabei de fazer todos os passos no meu blog, e deu tudo certinho obrigada!

    ResponderExcluir