Verbratec

Que o ano de 2018 termine com um grande Natal, com boa saúde, com pessoas amigas, que seja divertido e prazeroso.
Adicione ao seu blog Blogger o efeito de fogos de artifício, escreva sua mensagem aos seus amigos, seguidores, leitores e todos os terráqueos!

---

Use o botão abaixo para um caminho mais fácil de adicionar como widget.

---

<!-- Widget Efeito fogos de artifício e neve: Verbratec. Compatível : Gadget Version 1 somente. Fornecido para : Blogger. Tipo : script. URL : https://www.verbratec.com.br/2018/12/feliz-natal-e-um-2019-best.html --> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js'></script> <script type='text/javascript'>//<![CDATA[ (function($){$.fn.snow=function(options){var $flake=$('<div id="flake" />').css({'position':'absolute','top':'-50px'}).html('❄'),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:10,maxSize:20,newOn:500,flakeColor:"#FFFFFF"},options=$.extend({},defaults,options);var interval=setInterval(function(){var startPositionLeft=Math.random()*documentWidth-100,startOpacity=0.5+Math.random(),sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100+Math.random()*200,durationFall=documentHeight*10+Math.random()*5000;$flake.clone().appendTo('body').css({left:startPositionLeft,opacity:startOpacity,'font-size':sizeFlake,color:options.flakeColor}).animate({top:endPositionTop,left:endPositionLeft,opacity:0.2},durationFall,'linear',function(){$(this).remove()});},options.newOn);};})(jQuery);//]]></script><script>$(document).ready( function(){ $.fn.snow({ minSize: 10, maxSize: 50, newOn: 400, flakeColor: '#ffffff' }); });</script> <script type="text/javascript"> var stopafter = 0; var firestop = []; var fire = []; var stdDOM = document.getElementById; var nsDOM = ((navigator.appName.indexOf('Netscape') != -1) && (parseInt(navigator.appVersion) ==4)); function pageWidth() {return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:null;} function pageHeight() {return window.innerHeight != null? window.innerHeight: document.body != null? document.body.clientHeight:null;}function posLeft() {return typeof window.pageXOffset != 'undefined' ? window.pageXOffset:document.documentElement.scrollLeft? document.documentElement.scrollLeft:document.body.scrollLeft? document.body.scrollLeft:0;} function posTop() {return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop?document.body.scrollTop:0;} var hD="0123456789ABCDEF"; function d2h(d) {return hD.substr(d>>>4,1)+hD.substr(d&15,1);} layernum=0; piece = function(parent) {this.elem = null; if(nsDOM) {if(parent == null) this.elem=new Layer(1); else {this.elem=new Layer(1,parent.elem); this.style.visibility = "inherit";} this.parent = parent; this.style = this.elem;} else if (stdDOM) {if(parent == null) this.parent=document.body; else this.parent=parent.elem; this.elem = document.createElement('div'); var xName = "xLayer" + layernum++; this.elem.setAttribute('id', xName); elemc = document.createTextNode('.'); this.elem.appendChild(elemc); this.parent.appendChild(this.elem); this.style = this.elem.style;document.getElementById(xName).style.lineHeight = '3px'; document.getElementById(xName).style.color = '#fff';document.getElementById(xName).style.position = 'absolute';} window[this.elem.id]=this; this.ay = .1; this.type = 0;}; piece.prototype.moveTo = function(x,y) {if(nsDOM) this.elem.moveTo(x,y); else {this.style.left = x+"px"; this.style.top = y+"px";}}; piece.prototype.setC = function(colour) {if(nsDOM) this.elem.bgColor = colour; else this.style.backgroundColor = colour==null?'transparent':colour; }; piece.prototype.fire = function(sx, sy, fw) {var a = Math.random() * Math.PI * 2; switch (fw) {case 1: var s = Math.random() * 2; break; case 2: var s = 2; break; case 3: var s = (Math.PI * 2) - a - Math.random(); break; case 4: var s = a - Math.random(); break; default: var s = Math.random() * 2; if(Math.random() >.6) s = 1.5;} this.dx = s*Math.sin(a); this.dy = s*Math.cos(a) - 2; this.x = sx; this.y = sy; this.moveTo(sx, sy);}; piece.prototype.sCol = function(hex,hex2,cl) {switch (cl) {case 1: this.setC("#" + hex + hex2 + "00"); break; case 2: this.setC("#00" + hex + "00"); break; case 3: this.setC("#00" + hex + hex2); break; case 4: this.setC("#" + hex + "0000"); break; case 5: this.setC("#" + hex + hex + "00"); break; case 6: this.setC("#" + hex + hex + hex); break; case 7: this.setC("#" + hex2 + hex + "00"); break; default: this.setC("#" + hex + hex2 + hex);}}; piece.prototype.animate = function(step,cl) {var colour = (step > 25) ? Math.random()*(380-(step*5)) : 255-(step*4); var hex = d2h(colour-112); if (colour < 112) hex = d2h(colour); this.sCol(d2h(colour),hex,cl); this.dy += this.ay; this.x += this.dx; this.y += this.dy; this.moveTo(this.x, this.y);}; fo = function(numst) {this.id = "fo"+fo.count++;this.sp = new Array(); for(i=0 ; i<numst; i++) {this.sp[i]=new piece(); if(nsDOM){this.sp[i].style.clip.top =0; this.sp[i].style.clip.left = 0; this.sp[i].style.clip.bottom = 3; this.sp[i].style.clip.right = 3;} else this.sp[i].style.clip="rect("+0+" "+3+" "+3+" "+0+")"; this.sp[i].style.visibility = "visible";} this.step = 0; window[this.id]=this; fire.push(this); firestop.push(setInterval("window."+this.id+".animate()", 15));}; fo.count = 0; fo.prototype.animate = function() {if(this.step > 55) this.step = 0; if(this.step == 0) {var x = posLeft() + 50 + (Math.random()*(pageWidth() - 200)); var y = posTop() + 50 + (Math.random()*(pageHeight() - 250)); var fw = Math.floor(Math.random() * 5); this.cl = Math.floor(Math.random() * 8); for(i=0 ; i<this.sp.length ; i++)this.sp[i].fire(x, y, fw);} this.step++; for(i=0 ; i<this.sp.length ; i++) this.sp[i].animate(this.step,this.cl);}; function stopfire() {for(var i = firestop.length - 1; i >= 0; i--) {clearInterval(firestop[i]); for (var j = fire[i].sp.length - 1; j >= 0; j--) {fire[i].sp[j].style.visibility = "hidden";}}} function fireworks() {new fo(50);setTimeout('new fo(50)',750);if (stopafter > 0) {setTimeout('stopfire()',stopafter * 60000);}} window.onload=fireworks; </script>

O Blogger descontinuou o gadget 'Enquete' mas você tem outros recursos, como por exemplo, aqui usamos o formulário do Google para lhe perguntar, que recurso você gostaria de ter aqui nesse blog/site?



Estamos interessados em saber o que você gostaria de encontrar em nosso blog/site, seja código, widget, gadget, função ou recurso. Então colocamos este formulário, sua resposta estará em nosso e-mail e certamente fará a diferença, participe e lembre que um recurso simples pode ajudar muitas pessoas. Abraço e obrigado por sua visita!



Para criar sua enquete acesse: https://docs.google.com/.
Para incorporar a enquete ao seu blog, use a tag iframe, html em uma postagem ou página Blogger.

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

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

---

---

[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.

<!-- Widget Pager Link Fácil : Verbratec. Compatível : Gadget Version 1 e 2. Fornecido para : Blogger. Tipo : script. URL : https://www.verbratec.com.br/2018/09/pager-link-facil.html --> <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>

---

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:



 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!

 Tenho visto tanta coisa por aí na web e algumas me apavoram.
  Costumo nas minhas palestras fazer uso de analogias e sempre acabo comparando com carro. Gente é possível dirigir e apenas dirigir, mas um básico o motorista deve saber; trocar um pneu que furou é uma dessas coisas bem básicas.
  Para blogar não precisa saber html, javascript, css e php, mas sim, o ideal é ter pelo menos uma noção de que parte atua em que parte.
  Sem muitas delongas, para criar um link usamos a tag a do html dessa forma:
  <a href='/p/arquivos.html' alt='Este link leva ao índice de arquivos do blog Verbratec' title='Veja um índice de nossos arquivos do blog Verbratec.'>Verbratec arquivos.</a>

  Podemos usá-lo para verificar se realmente funcionará:
  Verbratec arquivos.

 E para criar um link para uma postagem como fazer?
 No resumo da história, não precisamos usar a url base do blog/site, assim sendo usaremos assim:
<a href='/2018/03/dica-de-contexto-tooltip.html' alt='Veja como criar dica de contexto.' title='Como criar dica de contexto.'>Dica de contexto.</a>

 Agora algo mais interessante, pode-se criar links, para mostrar as postagens de um determinado marcador, usando simplesmente /search/label/Nome do marcador. aqui para o exemplo json. JSON
Também é possível criar para dois marcadores de forma simultânea, por exemplo: marcador widget e o marcador solda pode ser requisitado dessa forma, https://www.verbratec.com.br/search/label/?q=label:widget|label:solda.
No campo de pesquisa também pode-se digitar label:widget|label:solda e o resultado pode ser percebido claramente. Para criar um link para dois marcadores, manualmente seria por exemplo:
[code type="HTML"] <a title='Ver artigos com marcadores widget e solda.' href='/search/label/?q=label:widget|label:solda'> /search/label/?q=label:widget|label:solda</a> [/code]
/search/label/?q=label:widget|label:solda
Temos também a busca por palavra nas postagens e o link pode ser criado com:
   /search?q=solda assim mostra as postagens com a palavra solda.
Experimente o exemplo: Solda.

E sobre pesquisa cabe lembrar de dar uma olhada no arquivo de texto, seu blog mostra pelo link com terminação /robots.txt exemplo aqui: https://www.verbratec.com.br/robots.txt

---

O Blogger também nos permite, fazer uso de um outro blog para um subdomínio, como aqui no exemplo: verbratec.com.br e o blog.verbratec.com.br link: subdomínio Verbratec Blog
Fazendo uso do mesmo modelo de template, o internauta terá a impressão de não ter mudado de lugar.

Os links devem ser digitados manualmente, a forma automatizada do editor Blogger, coloca como host o próprio Blogger, substituindo a url base do seu blog/site como podemos observar na imagem.

Com o encerramento do Google Plus, voltamos a usar o perfil Blogger e aqui está o link para editar esses dados.

Para saber o quanto está usando de espaço no seu armazenamento atual Google One use este link.

Para ver seus álbuns no Google: https://get.google.com/albumarchive/
Para o meu jogo de arquivos Blogger na conta Google Verbratec e outros blogs de teste:https://get.google.com/albumarchive/110876067557608967668/albums/photos-from-blogger

---

Para gerenciar os vídeos Blogger o link é: https://www.blogger.com/video-management.g Fazer download e excluir são as opções disponíveis.

---

Tive a ideia de fazer uma página com os links das imagens, seria uma forma de organizar os arquivos, melhor é que se você gosta de trocar de template, a página estará sempre lá com todos seus links de imagens, tudo certinho. Porém ainda não coloquei isso em prática.
Certamente já observastes que existem links com terminações como view/flipcard também pode experimentá-lo com seu blog ou aqui mesmo:verbratec.com.br/view/flipcard
Isso é uma forma de trocar de layout e tem muitas utilidades, além do visual.
A terminação para smartphones, geralmente é usual ?m=1 então para desktops seria ?m=0, mas já viu por aí a troca com hl? É verdade, uma terminação ?hl=ar experimente ver esse blog/site com essa terminação:https://verbratec.com.br/?hl=ar
Link para administrar os blogs que devem aparecer(ou não) no seu perfil Blogger:Blogger displayed-blogs.
Via get acessa o xml com url-base/sitemap.xml, para o índice quando com muitos artigos use url-base/sitemap.xml?page=1 depois url-base/sitemap.xml?page=2 e assim sucessivamente.
Para ver o xml de páginas estáticas use url-base/sitemap-pages.xml fácil perceber o detalhe /p/ na parte central.

Temos o básico aqui, qualquer dúvida é só comentar, enviar um e-mail, entrar em contato ok?
Abraço!

---

Link para configurar rastreamento de suas próprias visualizações no Blogger:
Url base de seu blog/site mais /b/statsCookieManage?hl=pt-BR
Link do nosso mapa do site: https://www.verbratec.com.br/sitemap.xml
Você pode ver todos os resumos em https://www.verbratec.com.br/p/archive.html
Para ver a árvore de dados json http://www.verbratec.com.br/feeds/posts/default?alt=json copie todo o código e coloque no site http://jsonviewer.stack.hu/ click no botão viewer e obtenha a árvore organizada de forma coerente, meu navegador FireFox faz isso automaticamente.

---

Em 7 de outubro de 2020, testando a inserção de link. Vou colocar aqui um link para o canal Verbratec no YouTube.

Chegando lá deixe seu 'like', neste vídeo de como insere link na postagem Blogger.

Visite o canal e increva-se, estarei fazendo mais vídeos sobre a plataforma Blogger, html, css e assuntos relacionados.

Uma forma mais sofisticada de codificação, nos leva ao uso de 'dica de contexto' e assim podemos ver o vídeo aqui, simples assim.
Veja esse Este é apenas um demostrativo neste vídeo veja como inserir link, na postagem Blogger, interface 2020. mágico!

Mais uma vez, obrigado por sua presença! Obrigado Krika pela sugestão.

Continuando o estudo de json e seu uso aqui no Blogger, hoje veremos mais alguns detalhes, sobre parâmetros de requisições.
Nem sempre o básico será suficiente, então poderemos usar outras opções.
Este é o mais usual, ao qual nos acostumamos:
https://nome-do-blog.blogspot.com/feeds/posts/default ...
No entanto podemos usar três tipos de fluxo, sendo este mais usual o um, temos ainda:
2- https://blogger.com/feeds/ID-do-blog/posts/default ...
3- https://www.googleapis.com/blogger/v3/...
Observamos o url:
https://www.blogger.com/feeds/5239447796149211682/posts/default/?alt=atom-in-script
Também temos: alt=rss-in-script e alt=atom-service, mas iremos usar por enquanto alt-json-in-script.
Para iniciar um estudo usaremos sempre em blog de testes claro, o padrão.
Marcador:
1 - https://www.blogger.com/feeds/BLOG_ID/posts/default?category=LABEL_NAME&alt=json-in-script&callback=extrai
Pesquisa:
2 - https://www.blogger.com/feeds/BLOG_ID/posts/default?q=QUERY_NAME&alt=json-in-script&callback=extrai
Páginas:
3 - https://www.blogger.com/feeds/BLOG_ID/pages/default?alt=json-in-script&callback=extrai
Comentários:
4 - https://www.blogger.com/feeds/BLOG_ID/comments/default?alt=json-in-script&callback=extrai

Então conforme o objetivo, podemos alterar os parâmetros requisitados e observar os resultados, diferentes, por exemplo:
https://www.blogger.com/feeds/5239447796149211682/posts/default?start-index=18&max-results=5&redirect=false&alt=json-in-script&callback=extrai
https://www.verbratec.com.br/feeds/posts/default?start-index=18&max-results=5&redirect=false&alt=json-in-script&callback=extrai
Complicou? Deixe seu comentário!

---

Me desculpe, na imagem está script style, já meio sonolento, é script type, mas agora vou deixar essa imagem. Fique de olho em eventuais erros.

Fluxo de extração de artigos.

---

Leitura sugerida:
https://bloggercode-blogconnexion.blogspot.com.br/2012/10/protocole-data-blogger.html#fil02

---

Sobre limites de fluxo feed Bloger:
Postagens: 1 - 150 https://meublog.blogspot.com/feeds/posts/default?max-results=150&start-index=1
Postagens: 151 - 300 http://meublog.blogspot.com/feeds/posts/default?max-results=150&start-index=151
Postagens: 301 - 450 http://meu.blogspot.com/feeds/posts/default?max-results=150&start-index=301

---

Mostrar postagens mais antigas primeiro.

Escrever sobre curtir no Facebook, me parece relevante, acredito que assim como eu, a maioria gosta de cada curtida recebida, sempre foi e sempre será algo positivo, que incentiva aquele que cria conteúdo a continuar sua caminhada e inovar. Eu confesso que estou só observando, tudo mudou muito rápido e há sempre muitas coisas pra fazer, acabei me perdendo nos identificadores, depois confundi um aplicativo com outro, pois não lembrava mais e ainda não lembro, por isso continua fora do sincronismo ideal, na última tentativa o Facebook pediu o url da página de política de privacidade que ainda não tinha aqui, daí mudei o foco e fui fazer e é assim que é a vida.
Infelizmente não há tempo suficiente para vivermos tudo o que queremos, nos resta então curtir os momentos que temos.
Na oportunidade aqui compartilho o plugin Colorbox que é muito usado para trabalhos com imagens, também usa cookies no controle, de forma que apresenta uma vez só 'aqui', com esse visual bonito e com efeito moderno, se torna prazeroso para o visitante, podendo até levá-lo a dar uma curtida. Se bem que aqui é Brasil e as pessoas olham, usam e muitas vezes nem dizem "obrigado por ajudar".
Então não espere muito desse aparato, se for usar em seu blog/site.
Pelo que tenho notado uma grande parte dos tutoriais está obsoleto e muitos scripts não funcionam mais, assim é está uma boa oportunidade para muitos usuários, fazer uma atualização, pois vou disponibilizar aqui uma séria de códigos, visando essa parte 'atualizar as coisas' com algo útil, bonito, fluído, como json, jquery, css3, html5 e sempre lamentando que o Blogger não suporte php, kkk.
Você deve aceder o link do Colorbox caso queira ver os exemplos de uso.
Após o abraço aquele da despedida, deixarei as duas marcas vermelhas, para facilitar a cópia do código que estará completo entre as elas, numa div name=copie colocarei um localizador dentro e no início, facinho! O principal é trocar o nome da página do Facebook, dá um Ctrl F e busca verbratecajuda deleta e escreve o nome da sua página, simples assim. Claro que pode editar tudo o que desejar, isso é OpenSource, então comemore!
Comemore 20 anos de código aberto A Open Source Initiative (OSI) está comemorando seu 20º aniversário em 2018. O rótulo de código aberto foi criado em uma sessão de 3 de fevereiro de 1998 em Palo Alto, Califórnia. Nesse mesmo mês, o OSI foi fundado. Como uma organização global sem fins lucrativos, o OSI protege e promove software, desenvolvimento e comunidades de código aberto, promovendo a liberdade de software na área de educação, colaboração e infraestrutura, protegendo-se a Código Aberto (Open Source Definition - OSD). e impedindo o abuso dos ideais e do ethos. inerente ao movimento de código aberto.
Para os iniciantes fiz uma imitação de vídeo mostrando o caminho.

Então tá, um abraço e até a próxima!

Hoje vou deixar aqui o css para tooltip, pois muitas vezes é necessário fazer uso dessa janelinha flutuante, para mostrar um detalhe a mais, seja sobre o vocábulo em si ou o contexto geral do projeto.

Confesso que tenho preguiça de fazer uso, mas é bem simples, depois que se tem o css no template do seu blog, basta referenciar a classe e zás a mágica acontece.

Claro que não se coloca qualquer código, tudo precisa ser coerente, para o vídeo por exemplo note que é uma tag responsiva.

Aqui usei a classe toolvbt para não dar problema com outros aplicativos, mas você pode usar qualquer nome de classe que lhe convier.

Para os 'desavisados'; o vídeo tem áudio então melhor verificar o volume de seu dispositivo antes de dar o play. Cabe lembrar também que é algo sensível ao toque, de maneira que se pode usar no smartphone sem problemas, toque no "i" e 'voilá', sua dica de contexto estará ao vivo!

Nosso vídeo Este é apenas um demostrativo de uso de tooltip informações adicionais. Você pode inserir fotos, videos ou simplesmente uma frase a mais para orientar seu discurso.  antigo.

Adicionando css em seu blog/site, com font awesome você faz algo impressionante! Com pouco código.

Nem se quer há necessidade de marcar o código, tal a simplicidade. Insere o css na sua skin tag e depois insere o conteúdo desejado na tag a class='suajanelinha', isso é css3.

Até mais, um abraço!

Prosseguindo nosso estudo e uso de json, vamos mostrar o mesmo widget aqui, com páginas do nosso blog, isso mesmo, o mesmo script com o mesmo css. O que muda é apenas uma palavra; sai posts e entra pages.
Agora já não mais necessitamos de marcas, uma vez que o código, está disponível na postagem anterior.
Bom sempre lembrar de inserir pelo menos uma imagem em cada postagem para que os aplicativos funcionem bem.



E é assim que é!
Em 2020 com o novo construtor, enquanto não resolvo tudo, terei que retirar o código daqui.

---

Leitura sugerida http://www.danpros.com/2013/08/blogger-json-feed-api

Abraço e até mais!

Para 2018 novas postagens sobre os mais diversos assuntos e um deles é o template que deverei trocar em breve, estou trabalhando no projeto, experimentei vários e não gostei de nenhum! Encontrei defeitos em todos, assim como no meu, kkkk.
Tem a minha parte de experimentos que pretendo manter e tem a nova parte em que pretendo compartilhar códigos, então a ideia é, fazer uma postagem com o resultado e fornecer o código dele na mesma postagem, o que ao meu ver é algo inovador, já que a maioria absoluta do que vi até hoje, possui demo em separado e quando muito!
Antes pensei em fazer widgets e aí o Google lançou essa séria de novidades no Blogger, mas mesmo assim, a gente sempre quer algo diferente.
Nos resta estudar muito e fazer o pouco que nos cabe, para obter este resultado diferente.
Claro que a maioria faz apenas copiar e a prova maior disso é quando ocorre algo como o servidor parou, oh! E agora!
Então se você estuda um pouco, logo aprende alguns macetes, que lhe evitam dores na "moringa".
Macete é algo como, um script não precisa estar no servidor "X" ou 'Y', note que script é processado no cliente, então eu posso colocar o script aqui e quando você acessa, seu telefone, ou seu computador irá processá-lo.
Assim sendo eu evito que o servidor x pare de funcionar e deixe minha página em branco, também se fica mais seguro quanto a eventual alteração que possa haver no arquivo.
Hoje vou tentar compartilhar aqui um código de "slider" com imagens claro mas configurável, como dito de início é preciso um conhecimento mínimo de html, javascript e css.
Não é apenas copiar e colar, é ir percebendo o que se coloca onde, css, javascript, html, ora, se o javascript vai colocar algo num elemento html, esse elemento html tem que pré-existir ou você precisa usar o próprio javascript para criar o elemento html.
Vamos ver se funciona então, tudo aqui; css acima, html no meio, o script logo abaixo e por último a chamada da funcão, bem embaixo.
Uns chamam de bug, eu creio que é sacanagem de um programador Blogger, o programa Blogger simplesmente troca javascript void(0). Ah! sacanagem!

Conseguimos? Sim. Talvez muitas pessoas nem imaginam que se pode colocar conteúdos que estamos acostumados a ver na sidebar, em uma postagem, muito menos que dá pra colocar todo o código aqui mesmo, dentro do corpo da postagem.
Um passo a mais foi dado, mas a caminhada é longa!
Você já pode imaginar o que dá pra fazer com json, se é possível clicar no número e ver uma imagem "x" então podemos fazer isso com o resumo e até com a postagem completa.
Já observou como funciona o resumo do blog? Vai lá, dá uma olhadinha.

Para seu estudo e experimento, todo o código do slider está entre as marcas vermelhas e não perde o próximo episódio, adicione este blog à sua lista, clique na estrelinha:
Abraço e até a próxima!