Novembro 2011



   Com css retira-se a navbar e coloca-se de volta facilmente; as imagens mostram o código para retirar a navbar e reposicionar a página para não ficar um espaço em branco, tudo explicado em detalhes:

   E após ter retirado a navbar; querendo voltar e ter sua navbar basta aplicar /* no início e no final aplique */ como mostra a imagem:
   Nunca foi tão fácil!
   Para ver como aceder o HTML de seu blog click aqui.

   No painel de edição de HTML do seu blog, busque a chave de fechamento b:skin premindo simultaneamente Ctrl F e digitando na caixa como na imagem:

   Insere o código acima dela como todo e qualquer código css deve ser adicionado e me diz que foi fácil.
   Click em visualizar e seu blog aparecerá já sem a navbar. Gostou clik em salvar modelo e está pronto.
   Depois da segunda vez que aceder o HTML de seu blog, não esquece mais o caminho, apenas é preciso ter cuidado, quando não tiveres confiança faça primeiro em seu blog de testes.
   Não tem um blog de testes? Click aqui e veja como criar um blog.

   Agora vou colocar de volta pois eu gosto de fazer login e sair por ela. Fica a imagem do blog sem navbar.


Abaixo uma pequena atualização feita em 31-01-2012.

Agora com o suporte dos navegadores ao css3 resolvi ocultar/mostrar a navbar e para fazer isto em seu blog é só inserir este pequeno código, sempre acima da chave de fechamento b:skin

Para facilitar tem a imagem para conferir o código abaixo é só copiar.

#navbar-iframe { }
body .navbar { height:0px; }
.content-outer { margin-top:0px; }
#navbar-iframe { opacity:0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease; }
#navbar-iframe:hover { opacity:1; }

Sempre confira os códigos colados, pois é durante a transferência que os dados se corrompem.



Obrigado pela sua atenção e tenha uma boa navegação!



   O Google iniciou o redirecionamento para o novo fórum de ajuda do BLOGGER na nova plataforma; agora 17:48 do dia 28/11/2011.

   Esperemos que as pessoas ajudem as pessoas e que a nova plataforma possibilite isto.


   Abaixo vemos a imagem do comunicado do Google por e-mail:


   Os links ainda não estão funcionando, mas...


   A primeira imagens é a que fica:

   Estão aí então os erros BX!


   É possíver acompanhar o desenvolvimento do trabalho de classificação das respostas, que está sendo feita pela equipe de funcionários do Google, na plataforma velha para depois passar para nova:


   Por enquanto a nova plataforma segue carregando e nenhum tópico está disponível:


   Olha o aviso chegando a tela do antigo fórum:

   Aqui o link para o forum de ajuda do BLOGGER na nova plataforma!


   O trabalho prossegue e eu vou ajudar alguém em algum lugar.

   Obrigado pela atenção!





   O primeiro passo é ter o seu código html, javascript, para o seu gadget
   vídeo ainda está disponível no YouTube, porém o Google já encerrou o uso pelo site, então agora em 2018 é preciso fazer pelo painel do Blogger.
Como obter seu HTML do Google Friend Connect para o gadget seguidores abaixo descrito se tornou obsoleto e até mesmo o Google e os usuários já preferem G+ seguidores.
   O segundo passo é inserir um novo gadget HTML/javascript e colar seu código nele repare que o titulo "GADGET SEGUIDORES POSITION" está aparecendo para o exemplo, se apagar o titulo do gadget nada irá aparecer no local e sim nas coordenadas CSS, sendo iniciante sugiro que deixe o título para não se perder.
   O motivo desta primeira imagem é mostrar que carrega pois o Google anda problemático ultimamente, as vezes tem que premir F5 duas três vezes até aparecer os seguidores no gadget, mas isto não tem nada a ver com o posicionamento e sim com o Google Friend Connect.


   Onde insere o código? Dentro da div como mostra a imagem, faz o seu id especial, eu usei bah no exemplo:



   E agora vamos ao css do blog; em design, modelo, click em HTML, prosseguir, marque a caixa expandir modelos de widgets, press Ctrl F simultaneamente e busque a chave fechamento /b:skin e cole o código acima dela, como mostra a imagem:
   Agora vamos focar o css:
   Estando nos conformes click em visualizar, estiver na posição certa click em salvar modelo. Os ajustes na posição são feitos usando margin, top é a parte de cima de seu blog e right a lateral direita, agora é só observar e ajustar; onde está -585px; coloque -485 e o conteúdo da div se deslocará 100pxs para o lado, fácil né?

Quem já tem blog, está acompanhando os acontecimentos relacionados ao gadget do Google Friend Connect; quem está chegando agora ao Blogger veja o gadget posicionado levemente à esquerda da sidebar css position.
Existe muitos aparelhos realmente bons na internet, com licença livre e de fácil implementação no Blogger. O caso é que temos que escolher apenas alguns e este sem dúvida está no páreo dos melhores, pelo menos na minha opinião.
Alguns problemas estão relacionados ao sistema de redirecionamento com a adição do .br no url por isso passei a usar um script para manter o .com e contornar enquanto for possível.
A mensagem é natural já que o plug-in do Facebook consta o url .com ou se procede a reinstalação com o novo url .br ou no mínimo retira com css display none.
Geralmente os problemas assim ocorrem de uma maneira geral, então fui em busca de notícias em outros blogs e veja a imagem do Mundo Blogger em que apareceu o ícone de edição do gadget:
Começo com este episódio, a pensar na possibilidade de ocultar o ícone para evitar transtornos.
Deixo aqui o script para quem tiver com estes problemas e queira manter o url antigo até que se encontre o defeito.
Editado em 19-03-2012
É muito importante verificar se o seu blog está configurado para mostrar os ícones de edição rápida:

Este script está no fórum de ajuda oficial do Blogger, marcado como melhor resposta confira.
Para as pessoas com menos intimidade com html deixo este link que mostra certinho como aceder o editor de html do Blogger com imagens.

   Abraço! Qualquer dúvida deixe um comentário por favor.

   Para entrar em contato:





   Para trabalhar com imagens no BLOGGER não tem mistério, como já visto na postagem: postando imagem verbratecajuda


   Hoje vamos ver algumas dicas importantes para o decorrer do tempo, ninguém aprende tudo num dia só!

   A imagem possui um peso vamos ver os detalhes da imagem clicando sobre o arquivo com o botão direito do mouse e escolhendo a opção propriedades:

Vamos arredondar o valor para 50KB arquivo.jpg


   Agora veremos as propriedades da mesma imagem no formato arquivo.gif

  Note que o peso aumentou em mais de 100% indo para 117KB arquivo.gif.


   Agora veremos as propriedades da mesma imagem ainda, porém no formato arquivo.png

   Veja que agora o peso foi maior que 450KB o que daria para armazenar 9 arquivos.jpg então percebemos as diferenças de peso entre os formatos.


   Agora vamos ver a qualidade de imagem do arquivo.jpg


   Agora vamos ver a qualidade de imagem do arquivo.png

   Para o upload demora, e a qualidade será que é 9 vezes melhor?


   Eu acredito que vale a pena usar o menor peso do arquivo.jpg mas o que vale aqui é esclarecer como funciona o conjunto da obra.

   Veja o que diz a página do Google sobre o assunto. Armazenamento gratuito Google.

   Na imagem vemos que para meus álbuns tenho um limite de 1024MB ou 1GB não usado.

Novo limite passou para cinco gigas como podemos ver na imagem abaixo:

Passados os vários problemas agora vem esta novidade muito boa que irá facilitar muito a vida de muitos blogueiros.


Editado em 14/12/2012


   Para mudar o formato do arquivo é muito fácil; abre o arquivo com um programa editor de imagens e clica em guardar como1, escolhe a opção guardar com o tipo2, digita o nome com a extensão pretendida3 e clica em guardar4.


   Outro detalhe importante é redimensionar o arquivo, ou seja; se tenho uma coluna de postagem com largura de 530px então não faz sentido armazenar o arquivo com 1300px.

   Sempre lembre que quanto menor e mais leve for o arquivo mais rápido a página irá carregar; fazendo o internauta feliz!


[ads-post]
Alguns parâmetros na url do arquivo servido por Blogger:
-rw possibilita baixar comprimido como WebP, clique e salvar como lhe dá opção "salvar como WebP", possibilitando usar o arquivo com peso menor em 20% ou pouco mais.
Ex: https://1.bp.blogspot.com/-9s1oR2exbN4/XB2RHcJqNPI/AAAAAAAAEuw/PUziG5l61OQvghrt7jvmaDARZYWNz12iQCLcBGAs/s1600-rw/Curiosidades.png


-d possibilita criar link de download direto da imagem, "clicou baixou", por exemplo:
https://1.bp.blogspot.com/-9s1oR2exbN4/XB2RHcJqNPI/AAAAAAAAEuw/PUziG5l61OQvghrt7jvmaDARZYWNz12iQCLcBGAs/s1600-d/Curiosidades.png


-g cria o objeto xml da imagem, automaticamente dessa forma:
https://1.bp.blogspot.com/-9s1oR2exbN4/XB2RHcJqNPI/AAAAAAAAEuw/PUziG5l61OQvghrt7jvmaDARZYWNz12iQCLcBGAs/s1600-g/Curiosidades.png

Demostração com parâmetro -r180 com a imagem do cartão.
https://1.bp.blogspot.com/-misZvbEwnTo/WoMacrqGESI/AAAAAAAAETE/lS-mPcq8H3Iv_zXV1Ii6z9MDBmp_JslFACLcBGAs/s320-r180/verbratec%2Bajuda%2Bblogger.png
Cartão de Verbratec girado em 180 graus.
  • Virar imagem - verticalmente - Para virar uma imagem, verticalmente, use a fv opção. Por exemplo, s0-fv inverterá a imagem com as dimensões originais - verticalmente.
  • Inverter imagem - horizontalmente style - Para inverter horizontalmente, use a fh opção. Um exemplo simples mais uma vez é s0-fh.
  • Girar imagem - Se você quiser girar a imagem, use a r opção. Três ângulos de rotação estão disponíveis, 90, 180 e 270 graus. Por exemplo, s0-r180 é essencialmente uma virada vertical.
  • Obter formato JPG - Use a rj opção para obter a imagem no formato JPG. Por exemplo, uma imagem PNG com os parâmetros s0-rj fornecerá a mesma imagem em formato JPG.
  • Buscar formato PNG - Para recuperar a imagem em formato PNG, use rp
  • Obter formato WebP - Para obter uma imagem no formato WebP do Google, use rw
  • Obter formato GIF - Para converter a imagem em um formato GIF, use rg
  • Aplicar opções de formato - geralmente, as imagens JPEG são de 3 tipos, a saber, Baseline Standard, Baseline Optimized e Progressive. Podemos usar esses tipos por meio da v opção com os números 0, 1, 2 e 3.

    Por exemplo, s0-v0 ou s0-v1. Conforme aumentamos o número para 2 e 3, a degradação da qualidade é substancial e não é recomendada para uso no site.
  • Obtenha MP4 de um GIF animado - Se você deseja incorporar um GIF animado na forma de um arquivo de vídeo MP4, use a rh opção. Aqui está um exemplo.

    
    <video width="480" controls>
    <source src="https://xxxx/s0-rh/image.gif" type="video/mp4">
    </video>

    A largura pode ser alterada de acordo com suas necessidades. Como você deve ter notado, usamos a <video> tag HTML5 em vez de usar a <img> tag regular.
  • Matar animação GIF - Querendo matar a animação da imagem GIF e se quiser a versão estática da mesma, use a k opção. Por exemplo, s0-k retorna a forma estática de uma imagem GIF animada.
  • Definir borda / moldura customizada - Geralmente, para aplicar uma borda customizada ou uma moldura ao redor de uma imagem, usamos regras CSS. Mas, e se pudermos fazer isso sem usar nenhum código CSS?

    Cartão de Verbratec.
    Felizmente, pode-se facilmente obter uma borda personalizada ( exemplo mostrado acima ) por meio de uma combinação de dois parâmetros. O primeiro parâmetro b adiciona uma borda espessa de pixels especificada à imagem.
    O segundo parâmetro c é usado para especificar a cor da borda em formato hexadecimal. O exemplo acima usa s320-b10-c0xff005500 parâmetros. Aqui, a espessura da borda é de 10 pixels e a cor está no formato 0xAARRGGBB.
  • Cor de fundo para transparência use o parâmetro -rj-c0x006600.
  • Compactar imagem JPEG - se você se preocupa com a velocidade do site, postar imagens volumosas para os visitantes não é recomendado de forma alguma. A compactação da imagem pode reduzir o tamanho do arquivo, o que, por sua vez, reduz o tamanho geral da página da web. Está disponível um parâmetro de compressão de imagem lque reduz o tamanho do arquivo, mas afeta a qualidade da imagem ao mesmo tempo. Um exemplo do mesmo é o s0-rj-l85 que compacta o arquivo em 15 por cento.
  • Imagem de cache - o cache de recursos do navegador no final do visitante é um dos recursos importantes para fornecer uma experiência de navegação rápida aos leitores. Para fazer isso, é necessário especificar o tempo de expiração do ativo.

    Para fazer isso, use o e parâmetro. Por exemplo, s0-e30 armazenará em cache a imagem no final do visitante do site por 30 dias.
  • Desfocar a imagem - Geralmente, não desfocamos as imagens ao usá-las para o conteúdo da web. Mas, em casos selecionados, podemos precisar fazer isso. Felizmente, há um parâmetro para desfocar as imagens também.

    Uma imagem borrada do cartão Verbratec.
    Use a fSoften opção que leva 3 parâmetros numéricos para adicionar o efeito de desfoque. Para a imagem de amostra mostrada acima, usei fSoften=1,5,0 para adicionar o efeito de desfoque desejado. Aqui, o número do meio pode ser alterado de 0 a 100 para ajustar e ajustar a intensidade do efeito de desfoque.
  • Adicionar gradiente e sombra de borda - E agora vem o efeito de gradiente combinado com uma cor de sombra de borda personalizada. Sim, você também pode fazer isso!
    Cartão Verbratec com um efeito gradiente
    Use a fVignette opção de adicionar ambos os efeitos à imagem. Para a imagem demo, usei fVignette=1,100,1.5,0,006600 para adicionar o gradiente e a sombra da borda.

    Aqui, o número de ponto flutuante ( 3º parâmetro ) pode ser usado para ajustar a área de cobertura do gradiente e o código de cor hexadecimal ( último parâmetro ) pode ser usado para especificar a cor da sombra da borda.

A parte mais difícil é usar a linguagem interna do Blogger, como:
[code type="HTML"] <!-- novo tamanho de imagem em 300px --> <img expr:src=’resizeImage(data:post.firstImageUrl, 300)’ /> <!-- novo tamanho de imagem em 600px com proporção 1:1 --> <img expr:src=’resizeImage(data:post.firstImageUrl, 600, &quot;1:1&quot;)’ /> <!-- novo tamanho de imagem em 900px com proporção 4:3 --> <img expr:src=’resizeImage(data:post.firstImageUrl, 900, &quot;4:3&quot;)’ /> [/code]
[success title="Atualizando!" icon="check-circle"] Estamos tendo sucesso com o novo script construtor.
Toda atualização constará desta forma: revisado em 24 de maio de 2021. [/success]

   Para entrar em contato:






   Farei aqui uma postagem rápida explicando como inserir o botão do Google Chrome campanha do navegador.

   Usarei imagens aqui partindo do layout.

   Click em adicionar um gadget:




   Puxe scrollbar para baixo e escolha o gadget HTML/javascript com um click:




   Copie o código do botão, tag iframe disponibilizada no fórum de ajuda do Blogger:

Click na imagem abaixo para aceder o fórum em nova aba e copiar o código.




   Insere o código no gadget como mostrado na imagem e click em salvar:


Na parte superior do painel click em salvar:

   Está pronto; querendo posicioná-lo em outro local é só ir em layout e click sobre o gadget para arrasta-lo à outra posição que queira.




   Em 2013 pretendemos que o blog verbratec ajuda seja visto na maioria dos aplicativos, então deixaremos de fazer uso de arquivos em flash já que algumas pessoas não instalam o plug-in e relutam em usar um novo browser. Tentarei melhorar o blog para todos. Usarei apenas os melhores HTML e CSS válidos, para o seu conforto e segurança. Os usuários com browsers modernos poderão desfrutar de efeitos JQuery.

Editado 28-12-2017


   Para entrar em contato:




   Hoje foi um dia horrível até agora 19:38h espero que o Google, Blogger, conexão se mantenha!

Aqui num momento em que o Blogger desconectou.




   Para conferir abri o Orkut...




   E assim passei minha tarde...




   Pelo menos sabemos que os problemas ocorrem com todos, hoje deve deve ter sido o meu dia, nem as imagens da página oficial do BLOGGER no Google+ carregavam.



   Quero que todos tenham uma navegação feliz!


   Para entrar em contato:





   Tem ocorrido muitos casos de internautas que copiam códigos e inserem em seus blogs e então começam a aparecer propagandas, o blog fica desconfigurado e etc.
   Alguns lembram do fórum de ajuda do BLOGGER, outros seguem sofrendo e há os que conseguem resolver o "problema".
   Como podemos ver na imagem está escrito no termo de serviço então o site está certo. A falha está na falta de hábito para ler os termos.
   Para retirar a propaganda retire o gadget contador de visitas.
   Felizmente tudo é bem simples, mas convém tomar cuidado com códigos copiados.
   Perceba que ao lincar um arquivo javascript de um servidor(X) seu blog executará as funções que estiverem no arquivo.js lá no servidor(X). De maneira que tem que confiar na origem pois será possível usando este arquivo.js no servidor(X) fazer muitas coisas em seu blog, além de mostrar uma simples propaganda.
   Pior é quando o proprietário do blog nega que tenha inserido um código, tendo um blog antigo com material vasto e codificação mais vasta ainda, ai fica super ruim de ajudar, quase impossível.
   Eu uso um contador de visitas, o mesmo desde o outro blog que perdi (longa história) lá no final da página, feito pelo site https://www.contadordevisitasgratis.com gratuitamente e sem problemas, basta fazer sua conta, escolher e configurar seu contador.
   Temos que criar conta para o servidor nos permitir armazenar imagens, temos que criar conta para que possamos armazenar arquivo.pdf, então devemos criar uma conta também para o servidor do contador de visitas.
Obrigado por ler e tenha uma boa navegação!
Editado em 28/12/2011

   Novos casos ocorrendo com PageRank também do s12 veja a imagem:
   Segue a imagem do código usado neste caso:
No fórum de ajuda do Blogger também há usuários gratos:



E eu me sinto tão bem sendo útil. Obrigado à você que participa!
Recomendo que desinstale qualquer extensão que não se lembra de ter instalado, uma vez que ela pode deixar o Google Chrome mais lento e alterar a forma como ele funciona.
Em caso de suspeita de contaminação use o https://www.virustotal.com/ para escanear seu blog/site.

Editado em 07/06/2015
  Veja um caso mais recente e com imagens, aqui.

   Tenha cuidado ao linkar arquivos com linguagens; asp, php e etc.
Saiba mais:w3schools.com/php

   Para entrar em contato:


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 *