Como colocar a barra de rolagem do blog colorida

Oi meus milkshakes de chocolate, como vão? Eu estou bem. Hoje vou ensinar para vocês como colocar a Barra de Rolagem do blog colorida:

Velha interface: Vá em design >> Editar HTML >> Dê um Ctrl + F e procure por ]]></b:skin> >> Antes de ]]></b:skin> coloque:


 </span></span></span><span style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 18px; text-align: justify;"><br /></span><br /> <span style="background-color: white; font-size: 13px; line-height: 12px; text-align: justify;"><span style="font-family: 'Trebuchet MS', sans-serif;"><span style="color: #999999;"><br /></span></span></span><br /> <span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px;">*{<br />scrollbar-face-color:</span><span class="Apple-style-span" style="background-color: #f3f3f3; color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;"><span class="Apple-style-span" style="color: #d5a6bd;">#FF69B4</span></span><span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">;</span><br /> <span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">scrollbar-highlight-color:</span><span class="Apple-style-span" style="background-color: #f3f3f3; color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;"><span class="Apple-style-span" style="color: #d5a6bd;">#FF69B4</span></span><span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">;</span><br /> <span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">scrollbar-3dlight-color:</span><span class="Apple-style-span" style="background-color: #f3f3f3; color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;"><span class="Apple-style-span" style="color: #9fc5e8;">#343434</span></span><span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">;</span><br /> <span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">scrollbar-darkshadow-color:</span><span class="Apple-style-span" style="background-color: #f3f3f3; color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;"><span class="Apple-style-span" style="color: #9fc5e8;">#343434</span></span><span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">;</span><br /> <span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">scrollbar-shadow-color:</span><span class="Apple-style-span" style="background-color: #f3f3f3; color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;"><span class="Apple-style-span" style="color: #d5a6bd;">#FF69B4</span></span><span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">;</span><br /> <span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">scrollbar-arrow-color:</span><span class="Apple-style-span" style="background-color: #f3f3f3; color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;"><span class="Apple-style-span" style="color: #9fc5e8;">#343434</span></span><span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">;</span><br /> <span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">scrollbar-track-color:</span><span class="Apple-style-span" style="background-color: #f3f3f3; color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;"><span class="Apple-style-span" style="color: #9fc5e8;">#343434</span></span><span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">;</span><br /> <span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">}</span> <span style="background-color: white; font-size: 13px; line-height: 12px; text-align: justify;"><span style="font-family: 'Trebuchet MS', sans-serif;"><span style="color: #999999;"><br /></span></span></span>

Explicação para você modificar o código:

::-webkit-scrollbar {width: 12px; height: 4px; background: #343434; }
::-webkit-scrollbar-thumb { background: #FF69B4; }

O código destacado em rosa é a corda barra e o azul é a cor do fundo. Para modificar o código vá nessa Tabela de Cores. Visualize e se tudo estiver certo, salve.

Nova interface: Do lado de um quadrado laranja com um lápis tem um quadrado branco com duas filhinhas e do lado delas tem uma setinha, vai nela e clique em modelo >> Editar HTML >> Dê um Ctrl + F e procure por ]]></b:skin> >> Antes de ]]></b:skin> coloque:

<span style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: x-small; line-height: 12px; text-align: justify;"> </span></span></span><span style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 18px; text-align: justify;"><br /></span><br /></span></div> <div style="text-align: justify;"> <span style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: x-small; line-height: 12px; text-align: justify;"><span style="background-color: white; font-size: 13px; line-height: 12px; text-align: justify;"><span style="font-family: 'Trebuchet MS', sans-serif;"><span style="color: #999999;"><br /></span></span></span><br /></span></div> <div style="text-align: justify;"> <span style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: x-small; line-height: 12px; text-align: justify;"><span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px;">*{<br />scrollbar-face-color:</span><span class="Apple-style-span" style="background-color: #f3f3f3; color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;"><span class="Apple-style-span" style="color: #d5a6bd;">#FF69B4</span></span><span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">;</span><br /></span></div> <div style="text-align: justify;"> <span style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: x-small; line-height: 12px; text-align: justify;"><span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">scrollbar-highlight-color:</span><span class="Apple-style-span" style="background-color: #f3f3f3; color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;"><span class="Apple-style-span" style="color: #d5a6bd;">#FF69B4</span></span><span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">;</span><br /></span></div> <div style="text-align: justify;"> <span style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: x-small; line-height: 12px; text-align: justify;"><span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">scrollbar-3dlight-color:</span><span class="Apple-style-span" style="background-color: #f3f3f3; color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;"><span class="Apple-style-span" style="color: #9fc5e8;">#343434</span></span><span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">;</span><br /></span></div> <div style="text-align: justify;"> <span style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: x-small; line-height: 12px; text-align: justify;"><span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">scrollbar-darkshadow-color:</span><span class="Apple-style-span" style="background-color: #f3f3f3; color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;"><span class="Apple-style-span" style="color: #9fc5e8;">#343434</span></span><span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">;</span><br /></span></div> <div style="text-align: justify;"> <span style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: x-small; line-height: 12px; text-align: justify;"><span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">scrollbar-shadow-color:</span><span class="Apple-style-span" style="background-color: #f3f3f3; color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;"><span class="Apple-style-span" style="color: #d5a6bd;">#FF69B4</span></span><span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">;</span><br /></span></div> <div style="text-align: justify;"> <span style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: x-small; line-height: 12px; text-align: justify;"><span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">scrollbar-arrow-color:</span><span class="Apple-style-span" style="background-color: #f3f3f3; color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;"><span class="Apple-style-span" style="color: #9fc5e8;">#343434</span></span><span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">;</span><br /></span></div> <div style="text-align: justify;"> <span style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: x-small; line-height: 12px; text-align: justify;"><span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">scrollbar-track-color:</span><span class="Apple-style-span" style="background-color: #f3f3f3; color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;"><span class="Apple-style-span" style="color: #9fc5e8;">#343434</span></span><span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">;</span><br /></span></div> <div style="text-align: justify;"> <span style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: x-small; line-height: 12px; text-align: justify;"><span class="Apple-style-span" style="background-color: white; color: #999999; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; line-height: 20px; text-align: justify;">}</span> <span style="background-color: white; font-size: 13px; line-height: 12px; text-align: justify;"><span style="font-family: 'Trebuchet MS', sans-serif;"><span style="color: #999999;"><br /></span></span></span></span></div> <br /> <span style="background-color: white; font-size: 13px; line-height: 12px; text-align: justify;"><br class="Apple-interchange-newline" /></span><br /> <span style="background-color: white; font-size: 13px; line-height: 12px; text-align: justify;"><span style="font-family: 'Trebuchet MS', sans-serif;"><span style="color: #999999;"><br /></span></span></span><br /> <span style="background-color: white; font-size: 13px; line-height: 12px; text-align: justify;"><span style="font-family: 'Trebuchet MS', sans-serif;"><span style="color: #999999;"><br /></span></span></span>
Explicação para você modificar o código:

::-webkit-scrollbar {width: 12px; height: 4px; background: #343434; }
::-webkit-scrollbar-thumb { background: #FF69B4; }

O código destacado em rosa é a corda barra e o azul é a cor do fundo. Para modificar o código vá nessa Tabela de Cores. Visualize e se tudo estiver certo, salve.


                  Espero que tenham gostado do tuto e qualquer dúvida é só comentar.