Topo Sidebar

Barrinha no topo do blog e separar a sidebar II

Oi oi gente! No tutorial de hoje vamos aprender como colocar essa barrinha no topo do blog, havia algumas leitoras pedindo, e aqui estou eu. Eu acho que vocês vão gostar, pois é bem fácil e faz uma grande diferença no layout *-*

1- Vá até Design, Editar HTML, aperte CTRL+F e procure por: body {

2- Logo abaixo, acrescente: border-top: 9px solid #FFC0CB;

Personalização:


9px - Grossura da barra


#FFC0CB - Cor da barra, se quiser outros tipos, acesse essa tabela.

http://viverserfeliz-renata.blogspot.com.br/2012/01/barinha-no-topo-do-blog.html

--------------------------------------------------------------------------------------------------------------------------------------------------------------

Heeey meus amores, quanto tempo sem tutorial hein? Hoje trago um que está virando sensação na maioria dos blogs, são os gadgets divididos em uma coluna larga e transparente. Quem vê pensa ser super complicado, mas na prática é bem fácil, e não é necessário mexer com muitos códigos, vamos aprender?

Primeiramente vá em Design -> Designer do modelo -> Avançado -> Plano de fundo da barra lateral e selecione a opção de "Transparente". Salve e vá para "Editar html".

Lá dê um Ctrl + F e procure por: /* Widgets, antes de fechar a chavinha, acrescente:

background-color: #CORHTML;

No lugar de #CORHTL, escolha a cor que preferir usando essa tabela. Como podem perceber, é super simples e não exige nenhum conhecimento profissional em HTML, espero que tenham gostado :D

Como ficará:

sidebar

Para colocá-los basta ir ao esquema e adicionar um novo "html/javascript"

<style>

/*Títulos dos gadgets personalizados by Cat Girl*/

.sidebar h2 {

font-family: trebuchet ms; /* Fonte */

font-style: normal; /* Estilo da fonte, pode mudar para  italic */

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

text-align: left; /* Alinhamento do texto pode mudar para center ou right */

color: #FFFFFF; /*Cor da fonte*/

background:  #FF69B4; /* Cor do fundo */

padding-left: 12px;

margin-bottom: 5px;

-webkit-border-top-left-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

-moz-border-radius-topleft: 10px;

-moz-border-radius-bottomright: 10px;

border-top-left-radius: 10px;

border-bottom-right-radius: 10px;

/*Fim dos títulos dos gadgets personalizados, não retire créditos*/

}

</style>

<style>

/*Títulos dos gadgets personalizados by Cat Girl*/

.sidebar h2 {

font-family: arial; /* Fonte */

font-style: italic; /* Estilo da fonte, pode mudar para normal */

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

text-align: center; /* Alinhamento do texto, pode mudar para left ou right */

color: #FFFFFF; /*Cor da fonte*/

background:  #FF69B4; /* Cor do fundo */

padding-left: 12px;

margin-bottom: 5px;

-webkit-border-radius: 100px;

-moz-border-radius: 100px;

border-radius100px;

/*Fim dos títulos dos gadgets personalizados, não retire créditos*/

}

</style>

<style>

/*Títulos dos gadgets personalizados by Cat Girl*/

.sidebar h2 {

font-family: verdana; /* Fonte */

font-style: normal; /* Estilo da fonte, pode mudar para italic */

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

text-align: left; /* Alinhamento do texto pode mudar para center ou right */

color: #FFFFFF; /*Cor da fonte*/

background:  #FF69B4; /* Cor do fundo */

padding-left: 12px;

margin-bottom: 5px;

-webkit-border-bottom-right-radius: 50px;

-moz-border-radius-bottomright: 50px;

border-bottom-right-radius: 50px;

/*Fim dos títulos dos gadgets personalizados, não retire créditos*/

}

</style>

<style>

/*Títulos dos gadgets personalizados by Cat Girl*/

.sidebar h2 {

font-family: trebuchet ms; /* Fonte */

font-style: normal; /* Estilo da fonte, pode mudar para italic */

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

text-align: center; /* Alinhamento do texto pode mudar para left ou right*/

color: #FFFFFF; /*Cor da fonte*/

background:  #FF69B4; /* Cor do fundo */

padding-left: 12px;

margin-bottom: 5px;

-webkit-border-top-left-radius: 20px;

-webkit-border-top-right-radius: 20px;

-moz-border-radius-topleft: 20px;

-moz-border-radius-topright: 20px;

border-top-left-radius: 20px;

border-top-right-radius: 20px;

/*Fim dos títulos dos gadgets personalizados, não retire créditos*/

}

</style>

Sidebar

Faixas para sidebar