Observação: este código é simples o bastante, para estudar o funcionamento da dinâmica de pegar dados inseridos pelo gadget linkList padrão do Blogger e manipular para exibir nesse caso, num menu suspenso. Isso está obsoleto por não ser responsivo, não se adequa aos diferentes tamanhos de tela.
Adicione o css na head do seu blog. Como é só para estudo recomendo que use um blog de testes. Também recomendo que aproveite sempre a oportunidade para praticar o que já sabe, como por exemplo, fazer uso de tag condicional para que este menu renderize apenas em páginas estáticas, ou só numa postagem específica.
Obs: não esqueça de adicionar a tag CDATA.
Insere o script no modelo xml Blogger, próximo ao final do corpo, lá embaixo, bem no final. Isso é o que recomenda o desenvolvedor, faça seus próprios testes, veja onde funciona e onde deixa de funcionar, certifique-se de ter inserido corretamente e salvo todo o código, sem nenhuma deformação.
Obs: não esqueça de adicionar a tag CDATA.
A orígem do código: http://raintemplates.com/2017/10/09/using-linklist-widget-to-create-the-awesome-dropdown-navigation-menu-for-your-blogger-blog/ vale sempre citar alguém que lhe é útil.
Demostrado ao vivo neste link: https=//construtorjavascript.blogspot.com/
A imagem que segue dá uma idéia de como editar o gadget, que deve ser inserido de forma normal pelo layout do seu painel admin Blogger.
Uma imagem da section com o widget e o já conhecido código padrão do Blogger.
O Blogger não quer funcionar, nem do computador, nem pegando URL da imagem, problema vish!
Solução colocar direto pelo código. Eu ia gravar, mas pensei, se der problema com vídeo será tempo perdido.
Espero que tenha um bom estudo e que realmente isso lhe seja útil para o estudo da plataforma Blogger.
Um abraço e até a próxima!
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!
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 != ""' name='has-location'/>
<b:include name='userProfileData'/>
<b:include cond='data:showlocation and data:location != ""' name='userLocation'/>
<b:include cond='data:aboutme != ""' 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!
Nuvem de "palavras chaves" em 2021, código atualizado.
Hoje compartilho algo já tão antigo, que volta a ser especial novamente.
Não sei quem fez mas, agradeço por eles existirem.
A nuvem de tags funciona sem usar arquivos de terceiros, sem javascript externo, os códigos que são adicionados ao HTML do blog, são divididos em três partes, html, css e javascript.
Coloque o css acima do html, o javascript insira no final do seu modelo xml usando a tag 'cdata' e por fim coloque o html onde deseja que sua nuvem seja renderizada. Nada diferente da grande maioria dos tutoriais, creio que a maioria das pessoas que costumam editar seus modelos, já estão habituadas com esses procedimentos.
Aqui o código css usado no exmplo para o estilo:
[code type='CSS']
<style>
#tanque {
background: #003300;}
#all {
margin: 185px auto;
width: 100px;
height: 100px;
-webkit-animation: grow 4s;
-webkit-animation-delay:0.5s;
animation-fill-mode: forwards;}
.script {
font-family: Microsoft YaHei;
color: #fff;
font-size: 40px;
display: block;
position: relative;}
.java {
font-family: Microsoft YaHei;
color: #fff;
font-size: 40px;
display: block;
position: relative;}
.java:before {
color:#004400;
content: "www.verbratec.com.br";
display: block;
position: absolute;
left: 185px;
top:151px;
width: 20px;
height: 100%;
background-color: #004400;
-webkit-animation-delay: 2s ;
-webkit-animation: grow 4s;
-webkit-animation-delay:0.5s;
animation-fill-mode: forwards;}
@-webkit-keyframes grow
{
from {
width: 0px;
}
to {
width: 480px;
}
}
#div1 {
position: relative;
width: 800px;
height: 450px;
margin: -300px auto 0;}
#div1 a {
position: absolute;
top: 0px;
left: 0px;
font-family: Microsoft YaHei;
color: #fff;
font-weight: bold;
text-decoration: none;
padding: 3px 6px;}
#div1 a:hover {border: 1px solid lime; background: #003300; }
#div1 .blue {
color: blue;}
#div1 .esverdeado {
color: lime;}
#div1 .yellow {
color: yellow;}
p9 {
font: 16px Microsoft YaHei;
text-align: center;
color: #ba0c0c;}
p9 a {
font-size: 20px;
color: #ba0c0c;}
p9 span {
font-size: 14px;
color: #ba0c0c;}
</style>
[/code]
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.
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.
Também aconteceu no GMail, esses colchetes não deveriam aparecer ali. 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.
Um dos problemas que surgiram aqui, já nem sei quando foi, mas com certeza foi o mais difícil de consertar.
Na época eu usava Blogger e Facebook para os comentários e surgiu o Google+, daí surgiu o problema e eu quando dava tempo, tentava consertar. Com tantas tentativas um dia deu certo e não alterei mais nada, tipo "dá medo de mexer no trem". Tempos depois, o relatório do searchconsole, me indicou problemas para rich snippets, isso foi em 2018 e eu marquei com alguns comentários(correção 2018) no template, as alterações que fiz para a correção.
Até aqui tudo bem, mas resolvi atualizar o script principal, troquei o template, no meu modo de ver esses comentários(correção 2018) deveriam ter desaparecido, já que faziam perte do template retirado.
Não tinha ideia de que isso acontecia.
Era para o código antigo ser deletado, ou simplesmente ficar de fora.
O que importa é que o problema nos comentários do Blogger está de volta e com isso o link Responder não funciona.
Pra piorar antes já era um código complexo e dividido em várias partes, agora é ainda mais complexo, então vou deixar o tempo passar e esperar a ideia vir, para ter uma solução.
Sempre é útil o "feedback" do internauta, que pode ser feito ali, pelos comentários, se encontrar um problema, por favor deixe sua mensagem.
Um abraço e o ensejo de uma boa navegação!
A carga infinita para alguns casos é algo interessante.
Ao chegar no fim da página inicial, que aqui no Blogger é o arquivo index, o script renderiza um link para que o internauta solicite o carregamento de "mais artigos", rolando mais abaixo será então carregado mais uma postagem e mais outra, até mostrar todas as existentes no blog/site.
Para adicionar este recurso basta usar o botão abaixo, o Blogger irá mostrar a página add-widget escolha o blog desejado, click em 'editar conteúdo' e verifique se o código está presente, depois click no canto inferior esquerdo, em "adicionar widget".
O widget deverá ser posicionado na 'sidebar' em seu 'layout' podendo ficar totalmente oculto, servindo apenas para executar a função de rolagem.
Um abraço e em caso de dúvida entre em contato.
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:
$(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
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!
Clique neste localizador.
Junte-se a nós, curtir é incentivar esse trabalho!
Volto a tentar um estudo de programação app-Facebook e aqui deixo alguns urls até para quando necessário possa consultar.
1- Para gerar key, bah! Chave SSH github https://help.github.com/articles/generating-ssh-keys use o Git Bash.
O comando que realmente funciona é este: ssh-keygen -t rsa -C "seu_email@verbratec.com" não esquece a senha hein!
2- Repositório https://github.com/jairdejesustec/php para configurar.
3- Url add aplicativo(App) verbratec para página empresa no Facebook: https://www.facebook.com/dialog/pagetab?app_id=679115758772241&display=popup&next=https://apps.facebook.com/679115758772241/
4- Arrumo de um lado estrago do outro bah!
O assunto de hoje é tutorial para formulário de comentários. Depois de ter lido em vários blogs diferentes os mesmos tutoriais fiquei bah! Creio que seja bem complicado ensinar o que não sabe, mas cada um com o seu "caum" não é mesmo.
É um tanto complexo, porém nada de extraordinário, no resumo tudo é simples.
Qual é o objetivo? Simplesmente permitir que o internauta possa escolher qual formulário verá na frente; Blogger na primeira aba e Facebook na segunda opção. Li vários comentários pedindo isso em vários blogs. Lembro que alguém foi humilde em citar que não sabia como fazer e era possível ver em seu blog, porém a humildade não se manteve e o carinha retirou tudo, até a postagem, kkkkkk.
Então mãos à obra, segue um tutorial destes tantos pois me recuso a repetir tudo aqui. Recomendo o tutorial da Vanessa - Mundo Blogger https://www.mundoblogger.com.br/2013/02/usar-moderar-sistema-de-comentarios-do-facebook-no-blogger.htm - Sim realmente é preciso criar um aplicativo no Facebook pois é nele que será adicionado o moderador, administrador e etc. Observe na imagem abaixo por favor o detalhe fb:admin: Jair de Jesus.
É tanta coisa e ao que parece o Blogger (engenharia de software) andou mudando alguns itens novamente, de formas que a codificação que funciona muito bem aqui já não serve para um novo blog/site que estou fazendo para o meu amigo Alam.
Resolvi então publicar esta postagem e ir editando aos poucos, pois aqui não podemos ter erros. Já criou o aplicativo no Facebook? Então vai lá e verifica se há erros para corrigir, use este link: Debugger. O vídeo mostra como deverá ficar depois de tudo ajustado para que possamos fazer uso das tags og.
Uma melhor definição de imagem pode ser obtida em tela cheia YouTube - vídeo.
As tags og permitirão ao programa verificar tudo instantaneamente e tratar o objeto de forma que lhe seja possível por exemplo, ao compartilhar um link para a postagem "X" de seu blog/site fazer a escolha da imagem que será mostrada no Facebook, ou até mesmo escolher uma imagem de seu computador. O melhor é que todos os dispositivos (comentários, curtir, like, etc.) tudo vai funcionar e lhe será permitido com as "devidas configurações" moderar os comentários feitos pelo formulário do Facebook na própria página "X" onde foi originado o comentário. Claro que poderás ir até o Facebook "usando seu aplicativo" para ver todos os comentários do blog/site em uma única página. Legal né? Como se observa nesta imagem:
Tenho observado muitos reclamando que o Facebook não notifica e é preciso ficar procurando os comentários. Então está explicado mais este mistério. Com seu aplicativo criado e corretamente aplicado ao blog/site lhe será possível ver a notificação na postagem "X", no Facebook e logicamente no seu aplicativo. Vamos as imagens:
A notificação na postagem "X" de que existe (1) comentário aguardando moderação, basta clicar no link que aparece no centro da imagem "Moderar comentários do aplicativo" e aprovar, deletar, ocultar, etc.
Ao entrar no Facebook poderá observar algo similar a imagem seguinte, notificação:
E tem mais, quando não tiver comentário aguardando aparece a mensagem informando que "nenhum comentário requer moderação":
Quando for copiar o código do plugin comments Facebook. Note que estando tudo correto com seu aplicativo, lhe será mostrado o nome do mesmo e o número appID está incluso automaticamente:
Não vale querer tudo na hora. O Facebook vai demorar dois dias (após todos os ajustes) para lhe enviar o e-mail cuja imagem está ao fundo logo abaixo do plugin de comentários Facebook neste blog. Isto é algo como um ok do controle de qualidade, está tudo certo, nada mais precisa ser feito.
As tags og devem ser colocadas no seu blog/site como neste exemplo básico:
Bah! Era para fazer as abas e colocar os três sistemas de comentários. De que adianta fazer abas se o plugin não funciona corretamente, pesa no carregamento, tem que ficar procurando comentários em cada página do blog/site e blá, blá, blá.
O sistema do Blogger já é um tanto complexo e queremos tudo funcionando, para tanto faremos devagar e bem feito. Nota: É sempre importante ter o backup de seu template ao realizar qualquer alteração no HTML.
Depois de alguns ajustes, já com funcionamento satisfatório, vamos aos aprimoramentos. As tags colocadas da forma que mostra a imagem são estáticas. Precisamos usar b:f tradicional da plataforma Blogger para dar dinamismo as tags og. De formas que em cada postagem o programa puxará o o titulo o url o conteúdo e etc. assim sendo comente as tags og anteriores e coloque assim:
Este é apenas um demostrativo do que pode ser feito, se trata de algo para usuários avançados, que já familiarizados com includes podem aprimorar, melhorar e obter melhores resultados.
Há tutoriais sobre abas de fácil implementação em seu blog/site visite, pesquise! Se eu descobrir algo realmente bom publicarei aqui.
Não deixe de usar Twitter para divulgar seu trabalho, produto, serviço ou bah!
O Blogger não quer funcionar, nem do computador, nem pegando URL da imagem, problema vish!
Há coisas que realmente nos tornam cada vez mais curiosos, quando o assunto é codificar alguma função para blog/site usando o Blogger.
