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...
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!
Já posso afirmar que a máquina está pronta, está em sua configuração final. Poderei mudar apenas a estética, encapar os fios com cadarço e aperfeiçoar o gabinete, conectores, etc.
O sistema está funcional e isso é que importa realmente para mim, hoje é domingo e fiz os testes que julguei necessários, posso afirmar que trabalha por até 10 minutos com segurança, usando eletrodo 6013, e aqui cabe lembrar que nem todos conhecem e este número 3 do 6013 significa que o eletrodo pode ser usado em AC, DC no negativo e no positivo.
Uma imagem da cantoneira soldada, lógico que minha solda não está bonita, nem era esse meu objetivo naquele momento. O que eu queria saber era se a solda iria ficar resistente e se a máquina não iria aquecer em demasia.
Quanto ao custo do projeto, Porto Alegre é uma cidade de custo alto e eu fiz pelo prazer de ter algo que sei tudo sobre, portanto esse prazer é "impagável"! Por saber que muitas pessoas consideram apenas o valor em reais, citarei a média do custo.
Comprei os transformadores no ferro velho, 5 unidades, sendo 4 de microondas e um outro parecido que tinha a chave seletora de doze posições junto por .......................R$45,00
Ponte retificadora LGE KBPC 5010 custa a unidade ............................R$ 9,90
Comprei 5 peças, esta nota é da última, eu ia colocar 4 na máquina, repensei e considerei melhor ter uma margem a mais por segurança, então podemos considerar R$50,00 nas pontes.
Disjuntor, conectores, parafusos, fita isolante ......................R$20,00 aproximadamente, foi mais.
Fio 6 mm foi aproximadamente 58 metros, fácil lembrar pois eu tinha comprado uma sobra de 48 metros e faltou, aí fui à loja comprar mais dez metros para fazer o regulador, e nem conta aqui o indutor de saída DC que fiz com fios 2,5 mm.
8m transformador
8m cabo alimentação
10 regulador
10 indutor
12m cabo terra e eletrodo
10m cabo para ligar à rede.
Lógico que "cada caso é um caso" poderá ser totalmente diferente para outras pessoas. No meu caso o custo é de R$2,60 por metro, para os fios 6 mm, logo 2,60 X 58 = R$150,80 uau!
Estanho pra solda Best R$ 6,90 é claro para soldar os fios nos capacitores, nas pontes de retificação, nos terminais das bobinas primárias do transformador, etc.
Comprei os cabos de socorro chinês kkkk, para fazer o porta eletrodo e garra negativa R$20,00.
É claro que precisei comprar eletrodos para os testes, escolhi o 6013 da ESAB 2,5 por R$10,00 ao quilo. Talvez até tenha como comprar menos e baixar esse custo, mas eu vou usar mesmo!
Soma e passa à régua: R$302,70 Bah!
Tem mais coisas como o vidro para a máscara por exemplo.
Sempre esqueço isso e aquilo kkkk!
De volta ao assunto máquina pronta, deixei ligada por 15 minutos e observei a temperatura, amornou as bobinas primárias. Derrete eletrodo inteiro sem problema de aquecimento. Solda por dez minutos com segurança e esse foi o meu limite, não preciso mais que isso, não vou arriscar mais que isso.
O peso ficou por volta de 18Kg, aqui temos uma imagem ainda sem tampas com 17,8Kg.
A quem precisar alguma informação por favor entre em contato.
A máquina já está na obra, soldando ferros das colunas, vigas, etc.
Para quem tem pouca experiência com eletrodo revestido recomendo a leitura do material da ESAB.
Este projeto teve como base as informações do amigo Dantes ao qual fica meu especial agradecimento, bem como ao José Augusto com quem obtive as informações sobre as pontes de retificação, em seu blog coisas da oficina.
Obrigado por sua visita e o ensejo de uma boa navegação!
Não gostei do espaço interior no gabinete e resolvi fazer um pouco maior, melhor ainda, usar um gabinete de "pc" antigo.
O caso é que o projeto está sendo desenvolvido aos poucos e irei tomando as decisões conforme surgirem as barreiras.
Montei o "ArcForce" com núcleos de transformadores de microondas também. O circuito "ArcForce" será alimentado pelo secundário do transformador com 20 volts e possui mais de duzentas espiras.
As divisões do indutor controlador de corrente fiz de 10 em 10 espiras com o mesmo fio 6 mm usado para fazer o secundário.
O conjunto transformador, indutor e "ArcForce" permanecem abertos enquanto o projeto não for terminado, isso facilitará eventuais ajustes.
Nos testes iniciais gostei do som emitido, suave, realmente suave.
Aspecto atual do gabinete deverá ser esse no final; disjuntor 20 amperes, chave comutadora do ArcForce, bornes negativo AC/DC na esquerda, centro AC e direita positivo DC, interruptor luminoso de três pinos para o ventilador.
Na parte superior coloquei uma alça e o cabo de comutação do indutor controlador de corrente.
Na parte de trás está apenas o cabo de alimentação.
O indutor de saída DC fiz com 30 espiras, usei fio flexível 2,5 mm que tinha em casa uma vez que o de 6 mm acabou. O que fiz foi colocar 3 fios de 2,5 mm paralelos, então conta 7,5 mm e garante que não haverá nenhuma sobrecarga ou aquecimento no indutor.
Vejamos o aspecto do componente:
Agora falta pouco para os testes finais, preciso antes colocar a capacitância ideal.
Até a próxima postagem!
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.
