Verbratec

Aqui teremos ao menos uma parte do trabalho do musicista argentino Juan José Buscaglia (22 Outubro 1893 - 14 Fevereiro 1958).

Juan José Buscaglia foi um importante compositor e intérprete argentino, conhecido por suas contribuições à música folclórica do país. Ele nasceu em 1927 e se destacou por sua habilidade em criar canções que capturam a essência da cultura argentina. Suas obras frequentemente abordam temas do cotidiano, da natureza e da vida rural, refletindo a rica tradição musical do folclore.

Buscaglia também é conhecido por seu estilo envolvente e por incorporar elementos de tonada e outros gêneros populares. Além de sua carreira solo, ele colaborou com diversos artistas e teve um papel importante na promoção da música folclórica argentina.

Entre 1964 e 1970, a "Ricordi Americana SARC - Buenos Aires" publicou 3 volumes de 8 miniaturas, cada um deles.

8 miniaturas - Volume 1 (1964):

1 - Don Eugenio (Milonga) Partitura no canal @estudoviolaoclassico YouTube
2 – Cancion Pampeana (Tonada) Partitura no canal @estudoviolaoclassico YouTube
3 – De mi Pago (Estilo) Partitura no canal @estudoviolaoclassico YouTube
4 – Milonga de San Vincente Partitura no canal @estudoviolaoclassico YouTube
5 – El Lucero (Vidalita) Partitura no canal @estudoviolaoclassico YouTube
6 – Arisqueando (Gato)Partitura no canal @estudoviolaoclassico YouTube
7 – Melodia (Valsa lenta) Partitura no canal @estudoviolaoclassico YouTube
8 - Un lamento (Vidàla) Partitura no canal @estudoviolaoclassico

8 miniaturas - Volume 2 (1965):

1 - Adrianita (Valsa) Partitura no canal @estudoviolaoclassico YouTube
2 – Recuerdos (Tremolo) Partitura no canal @estudoviolaoclassico YouTube
3 – Pampa (Pericon) Partitura no canal @estudoviolaoclassico YouTube
4 - Amanecer (Vidalita) Partitura no canal @estudoviolaoclassico YouTube
5 – En la Huella (Estilo) Partitura no canal @estudoviolaoclassico YouTube
6 – Recuerdos de mi Pago (Milonga) Partitura no canal @estudoviolaoclassico YouTube
7 - El Cimarron (Gato) Partitura no canal @estudoviolaoclassico YouTube
8 - Versos de Fogòn (Tonada)Partitura no canal @estudoviolaoclassico YouTube

8 miniaturas - Volume 3 (1970):

1 - Atardecer en la Pampa (Triste) Partitura no canal @estudoviolaoclassico YouTube
2 – Recuerdo de mi Pueblo (Valsa lenta)Partitura no canal @estudoviolaoclassico YouTube
3 – Canción de mi Pago (Tango) = Partitura no canal @estudoviolaoclassico YouTube
4 – Floreos (Milonga) Partitura no canal @estudoviolaoclassico YouTube
5 – Aparcero (Gato) Partitura no canal @estudoviolaoclassico YouTube
6 – En el Horizonte (Tonada) Partitura no canal @estudoviolaoclassico YouTube
7 – Mi viejo Rancho (Estilo) Partitura no canal @estudoviolaoclassico YouTube
8 - Preludio Criollo (Milonga).Partitura no canal @estudoviolaoclassico YouTube

---

Dilermando Reis

Músicas que estarão em breve no canal @estudoviolaoclassico.

• Alma apaixonada
• Alma nortista
• Bingo
• Brejeiro
• Caboclinho
• Choro noturno
• Conversa de baiana
• Desengano
• Divagando
• Doutor sabe tudo
• Dois destinos
• É tão tarde
• Eterna saudade
• Feitiço
• Fim de festa
• Flor de aguapé
• Gauchinha mazurka
• Gente boa
• Magoado
• Noite de Lua
• Nossa ternura
• Penumbra s/pdf
• Rosas de outono s/pdf
• Sandrinha
• Se ela perguntar
• Serenata
• Sinhazinha
• Sobradinho
• Suplica
• Tempo de criança
• Ternura
• Uma valsa e dois amores
• Vê se te agrada

---

O que estudar?
UFRGS
Faculdade de música

1º Semestre

Prova 1

1– Notas musicais, pauta, clave

2– Figuras rítmicas, fórmula de compasso

3– Tom e semitom, acidentes

4– Ligadura, ponto de aumento

5– Intervalos

Prova 2

6– Métrica, compassos simples e compostos

7– Escalas maiores, graus da escala

8– Escalas menores, subtônica

9– Tonalidade, armadura

10– Inversão dos intervalos

2º Semestre

Prova 1

11– Acentos métricos, contratempo, síncope

12– Tríades

13– Tríades sobre a escala maior

14– Inversões da tríade

15– Tríades sobre as escalas menores 

Prova 2

16– Quiálteras, anacruse

17– Escala cromática, tons inteiros

18– Tétrades, inversões de tétrades

19– Tétrades sobre a escala maior

20– Tétrades sobre as escalas menores


3º Semestre

Prova 1

21– Marcação dos pulsos

22– Notas estranhas ao acorde I

23– Indicações de dinâmica

24– Indicações de andamento

25– Sistemas de nomenclatura das oitavas

Prova 2

26– Modos

27– Notas estranhas ao acorde II

28– Sinais de articulação

29– Nomes das notas em outros idiomas

30– Compassos irregulares 

4º Semestre

Prova 1

31– Mordente, trinado

32– Transposição 

33– Instrumentos transpositores

34– Acidentes microtonais

35– Tonalidades vizinhas

Prova 2

36– Gruppetto, acciaccatura

37– Escala octatônica 

38– Sistema mod12, classe de alturas

39– Intervalo entre alturas, classe de intervalos

40– Serialismo dodecafônico

Material de estudo em pdf no drive Google, oriundo da UFSM por Pablo Gusmão.

Teste imagem Blogger

---

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

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

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

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

Coloque o seu local no mapa!

---

---

Central de Ajuda
ipconfig/flushdns comando cmd Windows limpar DNS

---

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

---

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

---

https://alamcorretor.blogspot.com/

---

Eu encontrei um trabalho 'show', muito bonito, uma ideia incrível no meu entender. Não resisti e fui para a reprodução.
Quem quer dar 'trabalho' ao homem dos códigos faz esse tipo de coisa.
Quem quer pegar a imagem, simplesmente recorta a tela. O download da imagem é que é o segredo da coisa, kkkk.
No fim das contas só dá trabalho mesmo, para o homem que codifica.
Mas que ficou bonito o trabalho, ah ficou!
Se discorda ou concorda diz ali nos comentários.

---

Bookmarklet extrator js

Para mim é um trecho de código que inicia com o protocolo javascript: mas isso não é um bom conceito, kkkk!
É gratuíto, uma grande vantagem.
Conhecido também por Favlets adicionam funções ao navegador.
Gostei de poder extrair o javascript de uma página de forma mais fácil.
Tudo o que precisa fazer é arrastar o link até a sua barra de favoritos.
Em qualquer blog/site que você estiver visitando, click no Bookmarklet e veja tudo que existe de javascript, abrirá em nova aba pra facitar as coisas.
Tudo muito simples e fácil para o bom uso.

---

Também deve ser usado em modelos Blogger, uma vez que do includable escrito uma única vez, se pode e deve usar include em todos os artigos, como nesse exemplo de link para compartilhar no Facebook. Uma facilidade incrível!



Aproveite e compartilhe para que seus amigos possam também fazer um bom uso da internet.
Um abraço e até a próxima.

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"!

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

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


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

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

---

Por padrão a barra pegajosa vem ativada neste construtor, para quem ainda não conhece, a função é para manter o conteúdo do artigo, parelho com a barra lateral, não aparecendo aquele espaço vazio, quando o conteúdo do artigo é muito diferente do que consta na barra lateral.
A função faz com que a barra lateral espere o conteúdo do artigo, mantendo um visual mais aprazível.
Querendo desativar a função, acesse o 'layout' Blogger edite o gadget Controle administrativo, colocando o nome da variável 'barrapegajosa' para o "Novo nome do site" e adicione um n no campo "Novo URL do site", click em Adicionar link, depois click em salvar, isso fará com que a barra lateral role solta, juntamente com o artigo.
Querendo o efeito barra pegajosa de volta, delete esse link, ou coloque um y substituindo o n.



Um video simples mostrando como ativa e desabilita essa função no template, conforme já descrito.

[youtube src="GuQ4EvzwVgY"][/youtube]

O objetivo deste estudo compartilhado, é para que outras pessoas possam conhecer um pouco mais, sobre o que pode ser feito com Blogger, quando se tem um "template" com as funções disponíveis.
Um abraço e o meu muito obrigado por sua presença aqui.

Só hoje percebi pelo fórum de ajuda, que o modo de inserir o favicon no blog mudou.
Agora é pelas configurações que acessa o link.
Fiz um vídeo para facilitar as coisas.
A funcionalidade é a mesma, foi bem rápido, não ví diferença no processamento.



Isso é o caminho, sem pedras.
As vezes a pessoa quer tudo na hora, mas existe um atraso para o processamento, por isso rolei a página pra cima e abaixo, dando um tempo, alguns segundos foram suficientes.
Em alguns casos é melhor ir tomar um café, tipo quando altera o DNS de um site.
Um abraço e até a próxima!

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

Vou colocar no cabeçalho, acima da tag de fechamento o seguinte código: