Verbratec

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.
<style> .vbt-contain.container{ max-width:1040px; margin:0 auto; } .LinkList{opacity:0;} .menulist { width:100%; height:48px; background:#030; color:#fff; position:relative; } .menulist h2 {display:none} .menulist .r-nav ul li a:link, .menulist .r-nav ul li a:visited { color:#fff; text-decoration:none; font-size:15px; } .menulist .r-nav ul li { display:inline-block; position:relative; margin:0px 20px; height:48px; line-height:48px; } .menulist .r-nav ul li ul { position:absolute; left:-10px; min-width: 250px; background:#040; opacity:0; z-index:-1; } .menulist .r-nav ul li ul li { display:block; border-bottom: 1px solid #070; } .menulist .r-nav a:hover { opacity:0.8; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; } .menulist .r-nav ul li ul li:last-child { border:none; } .menulist .r-nav ul li:hover ul { opacity:1; z-index:10; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-name: raintemplates-hang; animation-name: raintemplates-hang; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; } .hasdrop svg { width:13px; height:13px; position:relative; top:3px; left:8px; } .menulist .r-nav ul li:hover svg{ -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; } .search-box svg { display:none; } .r-nav { position: relative; width: 100%; height: 100%; } .searchbox form, .searchbox input{ position: absolute; right: 0; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } .searchbox input.sb-search-input.placeholder { height: 29px; border: none; padding-left: 12px; font-size: 13px; } .searchbox .submit { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3pC_bYazCrwfbQ2bIKJTrMkuzyU6HZPZ12rDvTUOrCsEfjYjvRX7A0Xe7-X5-nEcW4gMLnXgBMmG3stzFs3dSxsgHBKYd8m0xWLzmwLvilCSI5wZy6C9E7_Eq9ZSxxo4FiaXzdGcDm5GC/s50/search.png) no-repeat; border: none; height: 16px; width: 16px; background-size: 100%; margin-right: 10px; font-size: 0px; } @-webkit-keyframes raintemplates-hang { 0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 50% { -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes raintemplates-hang { 0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 50% { -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } </style> 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.
<script> // este código requer o uso da biblioteca ajax do google https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js . $.extend($.expr[":"], {startsWith:function(a,c,b){return 0===$(a).text().trim().indexOf(b[3])}}); function vbttemplatesmenu(){ $(".LinkList li:not(:startsWith(_))").each(function(){ $(this).next("li:startsWith(_)").length&&$(this).find("a").addClass("hasdrop").append('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 407.4 407.4" width="512" height="512"><polygon points="386.3 91.6 203.7 273.5 21.2 91.6 0 112.8 203.7 315.9 407.4 112.8 " fill="#888"/></svg>'); $("<ul/>",{html:$(this).nextUntil(".LinkList li:not(:startsWith(_))"),appendTo:this})})} $(".LinkList").each(function(){ var a=$(this).find("h2"); if(a.is(':contains("Verbratectemplates")'))vbttemplatesmenu(),$(this).attr("id","listmenu1"),$(this).attr("class","menulist"),$(this).attr("data-version","vbttemplates-linklist"),$(this).find(".widget-item-control").remove(),$(this).find(".widget-content").attr("class","r-nav"),$(this).find(".clear").remove(),a.html('\x3c!--Widget de verbratec.com.br--\x3e<a href="//verbratec.com.br/">Verbratec Templates</a>'),$(".container").length?$(this).wrapInner('<div class="container"></div>'):$(idlist).wrapInner('<div class="vbt-contain container"></div>'),$(".r-nav ul li ul li a").each(function() {$(this).text($(this).text().replace(/[_]/,""))} ),$(".r-nav").append('<div class="searchbox"><a href="javascript:void(0)" class="search-box"><svg fill="#dddddd" viewBox="0 0 57.93 58.68" xmlns="http://www.w3.org/2000/svg"><path class="cls-1" d="M1,57.68a3.4,3.4,0,0,1,0-4.81L14.37,39.5l-.3-.39A24.39,24.39,0,1,1,33.53,48.8a24.2,24.2,0,0,1-13.86-4.33l-.39-.27L5.81,57.68a3.4,3.4,0,0,1-4.81,0ZM15.93,24.4A17.6,17.6,0,1,0,33.53,6.8,17.62,17.62,0,0,0,15.93,24.4Z"></path></svg></a><form accept-charset="utf-8" action="/search" class="navbar-form" method="get"><input class="sb-search-input placeholder" name="q" placeholder="'+searchtxt+'" type="text" value=""><input value="Search" class="submit" type="submit"/></form></div>'); else return!1; $(this).css({opacity:"1"})}); </script> 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 != &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:

---

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!

Blogger usa servidores para imagens de forma automática, servidores Google claro.
O que acontece é que é muita coisa, vários programas trabalhando com muitas funções diferentes, isso requer uma equipe grande de programadores das diferentes linguagens.
É algo complexo por ter que satisfazer diferentes equipamentos, diferentes sistemas operacionais, diferentes, navegadores e integrar as coisas de forma que tudo funcione bem nem sempre tudo sincroniza de forma razoável.
O objetivo do Google eu acredito ser dar prioridade aos smartphones, por isso agora seu painel Blogger, clicando em adicionar gadget, a janela aberta é adequada ao smartphone, mesmo estando num leptop, notebook ou desktop.

Algo não ocorreu bem durante a atualização do sistema e um erro nos servidores de imagens 1.bp.blogspot.com e 2.bp.blogspot.com levou ao 'extermínio' de postagens em centenas de blogs Blogger. Dando como fraudulento inclusive os blog/sites oficiais do Google, como vemos na imagem abaixo.
Para muitos usuários os danos serão irreparáveis, muitas pessoas apenas fazem uso de forma muito automatizada, sem aquela preocupação de investir algum tempo, para estudar o funcionamento da plataforma. Assim sendo impossível recuperar dados por exemplo.
Para quem sabe um pouco, consegue recuperar cópias de cache do Bing, quando no Google nada consta.
O artigo no Blogger gera um código para imagem similar a este:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJQYi-Mo1T1APWSjqP9dVBZ_IMFk0O0j9yOwSCY_A1IN9dH2iIiLW4nt5rISnN8mkASA6_nKC7aD3GUbWgJhpOkca9i3gyJXUpEary9NWf2ip_v52zlWnMvmeZveTEjogFsjMduxTy71A4/s0/google+Brasil+enganoso.png

Clique para ver o arquivo xml em nova aba do navegador.

Note que no xml gerado a segurança cai usando http, quando deveria ser https e o servidor agora é: lh3.googleusercontent.com <TileInfo tile_width="512" tile_height="512" full_pyramid_depth="2" origin="TOP_LEFT" base_url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhygtn7g4WJ53wF5pvleI5cXE1F-ZxhQGqhy_adoF_o2gJl3W1_yByummZxHaMRG5EjRbEANf8PkproT5sHwdgEkd5e0jcgmGRuXivQsA_MU0rtrkC9RiviozHm8a_gkteLVlVsDdZv6HAj/" tiler_version_number="2" image_width="975" image_height="679"> <pyramid_level num_tiles_x="1" num_tiles_y="1" inverse_scale="2" empty_pels_x="25" empty_pels_y="173"/> <pyramid_level num_tiles_x="2" num_tiles_y="2" inverse_scale="1" empty_pels_x="49" empty_pels_y="345"/> </TileInfo>
Nada que a equipe de engenharia, não resolva num tempo apreciável, mas o estrago fica 'sobre a cabeça' dos usuários do Blogger.
Há muitos casos em que o artigo foi reposto, porém como 'rascunho', devendo o usuário fazer a publicação novamente. Percebi um artigo em que o código se perdeu, felizmente consegui recuperá-lo.

O interessante desse evento ficou por conta das diferenças entre navegadores, enquanto para o Safari o carregamento de páginas Blogger ocorria de forma normal, com todas as imagens, o Firefox barrava as imagens dos servidores 1.bp.blogspot.com e 2.bp.blogspot.com mostrando o restante, já o Chrome avisava sobre o perigo e nada carregava, mostrando a tela vermelha, mesmo usando o view/flipcard, modo dinâmico do Blogger, o Chrome não carregava as imagens, como podemos ver na gravação abaixo.
Lamentável quando isso acontece, o que mais me deixa 'pasmo' é o fato de ninguém do Google dizer 'nadinha'.

Espero que consigas contornar algum problema que lhe tenha restado, caso eu possa ajudar, deixe-me saber, use os formulários de comentário por favor.
Um abraço e obrigado por visitar!

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]


Aqui o código html usado no exemplo, não esqueça de editar conforme sua necessidade: [code type='HTML'] <div id='tanque'> <div id="all"> <div class="java">json</div> <div class="script"></div> </div> <div id="div1"> <a href="/p/configuracao-e-controle.html" class="esverdeado">Cconfigurações</a> <a href="/2011/11/como-aceder-o-html-do-blog.html" class="yellow">HTML5</a> <a href="/2012/07/link-ao-topo.html">Link ao topo</a> <a href="/2020/11/modo-escuro.html" class="blue">Modo noturno</a> <a href="/2020/10/favicon-blogger-2020-nova-interface.html">Favicon</a> <a href="/p/archive.html" class="esverdeado">Mapa do site</a> <a href="/search/label/script" class="yellow">JavaScript</a> <a href="/2019/06/codigos-de-erro-em-cooktops-de-inducao.html">Error code cooktop</a> <a href="/2015/03/projeto-solda-caseira-parte-um.html" class="esverdeado">Máquina solda</a> <a href="/2018/03/json-em-paginas-blogger.html">JSON páginas</a> <a href="/" class="blue">Verbratec</a> <a href="/2018/03/aprender-json-blogger.html" class="yellow">JSON Blogger</a> <a href="/2018/03/dica-de-contexto-tooltip.html" class="esverdeado">Tooltype</a> <a href="/2018/04/feed-blogger-json.html" class="blue">JSON Feed</a> <a href="/p/download.html">Template</a> </div> </div> [/code] Como já citado, coloque abaixo o javascript. [code type='javascript'] <script type='text/javascript'> document.getElementById('div1').style.visibility = "hidden"; var change = function changeVisibility() { document.getElementById('all').style.visibility = "hidden"; document.getElementById('div1').style.visibility = "visible"; } setTimeout(change, 4000); var radius = 200; var dtr = Math.PI / 180; var d = 300; var mcList = []; var active = false; var lasta = 1; var lastb = 1; var distr = true; var tspeed = 3; var size = 250; var mouseX = 0; var mouseY = 0; var howElliptical = 1; var aA = null; var oDiv = null; window.onload = function() { var i = 0; var oTag = null; oDiv = document.getElementById('div1'); aA = oDiv.getElementsByTagName('a'); for (i = 0; i < aA.length; i++) { oTag = {}; oTag.offsetWidth = aA[i].offsetWidth; oTag.offsetHeight = aA[i].offsetHeight; mcList.push(oTag); } sineCosine(0, 0, 0); positionAll(); oDiv.onmouseover = function() { active = true; }; oDiv.onmouseout = function() { active = false; }; oDiv.onmousemove = function(ev) { var oEvent = window.event || ev; mouseX = oEvent.clientX - (oDiv.offsetLeft + oDiv.offsetWidth / 2); mouseY = oEvent.clientY - (oDiv.offsetTop + oDiv.offsetHeight / 2); mouseX /= 5; mouseY /= 5; }; setInterval(update, 30); }; function update() { var a; var b; if (active) { a = (-Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed; b = (Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed; } else { a = lasta * 0.98; b = lastb * 0.98; } lasta = a; lastb = b; if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) { return; } var c = 0; sineCosine(a, b, c); for (var j = 0; j < mcList.length; j++) { var rx1 = mcList[j].cx; var ry1 = mcList[j].cy * ca + mcList[j].cz * (-sa); var rz1 = mcList[j].cy * sa + mcList[j].cz * ca; var rx2 = rx1 * cb + rz1 * sb; var ry2 = ry1; var rz2 = rx1 * (-sb) + rz1 * cb; var rx3 = rx2 * cc + ry2 * (-sc); var ry3 = rx2 * sc + ry2 * cc; var rz3 = rz2; mcList[j].cx = rx3; mcList[j].cy = ry3; mcList[j].cz = rz3; per = d / (d + rz3); mcList[j].x = (howElliptical * rx3 * per) - (howElliptical * 2); mcList[j].y = ry3 * per; mcList[j].scale = per; mcList[j].alpha = per; mcList[j].alpha = (mcList[j].alpha - 0.6) * (10 / 6); } doPosition(); depthSort();} function depthSort() { var i = 0; var aTmp = []; for (i = 0; i < aA.length; i++) { aTmp.push(aA[i]); } aTmp.sort( function(vItem1, vItem2) { if (vItem1.cz > vItem2.cz) { return -1; } else if (vItem1.cz < vItem2.cz) { return 1; } else { return 0; } } ); for (i = 0; i < aTmp.length; i++) { aTmp[i].style.zIndex = i; }} function positionAll() { var phi = 0; var theta = 0; var max = mcList.length; var i = 0; var aTmp = []; var oFragment = document.createDocumentFragment(); for (i = 0; i < aA.length; i++) { aTmp.push(aA[i]); } aTmp.sort( function() { return Math.random() < 0.5 ? 1 : -1; } ); for (i = 0; i < aTmp.length; i++) { oFragment.appendChild(aTmp[i]); } oDiv.appendChild(oFragment); for (var i = 1; i < max + 1; i++) { if (distr) { phi = Math.acos(-1 + (2 * i - 1) / max); theta = Math.sqrt(max * Math.PI) * phi; } else { phi = Math.random() * (Math.PI); theta = Math.random() * (2 * Math.PI); } mcList[i - 1].cx = radius * Math.cos(theta) * Math.sin(phi); mcList[i - 1].cy = radius * Math.sin(theta) * Math.sin(phi); mcList[i - 1].cz = radius * Math.cos(phi); aA[i - 1].style.left = mcList[i - 1].cx + oDiv.offsetWidth / 2 - mcList[i - 1].offsetWidth / 2 + 'px'; aA[i - 1].style.top = mcList[i - 1].cy + oDiv.offsetHeight / 2 - mcList[i - 1].offsetHeight / 2 + 'px'; }} function doPosition() { var l = oDiv.offsetWidth / 2; var t = oDiv.offsetHeight / 2; for (var i = 0; i < mcList.length; i++) { aA[i].style.left = mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px'; aA[i].style.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px'; aA[i].style.fontSize = Math.ceil(12 * mcList[i].scale / 2) + 8 + 'px'; aA[i].style.filter = "alpha(opacity=" + 100 * mcList[i].alpha + ")"; aA[i].style.opacity = mcList[i].alpha; }} function sineCosine(a, b, c) { sa = Math.sin(a * dtr); ca = Math.cos(a * dtr); sb = Math.sin(b * dtr); cb = Math.cos(b * dtr); sc = Math.sin(c * dtr); cc = Math.cos(c * dtr);} </script>[/code] [success title="Atualizando!" icon="check-circle"] Nuvem de tags, poderá ter que fazer pequenos ajustes no css de seu template.
Artigo revisado em 05 de julho de 2021. [/success]
Em caso de dúvida entre em contato, deixe um comentário.
Agradeço sua visita aqui e ensejo-lhe uma excelente navegação pelo mundo "web"!