setembro 2018

Hoje passei algumas horas aqui. Saio um pouco triste, por não ser possível fazer tudo como pretendo, em tão pouco tempo. Pretendia fazer funcionar os comentários e consegui, comenta e responde sem erros. Aconteceu de ser meu template muito antigo(version2) incompatível com os novos códigos. O Blogger diz que não, que funcionam ambos, separados os misturados. Não acreditava antes e agora muito menos, pois depois de atualizar para a versão 3, grande parte dos scripts, gadgets, apps e/ou widgets, deixaram de rodar suas funções. Pelo que percebi até o momento, deletando e reinserindo, resolve, o problema é tempo pra fazer isso.
O ideal seria ter uma informação direta do Blogger, cabe a nós imaginar, que enquanto no WordPress o programa pede para atualizar, aqui devemos adivinhar. Creio que ao atualizar a "skin='1.0.0'" os registros dos widgets no banco de dados se perdem. Da mesma forma imagine que você não usa marcadores, logo não há registro de um gadget do tipo "label" no banco de dados de seu blog, imagine instalar um template novo que possua um lindo gadget de marcadores, você baixa o template, instala e "nada di nada" ou dá erro bx, ou não funciona por não ter registro no banco, mesmo que o código do template esteja exato.
Hummm! Sem querer acabei de explicar um erro bx.
Uma imagem do painel antigo.


De diferente na nova versão, temos o olho que tudo vê, será?


No gadget Google+ observamos que para a "version 1" não tem os ícones do olho e lápis, está escrito editar.

No mesmo gadget do Google+ em sua versão 2, há o ícone do olho e o link para editar é o lápis.
Mais uma imagem, ainda da versão dois, agora com o deslocamento bloqueado, percebe-se a ausência da lista verde escura com os pontinhos.

A mudança maior é claro que está no html e suas novas tags:
<b:widget-settings>
<b:widget-setting name='setting-name'>
<!-- ajuste do valor aqui -->
</b:widget-setting>
</b:widget-settings>

Tem como aprender tudo?
O conteúdo precisa estar "parseado" ou aninhado na tag "CDATA"  ao usar html, assim:
 <b:widget id='HTML321' locked='true' title='teste!' 
type='HTML' version='2' visible='true'>
    <b:widget-settings>
      <b:widget-setting name='content'>
<![CDATA[<span>Estou por aqui!</span>]]></b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <!-- Mostre o título se não estiver vazio -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
 <b:include name='quickedit'/>
</b:includable>
  </b:widget>

Estou ciente de que meu público é pequeno, diante dos 7 bilhões de terráqueos, mas saiba que tenho respeito por você que está lendo agora, então aproveito para lhe pedir desculpas, provavelmente encontrarás algo errado aqui, parado ou ausente, logo voltará ao normal, palavra de escoteiro, rsrsrs.
Qualquer dúvida deixe um comentário. As partes novas estarão com bordas verdes, tracejadas(dashed) em princípio, como as funcionalidades (slider) para mostrar imagens de páginas estáticas, na lateral e a funcionalidade de navegação, com imagem da postagem anterior e próxima(mais recente, mais antiga.
Espero que seja algo útil e que gostem.
[success title="Widget json em páginas Blogger." icon="check-circle"] Com o advento de um novo script construtor verbratechtml, o widget página json foi movido para a o artigo: https://www.verbratec.com.br/2018/03/json-em-paginas-blogger.html [/success]
https://www.bloggerspice.com/2017/03/blogger-layout-widget-update.html

Update rápido 6-02-2019. Localize b:version='2' class='v2' no início do código html.

Adicione a versão três desta forma e salve o tema
b:version='2' class='v2' b:layoutsVersion='3'


Recarregue a página para ver se deu tudo certo.

No seu html estará assim: html b:layoutsVersion='3' b:version='2' class='v2'


Adicione b:defaultwidgetversion='2' depois de b:layoutsVersion='3'


Assim: html b:layoutsVersion='3' b:version='2' b:defaultwidgetversion='2' class='v2' click em salvar tema.


Recarregue a página e confira deverá estar assim:
html b:defaultwidgetversion='2' b:layoutsVersion='3' b:version='2' class='v2'

Vá ao seu painel layout e adicione um gadget para ver a nova versão 2 em ação.


Há quem prefere ver as imagens em movimento, então, "bora ver":



Criar um botão Adicionar ao Blogger facilmente.

Digite ou cole as informações solicitadas e clique no botão criar.


Exemplo: widget Olá Mundo!

Exemplo: https://www.verbratec.com.br

Exemplo: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC9ufwGeXQo5X0AI9naMCPerBtSFOhafu1elIsNtIqsKHpwgnhNcdQAOJvHnpNLjij1ufX1At7XCbmv7kqaunEzMjtidvABDgewcq6OKYPd2JD0gaZa3Wn6ApMg6H9vg5UanjnLk8LgOk4/s1600/CabVerbratec.png





Copie o código e adicione em sua postagem ou página.

[update title="Artigo revisado." icon="info-circle"] Este conteúdo foi editado em 20 de novembro de 2020, esperamos ter todos os artigos revisados em 2021. [/update]
Aquele abraço e até breve!



Mas o que é pager link?
É aquele link ao fim da postagem que geralmente está com: postagens mais recentes, postagens mais antigas.
Tem um meio fácil para mostrar o título da próxima postagem, ou anterior, ali no mesmo local, basta inserir um gadget HTML/javascript com este código:

<style type="text/css">

#blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}
#blog-pager-older-link {font-size:85%;width:200px;text-align:right;}

</style>

<script type="text/javascript">

$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt
});
});

</script>
Salvou está pronto, simples assim.
Pra facilitar ainda mais, use o botão abaixo.







Para um pager-link mais "destacado" mostrando imagem da postagem a ser visitada, veja as dicas desse blog:
https://masternetkom.blogspot.com/2017/06/blogger-post-pager-with-post-title-and.html


Obrigado por sua visita e aquele abraço!



Hoje 4 de setembro de 2018, recebi um e-mail do Facebook, avisando sobre o uso obrigatório de ssl ou como normalmente conhecemos o protocolo https.

Então é do projeto que até 6 de outubro de 2018 todos os aplicativos usem criptografia.
A reprodução da mensagem abaixo:

Hi, Jair,

We 're requiring that all uses of Facebook Login come from pages served over HTTPS by October 6, 2018. All Facebook Login redirects or access tokens must use HTTPS, and insecure access calls will stop working on October 6, 2018.

Be sure to enable HTTPS by this date so that your URLs redirect properly and your app is not affected.

HTTPS helps keep transmitted information private and helps protect the security of people using your app and Facebook Login.If you are currently using HTTP, you can follow these instructions to enable HTTPS.

Visit our Facebook developer blog to learn more:
    https: //developers.facebook.com/blog/post/2018/06/08/enforce-https-facebook-login/.


 Aqui no Blogger é fácil de optar pelo uso do ssl e sem custos, alguns problemas podem surgir, porém em sua maioria, de fácil correção.
 O conteúdo misto é o principal problema encontrado, mas agora com a meta-tag ficou muito mais prático, segundo o pessoal do Facebook.
 tenho uma postagem sobre esse assunto neste url:

https://www.verbratec.com.br/2018/02/https-ssl-no-blogger.html

Testando seu site e corrigindo problemas comuns
Para que uma página seja segura, todas as partes que a compõem devem carregar o HTTPS. Se o seu site não funcionar ou se o navegador estiver exibindo avisos após a instalação do certificado e a configuração do host da Web para suporte a HTTPS, você provavelmente terá conteúdo misto. Isso acontece quando uma página segura tenta carregar coisas inseguras. Por exemplo, em uma página HTTPS, os navegadores exibem um aviso ao carregar mídia como <img src = "http://example.com/test.png"> e bloqueiam completamente os scripts e outros conteúdos ativos carregados de maneira insegura, como < script src = "http://example.com/sdk.js">.

 Existem algumas maneiras de corrigir isso, como usar um script ou uma regra de reconfiguração para atualizar os caminhos de links em seu site. Mas a solução mais fácil é usar o recurso de solicitações inseguras de atualização da Política de segurança de conteúdo.

Você pode fazer isso configurando o seguinte cabeçalho HTTP:

Política de segurança de conteúdo: solicitações inseguras de atualização

Ou adicionando a seguinte tag ao <head> dos seus recursos HTML:

<meta http-equiv = "Política de segurança de conteúdo" content = "upgrade-insecure-requests">
ou melhor; <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

O navegador da Web tentará automaticamente solicitar todos os recursos no documento com segurança. Você ainda deve testar seu site depois de aplicar essa diretiva, caso alguns recursos dos quais você dependa não estejam disponíveis por HTTPS e não carreguem.
A Microsoft fica pra trás como sempre, seu navegador não dá suporte a meta-tag.
Outro detalhe é que não se pode fazer tudo com meta-tags, apenas as primeiras encontradas são corretamente interpretadas, geralmente cinco ou seis, então considere isso.

Se você estiver usando um serviço CDN para atualizar seu site para HTTPS, ele poderá fornecer automaticamente serviços de reconfiguração de links para evitar conteúdo misto e outros problemas. Se a modificação do seu site for difícil para o seu negócio, um serviço de CDN como o SSL de um clique do Cloudflare pode ser uma maneira econômica de implantar o HTTPS com pouca necessidade de conhecimento técnico.
Dúvida? Deixe um comentário.
 Espero que esta postagem seja útil.
Abraço!

Jair de Jesus

Estudante de HTML, CSS, json, Blogger e tal.{picture#https://1.bp.blogspot.com/-nLQAtnyjw9Q/XgewzgENccI/AAAAAAAAFJw/hVY1XC8En2EEMSDsJWk3J4_UTMNDxGR8gCK4BGAYYCw/s35/jair.jpg}{facebook#https://facebook.com/verbratecajuda}{youtube#https://youtube.com/verbratec} {twitter#https://twitter.com/verbratecajuda}

Formulário de contato

Nome

E-mail *

Mensagem *