Ribbon Hover no título dos gadgets + faixinhas para sidebar

Alooõuzo...ué é um comprimento diferente

Trouxe pra vocês um tutorial super genial que achei no blog Keep This Dream, mais os créditos vão para Smile Cherry e ao Kawaii World também.

A Megan já postou aqui no blog como fazer gadgets hover como os daqui, mais o tutorial de hoje é diferente, vejam o resultado aqui 

Passaram o mouse em cima dos gadgets?

 legal o efeito né, mais o melhor de tudo é que pode ser com a imagem de ribbon que você quiser, então vocês podem usar e abusar da criatividade.

Acima de ]]></b:skin> cole:

sidebar h2 {

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

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

color: #626DBC; /*Cor da fonte*/

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr-Bg-TJMLQ8qwLZSIAWypO-6tCZrwds4xtTi51iY1mvXU1nPBeEWsCT_Gu3ueBQQWZT5hCn-nvO2E0oMZNAjwaI7G1cNKZHGEdAk2lOgUxH13b9z4mSdIxasRTF-xG1yVbhqyqY_O6Xo/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/AVvXsEjN8m9OAaXxz_gVnqo8CpZpXoAOeEvRPPYYuUoe28NlYdHTXN73b68xCxTlAGKL0v2Del5Qn6bx-OHw9liwOmjHJRrjJWaBKCWnvTR-DkVS0JmP8prxDQ9mGlq363U1YW1pR4RmCNJtoUk/s1600/SIDEBAR+TITULO.png) no-repeat center; /*Sua faixa e posição*/

}

Viram o que está em negrito?! aquelas são imagens reservas, isso quer dizer que vocês poderão trocar a imagem, mais quem ficar com preguiça pode usar essas mesmo né, ou podem usar uma dessas:

Créditos das faixinhas: ● ● ● ● 

ou vocês pensaram que eu que fiz, eu ein eu tenho preguiça

Espero que tenham gostado do tutorial.

aham agora tenho certeza que meu banner é rosa T_T