Dando prosseguimento a série de postagens sobre as Variaveis CSS e os Elementos do Blogger, aqui neste post vamos falar sobre a variavel #sidebar-wrapper que corresponde aquela coluna do perfil.
Esta variavel está localizada no corpo do html do seu, mais precisamente neste trecho abaixo:

#sidebar-wrapper {
width: 240px;
float: $endSide;
color: $sidebartextcolor;
line-height: 1.8em;
margin:
5px 0 10px 0;
word-wrap: break- word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Se você quiser modificar a largura da coluna na sidebar, altere os valores que estão em width. Quanto maior for o valor da widht, mais larga será a sua coluna.

Lembrando que este código acima eu peguei do template Minima (template do proprio blogger). Se você utiliza um template modificado este código pode estar diferente, neste caso procure pelo titulo “sidebar-wrapper” no corpo html do seu blog.

Lembrando que:
#sidebar-wrapper -> é a área total da coluna.
Vejamos outro exemplo:

.sidebar {
width: 220px;
color:#000;
padding:0 0 0 0;
}

.sidebar -> é o interior da Coluna.

Personalizando as cores da sidebar:

Se você quiser incluir uma imagem ou cor na coluna .sidebar, que seja diferente da coluna total (#sidebar-wrapper}, acrescente background em .sidebar , dessa forma:

.sidebar {
width: 220px;
background: #fff url(endereço-da-imagem) repeat-x;
color:#000;
padding:0 0 0 0;
}

Se você quiser, pode acrescentar cor ao fundo da sidebar, para destacá-la no seu blog, inclusive pode acrescentar uma imagem de fundo (background).Para isso, acrescente no código, a seguinte linha :
background-color: #000000; -> apenas cor do fundo


Se quiser acrescentar uma imagem como plano de fundo, utilize este código:
background:transparent url(URL DA SUA IMAGEM)repeat; -> apenas imagem ao fundo
Sobre as maneiras que você pode estipular o comportamento da imagem do fundo, você poderá seguir as mesmas dicas aplicáveis a background, no artigo Modificando o Background do Blog.
Dica: Você pode usar uma imagem que não se repita na vertical e manter o restante do fundo com uma determinada cor, para que haja uma continuação da cor ao final da imagem.
Veja o exemplo:
background: #000000 url(URL DA SUA IMAGEM) repeat-x;

Personalizando o título da sidebar:

Se você estiver utilizando o template Minima, você deverá acrescentar o código abaixo. Para outros templates, este trecho já deve constar no código, basta procurar por ele no corpo do html do seu blog:

.sidebar h2 {
color: #FFFFFF; /*--cor da fonte--*/
background: #000000 ; /*--cor de fundo--*/
margin: 10px 0 10px 0;
border: 1px solid $bordercolor; /*--borda em toda coluna do titulo--*/
line-height: 1.5em;
padding: 10px 0 10px 0;
text-align: center; /*--alinhamento do texto do titulo--*/
}

Vamos identificar o que corresponde cada variável, para que você possa defini-las de acordo com sua preferência:
color: é a cor da fonte
background: é aqui que você estabelece a cor do fundo, se quiser pode acrescentar uma imagem
margin: determina a distância entre uma coluna e outra
border: é a borda em volta de toda coluna
line-height: é onde você define a altura da linha
padding: determina as margens internas, é a distância entre o texto e a borda
text-align: é o alinhamento do texto (pode ser: center= Centro, left= esquerda ou right= direita)

Separando as colunas:

Se você quiser, pode estabelecer uma distância de uma coluna para outra, separando-as de forma a dar um visual diferente para sua Sidebar. Para isso, procure por este trecho:

.sidebar .widget, .main .widget {
border-bottom:1px solid $bordercolor;
margin:0 0 1.4em;
padding:0 0 1.4em;
}

E modifique separando desta maneira:

.sidebar. widget{
margin: 0px 0px 20px 0px;
padding:20px 5px 20px 15px;
background: #000000;
border: 2px solid #ffffff;
}

.main .widget {
border-bottom:1px solid $bordercolor;
margin:0 0 1.4em;
padding:0 0 1.4em;
}
O template Minima traz o código de widgets do post (main) e da coluna (sidebar) juntos.Se você estiver utlizando o template Minima, você deve separar os dois códigos para que você possa alterar cada um individualmente.

Acrescentar linhas de links na sidebar:

Se no seu template não tiver a linha de código referente a linha de links da sidebar e você quiser acrescenta-la, para poder personalizar a maneira que seus links deverão se apresentar na sidebar.
E acrescente este trecho:

.sidebar ul {
list-style:disc;
margin:0 0 0 0;
padding:0 0 0 0;
}

.sidebar li {
margin:0;
padding:0 0 0 15px;
}

Lembrando que você deverá estabelecer os valores de margin e padding de acordo com o seu gosto. Uma dica é sempre ir visualizando antes de salvar as alterações.

Se você quiser acrescentar uma borda abaixo dos links da sidebar, acrescente:
border-bottom: 1px dotted $bordercolor;
no trecho:
.sidebar li{
  do código acima, devendo ficar assim:

.sidebar ul {
list-style:none;
margin:0 0 0 0;
padding:0 0 0 0;
}

.sidebar li {
margin:0;
padding:0 0 0 15px;
border-bottom: 1px dotted $bordercolor;
}
Veja também, como Personalizar os links da sidebar.

Entendendo melhor cada elemento da sidebar:

.sidebar-wrapper -> é a área total da coluna.
.sidebar -> é o interior da Coluna.
.sidebar h2 -> é a área do titulo da coluna.
.sidebar. widget -> É a área de cada elemento (widget) da coluna. É onde fica o contéudo.
.main .widget -> É a área que trata do widget do post. Tudo que você alterar nesta coluna vai ser alterado também na postagem.
.sidebar li -> Se refere aos itens das listas de links.
.sidebar ul -> Se refere a lista de links inteira.

ALTERANDO A POSIÇÃO DA SIDEBAR:

Se e sua sidebar está no lado direito e você quiser mudá-la para o lado esquerdo
Encontre a tag: #sidebar
E altere:
“float:right;” para “float:left;
Se for o oposto (sidebar no lado esquerdo trocada para o lado direito) é só alterar: “float:left;” para “float:right;”

É só adicionar a seguinte opção no trecho do codigo que você deseja colocar borda:

border: 1px solid #000000;

Exemplo: Nos templates mínima a na maioria dos templates modificados, a coluna total da área de postagens é
#main-wrapper
Se quiser acrescentar uma borda na cor preta sobre a área total de post, você deverá acrescentar a borda em “main-wrapper”.
Ficará assim:

#main-wrapper {
border: 1px solid #000000;
}

Nos templates Designer de Modelo,o trecho referente a coluna total da área de postagens está representado por:
.main-outer
Ficará assim:

.main-outer {
border: 1px solid #000000;
}

Lembrando que
1px -> medida da borda
solid -> é o estilo da borda
#000000 -> é a cor da borda
Você pode alterar esses elementos.

Estilos de bordas:

solid -> linha solida
Dashed -> Borda tracejada
dotted -> borda pontilhada
ridget -> cume
inset -> inserido
outset -> outset
none -> nenhuma

Você também pode inserir a borda apenas em determinado lugar:
border-right -> (Borda somente a direita)
border-top -> (Borda somente no topo)
border-left -> (Borda somente a esquerda)
border-bottom -> (Borda somente na parte inferior)
Leia alguns artigos que tratam sobre alguns efeitos que você poderá incluir em suas bordas, talvez você se interesse em conhecer outras maneiras de personalizar as bordas no seu template:
• Efeito Sombreado
• Bordas arredondadas
Para entender um pouco mais sobre o corpo do seu Template, leia este Post Elementos Básicos do Blogger.

Para aqueles que pretendem ou gostam de personalizar seus templates, querendo ou não, é necessário ter um mínimo de conhecimento em HTML e CSS.
  Ao instalar um recurso, ou fazer alguma personalização no seu blog, com certeza alguns se deparam com determinados códigos que, muitas vezes sequer sabem o significado ou sabem para que servem, por isso, é fundamental saber e conhecer pelo menos o básico para entender o que se trata cada código e saber reconhecê-los.
Pensando nisso, eu já publiquei um artigo com explicações básicas sobre as Variaveis CSS e os Elementos do Blogger, onde trata a respeito dos elementos básicos do Blogger e sobre os Elementos de página.
Vou dar continuidade a publicação de alguns artigos sobre CSS e HTML, e tentarei repassar a vocês um pouco de conhecimento básico no assunto, afim de auxiliá-los nas personalização de seus templates no blogger.
De antemão, já esclareço que não tenho pretensão alguma em dar aulas sobre HTML e CSS, apenas tentarei repassar algum conhecimento básico da maneira mais simples e acessível possível, pelo menos para que vocês possam entender um pouquinho melhor sobre o assunto, facilitando a aplicação de hacks e para conseguirem modificar o layout do seu blog, ou quem sabe até, começar a criar templates.
  Para aqueles que pretendem se aprofundar melhor no assunto, recomendo a leitura em alguns sites, como o do Maujor, ou o apostilando, verdadeiros mestres no assunto.
Para iniciar, vamos identificar alguns elementos no seu template.
Quando clicamos em “editar HTML” no blogger, nos deparamos com várias tags.
O início do nosso documento é HTML iniciado pela tag <html>, e se você rolar a página até o final verá que existe uma tag de fechamento, que é </html>.
Ao entrarmos na edição HTML no Blogger, visualizamos qual a linguagem que está sendo utilizada na página (XHTML), representadas por estas tags:(você não deverá mexer e nem modificar nada nesta parte)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

1. Estrutura Básica do HTML:

No Blogger, o documento HTML se compõe da seguinte estrutura básica:
<html>
<head>
É entre estas tags que está contido o estilo da página – CSS.
É aqui que determinamos a aparência dos elementos
<head/>
<body>
É entre estas tags que está contida a estrutura da página (seus elementos) – HTML.
É o corpo do documento.É aqui que criamos os blocos que serão mostrados na página, como colunas, menus etc.
</body>
</html>

2. HTML e CSS:

Com certeza você já ouviu falar em CSS e em HTML, mas talvez não saiba o que significa exatamente.
CSS é a abreviatura para Cascading Style Sheets = Folha de Estilos em Cascata.
É uma linguagem para estilos que define o layout de documentos HTML.
O CSS é um mecanismo para adicionar estilo, é onde controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos etc.
HTML é a abreviatura de HyperText Markup Language, é a linguagem que possibilita apresentar informações de uma página, é tudo aquilo que está contido na página.
Resumidamente, HTML é usado para estruturar conteúdos, enquanto que o CSS é usado para formatar conteúdos estruturados.

3. CSS no Blogger:

Já vimos que o código CSS que dá estilo à página,é onde determinamos a aparência dos elementos. No Blogger, começa com :
<b:skin><![CDATA[/*
e sua tag de fechamento é ]]></b:skin>.
E sempre que quisermos adicionar estilos aos elementos devemos acrescentar os códigos referentes antes de sua tag de fechamento ]]></b:skin> .
A Regra CSS segue uma linguagem própria, formando uma folha de estilos, definindo como será aplicado estilo a um ou mais elementos HTML, compondo-se de 3(três) partes:
a) Seletor
b) Propriedade
c) Valor

Na regra CSS, escreve-se o seletor e a seguir a propriedade e o valor, separados por dois pontos e entre chaves { }.
Quando tivermos que definir mais de uma propriedade, por regra, deve-se usar ponto-e-vírgula para separá-las.
Veja exemplo:

body{
background-color: $bgcolor;
}

(Referência:Maujor)
Estas são as explicações básicas iniciais.
Na sequência, leia o artigo sobre as Variáveis Cores e Fonte(Variable Definition), que são valores que podem ser modificados no Painel “Fontes e Cores” do Blogger(pré definições de cores, fontes e tamanho de fontes).

Há um tempo atrás eu publiquei um artigo falando sobre novas fontes da web disponibilizadas pelo Google API para serem usadas no Blogger.
Atualmente o Blogger disponibilizou novas fontes da web que podem ser usadas no seu blog, bastando apenas escolher a fonte e altera-las diretamente pelo painel de controle do próprio Blogger.
Essas novas fontes estão disponíveis nos templates padrões Designer de Modelo, bem como nos templates Minima.
O processo de alterações de fontes do blog é bem simples, porém, só será possível alterar as fontes se o modelo do seu template tiver pré definições para o CSS, as chamadas Variable Definitions.
Se você não sabe o que são Variable Definitions, recomendo que você leia o artigo que trata sobre o assunto para poder prosseguir com este tutorial.
Se no seu modelo de template as Variable Definitions não estiverem estabelecidos, você poderá criá-las para conseguir definir suas próprias variáveis e assim, alterar as fontes do seu blog, através do painel do Blogger.
Veja como criar Variable Definitions do tipo Fonte no artigo: Como Criar Variáveis do tipo Fonte

Como Usar fontes da web no Blogger

Se quiser trocar o tipo ou tamanho de fonte, poderá faze-lo diretamente pelo painel do Blogger.
Clique na aba “Design >> Designer de Modelo >> Avançado“.
Escolha qual a fonte que você quer trocar.
No exemplo abaixo eu optei por trocar a fonte do titulo do Blog (que fica no cabeçalho):

No meu exemplo, eu escolhi a fonte “Grafty Girls” e determinei o tamanho dela em 42px.
Veja como ficou a fonte do cabeçalho do meu blog de testes:

A nova fonte só será reconhecida pelo código, se já houver pré-definição Variable Definitions do tipo Fonte no seletor desejado.
No meu exemplo, eu alterei a fonte do Titulo do Blog.
No código CSS referente a Header, a fonte já estava pre-definida desta forma:

.Header h1 {
 font: $(header.font);

E em Variable Definitions estava defina assim:

<Group description="Blog Title" selector=".header h1">
    <Variable name="header.font" description="Title Font" type="font"
        default="normal normal 36px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 42px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

No exemplo acima eu usei como referencia o código do template Designer de Modelo (Modelo Janela de Imagem).
Lembre-se: para que a nova fonte funcione é preciso definir onde a fonte deverá ser aplicada, para que a nova fonte fique visível no blog.
Você precisará incluir os valores “font” diretamente na regra CSS na propriedade do seletor onde você deseja usar a nova fonte.

ATENÇÃO: Antes de trocar seu template faça backup do antigo template e dos widgets!

Feito isso, você deverá:
1º passo:
1) escolher um template em XML próprio para o Blogger
2) salvá-lo no seu PC
3) entrar em “design” e depois em “editar html“

2º passo:
1) clicar em “arquivo” e procurar o seu template no seu PC.

2) anexar o arquivo XML e clicar em “fazer upload do arquivo“.
3) Clique em “Salvar modelo” e visualize.
Se você preferir veja alguns modelos de Templates gratuitos → Aqui

Antes de tudo, quem deseja montar um Blog deve fazer um cadastro no Blogger.
É bem simples e se você já tem uma conta no Google é só utilizá-la.
Depois escolha o template que você preferir, dentre tantos modelos oferecidos pelo próprio Blooger.
Se você não quiser utilizar um dos modelos convencionais oferecidos pelo proprio blogger, você pode baixar algum modelo de sua preferência e trocá-lo.
Procurar Templates para o seu blog algumas vezes poder ser uma tarefa árdua e longa, e até cansativa. Em razão disso, aqui no Gothic Dakness eu disponibilizo alguns Templates desenvolvidos por mim e também recomendo alguns modelos de templates, que encontrei disponiveis para baixar em alguns blogs, afim de ajudar a busca daqueles que ainda estão decidindo sobre o layout e o designer de seus blogs.
Se você preferir confira alguns modelos que disponibilizei para baixar gratuitamente visitando nossa Galeria de Templates Gratuitos para Blogger
Mas antes de trocar seu Template, aprenda como Como Trocar o template no Blogger assistindo nosso video-tutorial.

Cartilha Blog : o Bê-a-bá-blog:

Entre minhas andanças em diversos blogs, encontrei uma cartilha criada pela autora do Blosque.
É altamente recomendável que todos leiam. Ali, está tudo que um blogueiro iniciante precisa saber desde a escolha do nome até às formas de monetização.
São 120 dicas, divididas em 8 seções:
1 – Começando a Blogar
2 – Design e Visual
3 – Conteúdo
4 – Comportamento
5 – Divulgação
6 – Networking
7 – Monetização
8 – Miscelânea

Leiam os post completo aqui e façam o download grátis do arquivo logo abaixo:
DOWNLOAD

Hoje em dia, os efeitos mais usados em fotos, geralmente é o efeito "Retrô".
E nesse tutorial você aprenderá como dar o efeito retrô emsuas fotos.

Abra o photoscape, qulique em Editor.
Passo 1:

Procure a pasta , onde sua foto que deseja editar está salva:


Passo 2:  


Selecionando a foto, clique em Alto Nível  




Passo 3:

Clique em Brilho, cor / Melhora o Contraste / Alto.





Passo 4:

Clique em Filtro / Efeito Filme / Você escolhe o efeito da sua preferência, com mais de 18 opções de efeitos.



No meu caso eu escolhi o feito Agfa -Alto + Vinheta 1.


Passo 5:               

 depois é só clicar em Salvar / :



Depois; Salvar como / e salvar na pasta desejada.






Agora olhe como ficou a minha edição :