Outubro 2020

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.

Desativa barra pegajosa no template.

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.

Ao abrir o layout do Blogger estará na parte inferior a área Menu principal links ao conteúdo. Nela existem quatro gadgets que foram projetados para receber uma quantia enorme de dados, suprindo as necessidades mais diversas.
O que vou fazer aqui é apenas exemplificar uma das muitas maneiras de configurar alguns links, com este construtor.
No topo do blog/site há dois links, um para termos de uso e o outro para política de privacidade, mas é possível inserir outros seguindo o mesmo método, lembrando que eles fazem parte do "Menu principal" enquanto em telas menores, como smartphones e tablets. Tudo será demostrado no vídeo.
Eu busquei deixar todos mais ou menos na mesma dimensão, então para o gadget Marcadores, selecionei apenas quatro itens: blogger, facebook, json e solda.
Para o segundo gadget, que também é criado automaticamente, na instalação do template, entitulado "Páginas", eu colocarei os links para as páginas que no Blogger chamamos de estáticas, escolhi deixar os seguintes links: configuração, ferramentas, política de privacidade, mapa do site, sobre e termos.
Esses links são introduzidos da forma tradicional, nome do link e url de destino, uma lista de links simples.
O terceiro gadget colocarei um link externo e uma imagem, e o quarto gadget não vou usar nesse momento.


O gadget Menu principal é um gadget do tipo lista de links, apenas trabalhará de uma forma um pouco diferente da tradicional, ficará bem nítido isso no vídeo. Farei minha lista da seguinte forma, lembrando que isso é apenas um exemplo.

Configuração básica do menu principal do template verbratec.
Será quase como aparece na imagem, isso por ter que criar e depois de criado, tem que voltar e editar. Já vi em alguns lugares e me conformo de não estar só na busca pela resolução do problema, o que ocorre é que se deixar chaves ou colchetes, que são usados na criação, eles irão aperecer onde não devem, como ocorreu no Facebook.
Colchetes no Facebook.
Também aconteceu no GMail, esses colchetes não deveriam aparecer ali.
Colchetes no Gmail.
Percebi o problema na pesquisa do Google e até o presente momento não tenho a solução, tudo o que posso fazer é criar com os colchetes, pois o construtor lê o que está aninhado ali, depois edito e retiro os colchetes uma vez que os dados já estarão armazenados. Creio que já deu pra entender o básico da rotina.


Bora pro vídeo então...
[youtube src="FhoPi_8CyoM"][/youtube]

Com certeza muitos dos que aqui chegarem, já conhecem tudo isso e muito mais, eu porém espero é que isso seja útil para aqueles que ainda não sabem como funciona e muitas vezes, compram templates sofisticados mas sem uma documentação edequada, acabam deixando de fazer um melhor uso do software, que dá tanto trabalho ao desenvolvedor.

Anti - caçador curioso de baleia!

Um forte abraço e o meu obrigado por sua presença aqui! Pense em dar aquela curtida para incentivar esse trabalho.

Usando o novo script construtor, nesse template tudo é mais fácil, um exemplo é a inserção da já veterana, caixa de amigos do Facebook, na verdade chamamos de 'plugin', então há uma parte generosa do Facebook, outra do Blogger, e mais uma do construtor, com isso tudo junto, resta ao usuário apenas digitar ou até copiar e colar, umas poucas palavras e a mágica acontece.
Estamos em 2020, as coisas estão evoluindo sempre e nós precisamos estar sempre juntos, não podemos nos atrasar, mas chega de blá, blá, blá.
Aqui foi feito de maneira que "se" adicionar um 'gadget' na footer(rodapé) ou na sidebar(barra lateral).O construtor lê e verifica "se" for do tipo "HTML" e contiver a 'string' FBcaixa e o url facebook.com, faz isso, se não, faz aquilo, kkk, simples assim, veja o vídeo, afinal uma imagem vale mais que mil palavras, já dizia o poeta!



[youtube src="NOPONKsqNx8"][/youtube]

O trabalho prossegue.
Aproveito a oportunidade para lhe convidar, incentive com aquela curtida. Obrigado por sua presença, um forte abraço e o ensejo de uma boa navegação!


[info title="Info message" icon="info-circle"] É realmente difícil encontrar uma comunidade de desenvolvedores de temas do Blogger que tenha uma abertura de código-fonte como eu. Além do fato de que o Blogger não é um serviço de blog aberto, a falta de documentação oficial para os códigos sobre o tema do Blogger nos obriga a gastar muito tempo e energia estudando cada código existente autodidata e sem orientação. Como resultado, as pessoas que conseguem descobrir e / ou encontrar algo novo no mecanismo do Blogger preferem desenvolver e lançar seus temas de forma independente e até furtiva, sem nos contar sobre todas as coisas que vêm fazendo e desenvolvendo o tema que eles criaram. By - Taufik Nurrohman [/info]
Expressões regulares construtor: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/RegExp

Nesse construtor, temos na homepage, no gadget "Últimas postagens", o link "Mais artigos" em forma de uma barrinha, como vemos na imagem.

Essa função também faz o paginador numérico, neste mesmo gadget, aqui denominado "Últimas postagens" eu escolhi este nome, mas o usuário pode escolher o que lhe convier.
Imagem do paginador numerado.

É possível ao usuário, trocar o modo de apresentação de uma forma muito simples e rápida, veja no vídeo por favor. A função homePageNavi é ativada com y para mostrar o paginador numérico.

[youtube src="TjMyr2n_Cxg"][/youtube]
Com n substituindo o y ou deletando o link, o construtor retorna ao funcionamento padrão, com a barrinha "Mais artigos", é bom salientar que há uma forma fácil de trocar o texto, a cor, e até mesmo de desativar o gadget, tudo feito pelo painel administrativo, através do gadget Controle administrativo.
Tudo em andamento por aqui, espero acrescentar algo que venha a ser útil.
Um forte abraço e até a próxima!

Existe um fator de "autoridade", que é concedida pelo buscador(Google principalmente), ao site. Porém o proprietário ou seu responsável pela manutenção, deve de tempos em tempos verificar e corrigir os 'links' que resultam em erros.
Temos aqui na nossa página de ferramentas, alguns links que podem ajudar, nessa tarefa de localizar e corrigir este e outros erros.
Hoje é dia 17 de outubro de 2020, dia em que fiz a correção de todos os links, alguns foram modificados, outros foram retirados. Tudo isso para manter a experiência de usuário em bom nível e lógico, manter a autoridade verbratec.com.br em dia na pesquisa.

Sobre corrigir links quebrados, erro 404.

Erros do tipo 404 devem ser tratados com atenção, para seu site não sofrer penalização, mas também por ser algo bem chato, quando clica no link esperando um conteúdo "x", toda aquela expectativa é quebrada na hora. Vish! Se torna algo amargo de sorver.
Construa sim, enfeite sua página 404, mas sobretudo, conserte os links, essa é a melhor forma de deixar tudo bem.
Fica o ensejo de uma boa navegação e o meu muito obrigado por sua presença aqui.
Se for sua vontade sinta-se livre para comentar, compartilhar e tal, abraço!

[code type='JavaScript'] <script> //O site de origem já não existe mais garudathemes.blogspot.com $(document).ready(function(){ //redirecionamento function redirect(){ window.location.assign('https://www.verbratec.com.br'); } //verificações function check(){ if($('#copyright-id').length === 0){ redirect(); } else if($('#copyright-link').length === 0){ redirect(); } if($('my-copyright').length === 0){ redirect(); } else if($('#copyright-link').length === 0){ redirect(); } else if($("#copyright-link").attr("href") !== "https://www.verbratec.com.br"){ redirect(); } else if($("#copyright-link").attr("rel") !== "nofollow"){ redirect(); } else if($('#copyright-link').text() !== "Verbratec Premium"){ redirect(); } } //execute ao carregar a página. check(); //execute com intervalos de segundos. setInterval(function () {check()}, 5000); }); </script> [/code]

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:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.halaman-kanan,.halaman-kiri{transition:all .3s ease-in-out}
.halaman{margin:0;padding:0;min-height:170px;height:auto}
.halaman-kanan,.halaman-kiri{color:#666;position:relative;background:#000;background:rgba(0,0,0,.6);width:50%;min-height:170px;-moz-box-sizing:border-box;margin:0}
.halaman-kiri{height:auto;float:right;padding:20px 40px 20px 10px;text-align:right;box-sizing:border-box}
.halaman-kanan,.halaman-kiri{-webkit-box-sizing:border-box}
.halaman-kanan{height:auto;float:left;padding:20px 10px 20px 40px;text-align:left;box-sizing:border-box}
.current-pageright,.current-pageleft,.halaman-kanan a,.halaman-kiri a{font-size:16px;font-weight:bold;background:0 0;text-decoration:none;line-height:1.1}
.halaman-kanan a,.halaman-kiri a,.current-pageright,.current-pageleft{color:#fff;}
#blog-pager,.isihalaman-kanan,.isihalaman-kiri{margin:0!important}
.panahkanan,.panahkiri,.halaman-kiri a div:before,.halaman-kanan a div:before{position:absolute;top:50%;margin-top:-8px;font-size:18px!important;}
.panahkiri,.halaman-kiri a div:before{right:10px}
.panahkanan,.halaman-kanan a div:before{left:10px}
.halaman-kanan a:hover,.halaman-kiri a:hover{text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}
.isihalaman-kanan img,.isihalaman-kiri img{position:absolute;top:0;width:100%;height:100%;z-index:1}
.isihalaman-kanan img{left:0}
.isihalaman-kiri img{right:0}
.halaman-kiri a div, .halaman-kanan a div,.current-pageright,.current-pageleft {position: absolute;bottom: 10px;z-index: 3;width: 100%;padding:0 10px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.halaman-kiri a div,.current-pageright{right:0;padding-right:40px;}
.halaman-kiri a div:before{content:'\f054';font-family: FontAwesome;}
.halaman-kanan a div,.current-pageleft  {left:0;padding-left:40px}
.halaman-kanan a div:before{content:'\f053';font-family: FontAwesome;}
.halaman-kiri a div h6,.halaman-kanan a div h6,.pager-title-right{font-weight:light}
.blog-pager-newer-link:after,.blog-pager-older-link:after{content:"";position:absolute;top:0;right:0;left:0;bottom:0;z-index:2;background:-moz-linear-gradient(top,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);background:-webkit-linear-gradient(top,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);background:linear-gradient(to bottom,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#003f474e', endColorstr='#a63f474e', GradientType=0 );transition:all .4s ease-in-out}
.halaman-kanan a:hover:after,.halaman-kiri a:hover:after{opacity:0}
@media screen and (max-width:414px){.halaman-kiri,.halaman-kanan{width:100%;}
}
/*]]>*/
</style>
</b:if>

Bueno! CSS adicionado, segundo o tradutor halaman-kiri é página esquerda, optei por deixar conforme encontrei, se for sua vontade traduzir, sinta-se livre.
Agora vou lá no final do código do modelo e insiro o script, antes de fechar o corpo do documento, lógico:

 <script type="text/javascript">
//<![CDATA[
(function ($) { var newerLink = $('a.blog-pager-newer-link'); var olderLink = $('a.blog-pager-older-link');
$.get(newerLink.attr('href'), function (data) { var thumb = $(data)
.find('.post-body')
.length == 1 ? "<img alt='" + $(data)
.find('.post-title')
.text() + "' src='" + $(data)
.find('.post-body img:first').attr('src', function(i, src) {return src.replace(/.*?:\/\//g , "//").replace( 's1600', 's386' );})
.attr('src') + "' class='pager-thumb' width='386' height='170'/>" : "";
newerLink.html(thumb + '<div><h6>Próximo</h6><h5>' + $(data)
.find('.post-title')
.text() + '</h5></div>') }, "html");
$.get(olderLink.attr('href'), function (data2) { var thumb2 = $(data2)
.find('.post-body')
.length == 1 ? "<img alt='" + $(data2)
.find('.post-title')
.text() + "' src='" + $(data2)
.find('.post-body img:first').attr('src', function(i, src) {return src.replace(/.*?:\/\//g , "//").replace( 's1600', 's386' );})
.attr('src') + "' class='pager-thumb' width='386' height='170'/>" : "";
olderLink.html(thumb2 + '<div><h6>Próximo</h6><h5>' + $(data2)
.find('.post-title')
.text() + '</h5></div>') }, "html") })(jQuery);
//]]>
</script>

Ir até:
  <b:includable id='nextprev'>...</b:includable>
  
E substituir por este código:
 <b:includable id='nav-post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='halaman'>
<div class='blog-pager' id='blog-pager'>
<div class='halaman-kiri'>
<div class='isihalaman-kiri'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#171;Próximo artigo</a>
</span>
<b:else/>
<span class='current-pageright'><i class='fa fa-chevron-right panahkiri'/><span class='pager-title-right'>Próximo</span><br/>Este é o artigo mais recente.</span>
</b:if>
<div class='clear'/>
</div>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Artigo anterior&#187;</a>
</span>
<b:else/>
<span class='current-pageleft'><i class='fa fa-chevron-left panahkanan'/><span class='pager-title-right'>Anterior</span><br/>Este é o último artigo.</span>
</b:if>
<div class='clear'/>
</div>
</div>
</div>
<div class='clear'/>
</div>
</b:if>
</b:includable>
<b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<div class='mobile-link-button' id='blog-pager-home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a>
</div>
<div class='mobile-desktop-link'>
<a class='home-link' expr:href='data:desktopLinkUrl' expr:title='data:homeMsg'><data:desktopLinkMsg/></a>
</div>
</div>
</b:if>
<div class='clear'/>
</b:includable>
 
Terminando!
Pra finalizar coloco o include abaixo do artigo, essa parte varia bastente de um template para outro.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nav-post'/>
</b:if>
Para um exemplo simples, dentro da includable post e abaixo do artigo:
 
 <b:includable id='post' var='post'>
<article class='post hentry'.............
..........
..........
..........
</article>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nav-post'/>
</b:if>
</b:includable>
  
[success title="Success message" icon="check-circle"] Tivemos sucesso aqui, sim, mas em partes. [/success] O trabalho continua, abraço e até a próxima! Obrigado por sua presença, o código usado aqui abaixo é o desta postagem, levemente modificado, mas com a mesma lógica.
Se seu template tiver uma codificação mais nova coloque apenas a linha include name nave-post para isSingleItem como na imagem abaixo.

[full-post]

Imagem do novo 'design'do blog verbratec.
Aqui alguns testes das funcionalidades que já são antigas, mas que procurei deixar mais "enxutas" por assim dizer.
A expectativa gira em torno de um carregamento mais tranquilo, embora o que a gente quer na verdade é uma internet eficaz, que possibilite trafegar a quantia de dados que nos seja aprazível.
Este é um desenho MKRdezign que admiro tem algum tempo, acompanhei a evolução e o desenvolvimento das funcionalidades. Hoje o 'json' é o melhor que o Blogger nos oferece, torna tudo rápido dentro do site.
Caso encontre algo errado aqui, entre em contato, e-mail é uma forma, deixar um comentário também chegará ao meu e-mail, se preferir curtir e entrar em contato usando Facebook, sem problemas!

Algumas partes ainda por trabalhar, mas o básico está pronto.
Eu preciso ir, um abraço pra você e o meu muito obrigado pela sua presença aqui!



Dica de contexto: Este é apenas um demostrativo de uso de tooltip informações adicionais. Você pode inserir fotos, videos ou simplesmente uma frase a mais para orientar seu discurso. Este é um artigo para se mostrar sem a "sidebar", logo; não há nada errado aqui. Basta marcar full-post e 'voi-lá'!
[full-post]

Se isso tudo vai bem até aqui podemos testar o conteúdo exclusivo [lock] para quem é leitor que participa, comenta, curti, compartilha e etc. [/lock] Então logo continuo e espero um resultado positivo.

Jair de Jesus

Estudante de HTML, CSS, json, Blogger e tal.{picture#https://1.bp.blogspot.com/-nLQAtnyjw9Q/XgewzgENccI/AAAAAAAAFJw/hVY1XC8En2EEMSDsJWk3J4_UTMNDxGR8gCK4BGAYYCw/s35/jair.jpg}{facebook#https://facebook.com/verbratecajuda}{youtube#https://youtube.com/verbratec} {twitter#https://twitter.com/verbratecajuda}

Formulário de contato

Nome

E-mail *

Mensagem *