Como personalizar a barra de rolagem

Olá amigos vamos fazer hoje um tutorial muito simples, mas que que requer atenção.

Vamos mostrar como personalizar a barra de rolagem esta mesma da lateral do seu navegador, porém fará efeito apenas no seu blog/site.

Mostrarei dois caminhos que possa encaixar em seu template, obviamente é aconselhável que faça o backup do mesmo, não sabe? Aprenda aqui.

No primeiro ex: você vai copiar o código abaixo, depois vai em Design > HTML e tecle Ctrl+ F na caixinha que aparecer você irá pesquisar por: ]] ></b:skin> , localizando cole o código antes de: ]] ></b:skin> .

Por não funcionar em alguns template darei mais uma opção.

No segundo ex: você vai copiar o código abaixo e pesquisar 
por: /* Header , localizando cole o código antes de:  /* Header

Aqui está o código que tens que copiar e colar antes de:   ]] ></b:skin>  ou   /* Header 

---

::-webkit-scrollbar-thumb:vertical {  
 background: #0000EE; /*Cor da barrinha que se move*/  
 border: 1px solid #bgh; /*Coloque borda se quiser*/  
 height:50px;  
 border-radius: 20px;  
 -moz-border-radius: 20px;  
 -webkit-border-radius: 20px;  
 }  
 /*** Rolagem da Horizontal da Página***/  
 ::-webkit-scrollbar-thumb:horizontal {  
 background-color:#0000EE; /*Cor da barrinha que se move*/  
 border: 1px solid #bgh; /*Coloque borda se quiser*/  
 height:10px;  
 border-radius: 20px;  
 -moz-border-radius: 20px;  
 -webkit-border-radius: 20px;  
 }  
 /*** Parte fixa da rolagem (fundo que não se move) ***/  
 ::-webkit-scrollbar {  
 height:10px;  
 width:15px; /*Largura da barra de rolagem*/  
 background: #1C86EE; /*Cor da parte fixa, que fica do lado*/  
 border: 1px solid #bgh; /*Coloque borda se quiser*/  
 }