Como criar um Layout - Parte 03

Essa parte é uma das mais importantes, pois é onde os seus leitores mais olham. 

No caso da sidebar, é onde mais irão perceber. Afinal é lá que ficam quase todos os Gadgets! 

Parte 03 - Sidebar e Postagem

Sidebar

Vá em Layout e perceba que alguns Gadgets estão lado-a-lado, formando duas colunas.

Alinhe todos um abaixo do outro como na imagem abaixo.

Clique em Salvar organização, vá em Modelo e depois em Editar HTML

Clique em Prosseguir. Aperte CTRL+F e procure por:

<Variable name="widget.outer.background.color"

Depois de encontrado localize a area: 

value="#ffffff"/>

E apague #ffffff.

A sidebar e os Gadgets vão ficar com o fundo transparente.

agora, escolha um dos tipos prontos de Gadgets abaixo e cole antes de ]]></b:skin>

.sidebar .widget { background:#fff; /*--------Cor do fundo------*/ border-bottom: 5px solid #FF364C; /*------------Cor da barra de baixo------*/ padding: 10px; /*------------Espaço interno------*/ margin-left: -13px; /*------------Espaço externo da esquerda------*/ margin-top: 0px; /*------------Espaço externo de cima------*/ margin-bottom:25px; /*------------Espaço externo de baixo------*/ } .sidebar .widget h2 { color:#fff; /*------------Cor do titulo------*/ text-align:center; /*------------Alinhamento do titulo------*/ background:#DC9295; /*------------Cor do fundo do titulo------*/ margin-bottom:5px; /*------------Espaço externo de baixo------*/ margin-top:-25px; /*------------Espaço externo de cima------*/ }

.sidebar .widget { background:#fff; /*--------Cor do fundo------*/ border-bottom: 5px solid #A2E0E1; /*------------Cor da barra de baixo------*/ padding: 10px; /*------------Espaço interno------*/ margin-left: -13px; /*------------Espaço externo da esquerda------*/ margin-top: 0px; /*------------Espaço externo de cima------*/ margin-bottom:25px; /*------------Espaço externo de baixo------*/ border-radius:7px; /*-------------Arredondamento do gadget--------*/ box-shadow:inset 0 0 8px #DADADA,0 0 3px #C0C0C0;/*-------------Sombra--------*/ } .sidebar .widget h2 { width:293px; /*-------------Tamanho do fundo do titulo--------*/ color: #FF364C; /*-------------cor do titulo--------*/ text-align:center; /*------------Alinhamento do titulo------*/ background:#A2E0E1; /*------------Cor do fundo do titulo------*/ margin-bottom:5px; /*------------Espaço externo de baixo------*/ margin-top:0px; /*------------Espaço externo de cima------*/ margin-left:-19px; /*------------Espaço externo de cima------*/ }

.sidebar .widget { background:#C9ECED; /*--------Cor do fundo------*/ border-bottom: 5px solid #FF364C; /*------------Cor da barra de baixo------*/ padding: 10px; /*------------Espaço interno------*/ margin-left: -13px; /*------------Espaço externo da esquerda------*/ margin-top: 0px; /*------------Espaço externo de cima------*/ margin-bottom:25px; /*------------Espaço externo de baixo------*/ border-radius:7px; /*-------------Arredondamento do gadget--------*/ box-shadow:inset 0 0 8px #DADADA,0 0 3px #C0C0C0;/*-------------Sombra--------*/ } .sidebar .widget h2 { width:273px; /*-------------Tamanho do fundo do titulo--------*/ color: #fff; /*-------------cor do titulo--------*/ text-align:center; /*------------Alinhamento do titulo------*/ background:#FF364C; /*------------Cor do fundo do titulo------*/ margin-bottom:10px; /*------------Espaço externo de baixo------*/ margin-top:-10px; /*------------Espaço externo de cima------*/ margin-left:-10px; /*------------Espaço externo de cima------*/ }

Postagem

Procure por 

h3.post-title { 

e logo depois cole:

border-bottom: 1px dotted #ccc;

proucure por:

.main-inner h2.date-header {

 e logo acima, cole esse código feito pela giza do Candylland:

/** INICIO CANDY DATA PERSONALIZADA **/ h3.post-title { margin-left:70px !important;/** margin do titulo em relação a data **/ margin:13px 0; font: normal normal 26px Arial, Tahoma, Helvetica, FreeSans, sans-serif; } .date-header{ width:40px;/** largura **/ height:40px;/** altura **/ overflow:hidden; margin-bottom:-80px;/** desce **/ margin-left:-1px;/** margin pra esquerda **/ text-align:center;/** alinha o texto **/ font-size:11px;/** tamanho da fonte **/ padding:7px;/** espaço interno **/ border-radius:9px;/** arredondamento **/ background:#f9b;/** cor do bg **/ box-shadow:inset 0 0 8px #fee,0 0 3px #ccc;/** sombra **/ color:#fff !important;/** cor da fonte **/ font-weight:400;/** afina a fonte **/ text-shadow:0 1px #ccc;/** sombra do texto **/ border:2px #f9b solid;/** borda **/ } /** FIM CANDY DATA PERSONALIZADA [www.candylland.net] **/

Se ficar com o formato estranho vá em Configurações >> Idioma e Formatação

depois em 

Formato da data  e escolha algo parecido com isso 

12 agosto 2012

Visualize e salve!

É isso ae pessoal.

Parte 01 - Base | Parte 02 - Header | Parte 03 - Sidebar e Postagem | Parte 04 - Footer e Adicionais