Home » Arquivos de Fevereiro 2008

TEMPLATE NICE!

ESTE TEMPLATE TEM:
►O MENU COM 4 ABAS SOBREPOSTAS CUJOS CONTEÚDOS PODEM SER EDITADOS ATRAVÉS DO PAINEL "ELEMENTOS DA PÁGINA";
►MENU DE NAVEGAÇÃO SUPERIOR QUE TAMBÉM PODE SER EDITADO ATRAVÉS DO PAINEL "ELEMENTOS DA PÁGINA";
►CAIXA DE BUSCA;
►E ESPAÇO PARA COLOCAR ANÚNCIOS ADSENSE LOGO ABAIXO DO MENU SUPERIOR (SUGESTÃO DE FORMATO: Cinco blocos de links- Linha horizontal 728x15).

ÚLTIMA ATUALIZAÇÃO EM 27/07/2009 ÀS 13:00h

Clique na imagem para ampliar.

DEMO | DOWNLOAD

Para Configurar a Barra de Navegação Superior, O Menu de Abas Sobrepostas e a Caixinha de Busca.

Clique em Layout►Editar HTML e na caixinha com o código do seu blog faça as alterações necessárias.

1º►CONFIGURANDO OS LINKS DA BARRA DE NAVEGAÇÃO SUPERIOR

»Clique na imagem para ampliar ► Você pode inserir os links no menu superior usando uma Lista de Links.

2º►CONFIGURANDO A CAIXINHA BUSCA DO BLOG

UPDATE: A CAIXA DE BUSCA FOI SUBSTITUIDA PELA GADGET DE BUSCA DO GOOGLE - 27/07/2009

3º►CONFIGURANDO OS TÍTULOS DAS ABAS

→Encontre o código:

<div id='stylefourcontainer'>
<div id='stylefour'>
<ul>
<li><a class='tabactive' href='#' id='tablink1' onclick='return false;' onmouseover='blendon("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); blendoff("tabcontent4"); swichtabs("1");' title=''> CONFIGURAR ABAS </a></li>

<li><a href='#' id='tablink2' onclick='return false;' onmouseover='blendon("tabcontent2"); blendoff("tabcontent1"); blendoff("tabcontent3"); blendoff("tabcontent4"); swichtabs("2");' title=''> DICAS </a></li>

<li><a href='#' id='tablink3' onclick='return false;' onmouseover='blendon("tabcontent3"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent4"); swichtabs("3");' title=''> ARTIGOS </a></li>

<li><a href='#' id='tablink4' onclick='return false;' onmouseover='blendon("tabcontent4"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); swichtabs("4");' title=''> LINKS </a></li>
</ul>
</div></div>

»Altere as palavras CONFIGURAR ABAS, DICAS, ARTIGOS, LINKS, pelos títulos das Abas de acordo com sua necessidade.

»Para utilizar o conteúdo do menu de abas sobrepostas siga esta imagem que está contida na primeira aba:

APROVEITEM O TEMPLATE!

Continue Lendo »

TEMPLATE NOITE

Clique na imagem para ampliar.

»FAÇA O DOWNLOAD AQUI«

Continue Lendo »

TEMPLATES PARA WORDPRESS

Não sei criar templates para o Wordpress ainda.
Estou me aperfeiçoando em aprender cada vez mais sobre o Blogger, por isso ainda não me arrisquei no Wordpress.

Mas sabendo que o Wordpress é muito utilizado e navegando pela net encontrei um site muito legal onde tem um post intitulado:

83 Beautiful Wordpress Themes You (Probably) Haven’t Seen
Traduzindo...
83 Lindos Temas para Wordpress que Você (Provavelmente) Não Viu

Vale um Click neste link! Lá tem muita coisa bonita e outras que podem ser úteis até para os blogueiros do Blogger.

Continue Lendo »

Personalizando a Data/Calendário do Seu Post

CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO

Para você entender o que significam vários termos dos códigos CSS do blogger dê uma olhada na seção Códigos Básicos do blog Cria e Recria da Rô, lá tem várias explicações muito boas e didáticas.

O primeiro passo para fazer funcionar as suas configurações é apagar a linha
<link href='http://bloggerbuster.com/calendar.css' rel='stylesheet' type='text/css'/> do código anterior no tutorial, senão suas configurações não vão aparecer, vão prevalecer as configurações originais.

Vamos ao código:

/*-------Calendário do Post------*/
span.cal {
background:transparent url('imagem do seu calendário') no-repeat scroll 0%;
float:left;→ Se quiser que sua imagem fique à direita substitua left por right.
margin-right: 10px;→ Se sua imagem for flutuar à direita Substitua right por left.
height:36px;
width:35px;
font-family:"Helvetica",Tahoma,Arial;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
}

Para colocar uma imagem diferente na folha do seu calendário você pode usar alguns dos ícones abaixo. Baixe as imagens, salve em seu computador e hospede em algum site de hospedagem,(Veja acima no ítem DICAS vários sites de hospedagem.) aí substitua onde está indicado 'imagem do seu calendário' pelo endereço da sua imagem.
Atenção: Saiba as dimensões da sua imagem e ajuste as linhas height:36px;
width:35px; para dimensões que caibam sua imagem.

Clique neste LINK para os Ícones.

span.cal_month {
color:#FFFFFF; → Esta é a cor da letra do mês, ajuste-a de acordo com imagem de fundo.
display:block;
font-size:10px;→ Tamanho da letra que também deve ser ajustada de acordo com a imagem de fundo.
line-height:11px;
margin-left:1px;
padding-top:1px;
text-align:center;
text-transform:uppercase;
}
span.cal_day {
color:#999999;→ Esta é a cor da letra do dia, ajuste-a de acordo com imagem de fundo.
display:block;
font-size:18px;→ Tamanho da letra que também deve ser ajustada de acordo com a imagem de fundo.
line-height:18px;
margin-left:1px;→ Margem da esquerda que deve ser ajustada de acordo com a imagem de fundo.
padding-top:4px;
text-align:center;
text-transform:uppercase;
}
.sidebar {
margin-bottom: 20px;

Diferença entre margin e padding:Margin determina a distância de um elemento para outro no template, por exemplo, a distância entre uma coluna e outra.
Padding dá um espaço entre o conteúdo deste elemento para as bordas.Fonte: Templates para Novo Blogger
Se tiver dúvidas clique no link da frase que você entenderá melhor esta explicação.

Caso algo fique desalinhado vá testando clicando em visualizar antes de salvar até que fique do seu jeito.

Continue Lendo »

TEMPLATE ANGEL 01

Clique na imagem para ampliar.

»FAÇA O DOWNLOAD AQUI«

Para Configurar a Barra de Navegação e a Widget de Posts Recentes.
Clique em Layout►Editar HTML e na caixinha com o código do seu blog faça as alterações necessárias.
▼Clique em Continue Lendo▼

1º►CONFIGURANDO OS LINKS DA BARRA DE NAVEGAÇÃO SUPERIOR
→Encontre o código: (Utilize o atalho Ctrl+F e digite a palavra stylefour, por exemplo que ficará muito mais fácil de encontrar o código.)
<div id='stylefour'>
<ul>
<li><a href='#' title=''>Home</a></li>

<li><a href='#' title=''>About Us</a></li>

<li><a href='#' title=''>Services</a></li>

<li><a href='#' title=''>Our Work</a></li>

<li><a href='#' title=''>Contact Us</a></li>
</ul>
</div>

»Altere # pelo endereço do Link e as palavras Home, About Us, Services, Our Work, Contact Us, pelos títulos correspondentes aos links.

2º►CONFIGURANDO A CAIXINHA DE POSTS RECENTES
»Clique em editar a widget com o título de POSTS RECENTES e coloque o código como explica este Link

Continue Lendo »

Data do Post na Forma de Folha de Calendário

CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO

Neste post vou ensinar como exibir as datas dos seus posts na forma de calendário assim como está aqui no Templates para VOCÊ.
Fonte:Tradução do Tutorial deste link Blogger Buster

1º Passo: Vá em Configurações ► Formatação ► Altere o formato da data para Ano-Mês-Dia como na figura abaixo:

2º Passo: Vá em Modelo ► Editar HTML ► Clique em Expandir modelos de widgets ► Encontre o código <data:post.dateHeader/> (Utilize o atalho Ctrl+F)
A linha que você encontrou vai estar desta forma: (Pode talvez, no lugar do h2 estar h3, mas não tem problema)
<h2 class='date-header'><data:post.dateHeader/></h2>

► Substitua o h2 ou h3 por div, ficando assim:
<div class='date-header'><data:post.dateHeader/></div>

Salve seu template clicando em SALVAR MODELO

3º Passo: Pode desmarcar a caixinha Expandir modelos de widgets ►
Cole entre as tags ]]></b:skin> e tag </head> este código a seguir:

<!-- calendar widget -->
<script src='http://bloggerbuster.com/scripts/fastinit.js'/>
<script src='http://bloggerbuster.com/scripts/prototype-1.5.0.js'/>
<script src='http://bloggerbuster.com/calendar.js'/>
<link href='http://bloggerbuster.com/calendar.css' rel='stylesheet' type='text/css'/>
<!-- end calendar widget -->

Salve seu template clicando em SALVAR MODELO

4º Passo: Se você quiser configurar a imagem do calendário copie este código abaixo e cole acima da tag: ]]></b:skin> ► Sugiro que Apague a linha:
<link href='http://bloggerbuster.com/calendar.css' rel='stylesheet' type='text/css'/> do código anterior


/*-------Calendário do Post------*/
span.cal {
background:transparent url('imagem do seu calendário') no-repeat scroll 0%;
float:left;
margin-right: 10px;
height:36px;
width:35px;
font-family:"Helvetica",Tahoma,Arial;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
}
span.cal_month {
color:#FFFFFF;
display:block;
font-size:10px;
line-height:11px;
margin-left:1px;
padding-top:1px;
text-align:center;
text-transform:uppercase;
}
span.cal_day {
color:#999999;
display:block;
font-size:18px;
line-height:18px;
margin-left:1px;
padding-top:4px;
text-align:center;
text-transform:uppercase;
}
.sidebar {
margin-bottom: 20px;
}

No próximo post explico como mudar a imagem do calendário!

Links com folhas de calendário:
Link 1
Link 2

Continue Lendo »