Personalizar a Sidebar do blog(barra lateral)

 Hoje vou ensinar a personalizar a sidebar do blog, com uma imagem na borda, com um fundo, e o titulo , claro.



 Para isso, vamos usar o novo seletor do css3, o "border-image", e um aplicativo de um site para ajudar.

 Primeiro vamos separar as imagens, que vamos usar:


imagem que vai ser a borda da sidebar


 e uma imagem para o titulo dos gadjets.



Vai no blogger e procure por  ".sidebar h2 {" , ou "#sidebar-wrapper h2 {"
e substitua o codigo dessa tag por:

/*inicio do codigo


margin: 0px;
padding-top: 20px; /*posição do texto acima */
padding-left: 10px; /* posição do texto aos lados */
height: 200px;/* Altura da Imagem */
background:  url("URL_DA_IMAGEM")no-repeat;/*  imagem do fundo */
text-align: left;/* Posicione o titulo */
font: Arial black; /*fonte */
color:#fff; /*cor do texto */
margin-bottom:-29px;

fim do codigo */


Agora vamos acessar esse site para mapear a imagem da borda.
CLIQUE PARA ACESSAR
e faça como no prinnt:



agora vá "mapeando" , a imagem como abaixo: a parte rebiscada não se repete, e a com bolinhas se repete.
e depois copie esse codigo.


acabando de mapear, vá no HTML do blogger e procure por "#sidebar-wrapper" , ou ".sidebar"
e troque o  codigo da DIV pelo codigo abaixo:

/* inicio do codigo */
width:100px; /*largura */
background: rgb() transparent;
color: yellow; /* cor da fontee */
font-size: 12px;
font-familly: arial;
///agora cole o codigo que voce copiou naquele site////

/* fim do codigo */

Pronto! verifique se tudo deu certo e salve