Tutorial: Stats com Emojis ou GIFs para Blogger

por Adê

IMPORTANTE:

  • Este tutorial foi liberado apenas para a comunidade do Entreblogs via WhatsApp será revisado e editado em breve, mas aqui vai uma versão preliminar caso você queira testar
  • Para adicionar seus próprios GIFs basta colar a URL da imagem em cada status
  • Faça um teste antes de publicar mudanças em seu blog
  • O código foi testado num gadget adicionado no menu lateral inferior. Por algum motivo ainda não funciona bem no menu superior (fica encolhido com o perfil)
  • Caso prefira, customize o código usando sua IA de preferência :kissy:

Passo 1:

Adicione uma nova página e cole este código no visualizador de HTML do seu editor na plataforma:

Passo 2: copie o código abaixo

<!-- ==========================================================
     Painel Gerador de Status
     Cole este bloco em uma Página do Blogger (não listada no
     menu). Preencha os status abaixo, clique em "Gerar código"
     e copie o resultado para: Layout > Adicionar um Gadget >
     HTML/JavaScript. Sempre que quiser atualizar, volte aqui,
     edite os campos, gere de novo e substitua o código do
     gadget.
     ========================================================== -->
<div class="mpl-gerador" id="mpl-gerador">
  <h2 class="mpl-gerador-title">Atualizar meus status</h2>
  <p class="mpl-gerador-subtitle">Adicione, remova ou altere suas atividades. Depois gere o código e cole no gadget HTML/JavaScript da sua barra lateral.</p>

  <label for="mpl-titulo-widget" class="mpl-titulo-label">Título do widget</label>
  <input type="text" id="mpl-titulo-widget" class="mpl-titulo-input" maxlength="60" placeholder="Ex: Meus Status">
  <p class="mpl-gif-hint">Dica: no campo de ícone de cada status, você pode digitar um emoji (✨) ou colar a URL de um GIF/imagem sua (não é possível enviar arquivo direto por aqui — hospede em algum lugar como Giphy, Tenor ou Imgur e cole o link).</p>

  <div class="mpl-gerador-rows" id="mpl-painel-container"></div>

  <button type="button" id="mpl-add-row" class="mpl-btn mpl-btn-outline">+ Adicionar novo status</button>
  <button type="button" id="mpl-gerar-codigo" class="mpl-btn mpl-btn-primary">Gerar código do widget</button>

  <div class="mpl-gerador-output" id="mpl-output-wrap" hidden>
    <label for="mpl-output-codigo" class="mpl-output-label">Código gerado — copie e cole no gadget HTML/JavaScript</label>
    <textarea id="mpl-output-codigo" class="mpl-output-textarea" readonly rows="8"></textarea>
    <button type="button" id="mpl-copiar-codigo" class="mpl-btn mpl-btn-primary">Copiar código</button>
    <span id="mpl-copiar-feedback" class="mpl-copiar-feedback" role="status" aria-live="polite"></span>

    <p class="mpl-preview-label">Pré-visualização</p>
    <div class="mpl-preview-box" id="mpl-preview-box"></div>
  </div>

  <noscript>
    <p class="mpl-noscript">Este painel precisa de JavaScript habilitado no navegador para funcionar.</p>
  </noscript>
</div>

<style>
  .mpl-gerador,
  .mpl-gerador * {
    box-sizing: border-box;
  }
  .mpl-gerador {
    max-width: 560px;
    margin: 20px auto;
    padding: 24px;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e2e5;
    border-radius: 14px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #374151;
  }
  .mpl-gerador-title {
    margin: 0 0 6px;
    font-size: 20px;
    text-align: center;
    color: #1f2937;
  }
  .mpl-gerador-subtitle {
    margin: 0 0 22px;
    font-size: 13px;
    text-align: center;
    color: #6b7280;
  }
  .mpl-titulo-label {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 6px;
  }
  .mpl-titulo-input {
    display: block;
    width: 100%;
    height: 38px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 16px;
    padding: 0 10px;
    margin-bottom: 18px;
  }
  .mpl-titulo-input:focus {
    outline: 2px solid #9ca3af;
    outline-offset: 1px;
  }
  .mpl-gif-hint {
    margin: -12px 0 18px;
    font-size: 12px;
    color: #9ca3af;
  }
  .mpl-gerador-row {
    display: flex;
    gap: 8px;
    align-items: center;
    background: #f9fafb;
    border: 1px solid #edeef0;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
  }
  .mpl-gerador-row input {
    height: 38px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 16px;
  }
  .mpl-gerador-row input:focus {
    outline: 2px solid #9ca3af;
    outline-offset: 1px;
  }
  .mpl-input-emoji {
    width: 44px;
    text-align: center;
    padding: 0;
  }
  .mpl-input-cat {
    width: 110px;
    font-weight: 600;
    padding: 0 6px;
  }
  .mpl-input-txt {
    flex: 1;
    min-width: 0;
    padding: 0 8px;
  }
  .mpl-remove-row {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #9a3b3b;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
  }
  .mpl-remove-row:hover {
    background: #fbf4f4;
  }
  .mpl-reorder {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 38px;
  }
  .mpl-move-up,
  .mpl-move-down {
    width: 26px;
    height: 18px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    color: #4b5563;
    cursor: pointer;
    font-size: 9px;
    line-height: 1;
  }
  .mpl-move-up:hover:not(:disabled),
  .mpl-move-down:hover:not(:disabled) {
    background: #f3f4f6;
  }
  .mpl-move-up:disabled,
  .mpl-move-down:disabled {
    opacity: 0.3;
    cursor: default;
  }
  .mpl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    padding: 11px;
    margin-top: 10px;
  }
  .mpl-btn-outline {
    background: #fff;
    color: #4b5563;
    border: 1px dashed #9ca3af;
  }
  .mpl-btn-outline:hover {
    background: #f3f4f6;
  }
  .mpl-btn-primary {
    background: #374151;
    color: #fff;
    border: none;
  }
  .mpl-btn-primary:hover {
    background: #1f2937;
  }
  .mpl-gerador-output {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e5e7eb;
  }
  .mpl-output-label {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 6px;
  }
  .mpl-output-textarea {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    color: #374151;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    padding: 10px;
    resize: vertical;
  }
  .mpl-copiar-feedback {
    display: inline-block;
    margin-left: 10px;
    font-size: 13px;
    color: #2f6f4f;
    vertical-align: middle;
  }
  .mpl-preview-label {
    font-size: 12px;
    color: #6b7280;
    margin: 18px 0 6px;
  }
  .mpl-preview-box {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px;
  }
  .mpl-noscript {
    text-align: center;
    color: #9a3b3b;
    font-size: 13px;
  }

  @media (max-width: 560px) {
    .mpl-gerador {
      margin: 0 auto;
      padding: 16px;
      border-radius: 0;
    }
    .mpl-gerador-row {
      flex-wrap: wrap;
      row-gap: 8px;
    }
    .mpl-input-emoji {
      order: 1;
      flex: 0 0 56px;
    }
    .mpl-input-cat {
      order: 2;
      flex: 1 1 auto;
      width: auto;
    }
    .mpl-input-txt {
      order: 3;
      flex: 1 1 100%;
    }
    .mpl-reorder {
      order: 4;
      flex: 2 1 0;
      flex-direction: row;
      height: 40px;
      gap: 8px;
    }
    .mpl-move-up,
    .mpl-move-down {
      flex: 1 1 0;
      width: auto;
      height: 40px;
      font-size: 15px;
    }
    .mpl-remove-row {
      order: 5;
      flex: 1 1 0;
      height: 40px;
    }
  }
</style>

<script>
(function () {
  var STORAGE_KEY = 'mpl_gerador_rascunho';

  var container = document.getElementById('mpl-painel-container');
  var outputWrap = document.getElementById('mpl-output-wrap');
  var outputTextarea = document.getElementById('mpl-output-codigo');
  var previewBox = document.getElementById('mpl-preview-box');
  var copyFeedback = document.getElementById('mpl-copiar-feedback');
  var tituloInput = document.getElementById('mpl-titulo-widget');

  var TITULO_PADRAO = 'Meus Status';

  var itensPadrao = [
    { emoji: '\u{1F495}', categoria: 'Sentindo', texto: 'Feliz com o painel novo!' },
    { emoji: '\u{1F3B5}', categoria: 'Ouvindo', texto: 'Lana Del Rey - Radio' },
    { emoji: '\u{1F4DA}', categoria: 'Lendo', texto: 'Machado de Assis' }
  ];

  function escapeHtml(str) {
    return String(str)
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
  }

  function isUrlSegura(url) {
    return /^https?:\/\//i.test(url);
  }

  function lerRascunhoSalvo() {
    try {
      var salvo = localStorage.getItem(STORAGE_KEY);
      if (!salvo) {
        return { titulo: TITULO_PADRAO, itens: itensPadrao };
      }
      var dados = JSON.parse(salvo);
      if (Array.isArray(dados)) {
        return { titulo: TITULO_PADRAO, itens: dados };
      }
      return { titulo: dados.titulo || TITULO_PADRAO, itens: dados.itens || itensPadrao };
    } catch (e) {
      return { titulo: TITULO_PADRAO, itens: itensPadrao };
    }
  }

  function salvarRascunho() {
    try {
      var dados = { titulo: tituloInput.value, itens: lerLinhas() };
      localStorage.setItem(STORAGE_KEY, JSON.stringify(dados));
    } catch (e) {
      /* localStorage indisponível — segue sem persistir rascunho */
    }
  }

  function criarLinha(item) {
    var row = document.createElement('div');
    row.className = 'mpl-gerador-row';

    var inputEmoji = document.createElement('input');
    inputEmoji.type = 'text';
    inputEmoji.className = 'mpl-input-emoji';
    inputEmoji.value = item.emoji || '';
    inputEmoji.maxLength = 300;
    inputEmoji.title = 'Emoji ou URL de um GIF/imagem (https://...)';
    inputEmoji.setAttribute('aria-label', 'Emoji ou URL de imagem do status');

    var inputCat = document.createElement('input');
    inputCat.type = 'text';
    inputCat.className = 'mpl-input-cat';
    inputCat.value = item.categoria || '';
    inputCat.setAttribute('aria-label', 'Categoria do status');

    var inputTxt = document.createElement('input');
    inputTxt.type = 'text';
    inputTxt.className = 'mpl-input-txt';
    inputTxt.value = item.texto || '';
    inputTxt.placeholder = 'O que está fazendo...';
    inputTxt.setAttribute('aria-label', 'Descrição do status');

    var reorder = document.createElement('div');
    reorder.className = 'mpl-reorder';

    var btnSubir = document.createElement('button');
    btnSubir.type = 'button';
    btnSubir.className = 'mpl-move-up';
    btnSubir.innerHTML = '&#9650;';
    btnSubir.setAttribute('aria-label', 'Mover este status para cima');
    btnSubir.addEventListener('click', function () {
      moverLinha(row, -1);
    });

    var btnDescer = document.createElement('button');
    btnDescer.type = 'button';
    btnDescer.className = 'mpl-move-down';
    btnDescer.innerHTML = '&#9660;';
    btnDescer.setAttribute('aria-label', 'Mover este status para baixo');
    btnDescer.addEventListener('click', function () {
      moverLinha(row, 1);
    });

    reorder.appendChild(btnSubir);
    reorder.appendChild(btnDescer);

    var btnRemover = document.createElement('button');
    btnRemover.type = 'button';
    btnRemover.className = 'mpl-remove-row';
    btnRemover.innerHTML = '&times;';
    btnRemover.setAttribute('aria-label', 'Remover este status');
    btnRemover.addEventListener('click', function () {
      row.remove();
      salvarRascunho();
      atualizarEstadoReordenar();
    });

    row.appendChild(reorder);
    row.appendChild(inputEmoji);
    row.appendChild(inputCat);
    row.appendChild(inputTxt);
    row.appendChild(btnRemover);
    container.appendChild(row);
    atualizarEstadoReordenar();
  }

  function moverLinha(row, delta) {
    if (delta === -1 && row.previousElementSibling) {
      container.insertBefore(row, row.previousElementSibling);
    } else if (delta === 1 && row.nextElementSibling) {
      container.insertBefore(row.nextElementSibling, row);
    }
    atualizarEstadoReordenar();
    salvarRascunho();
  }

  function atualizarEstadoReordenar() {
    var linhas = container.querySelectorAll('.mpl-gerador-row');
    linhas.forEach(function (row, i) {
      row.querySelector('.mpl-move-up').disabled = (i === 0);
      row.querySelector('.mpl-move-down').disabled = (i === linhas.length - 1);
    });
  }

  function lerLinhas() {
    var linhas = container.querySelectorAll('.mpl-gerador-row');
    var itens = [];
    linhas.forEach(function (row) {
      var em = row.querySelector('.mpl-input-emoji').value.trim();
      var ct = row.querySelector('.mpl-input-cat').value.trim();
      var tx = row.querySelector('.mpl-input-txt').value.trim();
      if (tx !== '') {
        itens.push({ emoji: em || '\u{2728}', categoria: ct || 'Status', texto: tx });
      }
    });
    return itens;
  }

  function formatarDataAgora() {
    var agora = new Date();
    var dia = String(agora.getDate()).padStart(2, '0');
    var mes = String(agora.getMonth() + 1).padStart(2, '0');
    var hora = String(agora.getHours()).padStart(2, '0');
    var min = String(agora.getMinutes()).padStart(2, '0');
    return dia + '/' + mes + '/' + agora.getFullYear() + ' às ' + hora + ':' + min;
  }

  var ICON_IMG_INLINE_STYLE = 'width:auto !important;max-width:80px !important;' +
    'max-height:32px !important;object-fit:contain !important;display:inline-block !important;' +
    'vertical-align:middle !important;border-radius:4px !important;';

  function montarItensHtml(itens) {
    return itens.map(function (item) {
      var iconeHtml = isUrlSegura(item.emoji)
        ? '<img class="mpl-status-icon-img" style="' + ICON_IMG_INLINE_STYLE + '" src="' + escapeHtml(item.emoji) + '" alt="" loading="lazy">'
        : '<span class="mpl-status-emoji" aria-hidden="true">' + escapeHtml(item.emoji) + '</span>';
      return '    <li>\n' +
        '      ' + iconeHtml + '\n' +
        '      <span class="mpl-status-text"><strong>' + escapeHtml(item.categoria) + '</strong> ' + escapeHtml(item.texto) + '</span>\n' +
        '    </li>';
    }).join('\n');
  }

  function montarCodigoWidget(itens, dataFormatada, titulo) {
    var tituloHtml = titulo ? '  <p class="mpl-status-title">' + escapeHtml(titulo) + '</p>\n' : '';
    return '<div class="mpl-status-widget">\n' +
      tituloHtml +
      '  <ul class="mpl-status-list">\n' +
      montarItensHtml(itens) + '\n' +
      '  </ul>\n' +
      '  <p class="mpl-status-date">\u{1F4C5} Atualizado em ' + escapeHtml(dataFormatada) + '</p>\n' +
      '</div>\n\n' +
      '<style>\n' +
      '  .mpl-status-widget,\n' +
      '  .mpl-status-widget * {\n' +
      '    box-sizing: border-box;\n' +
      '  }\n' +
      '  .mpl-status-widget {\n' +
      '    font-family: inherit;\n' +
      '    line-height: 1.5;\n' +
      '    padding: 4px 0;\n' +
      '  }\n' +
      '  .mpl-status-widget .mpl-status-title {\n' +
      '    font-weight: 700;\n' +
      '    font-size: 1.05em;\n' +
      '    margin: 0 0 10px !important;\n' +
      '    padding: 0 !important;\n' +
      '  }\n' +
      '  .mpl-status-widget .mpl-status-list {\n' +
      '    list-style: none !important;\n' +
      '    margin: 0 !important;\n' +
      '    padding: 0 !important;\n' +
      '    border: none !important;\n' +
      '  }\n' +
      '  .mpl-status-widget .mpl-status-list li {\n' +
      '    display: flex;\n' +
      '    gap: 8px;\n' +
      '    margin: 0 0 8px !important;\n' +
      '    padding: 0 !important;\n' +
      '    border: none !important;\n' +
      '    background: none !important;\n' +
      '    list-style: none !important;\n' +
      '    font-size: 0.95em;\n' +
      '  }\n' +
      '  .mpl-status-widget .mpl-status-list li:last-child {\n' +
      '    margin-bottom: 0 !important;\n' +
      '  }\n' +
      '  .mpl-status-widget .mpl-status-emoji {\n' +
      '    flex: 0 0 auto;\n' +
      '    width: 20px;\n' +
      '    text-align: center;\n' +
      '  }\n' +
      '  .mpl-status-widget .mpl-status-icon-img {\n' +
      '    flex: 0 0 auto !important;\n' +
      '    width: auto !important;\n' +
      '    max-width: 80px !important;\n' +
      '    max-height: 32px !important;\n' +
      '    object-fit: contain !important;\n' +
      '    border-radius: 4px;\n' +
      '  }\n' +
      '  .mpl-status-widget .mpl-status-text strong {\n' +
      '    font-weight: 600;\n' +
      '    margin-right: 4px;\n' +
      '  }\n' +
      '  .mpl-status-widget .mpl-status-date {\n' +
      '    font-size: 0.8em;\n' +
      '    opacity: 0.65;\n' +
      '    margin: 10px 0 0 !important;\n' +
      '    padding-top: 6px !important;\n' +
      '    border-top: 1px dashed rgba(128, 128, 128, 0.4) !important;\n' +
      '  }\n' +
      '</style>';
  }

  document.getElementById('mpl-add-row').addEventListener('click', function () {
    criarLinha({ emoji: '\u{2728}', categoria: '', texto: '' });
  });

  container.addEventListener('input', salvarRascunho);
  tituloInput.addEventListener('input', salvarRascunho);

  document.getElementById('mpl-gerar-codigo').addEventListener('click', function () {
    var itens = lerLinhas();
    if (itens.length === 0) {
      outputWrap.hidden = true;
      return;
    }
    var dataFormatada = formatarDataAgora();
    var titulo = tituloInput.value.trim();
    var codigo = montarCodigoWidget(itens, dataFormatada, titulo);

    outputTextarea.value = codigo;
    previewBox.innerHTML = codigo;
    outputWrap.hidden = false;
    copyFeedback.textContent = '';
    salvarRascunho();
    outputWrap.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  });

  document.getElementById('mpl-copiar-codigo').addEventListener('click', function () {
    var texto = outputTextarea.value;
    function mostrarFeedback() {
      copyFeedback.textContent = 'Copiado! \u{2705}';
      setTimeout(function () { copyFeedback.textContent = ''; }, 3000);
    }
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(texto).then(mostrarFeedback).catch(function () {
        outputTextarea.select();
        document.execCommand('copy');
        mostrarFeedback();
      });
    } else {
      outputTextarea.select();
      document.execCommand('copy');
      mostrarFeedback();
    }
  });

  var rascunho = lerRascunhoSalvo();
  tituloInput.value = rascunho.titulo;
  rascunho.itens.forEach(criarLinha);
})();
</script>

Passo 3: Como usar

Ao publicar a página, você precisará visualizá-la para gerar seu status (salve a página nos favoritos, por exemplo). E assim, poderá sempre ir nela para criar / editar seus status. Clique em Adicionar status para adicionar mais stats, se quiser.

Depois, basta clicar em Gerar código do Widget e em Copiar código.

Cole o código copiado na seção Layout > Adicionar gadget.

@2026 - Todos os direitos reservados

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Aceito Saber mais

Política de privacidade e de cookies