Barra de progressão para o Blospot

 

Para fazer uma barra assim basta abrir seu painel do BLOGGER ir em LAYOUT clique em ADICIONAR UM GADGET e escolha HTML/JAVASCRIPT Cole o código abaixo. 

Explicando o código e onde mudar: 

1. Primeiro segmento: Começa em  <font color e termina em </div>. Cada um desses é um segmento. Pode apagar, aumentar fazer mais. 

<font color="#000000"><strong> Toma dia 4</strong></font>

<div id="progressbar" style="width:300px;background-color:#EEDD82;border-radius:6px;padding:3px;">

   <div style="background-color:#FF8C00;width:10%;height:10px;border-radius:4px;"></div>

 </div>

2. Como mudar o que é exibido

<font color="#000000"><strong> Toma dia 4</strong></font> 

<div id="progressbar" style="width:300px;background-color:#EEDD82;border-radius:6px;padding:3px;">

   <div style="background-color:#FF8C00;width:10%;height:10px;border-radius:4px;"></div>

 </div>

Toma dia 4 - Mude aqui para outro nome que quiser, sem apagar o que está ao redor.

Width:300px - Essa é a largura da sua barrinha, mude para preencher o que precisa, seja lateral do seu blog ou um tamanho que deseje.

Cores - os outros dois códigos são as cores, um corresponde ao fundo da barra e outro a parte preenchida (eu nunca lembro qual é qual então testem aí)

Porcentagem - É quão cheia está sua barra, esse valor pode mudar

Pra ver isso em funcionamento acesse: Otome game br e +

Código pra ser copiado

<font color="#000000"><strong> Toma dia 4</strong></font>

<div id="progressbar" style="width:300px;background-color:#EEDD82;border-radius:6px;padding:3px;">

   <div style="background-color:#FF8C00;width:10%;height:10px;border-radius:4px;"></div>

 </div>

<font color="#000000"><strong> Shin Requer texto </strong></font>

<div id="progressbar" style="width:300px;background-color:#E9967A;border-radius:6px;padding:3px;">

   <div style="background-color:#A52A2A;width:07%;height:10px;border-radius:4px;"></div>

 </div>

<font color="#000000"><strong> Ukyou Requer texto</strong></font>

<div id="progressbar" style="width:300px;background-color:#DDA0DD;border-radius:6px;padding:3px;">

   <div style="background-color:#8A2BE2;width:23%;height:10px;border-radius:4px;"></div>

 </div>

<font color="#000000"><strong> Memories </strong></font>

<div id="progressbar" style="width:300px;background-color:#888c8c;border-radius:6px;padding:3px;">

   <div style="background-color:#e6e8e8;width:03%;height:10px;border-radius:4px;"></div>

 </div>

<font color="#000000"><strong> Amnesia:memories tradução no jogo</strong></font>

<div id="progressbar" style="width:300px;background-color:#99CCFF;border-radius:6px;padding:3px;">

   <div style="background-color:#0066FF;width:39%;height:10px;border-radius:4px;"></div>

 </div>

<font color="#000000"><strong> IKKI, KENT: rota completa</strong></font>

<div id="progressbar" style="width:300px;background-color:#ff99ff;border-radius:6px;padding:3px;">

   <div style="background-color:#0000FF;width:100%;height:10px;border-radius:4px;"></div>

 </div>

<font color="#000000"><strong> HALLOWEEN OTOME Tradução</strong></font>

<div id="progressbar" style="width:300px;background-color:#ECB9E5;border-radius:6px;padding:3px;">

   <div style="background-color:#D348C1;width:50%;height:10px;border-radius:4px;"></div>

 </div>

<font color="#000000"><strong> Cute Demons Crashers MIRARI  Rota</strong></font>

<div id="progressbar" style="width:300px;background-color:#AEB6BF;border-radius:6px;padding:3px;">

   <div style="background-color:#FD33F0;width:50%;height:10px;border-radius:4px;"></div>

 </div>

<font color="#2ecc71"><strong> Our life beginnings & Always</strong></font>

<div id="progressbar" style="width:300px;background-color:#eeeedd;border-radius:6px;padding:3px;">

   <div style="background-color:#2ecc71;width:10%;height:10px;border-radius:4px;"></div>

 </div>