Artigos com "json"

Mostrando postagens com marcador json. Mostrar todas as postagens

Teste imagem Blogger
Teste de postagem de imagem em 21 de agosto 2021, Blogger.


Ainda com alguns erros no código do blog/site, mas com toda a segurança possível.

Muito trabalho por aqui, para que tudo funcione bem. Novas funcionalidades sendo implementadas, encerrando 2020 com uma ótima expectativa para 2021, é preciso fazer acontecer!

O objetivo é atualizar tudo o que for possível. Em cada publicação deverá constar a data da atualização em 2021.

Alguns problemas do Blogger estão sendo contornados no momento, esperamos uma solução definitiva em breve, então farei o meu melhor, dentro das condições, buscando sempre subir mais na escala.


   Este é o local 

Coloque o seu local no mapa!



   Obrigado pela visita!


Exibir mapa ampliado

   Novidades aqui são inseridas desta forma; com cores diferentes e data para que o internauta tenha conhecimento de quanto atualizado está o material do site.
[success title="Atualizando!" icon="check-circle"] Estamos tendo sucesso com o novo script construtor.
Toda atualização constará desta forma: revisado em 12 de julho de 2021.
Obtenha seu template por R$50,00 em português do Brasil, com painel fácil de entender e controlar suas inúmeras funções. [/success]
Veja o template funcionando Blogando com VBT. Imagem ilustrativa do painel de controle administravo de widgets Blogger e funções de um template.

O Blogger muda tudo muito rápido e isso é bom, mas muitos tutoriais deverão ser reeditados já que ficam obsoletos. Qualquer dúvida entre em contacto e terei o maior prazer em ajudar!
   É uma nova web e estamos usando os recursos possibilitando melhores condições para o usuário!

Editado 04-10-2020

Central de Ajuda
ipconfig/flushdns comando cmd Windows limpar DNS

Para ver os videos visite o canal Verbratec no YouTube por favor! Obrigado por sua visita!


[info title="Informação política Google de armazenamento." icon="info-circle"] Agende para não deixar seus serviços inativos. O Glogle só precisa ver sua atuação em: https://drive.google.com/drive/ até 20/jun/2021. Movimente seu Gmail e Google Photos. Não exceda o espaço de armazenamento. [/info]

https://alamcorretor.blogspot.com/

Há coisas que realmente nos tornam cada vez mais curiosos, quando o assunto é codificar alguma função para blog/site usando o Blogger.
Realmente alguns são elaborados, bonitos e funcionais. Existem pessoas que são incríveis no uso das imagens e cores, outras são boas em escrever e alheias ao restante, outras pessoas são fantásticas na criação de funções e há quem confunde tudo e se atrapalha até para o mais básico uso da internet.
Tudo faz parte da normalidade das coisas, eu sou dos que gostam um pouco, sabem uma quantia e me falta escrever mais, tenho muitas histórias, me falta contá-las.
Não lembro com 100% de exatidão, mas acredito que comecei no Blogger em 2011, seguindo as próprias publicações aqui pela data, o fato é que tive outro blog/site antes desse, então com certeza no início da vida desse blog, eu estava já participando ativamente da comunidade Blogger que na época era um fórum de ajuda e tinha mais pessoas ativas que entendiam mais de códigos, ao menos é o que tenho na lembrança.
Até mesmo uma imagem pode dar algum trabalho, ainda agora ao postar essa do widget na área do perfil do autor, no layout Blogger, ocorreu um erro e tive que usar uma ponte, um atalho, a edição de widget, sabemos mudou tem poucos dias, pois o Google quer priorizar os smartphones e eu não gostei dessa limitação de tamanho, mas não tenho poder para mudar isso, kkkk!
Foto do widget na área do perfil do autor, no layout Blogger.

Sempre tentando entender como fazer, tem que aprender html, as regras do xml é a parte mais fácil, depois aprendi como aplicar css e isso também é simples, mas quando cheguei no javascript, json e as aplicações com feed e querendo aprender o codificação Blogger ao mesmo tempo, foi uma loucura.
E hoje eu resolvi abordar esse assunto, pois tem muito para aprender e o retorno é só satisfação de saber e poder ajudar os outros usuários. Mas tem muitos que aprenderam e querem ter um retorno financeiro de qualquer jeito, então eles fazem o que vou mostrar aqui.
Esse é um código apresentado de três formas diferentes.
Primeiro o código totalmente ofuscado, impossibilitando o entendimento do ser humano. [code type='javascript'] var _0x3d1d=["\x24\x28\x4D\x28\x29\x7B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x76\x2E\x41\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x76\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x6B\x2E\x35\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x6B\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x77\x2E\x35\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x77\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x42\x2E\x35\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x4A\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x78\x2E\x35\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x78\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x62\x2E\x35\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x62\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x63\x2E\x64\x2E\x35\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x64\x2D\x63\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x65\x2E\x35\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x65\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x66\x2E\x35\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x66\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x7A\x2E\x35\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x7A\x2D\x70\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x68\x2E\x35\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x68\x2D\x4C\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x6A\x2E\x35\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x6A\x2D\x50\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x6C\x2E\x43\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x6C\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x6D\x2E\x35\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x6D\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x48\x2E\x35\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x49\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x6E\x2E\x35\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x6E\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x6F\x2E\x35\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x6F\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x71\x2E\x35\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x71\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x72\x2E\x35\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x72\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x73\x2E\x35\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x73\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x74\x2E\x44\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x74\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x75\x2E\x35\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x75\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x45\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x46\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x47\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x37\x2D\x38\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x39\x2F\x4B\x2F\x79\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x36\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x39\x2F\x4E\x2F\x79\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x36\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x39\x2E\x4F\x2E\x35\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x36\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x67\x2E\x35\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x37\x2D\x38\x22\x29\x3B\x24\x28\x27\x2E\x34\x2E\x33\x20\x61\x5B\x31\x2A\x3D\x22\x67\x2E\x35\x22\x5D\x20\x69\x27\x29\x2E\x32\x28\x22\x30\x20\x30\x2D\x37\x2D\x38\x22\x29\x7D\x29\x3B","\x7C","\x73\x70\x6C\x69\x74","\x66\x61\x7C\x68\x72\x65\x66\x7C\x61\x64\x64\x43\x6C\x61\x73\x73\x7C\x4C\x69\x6E\x6B\x4C\x69\x73\x74\x7C\x77\x69\x64\x67\x65\x74\x7C\x63\x6F\x6D\x7C\x72\x73\x73\x7C\x73\x68\x6F\x70\x70\x69\x6E\x67\x7C\x63\x61\x72\x74\x7C\x66\x65\x65\x64\x73\x7C\x7C\x66\x6C\x69\x63\x6B\x72\x7C\x70\x6C\x75\x73\x7C\x67\x6F\x6F\x67\x6C\x65\x7C\x69\x6E\x73\x74\x61\x67\x72\x61\x6D\x7C\x6C\x69\x6E\x6B\x65\x64\x69\x6E\x7C\x65\x74\x73\x79\x7C\x76\x69\x6D\x65\x6F\x7C\x7C\x79\x6F\x75\x74\x75\x62\x65\x7C\x66\x61\x63\x65\x62\x6F\x6F\x6B\x7C\x76\x69\x6E\x65\x7C\x73\x6F\x75\x6E\x64\x63\x6C\x6F\x75\x64\x7C\x64\x65\x76\x69\x61\x6E\x74\x61\x72\x74\x7C\x66\x6F\x75\x72\x73\x71\x75\x61\x72\x65\x7C\x7C\x72\x65\x64\x64\x69\x74\x7C\x74\x75\x6D\x62\x6C\x72\x7C\x73\x70\x6F\x74\x69\x66\x79\x7C\x74\x77\x69\x74\x63\x68\x7C\x76\x6B\x7C\x62\x65\x68\x61\x6E\x63\x65\x7C\x74\x77\x69\x74\x74\x65\x72\x7C\x64\x72\x69\x62\x62\x62\x6C\x65\x7C\x64\x65\x66\x61\x75\x6C\x74\x7C\x70\x69\x6E\x74\x65\x72\x65\x73\x74\x7C\x6E\x65\x74\x7C\x62\x6C\x6F\x67\x6C\x6F\x76\x69\x6E\x7C\x63\x6F\x7C\x74\x76\x7C\x6D\x61\x69\x6C\x74\x6F\x7C\x65\x6E\x76\x65\x6C\x6F\x70\x65\x7C\x73\x68\x6F\x70\x7C\x67\x6F\x6F\x64\x72\x65\x61\x64\x73\x7C\x62\x6F\x6F\x6B\x7C\x68\x65\x61\x72\x74\x7C\x70\x6F\x73\x74\x73\x7C\x73\x71\x75\x61\x72\x65\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x63\x6F\x6D\x6D\x65\x6E\x74\x73\x7C\x66\x65\x65\x64\x62\x75\x72\x6E\x65\x72\x7C\x70\x6C\x61\x79","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function(_0xa6a3x1,_0xa6a3x2,_0xa6a3x3,_0xa6a3x4,_0xa6a3x5,_0xa6a3x6){_0xa6a3x5=function(_0xa6a3x3){return (_0xa6a3x3<_0xa6a3x2?_0x3d1d[4]:_0xa6a3x5(parseInt(_0xa6a3x3/_0xa6a3x2)))+((_0xa6a3x3=_0xa6a3x3%_0xa6a3x2)>35?String[_0x3d1d[5]](_0xa6a3x3+29):_0xa6a3x3.toString(36))};if(!_0x3d1d[4][_0x3d1d[6]](/^/,String)){while(_0xa6a3x3--){_0xa6a3x6[_0xa6a3x5(_0xa6a3x3)]=_0xa6a3x4[_0xa6a3x3]||_0xa6a3x5(_0xa6a3x3)};_0xa6a3x4=[function(_0xa6a3x5){return _0xa6a3x6[_0xa6a3x5]}];_0xa6a3x5=function(){return _0x3d1d[7]};_0xa6a3x3=1;};while(_0xa6a3x3--){if(_0xa6a3x4[_0xa6a3x3]){_0xa6a3x1=_0xa6a3x1[_0x3d1d[6]]( new RegExp(_0x3d1d[8]+_0xa6a3x5(_0xa6a3x3)+_0x3d1d[8],_0x3d1d[9]),_0xa6a3x4[_0xa6a3x3])}};return _0xa6a3x1;}(_0x3d1d[0],52,52,_0x3d1d[3][_0x3d1d[2]](_0x3d1d[1]),0,{})); [/code]
Uma segunda versão do mesmo código, ainda difícil de entender o todo, mas já passível de observarmos que se refere ao Instagram, YouTube e tal. [code type='javascript'] var _0x3d1d = ["$(M(){$(\'.4.3 a[1*=\"v.A\"] i\').2(\"0 0-v\");$(\'.4.3 a[1*=\"k.5\"] i\').2(\"0 0-k\");$(\'.4.3 a[1*=\"w.5\"] i\').2(\"0 0-w\");$(\'.4.3 a[1*=\"B.5\"] i\').2(\"0 0-J\");$(\'.4.3 a[1*=\"x.5\"] i\').2(\"0 0-x\");$(\'.4.3 a[1*=\"b.5\"] i\').2(\"0 0-b\");$(\'.4.3 a[1*=\"c.d.5\"] i\').2(\"0 0-d-c\");$(\'.4.3 a[1*=\"e.5\"] i\').2(\"0 0-e\");$(\'.4.3 a[1*=\"f.5\"] i\').2(\"0 0-f\");$(\'.4.3 a[1*=\"z.5\"] i\').2(\"0 0-z-p\");$(\'.4.3 a[1*=\"h.5\"] i\').2(\"0 0-h-L\");$(\'.4.3 a[1*=\"j.5\"] i\').2(\"0 0-j-P\");$(\'.4.3 a[1*=\"l.C\"] i\').2(\"0 0-l\");$(\'.4.3 a[1*=\"m.5\"] i\').2(\"0 0-m\");$(\'.4.3 a[1*=\"H.5\"] i\').2(\"0 0-I\");$(\'.4.3 a[1*=\"n.5\"] i\').2(\"0 0-n\");$(\'.4.3 a[1*=\"o.5\"] i\').2(\"0 0-o\");$(\'.4.3 a[1*=\"q.5\"] i\').2(\"0 0-q\");$(\'.4.3 a[1*=\"r.5\"] i\').2(\"0 0-r\");$(\'.4.3 a[1*=\"s.5\"] i\').2(\"0 0-s\");$(\'.4.3 a[1*=\"t.D\"] i\').2(\"0 0-t\");$(\'.4.3 a[1*=\"u.5\"] i\').2(\"0 0-u\");$(\'.4.3 a[1*=\"E\"] i\').2(\"0 0-F\");$(\'.4.3 a[1*=\"G\"] i\').2(\"0 0-7-8\");$(\'.4.3 a[1*=\"9/K/y\"] i\').2(\"0 0-6\");$(\'.4.3 a[1*=\"9/N/y\"] i\').2(\"0 0-6\");$(\'.4.3 a[1*=\"9.O.5\"] i\').2(\"0 0-6\");$(\'.4.3 a[1*=\"g.5\"] i\').2(\"0 0-7-8\");$(\'.4.3 a[1*=\"g.5\"] i\').2(\"0 0-7-8\")});", "|", "split", "fa|href|addClass|LinkList|widget|com|rss|shopping|cart|feeds||flickr|plus|google|instagram|linkedin|etsy|vimeo||youtube|facebook|vine|soundcloud|deviantart|foursquare||reddit|tumblr|spotify|twitch|vk|behance|twitter|dribbble|default|pinterest|net|bloglovin|co|tv|mailto|envelope|shop|goodreads|book|heart|posts|square|function|comments|feedburner|play", "", "fromCharCode", "replace", "\\w+", "\\b", "g"]; eval(function (_0xa6a3x1, _0xa6a3x2, _0xa6a3x3, _0xa6a3x4, _0xa6a3x5, _0xa6a3x6) { _0xa6a3x5 = function (_0xa6a3x3) { return (_0xa6a3x3 < _0xa6a3x2 ? _0x3d1d[4] : _0xa6a3x5(parseInt(_0xa6a3x3 / _0xa6a3x2))) + ((_0xa6a3x3 = _0xa6a3x3 % _0xa6a3x2) > 35 ? String[_0x3d1d[5]](_0xa6a3x3 + 29) : _0xa6a3x3.toString(36)) }; if (!_0x3d1d[4][_0x3d1d[6]](/^/, String)) { while (_0xa6a3x3--) { _0xa6a3x6[_0xa6a3x5(_0xa6a3x3)] = _0xa6a3x4[_0xa6a3x3] || _0xa6a3x5(_0xa6a3x3) }; _0xa6a3x4 = [function (_0xa6a3x5) { return _0xa6a3x6[_0xa6a3x5] }]; _0xa6a3x5 = function () { return _0x3d1d[7] }; _0xa6a3x3 = 1; }; while (_0xa6a3x3--) { if (_0xa6a3x4[_0xa6a3x3]) { _0xa6a3x1 = _0xa6a3x1[_0x3d1d[6]](new RegExp(_0x3d1d[8] + _0xa6a3x5(_0xa6a3x3) + _0x3d1d[8], _0x3d1d[9]), _0xa6a3x4[_0xa6a3x3]) } }; return _0xa6a3x1; }(_0x3d1d[0], 52, 52, _0x3d1d[3][_0x3d1d[2]](_0x3d1d[1]), 0, {})); [/code]
Na última fase temos a função de uma forma apresentável. [code type='javascript'] $(function(){ $('.widget.LinkList a[href*="behance.net"] i').addClass("fa fa-behance"); $('.widget.LinkList a[href*="facebook.com"] i').addClass("fa fa-facebook"); $('.widget.LinkList a[href*="twitter.com"] i').addClass("fa fa-twitter"); $('.widget.LinkList a[href*="bloglovin.com"] i').addClass("fa fa-heart"); $('.widget.LinkList a[href*="dribbble.com"] i').addClass("fa fa-dribbble"); $('.widget.LinkList a[href*="flickr.com"] i').addClass("fa fa-flickr"); $('.widget.LinkList a[href*="plus.google.com"] i').addClass("fa fa-google-plus"); $('.widget.LinkList a[href*="instagram.com"] i').addClass("fa fa-instagram"); $('.widget.LinkList a[href*="linkedin.com"] i').addClass("fa fa-linkedin"); $('.widget.LinkList a[href*="pinterest.com"] i').addClass("fa fa-pinterest-p"); $('.widget.LinkList a[href*="vimeo.com"] i').addClass("fa fa-vimeo-square"); $('.widget.LinkList a[href*="youtube.com"] i').addClass("fa fa-youtube-play"); $('.widget.LinkList a[href*="vine.co"] i').addClass("fa fa-vine"); $('.widget.LinkList a[href*="soundcloud.com"] i').addClass("fa fa-soundcloud"); $('.widget.LinkList a[href*="goodreads.com"] i').addClass("fa fa-book"); $('.widget.LinkList a[href*="deviantart.com"] i').addClass("fa fa-deviantart"); $('.widget.LinkList a[href*="foursquare.com"] i').addClass("fa fa-foursquare"); $('.widget.LinkList a[href*="reddit.com"] i').addClass("fa fa-reddit"); $('.widget.LinkList a[href*="tumblr.com"] i').addClass("fa fa-tumblr"); $('.widget.LinkList a[href*="spotify.com"] i').addClass("fa fa-spotify"); $('.widget.LinkList a[href*="twitch.tv"] i').addClass("fa fa-twitch"); $('.widget.LinkList a[href*="vk.com"] i').addClass("fa fa-vk"); $('.widget.LinkList a[href*="mailto"] i').addClass("fa fa-envelope"); $('.widget.LinkList a[href*="shop"] i').addClass("fa fa-shopping-cart"); $('.widget.LinkList a[href*="feeds/posts/default"] i').addClass("fa fa-rss"); $('.widget.LinkList a[href*="feeds/comments/default"] i').addClass("fa fa-rss"); $('.widget.LinkList a[href*="feeds.feedburner.com"] i').addClass("fa fa-rss"); $('.widget.LinkList a[href*="etsy.com"] i').addClass("fa fa-shopping-cart"); $('.widget.LinkList a[href*="etsy.com"] i').addClass("fa fa-shopping-cart")}); [/code] Mas é claro que isso é só uma parte das dificuldades do aprendizado, 5 ou 6 linhas acima temos uma referência feeds/posts/default só que cada coisa é uma coisa, então se peço https://www.verbratec.com.br/feeds/posts/default/?alt=json-in-script o programa retornará a função: gdata.io.handleScriptLoaded como se pode observar no início do código.
Se fizer a requisição com https://www.verbratec.com.br/feeds/posts/default/?alt=json já não terei a função gdata.io.handleScriptLoaded. E se lhe aparece algo como:
https://www.verbratec.com.br/feeds/posts/default/-/solda?published-min=2012-03-16T00:00:00&published-max=2020-03-16T00:00:00&orderby=updated&alt=json
Estamos requisitando dados com o marcador solda que tenha sido publicado entre 16/03/2012 a no máximo 16/03/2020 pela ordem de edição(orderby=updated), no formato json, claro que entendemos que o dia começa em zero hora, kkkk!
Tenho nesse blog um perfil que trabalha de forma dinâmica, ou seja, quando altero a imagem da conta Google/Blogger por exemplo, ele automaticamente se altera e mostra a nova imagem. Cito isso apenas para me oportunizar uma amostragem do que me refiro quanto a codificação interna do Blogger, é uma codificação diferente, uma forma digamos que exclusiva do Blogger, vamos ver então o dito código para um perfil dinâmico. [code type='HTML'] <b:widget id='Profile1' locked='false' title='Quem sou eu' type='Profile' visible='true'> <b:widget-settings> <b:widget-setting name='showaboutme'>true</b:widget-setting> <b:widget-setting name='showlocation'>false</b:widget-setting> </b:widget-settings> <b:includable id='main' var='this'> <b:include name='widget-title'/> <b:include name='content'/> </b:includable> <b:includable id='authorProfileImage'> <img class='profile-img' expr:alt='data:messages.myPhoto' expr:height='data:authorPhoto.height' expr:src='data:authorPhoto.image' expr:width='data:authorPhoto.width'/> </b:includable> <b:includable id='content'> <b:if cond='data:team'> <div class='widget-content team'> <b:include name='teamProfile'/> </div> <b:else/> <div class='widget-content individual'> <b:include name='userProfile'/> </div> </b:if> </b:includable> <b:includable id='defaultProfileImage'> <div class='default-avatar'/> </b:includable> <b:includable id='profileImage'> <b:if cond='data:authorPhoto.image'> <b:include name='authorProfileImage'/> <b:else/> <b:include name='defaultProfileImage'/> </b:if> </b:includable> <b:includable id='teamProfile'> <ul> <b:loop values='data:authors' var='author'> <li> <div class='team-member'> <b:include data='author' name='teamProfileLink'/> </div> </li> </b:loop> </ul> </b:includable> <b:includable id='teamProfileLink'> <a class='profile-link g-profile' expr:href='data:userUrl' rel='nofollow'> <b:include name='profileImage'/> <span class='profile-name'><data:display-name/></span> </a> </b:includable> <b:includable id='userGoogleProfile'> <div class='g-follow' data-annotation='bubble' data-height='20' expr:data-href='data:userUrl'/> </b:includable> <b:includable id='userLocation'> <dd class='profile-data location'><data:location/></dd> </b:includable> <b:includable id='userProfile'> <b:include name='userProfileImage'/> <b:include name='userProfileInfo'/> </b:includable> <b:includable id='userProfileData'> <dt class='profile-data'> <b:include name='userProfileLink'/> <b:include cond='data:hasgoogleprofile' name='userGoogleProfile'/> </dt> </b:includable> <b:includable id='userProfileImage'> <a expr:href='data:userUrl' rel='nofollow'> <b:include name='profileImage'/> </a> </b:includable> <b:includable id='userProfileInfo'> <div class='profile-info'> <dl class='profile-datablock'> <b:class cond='data:showlocation and data:location != &quot;&quot;' name='has-location'/> <b:include name='userProfileData'/> <b:include cond='data:showlocation and data:location != &quot;&quot;' name='userLocation'/> <b:include cond='data:aboutme != &quot;&quot;' name='userProfileText'/> </dl> <b:include name='viewProfileLink'/> </div> </b:includable> <b:includable id='userProfileLink'> <a class='profile-link g-profile' expr:href='data:userUrl' rel='author nofollow'> <data:displayname/> </a> </b:includable> <b:includable id='userProfileText'> <dd class='profile-textblock'> <data:aboutme/> </dd> </b:includable> <b:includable id='viewProfileLink'> <a class='profile-link' expr:href='data:userUrl' rel='author nofollow'> <data:messages.viewMyCompleteProfile/> </a> </b:includable> </b:widget> [/code] Esse código Blogger imediatamente acima trabalha em conjunto com aquele da primeira imagem lá "arriba" com funções javascript, o que possibilita essa dinâmica de inserir dados ou alterar de uma maneira bem fácil, por exemplo no widget, aquele da imagem, se retirar a parte Twitter, o link do Twitter aqui no perfil abaixo, irá desaparecer, simples.
E o segredo? Se conto não será mais segredo. É esse teamProfile que possibilita mostrar os dados do autor do artigo, mesmo que um blog tenha várias pessoas trabalhando. Pronto contei. Bah!
Se você gosta da forma dinâmica, confira se seu blog favorito está ativo.
Digite o nome do seu blog favorito abaixo e veja-o na forma dinâmica:

.blogspot.com



Por hoje era isso, na próxima eu conto mais, um abraço e o ensejo de tudo de bom!
Obrigado por visitar está página!

Um template Blogger pode suprir as necessidades iniciais, depois de um tempo a gente quer outras funções, as vezes outro desenho.
Eu vejo muitos casos, em que o internauta sofre para atingir o objetivo. De fato não é algo tão simples, instalar e configurar adequadamente um template. Aqui pretendo compartilhar algumas dicas, de uma maneira geral, por exemplo se tiver uma imagem em cada artigo, todos os templates e aplicativos, gadgets/widgets funcionarão bem, se não tiver imagem, alguns templates terão problema pela falta de tal imagem, então no geral é bom ter uma imagem em cada artigo. Pode ter mais de uma imagem? Sim, sem problema algum, na maioria das vezes os programas irão puxar a primeira imagem do artigo, mesmo que ela não esteja aparente no artigo, para isso pode-se por exemplo usar o estilo display:none em css.
Daí entra o segunda dica, que é ter uma noção básica do html, css e javascript, isso facilitará bastante a vida do internauta que faz uso do Blogger. Entender onde adicionar código, onde se localizam os blocos de código, da pele(skin), do corpo(body), do rodapé(footer), barra lateral(sidebar) e etc.

Outro detalhe que deve ser considerado é a idade do template, geralmente a última versão de um "software" está em teste e é chamada de "beta", isso por conter problemas ainda não resolvidos, significa que o mais novo pode não ser o melhor. Por outro lado não se deve fazer uso de algo muito antigo, com links quebrados de sites que já fecharam as portas e serviços encerrados como o GooglePlus por exemplo.
Um template que está com um ano de vida hoje, tem maiores chances de possuir uma codificação atualizada e com menos problemas para correção.
É quase que impossível estar 100%, pois as coisas mudam muito rápido e se deve considerar que até mesmo grandes sites tem problemas, falhas as vezes pequenas, que passam desapercebidas por muitos, mas que ali estão e para quem é mais detalhista se tornam algo incômodo.
Eu gosto de ver tudo funcionando bem, mas reconheço que nem sempre isso é possível. Tenho um gosto em especial que nem sequer é perceptível ao público, me refiro aqui ao painel administrativo, que é visto apenas pelo Jair, mas que me dá um gostinho quando aparece nas imagens ou nos vídeos, sei que muitos ficam se perguntando, como o painel dele é cheio de tons e gadgets diferentes?

Imagem do painel administrativo layout Blogger Verbratec.

Acredito que a maioria das pessoas, que gostam de blogar, escolhem seus templates apenas pelo desenho, mas tem uns 30% de usuários que gostam de ter funcionalidades à disposição e a tendência é que esse percentual cresça. Para isso os desenvolvedores precisam estar atentos, atualizados e dispostos para atender a demanda.
Penso que há tão pouco disponível, mas de fato não há procura suficiente. O que rege é a lei da oferta e da procura, por isso até hoje, não há suporte ao PHP no Blogger, infelizmente.
Eu dedico algum tempo pesquisando, para poder inovar, mas há alguns "freios" aqui, daí resta escrever algo lamentando a impossibilidade de fazer algo diferente, seguimos usando apenas o feed na alimentação dos gadgets, que já me parecem velhos conhecidos e que por mais criativos que sejamos, possuem as mesmas funcionalidades de anos atrás. Isso é bah!
Para efeitos de estudo e observação, como exemplos de codificação para templates Blogger, poderás acessar essa página.
Os códigos na versão 1 e 2 para um mesmo widget.
Códigos nas versões um e dois para um mesmo widget Blogger.

Por curiosidade, é possível fazer uso de até 999 widgets em um template Blogger, sendo que muitos deles são usados apenas para realizar funções, ficando invisíveis, trabalhando apenas em segundo plano.
Um abraço com o ensejo de um ótimo final de semana e até a próxima!

Gente como é difícil para o leigo, estou bah!


Eu vi no fórum a questão de uma tal dificuldade e fui ver como era, mas foi um tal de isso não dá, isso também não, kkkkkk!

Pra criar a página já não renderizava, daí tive a ideia de publicar sem texto mesmo, ganhei um ponto, aaah!

Lógico que fiz num blog de testes, pois aqui já tem tudo e muito complexo, não cabe nem entrar no assunto. Volto pro "simple" então lembrei que minha filha tem um blog desse "tempo" kkkkkk, fui lá e peguei o código do gadget páginas do Blogger e vim certo que ia fazer em cinco minutos, redondamente enganado. O bom é que ficou divertido de ver como é quando nada dá certo.

Na edição do html em princípio eu nem vi que tinha outra seção com o mesmo identificador, mas uma falha minha é aceitável, deletei a tal "section" e voltei crente no "agora vai" e deu tudo errado, só por esquecimento, onde consigo o identificador de uma página, nesse código antigo, bom, apelei pro feed né, bora lá peguei o idenficador, mas, aconteceu porém de esquecer uma vírgula, então virou uma novela, pois o interpretador do Blogger, te diz tudo, menos que falta uma vírgula.

Na imagem o código, completo mesmo cria a seção(section) o gadget por dentro do html, direto no modelo, é interessante sobretudo para quem está iniciando, criar um blog de testes e praticar isso, criar e ver como funciona a plataforma Blogger.

Pra quem não sabe nada, até dá pra aprender alguma coisa, pra quem já sabe pode se divertir e rir muito!
Depois tudo vira gargalhada, que não resolve chorar, eu espero que seja útil ao menos para uma pessoa, é um mico só meu ou de mim pra você que está lendo, o legal da coisa é que eu poderia deletar o video e fazer outro bem mais rápido, apenas o caminho certo, mas eu gostei do resultado, muito bom pra rir pelo menos!

Enquanto isso esperamos que a engenharia do Google solucione e talvez até venha com algo novo.

Deixe um comentário, me diga se é interessante ver vídeos desse tipo, com a dureza da realidade.

Um abraço e até a próxima!


[ads-post]
Esse vídeo vai render, gargalhadas!

Enquanto eu escrevia aqui, o vídeo estava em upload, mas que bah! O YouTube também está mal das pernas e o vídeo não carrega, 11% em duas horas, vish!

https://www.youtube.com/embed/wttMbRzV4Wc


24 horas depois consegui colocar o código aqui abaixo, este código criará uma seção(section) com o widget de páginas do Blogger, o gadget oficial do Blogger. Escolha o lugar no seu modelo e crie o seu.

Depois de criado o widget, vá para o layout e confira, estando tudo certo volte para o modelo, localize seu widget id='PageList1' e basta adicionar as demais linhas de código para as demais páginas, dentro da tag CDATA, conforme exemplificado abaixo, faz com calma observando todos os detalhes, vírgula, aspas, chaves e etc.

Se já tinha o gadget no seu modelo, ele já está com o css formado, mas se não usava até então, precisa fazer um trabalhinho a mais, colocar o css básico dentro da tag b:skin para melhorar a aparência, vou deixar o código abaixo, mas claro que você pode fazer da sua maneira, isso é só um exemplo.

Ao abrir o layout do Blogger estará na parte inferior a área Menu principal links ao conteúdo. Nela existem quatro gadgets que foram projetados para receber uma quantia enorme de dados, suprindo as necessidades mais diversas.
O que vou fazer aqui é apenas exemplificar uma das muitas maneiras de configurar alguns links, com este construtor.
No topo do blog/site há dois links, um para termos de uso e o outro para política de privacidade, mas é possível inserir outros seguindo o mesmo método, lembrando que eles fazem parte do "Menu principal" enquanto em telas menores, como smartphones e tablets. Tudo será demostrado no vídeo.
Eu busquei deixar todos mais ou menos na mesma dimensão, então para o gadget Marcadores, selecionei apenas quatro itens: blogger, facebook, json e solda.
Para o segundo gadget, que também é criado automaticamente, na instalação do template, entitulado "Páginas", eu colocarei os links para as páginas que no Blogger chamamos de estáticas, escolhi deixar os seguintes links: configuração, ferramentas, política de privacidade, mapa do site, sobre e termos.
Esses links são introduzidos da forma tradicional, nome do link e url de destino, uma lista de links simples.
O terceiro gadget colocarei um link externo e uma imagem, e o quarto gadget não vou usar nesse momento.


O gadget Menu principal é um gadget do tipo lista de links, apenas trabalhará de uma forma um pouco diferente da tradicional, ficará bem nítido isso no vídeo. Farei minha lista da seguinte forma, lembrando que isso é apenas um exemplo.

Configuração básica do menu principal do template verbratec.
Será quase como aparece na imagem, isso por ter que criar e depois de criado, tem que voltar e editar. Já vi em alguns lugares e me conformo de não estar só na busca pela resolução do problema, o que ocorre é que se deixar chaves ou colchetes, que são usados na criação, eles irão aperecer onde não devem, como ocorreu no Facebook.
Colchetes no Facebook.
Também aconteceu no GMail, esses colchetes não deveriam aparecer ali.
Colchetes no Gmail.
Percebi o problema na pesquisa do Google e até o presente momento não tenho a solução, tudo o que posso fazer é criar com os colchetes, pois o construtor lê o que está aninhado ali, depois edito e retiro os colchetes uma vez que os dados já estarão armazenados. Creio que já deu pra entender o básico da rotina.


Bora pro vídeo então...
[youtube src="FhoPi_8CyoM"][/youtube]

Com certeza muitos dos que aqui chegarem, já conhecem tudo isso e muito mais, eu porém espero é que isso seja útil para aqueles que ainda não sabem como funciona e muitas vezes, compram templates sofisticados mas sem uma documentação edequada, acabam deixando de fazer um melhor uso do software, que dá tanto trabalho ao desenvolvedor.

Anti - caçador curioso de baleia!

Um forte abraço e o meu obrigado por sua presença aqui! Pense em dar aquela curtida para incentivar esse trabalho.

A navegação mais usada no Blogger é aquela que pega o arquivo do lado, como todos sabemos o Blogger usa data para organizar os arquivos, então de um lado há algo mais novo, de outro algo mais antigo.
O fato é que essa navegação fica bem interessante quando capturamos a imagem, desses dois arquivos e apresentamos como links no final da postagens, podendo mostrar ou não o título desses mesmos arquivos.
Para quem usa o template "simples" padrão do Blogger é até fácil de fazer as alterações necessárias, com uma boa internet e um pouco de paciência, lembrando que sempre se deve fazer a cópia do template antes de iniciar o procedimento, para que se possa retroceder sem prejuízos caso algo falhe.
Eu sempre usava um tutorial como guia passo a passo, mas infelizmente o autor resolveu retirar, o blog dele agora é fechado, com conteúdo adulto. Por isso vou tentar reproduzir aqui, mais pra me servir de guia no futuro, mas poderá lhe ser útil também.
De primeira posso prometer que, estou ajustando o script principal, o qual interfere em todas as funções do blog/site e portanto deixarei no final dessa postagem o parecer atual, erro, manutenção e sucesso serão as alternativas. Na tentiva de uma melhor condição, vou marcar essa postagem como completa, assim ocultando a coluna lateral, me parece que fica um visual mais aprazível de trabalhar e facilita a concentração no objetivo.
Acima dos comentários, ou abaixo? Mostrar para telefones ou não? Claro que se deve usar condicional Blogger para renderizar apenas nas postagens itens. Para mim o maior problema, kkkk, que fique funcional em tudo.
A pré visualização do Blogger não mostra imagem, então vou ter que publicar para ver como está ficando, vish! Blogger Ki-Bah!

Vou colocar no cabeçalho, acima da tag de fechamento o seguinte código:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.halaman-kanan,.halaman-kiri{transition:all .3s ease-in-out}
.halaman{margin:0;padding:0;min-height:170px;height:auto}
.halaman-kanan,.halaman-kiri{color:#666;position:relative;background:#000;background:rgba(0,0,0,.6);width:50%;min-height:170px;-moz-box-sizing:border-box;margin:0}
.halaman-kiri{height:auto;float:right;padding:20px 40px 20px 10px;text-align:right;box-sizing:border-box}
.halaman-kanan,.halaman-kiri{-webkit-box-sizing:border-box}
.halaman-kanan{height:auto;float:left;padding:20px 10px 20px 40px;text-align:left;box-sizing:border-box}
.current-pageright,.current-pageleft,.halaman-kanan a,.halaman-kiri a{font-size:16px;font-weight:bold;background:0 0;text-decoration:none;line-height:1.1}
.halaman-kanan a,.halaman-kiri a,.current-pageright,.current-pageleft{color:#fff;}
#blog-pager,.isihalaman-kanan,.isihalaman-kiri{margin:0!important}
.panahkanan,.panahkiri,.halaman-kiri a div:before,.halaman-kanan a div:before{position:absolute;top:50%;margin-top:-8px;font-size:18px!important;}
.panahkiri,.halaman-kiri a div:before{right:10px}
.panahkanan,.halaman-kanan a div:before{left:10px}
.halaman-kanan a:hover,.halaman-kiri a:hover{text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}
.isihalaman-kanan img,.isihalaman-kiri img{position:absolute;top:0;width:100%;height:100%;z-index:1}
.isihalaman-kanan img{left:0}
.isihalaman-kiri img{right:0}
.halaman-kiri a div, .halaman-kanan a div,.current-pageright,.current-pageleft {position: absolute;bottom: 10px;z-index: 3;width: 100%;padding:0 10px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.halaman-kiri a div,.current-pageright{right:0;padding-right:40px;}
.halaman-kiri a div:before{content:'\f054';font-family: FontAwesome;}
.halaman-kanan a div,.current-pageleft  {left:0;padding-left:40px}
.halaman-kanan a div:before{content:'\f053';font-family: FontAwesome;}
.halaman-kiri a div h6,.halaman-kanan a div h6,.pager-title-right{font-weight:light}
.blog-pager-newer-link:after,.blog-pager-older-link:after{content:"";position:absolute;top:0;right:0;left:0;bottom:0;z-index:2;background:-moz-linear-gradient(top,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);background:-webkit-linear-gradient(top,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);background:linear-gradient(to bottom,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#003f474e', endColorstr='#a63f474e', GradientType=0 );transition:all .4s ease-in-out}
.halaman-kanan a:hover:after,.halaman-kiri a:hover:after{opacity:0}
@media screen and (max-width:414px){.halaman-kiri,.halaman-kanan{width:100%;}
}
/*]]>*/
</style>
</b:if>

Bueno! CSS adicionado, segundo o tradutor halaman-kiri é página esquerda, optei por deixar conforme encontrei, se for sua vontade traduzir, sinta-se livre.
Agora vou lá no final do código do modelo e insiro o script, antes de fechar o corpo do documento, lógico:

 <script type="text/javascript">
//<![CDATA[
(function ($) { var newerLink = $('a.blog-pager-newer-link'); var olderLink = $('a.blog-pager-older-link');
$.get(newerLink.attr('href'), function (data) { var thumb = $(data)
.find('.post-body')
.length == 1 ? "<img alt='" + $(data)
.find('.post-title')
.text() + "' src='" + $(data)
.find('.post-body img:first').attr('src', function(i, src) {return src.replace(/.*?:\/\//g , "//").replace( 's1600', 's386' );})
.attr('src') + "' class='pager-thumb' width='386' height='170'/>" : "";
newerLink.html(thumb + '<div><h6>Próximo</h6><h5>' + $(data)
.find('.post-title')
.text() + '</h5></div>') }, "html");
$.get(olderLink.attr('href'), function (data2) { var thumb2 = $(data2)
.find('.post-body')
.length == 1 ? "<img alt='" + $(data2)
.find('.post-title')
.text() + "' src='" + $(data2)
.find('.post-body img:first').attr('src', function(i, src) {return src.replace(/.*?:\/\//g , "//").replace( 's1600', 's386' );})
.attr('src') + "' class='pager-thumb' width='386' height='170'/>" : "";
olderLink.html(thumb2 + '<div><h6>Próximo</h6><h5>' + $(data2)
.find('.post-title')
.text() + '</h5></div>') }, "html") })(jQuery);
//]]>
</script>

Ir até:
  <b:includable id='nextprev'>...</b:includable>
  
E substituir por este código:
 <b:includable id='nav-post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='halaman'>
<div class='blog-pager' id='blog-pager'>
<div class='halaman-kiri'>
<div class='isihalaman-kiri'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#171;Próximo artigo</a>
</span>
<b:else/>
<span class='current-pageright'><i class='fa fa-chevron-right panahkiri'/><span class='pager-title-right'>Próximo</span><br/>Este é o artigo mais recente.</span>
</b:if>
<div class='clear'/>
</div>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Artigo anterior&#187;</a>
</span>
<b:else/>
<span class='current-pageleft'><i class='fa fa-chevron-left panahkanan'/><span class='pager-title-right'>Anterior</span><br/>Este é o último artigo.</span>
</b:if>
<div class='clear'/>
</div>
</div>
</div>
<div class='clear'/>
</div>
</b:if>
</b:includable>
<b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<div class='mobile-link-button' id='blog-pager-home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a>
</div>
<div class='mobile-desktop-link'>
<a class='home-link' expr:href='data:desktopLinkUrl' expr:title='data:homeMsg'><data:desktopLinkMsg/></a>
</div>
</div>
</b:if>
<div class='clear'/>
</b:includable>
 
Terminando!
Pra finalizar coloco o include abaixo do artigo, essa parte varia bastente de um template para outro.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nav-post'/>
</b:if>
Para um exemplo simples, dentro da includable post e abaixo do artigo:
 
 <b:includable id='post' var='post'>
<article class='post hentry'.............
..........
..........
..........
</article>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nav-post'/>
</b:if>
</b:includable>
  
[success title="Success message" icon="check-circle"] Tivemos sucesso aqui, sim, mas em partes. [/success] O trabalho continua, abraço e até a próxima! Obrigado por sua presença, o código usado aqui abaixo é o desta postagem, levemente modificado, mas com a mesma lógica.
Se seu template tiver uma codificação mais nova coloque apenas a linha include name nave-post para isSingleItem como na imagem abaixo.

[full-post]

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.

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!

Segunda parte do estudo de json, formas de usos no Blogger.
Nessa parte vamos ver, segundo a tradução, como liga de volta: "callback".
Eu quero que ligue de volta numa função javascript, posso dar qualquer nome para essa função, por exemplo "vbtlist" como que 'listando verbratec' e no script fica assim:
<script src="https://www.verbratec.com.br/feeds/posts/default?alt=json-in-script&amp;callback=vbtlist" type="text/javascript">    
</script>

E você é esperto e acaba de perceber que a forma de chamada é a mesma que usamos para requisitar o uso de uma biblioteca "JQuery" ou "FontAwesome" por exemplo, ou seja, tudo muito simples, quando entendemos como funciona.

 Agora vamos escrever o script do tipo javascript:

<script type="text/javascript">      
function vbtlist(json) {       
for (var i = 0; i < json.feed.entry.length; i++)       
{       
var TotalPosts = json.feed.openSearch$totalResults.$t;       
  }

    var listing = "Total = " +TotalPosts+ " Posts" ;       
document.write(listing);       
}       
</script>
Então juntando as duas partes, temos abaixo o resultado em verde.




Como pode perceber, se você usa F12 no FireFox por exemplo, observa o resultado do script, como vemos na imagem.


Prosseguindo com o estudo, temos:
https://www.meublog.blogspot.com.br/feeds/posts/default?alt=json-in-script&callback=minhaFunctionJs
E então adicionamos mais parâmetros:
https://www.meublog.blogspot.com.br/feeds/posts/default?alt=json-in-script&callback=minhaFunctionJs&max-results=1000&start-index=1
E max-results e start-index, como você deve saber, instruem a plataforma Blogger a retornar um número máximo de feeds de 1000 (neste exemplo de URL), a partir do primeiro feed disponível ordenado pelo último publicado. Nos vários exemplos sobre o mesmo tópico, você pode encontrar praticamente todos os valores máximos para um número como 999999 para ter todos os feeds retornados em uma chamada. No entanto, googling ao redor, parece que há o suspeito Google definir um limite máximo de feeds é possível entrar em uma única chamada. Como de costume, esse limite "oficial" é indocumentado do que, apenas para evitar problemas, neste exemplo, vou escolher extrair os feeds com etapas de 1000, você pode aumentar esse valor se quiser. Fonte completa de código javascript:
 
<script type="text/javascript">
    var StartIndex = 1;
    var MaxResults = 1000;
   function minhaFunctionJs(BlogData) {
        var Feed, i;
     for (Feed = BlogData.feed, i = 0; i < Feed.entry.length; i++) {
            var PostUrl, ImgUrl, Entry, Content, Title, x;
            Entry = Feed.entry[i];
            Content = Feed.entry[i].content.$t;
            Title = Feed.entry[i].title.$t;
            ImgUrl = PostUrl = '';
            if (typeof Feed.entry[i].media$thumbnail !== 'undefined') {
            ImgUrl = Feed.entry[i].media$thumbnail.url;
            }
           for (x = 0; x < Entry.link.length; x++) {
                if (Entry.link[x].rel == 'alternate') {
                    PostUrl = Entry.link[x].href;
                    break;
                }
            }
            // Aqui você tem todos os dados básicos do post, use como quiser   
        }
        if (i < MaxResults) {
            //Todos os feeds foram extraídos
        } else {
            var ScriptObj = document.createElement('script');

            var FeedsUrl = 'https://www.meublog.blogspot.com.br/feeds/posts/

default?alt=json-in-script&callback=minhaFunctionJs&max-results=' + MaxResults + 

'&start-index=';
            StartIndex = (StartIndex + MaxResults);
           ScriptObj.src = (FeedsUrl + StartIndex);
            document.body.appendChild(ScriptObj);
        }
    }
    function StartFeedsExtraction() {
        var ScriptObj = document.createElement('script');

        var FeedsUrl = 'https://www.meublog.blogspot.com.br/feeds/posts/

default?alt=json-in-script&callback=minhaFunctionJs&max-results=' + MaxResults +

 '&start-index=';
ScriptObj.src = (FeedsUrl + StartIndex);
        document.body.appendChild(ScriptObj); }
</script>
<script type="text/javascript">
    StartFeedsExtraction();
</script>


Esta chamada inicia o processo de extração de feeds. Basicamente, ele insere dinamicamente uma chamada em um URL formatado para obter os feeds do blog. Depois que o processo foi iniciado corretamente, o minhaFunctionJs() foi chamado automaticamente com o intervalo de dados dos feeds solicitados. O primeiro ciclo extrai as informações básicas do post, como conteúdo, título, URL do post e URL da imagem (se a imagem estiver presente, geralmente é a primeira imagem do post). Se você precisar de mais dados, examine a estrutura da árvore de postagens conforme descrito acima e leia as informações adicionais que deseja. A segunda condição if (i < MaxResults) verifica se todos os feeds foram extraídos. Como pedimos um número máximo de feeds de MaxResults (isto é, 1000 no nosso exemplo), se o número de feeds retornado não for menor para esse valor, provavelmente significa que há feeds adicionais disponíveis. Nesse caso, repita a operação para solicitar dinamicamente novos feeds aumentando o índice inicial para o próximo intervalo. Caso seja menor, significa que todos os feeds foram extraídos e a operação pode ser concluída.
Observe que a mesma operação pode ser feita extraindo feeds conectados apenas a alguns marcadores. Bastará alterar o URL assim:
https://www.meublog.blogspot.com/feeds/posts/default/-/meuMarcador/?alt=json-in-script&callback=minhaFunctionJs

Abraço e até a próxima!
Este estudo se guia pela publicação do Mohammad Mustafa Ahmedza em https://www.mybloggertricks.com/2015/10/introduction-to-blogger-json-feeds-and-blogger-data-api.html
Mohammad começou a blogar em agosto de 2008 logo após completar seu GCE A Level. Após uma desqualificação do visto dos EUA para estudos superiores, ele começou a escrever blogs para se livrar da crescente depressão e, em seguida, sua vida mudou drasticamente. Ele começou a ter interesse em ajustar os Modelos do Blogger ao ler detalhadamente artigos on-line. Sua sede de aprender e entender as últimas tecnologias da web, como HTML4, CSS3, PHP e JavaScript, o equipou com uma excelente arte de web design. Ele agora é um web designer e desenvolvedor web por todos os direitos sem ter feito qualquer treinamento profissional.

  Pensando em desenvolver seu próprio template, com seus widgets específicos, com aquelas funções que, só você teve a ideia exclusiva e não sabe por onde começar! Comece com json apiv3 Blogger. Você vai ficar muito contente com o que vai descobrir e fazer em seu blog.
API - Application Package Interface é o meio de comunicação para aplicativos permite interagir uns com os outros. Desenvolvedores de um aplicativo fornecem APIs para que outros desenvolvedores criem aplicativos e interajam com os seus próprios. Da mesma forma, a equipe do Blogger criou uma API própria(apiv3), que permite aos desenvolvedores externos interagir com o sistema de gerenciamento de conteúdo do Blogger.
Abra este link para ver de onde virão os dados de nosso blog aqui:
https://www.verbratec.com.br/feeds/posts/default?alt=json Você precisa saber um pouco de html, css e javascript para seguir em frente. Não é necessário um know-how avançado e você não precisa ser um programador qualificado para entender os conceitos. Vamos tentar o nosso melhor para tornar o mais fácil possível, nosso estudo aqui.
Você poderá criar seus widgets de comentários, galeria com imagens de seus posts, widgets resumos de postagens e muito mais. O céu é o limite.

JSON - JavaScript Object Notation é um formato leve de intercâmbio de dados fácil para humanos ler e escrever. É fácil para as máquinas analisar e gerar. Ele permite que o navegador interaja facilmente com seu servidor de blog e obtenha dados muito mais rápidos em comparação com o XML, que é muito mais lento neste caso.
O objeto feed é onde todos os dados do seu blog são armazenados como mostrado na imagem.
Tudo está dentro das chaves{}.
Observe o objeto title nome da variável $t: valor Verbratec.
Entre conchetes estão as arrays


Novatos como eu muitas vezes confundem o Blogger JSON API, com o Blogger JSON Feeds. Os feeds JSON são arquivos simples usados ​​para armazenar e/ou trocar dados, enquanto a JSON API é uma Interface de Pacote de Aplicativos que permite interagir com outras aplicações de terceiros.

Caso seu navegador não mostre json como vimos na imagem(árvore de dados), você pode acessar o site https://codebeautify.org/jsonviewer para ver sua árvore de dados.



Então temos na árvore de dados, os objetos entre chaves e arrays entre conchetes, agora vamos ver a lista:
 {}id - único identificador em cada postagem.
 {}published - data da publicação da postagem.
 {}update - data da última edição.
 {}category - mostra os marcadores da postagem
 {}title - mostra o texto título da postagem

Algumas coisas como por exemplo, openSearch$itemsPerPage dependem das configurações internas feitas no seu blog, eu configurei o meu blog para mostrar 50 postagens, os valores usuais são 10, 25, 50 e 100.
Já observei que no painel do Blogger a contagem inclui as postagens em rascunho.
Todos os dados das postagens estão em https://www.verbratec.com.br/feeds/posts/default?alt=json
Todos os comentários logicamente em https://www.verbratec.com.br/feeds/comments/default?alt=json
Então as páginas estáticas estarão em https://www.verbratec.com.br/feeds/pages/default?alt=json

Se você é como eu, gosta de aventura e copiar códigos de scripts como "slides", e já deve ter reparado nessa linha:
https://blogname.blogspot.com/feeds/posts/default?alt=json-in-script&callback=myFunc
Pessoas mais preguiçosas nem se dão ao trabalho de explorar e estudar, apenas copiam e usam, trocam o nome do blog e algumas nem isso fazem, claro que não funciona e vão reclamar, kkkkk.
Essa linha de código veio de onde afinal? Sim é a primeira linha das amostras, veja só: https://developers.google.com/gdata/samples/blogger_sample
Aproveita e dá uma boa olhada, mas volta hein!
Voltou que legal!
Como vimos json-in-script diz algo diferente ao Blogger, ou seja o Blogger devolve de de forma diferente as requisições feeds/posts/default?alt=json e feeds/posts/default?alt=json-in-script
Quando usamos json-in-script dizemos ao Blogger que queremos usar javascript e então obtemos uma função chamada: gdata.io.handleScriptLoaded.
Se você não percebeu isso, ainda está em tempo, abra os próximos dois links e observe o início da primeira linha de código retornada; link 1 com alt=json
Link 2 com alt=json-in-script e nossa função gdata.io.handleScriptLoaded como resultado.
Na próxima etapa vamos ver como javascript pega os dados.

Abraço e até a próxima!
Este estudo se guia pela publicação do Mohammad Mustafa Ahmedza em https://www.mybloggertricks.com/2015/10/introduction-to-blogger-json-feeds-and-blogger-data-api.html
Mohammad começou a blogar em agosto de 2008 logo após completar seu GCE A Level. Após uma desqualificação do visto dos EUA para estudos superiores, ele começou a escrever blogs para se livrar da crescente depressão e, em seguida, sua vida mudou drasticamente. Ele começou a ter interesse em ajustar os Modelos do Blogger ao ler detalhadamente artigos on-line. Sua sede de aprender e entender as últimas tecnologias da web, como HTML4, CSS3, PHP e JavaScript, o equipou com uma excelente arte de web design. Ele agora é um web designer e desenvolvedor web por todos os direitos sem ter feito qualquer treinamento profissional.

Jair de Jesus

Estudante de música, guitarra clássica, HTML, CSS, json, Blogger e tal.{picture#https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_X8kjnFQ6gqz7mpAsGYmndUBnVFuhUwtt2T4rjn6FnitkZZUulhSIzmhVsYGWIHULCAqOObPV3xw9ru-dSPBPuWhT9PGtv-XEK1A5I6l8bJtjEjRsYYleMWoCvtjOtVhDRusviMdEFBU/s35/jair.jpg}{facebook#https://facebook.com/verbratecajuda}{youtube#https://youtube.com/@estudoviolaoclassico} {twitter#https://twitter.com/verbratecajuda}

Formulário de contato

Nome

E-mail *

Mensagem *