Goods Sweets ~: Big Tutorial: Criando um Layout/Template

28.3.13

Big Tutorial: Criando um Layout/Template - Parte 1

Quando estava escrevendo o post ainda era de dia rs. Agora é Boa Tarde!

Bom Dia! Antes de começar o post normalmente, essa semana descobri um plágio que fizeram do GS, foi no ano passado, mas só vim descobrir agora. Vejam o plágio: clique, Vejam o original: clique. Podemos ver claramente que é plágio pela data do post. EU postei primeiro, e ela ainda diz que ela quem fez e ainda coloca no final do post que plágio é crime. QUE IRÔNIA. Isso me deixa muito chatiada. São coisas que tive o trabalho de fazer e o ser humano plageia. Mas enfim, vou deixar isso pra lá porque não quero me estressar.

Hoje trago um big tutorial, que tem o intuito de ajudar todos que são iniciantes no HTML e que querem aprender a fazer seus próprios layouts. Esta é a primeira parte do tutorial. Ele será divido, mais ou menos, em três partes, para que não seja cansativo de ficar lendo, afinal, este tutorial é bem grande. Vamos começar? GO!

Primeiramente vá até o Desing do Modelo. Coloque no modelo Viagem e depois vá até o modelo rosa como mostra na imagem abaixo:

Agora, vá até plano de fundo e escolha o Background como mostra a imagem abaixo.

Opções extras de background: 1, 2, 3, 4, 5 e 6.

Vá até Layout, e deixe da seguinte maneira:

Coloque em Ajustar Largura e ajuste desta forma:

Depois clique em Aplicar modelo. Depois vá até Layout> Navbar e desative.

Agora, vamos personalizar a sidebar. Abra seu HTML e pesquise por: /* Widgets.

Antes de feixar o " { " você irá colar o código abaixo:

background: #fff; /*---- cor do fundo da caixa ----*/
padding-left: 20px; /*---- espaço à esquerda ----*/
padding-bottom: 20px; /*--- espaço de baixo ---*/
padding-right: 20px; /*--- espaço à direita ---*/
padding-top: 5px; /*---- espaço de cima ----*/
border-radius: 8px; /*---- bordas arredondadas, apague a linha se não quiser ----*/
box-shadow:0 0 3px #ccc, inset 0 0 20px #eee; /*--- efeito sombra embutida na caixa ---*/

Abaixo de /* Widgets, você vai encontrar:

.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;

Substitua por:

.sidebar .widget {
border-bottom: 8px solid #81648d; /*---- cor e largura da borda de baixo do gadget ----*/
border-top: 5px solid #81648d; /*---- cor e largura da borda de cima do gadget ----*/
padding-bottom: 10px;
margin: 30px 0; /*---- espaço ente um gadget e outro ----*/

O meu ficou personalizado desta maneira:

Quando você for visualizar, vai perceber que ficara aquele fundo feio por baixo da parte personalizada. Vamos aprender a tira-lo.

Vá no HTML do seu blog e se sua barra lateral for do lado esquerdo procure por:

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

Se for do lado direito procure por:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

Depois de acha-lo, estará mais ou menos assim:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
margin-right: $(content.padding);
background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;}

Apague a parte destacada e visualise, se estiver tudo certo salve.

Ficará assim:

Agora vamos subir a barra lateral.

Vá no HTML do blog , clique em ctrl F e perquise por:

.main-inner .column-left-outer { caso esteja do lado esquerdo

.main-inner .column-right-outer { caso esteja do lado direito

Depois de achar o código, cole abaixo:

margin-top: -150px; /*---- valor da sidebar mais pra cima ----*/

Colocando faixinha do no título do gadget

pesquise por /* Mobile. Antes de body.mobile { coloque o seguinte código:

.sidebar .widget h2{
background: url(LINK DO SEU RIBBON) no-repeat left;
margin-top:-2px;
margin-left:-19px;
margin-bottom:0px;
padding:15px;
width:150%;
overflow:hidden;
}

Se cortar a sua imagem aumente o valor de "padding:15px;" e vá visualizando até que fique a imagem completa.

Aqui tem vários ribbons: http://goods-sweets.blogspot.com.br/search/label/ribbons.

O meu ficou assim: