Como Colocar Ribbons no Blog - Hover

reconhece a imagem?

Oi pequenas,
Esse é o primeiro tutorial do blog  õ/
Os créditos vão para:
Adolescente Nerd - Onde eu achei o tuto
Keep This Dream
Smile Cherry
Kawaii World
(desculpa não colocar os nomes com link, estou com preguiça)
Vamos lá?

Preview aqui. Passe o mouse nos ribbons
Vá em Modelo, Editar HTML, dê Ctrl+F e procure por ]]></b:skin>
Acima dele cole esse código:

sidebar h2 {

font-family: Pacific; /*Nome da fonte*/

font-size: 25px; /*Tamanho da fonte*/

color: #ffffff; /*Cor da fonte*/background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIvtPzlKXROkZ1yCg-80RTzi9HfkP6TIkDKyoIvvZZ1K2sbYbypZ1SU4cfNCza1JhmWFxta_pulwPXayWnjI7rGhDaMrZHmZ4N-ToVtpB0H7lrI03Jmvck-M1Af3EtSUNcGWPopPm2bS0/s1600/SIDEBAR+TITULO+2.png) no-repeat center; /*Sua faixa e posição*/height: 29px;/*Altura da imagem*/width: 280px; /*Largura da imagem*/text-align: center; /*Alinhamento do texto*/margin-top:-5px; /*Altere se necessario*/margin-left:-9px ; /*Altere se necessario*/margin-bottom:10px ;padding:5px;width:112%; }.sidebar h2:hover {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP6py2bbmxvYBdLftLeUItGJ1tL6AjkAI8cX26p-BPtgnSkOkaU4GP8s00FFNIcaZCij3bDdHeiDv8z-C-tEIkHYBs450RrWvEKIXwFoyIKYT9mo94WUIdRk7XlhEHl83kJMKAY0Qg3Do/s1600/SIDEBAR+TITULO.png) no-repeat center; /*Sua faixa e posição*/}

No código tá tudo explicadinho, né? As partes em negrito são as que você deve colocar o link do seu ribbon.
Qualquer dúvida comente :)