Nuvem de Tags HTML

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]
...........



Demostração ao vivo.
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"!

Postar um comentário

Deixe seu comentário 'humano'!

[blogger][facebook]

Jair de Jesus

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

Formulário de contato

Nome

E-mail *

Mensagem *