Personalizando os Gadgets (HTML/JavaScript)

Hello again everyone! Como eu já disse, eu encontrei vários tutoriais legais e que eu queria compartilhar com vcs. Bom, vc já deve ter visto que aqui no blog os gadgets são bem bonitinhos e personalizados, esses eu coloquei pelo HTML/JavaScript sendo que tem um outro jeito. O outro jeito que tem de personalizar os gadgets do blog é a partir de alguns códigos, mas eu vou ensinar esses mais tarde. Hoje, então, eu vou passar alguns modelos para vcs usarem.

PASSOS:

1- Vá em layout>>Adicionar um Gadget>>HTML/JavaScript.

2- Quando colocar o modelo, não bote título porque se não vai estragar tudo.

3- Em seguida mude de lugar o gadget (após salvar), coloque mais para baixo do layout para não aparecer uma parte em branco no blog.

MODELOS:

1)

<style> /**PERSONALIZAÇÃO DA SIDEBAR BY CANDYLLAND**/.sidebar .widget {width:100% !important;background:#fff;  /** COR DO FUNDO DO GADGET **/margin:10px 0 !important;border-top:10px #ff1490 solid;  /** COR DA BORDA DE CIMA **/;
border-radius:0 0 10px 10px;padding:10px;box-shadow: inset 0 0 20px #eee, 0 0 3px #ccc; /** SOMBREAMENTO **/overflow:hidden} .sidebar .widget h2 {background:#fee /** COR DO FUNDO DO TITULO **/;
color:#f9b /** COR DO TITULO **/;
font-size:17px /** TAMANHO DO TITULO **/;
text-shadow:0 1px #ddd /** SOMBRA DO TITULO **/;
margin-top:-10px /** MARGIN **/;margin-left:-9px /** MARGIN **/;margin-bottom:10px /** MARGIN **/;padding:5px;width:107%;overflow:hidden}/** FIM DA SIDEBAR BY [www.candylland.net]**/</style>

_________________________________________________________________________________

2)

<style>

/**PERSONALIZAÇÃO DO CHA E CUPCAKE**/

.sidebar .widget {

width:100% !important;

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpahuhbtuPYUYcbQ-56RBKLdx9T4NRWFaMJH2Yot9kA960Z9aGp766TEnwWGJGFz__z12GcBJnU0ILHXhAL_dX9LRSZVu6ajWl6yW1PU_3SuOh9E9HoI6PJR_QAIb9i_iVRKwExBYZKfM/s1600/BR.jpg");  /** COR DO FUNDO DO GADGET **/

margin:10px 0 !important;

border-top:10px #000000 solid;  /** COR DA BORDA DE CIMA **/;

border-radius:0 0 10px 10px;

padding:10px;

box-shadow: inset 0 0 40px #eee, 0 0 10px #ccc; /** SOMBREAMENTO **/

overflow:hidden

}

.sidebar .widget h2 {

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCA_6gWVbFPKh-aCD918dOrNLDBSIgHlm9gPWcPh23wOu43XPAESeQTUH23WmPKt1UO-4-Esmfs5Rbtr1yQ1DeHTeqIw-9P_73ZUqDiAu42qWBY14Qplqq2M-Igmpp5izgFi3kASZwBrM/s1600/fundo-bolinhas.jpg") /** COR DO FUNDO DO TITULO **/;

color: #ffffff /** COR DO TITULO **/;

font-size:17px /** TAMANHO DO TITULO **/;

text-shadow:0 1px #000000 /** SOMBRA DO TITULO **/;

margin-top:-10px /** MARGIN **/;

margin-left:-10px /** MARGIN **/;

margin-bottom:5px /** MARGIN **/;

padding:5px;

width:107%;

overflow:hidden

}

/** FIM DA SIDEBAR BY [chaecupcake.blogspot.com]**/

</style>

_________________________________________________________________________________

 3)

<style>.sidebar .widget{padding: 10px;margin-bottom: 50px; /*Espaço entre um gadget e outro*/
background:#fff;border-bottom:solid 6px #ff8ab1;border-radius:0 0 10px 10px;box-shadow:inset 0 0 5px #ddd;}.sidebar .widget h2 {font-family: Giddyup;font-style: italic;font-size: 18px;font-weight: bold;text-align: left;margin-top:-40px;color: #40250A; /*Cor da fonte*/background: url('http://i11.photobucket.com/albums/a168/evelynregly/mini_gifs/mini_gifs115.gif') no-repeat left top; /*imagem do topo*/padding-left: 20px;margin-bottom: -5px;-webkit-transition-duration:1s;}.sidebar .widget h2:first-letter{text-transform:uppercase;font-weight: regular;font-size: 30px;}</style>