Blog Day, Aniversário do Dicas Blogger e Podcast da Ariane do Templates para Novo Blogger

Vocês devem estar se perguntando. Porque a Áurea fez um título tão grande e com tantos assuntos? Que título e este?

Justamente porque minha cabeça está pipocando de assuntos para falar aqui e meu tempo está muito escasso, então resolvi falar de tudo um pouco.

Muitos de nos já sabemos que para criar um post bem legal levamos bastante tempo, pelo menos eu levo um tempo considerável, não sei se é porque sou lenta e detalhista, mas demoro, gosto de tudo muito bem explicadinho.

Então para não perder tempo!

Vamos aos assuntos:

»Hoje é 31/08 o BlogDay um dia do ano dedicado aos blogs.

Entendam mais um pouco sobre o BlogDay no blog da Luma

»Aniversário do Dicas Blogger o blog da Juliana Sardinha que reúne em seu conteúdo muita informação para blogueiros e outros assuntos interessantes.
Escrevo para parabenizar minha amiga e companheira blogueira.

»Não pude deixar de divulgar e linkar o Blogger Cast com a entrevista com minha amiga Ariane dona do Templates Novo Blogger.
O blog da Ariane foi o primeiro que me ensinou alguma coisa sobre os códigos do Novo Blogger, desde que comecei a blogar. Com a ajuda dela e estudando sozinha consegui desenvolver templates para distribuir e os meus 3 blogs que gosto tanto.
Vale a pena ouvir o que a Ariane tem para dizer clicando na imagem e aproveito para dizer que a Juliana está mandando bem demais com os Blogger Casts.

Atualizando... 01/09/08-22:50h

O Blog Studio da minha Amada Jô também faz aniversário no mês de agosto e escrevo para dar os Parabéns à Jô pelo excelente blog sobre o PhotoFiltre Studio. Neste blog e ensina a todos como utilizar o PhotoFiltre com tutoriais muito bons e didáticos.
Vale um Click! Se quiser clique na imagem que ela te leva até lá.


Grande abraço à todos!
Áurea

Continue Lendo »

Template Blue Love

ESTE TEMPLATE TEM:

►4 COLUNAS, UMA DEDICADA AO ADSENSE COM 120px DE LARGURA;

►POSSUI 3 COLUNAS NO RODAPÉ;

►RECURSO PARA COLOCAR ANÚNCIOS ADSENSE ENTRE OS POSTS.

Clique na imagem para ampliar.

DEMO | DOWNLOAD

Para Configurar o Menu.
Clique em Layout
►Em Elementos de Página altere a Lista de Links logo Abaixo do Cabeçalho;

Continue Lendo »

Como escrever igual a gadget "Posts da Vez"

CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO

Recebi uma dúvida perguntando sobre como fiz para que a gadget da sidebar ficasse com a configuração que está, com a imagem paralela ao texto.

DICA: Aprendi a fazer isso selecionando textos com imagens que me interessam, clico com o botão direito do mouse e visualizo o Código Fonte da seleção. Assim... Fui testando até conseguir.

Aqui fica a dica para você por em prática sempre que quiser aprender algo, mas vou ensinar como está a configuração da gadget "Posts da Vez"

Veja só:
1º O código para a imagem:

<div style="FLOAT: left; WIDTH: 10%"><img style="vertical-align: middle;" src="URL da IMAGEM"/></div>

Entenda o código:
»Para que a imagem fique do lado esquerdo utilizei o comando [float:left;];
»[widht:10%] representa a largura do espaço que a imagem ocupa;
»[vertical-align: middle;] é o alinhamento vertical da imagem→central.
»OBS: Utilizei imagens com o tamanho 48x48px nesta gadget.

2º O código para o Título ao lado da Imagem:

<div style="FLOAT: right; WIDTH: 85%"><span style="font-weight: bold; border-bottom:1px dotted #B30000; line-height:1.4em; display:block; "><a href="URL do TÍTULO" target="_blank"> TÍTULO </a></span></div>

Entenda o código:
»Para que o texto fique do lado direito utilizei o comando [float:right;];
»[widht:85%;] representa a largura do espaço que ao texto ocupa;
»[font-weight: bold;] significa que o texto está em negrito;
»[border-bottom:1px dotted #B30000;] é o sublinhado do texto, apenas em baixo, mas você pode colocar ao lado, ou borda em tono dele todo;
»[line-height:1.4em;] altura da linha;
»[display:block;]para o texto ficar ao lado da imagem deve estar em bloco;
»[font-size:120%;] indica o tamanho da fonte.

3º O texto abaixo da imagem e titulo:

<span style=" margin-left:20px; padding:2px 0 0px 20px;">
<ul> TEXTO 1ªLINHA </ul>
<ul> TEXTO 2ªLINHA </ul>
<ul> TEXTO 3ªLINHA</ul></span>

Entenda o código:
»[padding:2px 0 0px 20px;] margem interna do texto na seguinte ordem: superior, direita, inferior e esquerda;
»[font-size:85%;] indica o tamanho da fonte;
»[margin-left:20px;] indica a margem esquerda do texto.
»[<ul>] define as linhas.

AO FINAL FICARÁ ASSIM:

<div style="FLOAT: left; WIDTH: 10%"><img style="vertical-align: middle;" src="URL da IMAGEM"/></div><div style="FLOAT: right; WIDTH: 85%"><span style="font-weight: bold; border-bottom:1px dotted #B30000; line-height:1.4em; display:block; font-size:120%;"><a href="URL do TÍTULO" target="_blank"> TÍTULO </a></span></div><span style="font-size:85%; margin-left:20px; padding:2px 0 0px 20px;">
<ul> TEXTO 1ªLINHA </ul>
<ul> TEXTO 2ªLINHA </ul>
<ul> TEXTO 3ªLINHA</ul></span>
<br/>

►Use <br/> para saltar uma linha entre os textos.

Siga estes passos e altere da forma que quiser.

Sugiro que visite sites que ensinam sobre códigos CSS e HTML como por exemplo:
CSS PADRÕES ou CSS PARA WEBDESIGN

Continue Lendo »

Como Hospedar Arquivos no Google Sites

Hoje li no Blog-Memories que o Google Pages vai deixar de existir.
Realmente eles colocaram uma mensagem na página inicial do Google Pages que não estão aceitando mais cadastros de novas contas lá.

Mas calma! O Google está desenvolvendo o Google Sites, que além de outros recursos, vai englobar os recursos do Google Pages, inclusive o recurso de hospedagem de códigos em javascript.
Que, no momento é o recurso que me interessa para fazer este post.

19/08-20:50h-Atualizando... O Google sites não está aceitando códigos javascript quando tento fazer upload e o txt com o código java não está funcionando.
O engraçado é que ontem tudo funcionou perfeitamente enquanto fazia este post e hoje estava tudo bagunçado.

Bom, de qualquer forma, fica aqui a dica de como utilizar o Google Sites e você pode hospedar arquivos de imagens, txt e outros.

O Google Sites já está funcionando e para quem se interessa em continuar usando os recursos Google vou ensinar como hospedar seus arquivos lá.

Vamos lá:

» Se você já possui uma conta google, quando entrar no endereço http://sites.google.com/, coloque seu ID e sua senha do seu email google.

» Em seguida clique no botão Create a Site















» Siga as instruções da imagem abaixo.

(Clique na Imagem para abrir em outra página em tamanho maior)


» Pegue o código javascript ou o arquivo e cole no bloco de notas.
» Salve como arquivo txt.
» Hospede esse arquivo na sua conta de Google Sites.
» Em seguida clique com o botão direito do mouse em cima do link do arquivo e copie o link.
» Cole no código abaixo ou substitua o endereço que já deve estar em seu blog pelo seu.

<script src='LINK DO SEU ARQUIVO' type='text/javascript'/>

ATENÇÃO
TENTEI COLOCAR ARQUIVO NO FORMATO JS E O GOOGLE SITES NÃO ACEITOU → ACEITOU SOMENTE NO FORMATO TXT.

Acredito que futuramente isso seja corrigido.

Se você quiser hospedar seu código javascript no formato js pode utilizar o Windows Live Sky Drive

A Rô do Blog a La Carte já fez um Tutorial sobre Hospedar Arquivos Javascript onde ela ensina como utilizar o Windows Live Sky Drive

OBS:
☺Já testei este tutorial sobre o Google Sites aqui mesmo no Templates para Você e funcionou perfeitamente.
☺Copiei o código javascript do menu em abas daqui para o bloco de notas salvei normalmente depois substituí o endereço antigo pelo novo do Google Sites.

ATUALIZAÇÃO 19/08-13:15h
O arquivo java no formato texto não está funcionando no IE6 nem Firefox2 aqui no trab. Utilizo Windows98. Realmente não sei o porque.
Voltei para o endereço:'http://www.barelyfitz.com/projects/tabber/tabber.js' para o menu em abas.
Mais à noite pesquiso o porque desses problemas.

Continue Lendo »

TEMPLATE SimpleAdSense

ESTE TEMPLATE TEM:

►NA LATERAL DIREITA 2 MENUS COM ABAS SOBREPOSTAS CUJOS CONTEÚDOS PODEM SER EDITADOS ATRAVÉS DO PAINEL "ELEMENTOS DA PÁGINA" OU PELO CÓDIGO HTML ACRESCENTANDO + ABAS OU NÃO;

►É UM TEMPLATE TOTALMENTE CUSTOMIZÁVEL → VOCÊ PODE MUDAR TODAS AS CORES;

►POSSUI 1 SIDEBAR E 1 WIDGET DEDICADOS A ANÚNCIOS DO ADSENSE ATRAVÉS DO PAINEL "ELEMENTOS DA PÁGINA";

►POSSUI 3 COLUNAS NO RODAPÉ;

►RECURSO PARA COLOCAR ANÚNCIOS ADSENSE ENTRE OS POSTS.

(VEJA AS EXPLICAÇÕES SOBRE O MENU EM ABAS EM CONTINUE LENDO)

Clique na imagem para ampliar.

DEMO | DOWNLOAD

Para Configurar as Abas Sobrepostas.
Clique em Layout
►Em Elementos de Página altere o que preferir;
►Em Editar HTML, na caixinha com o código do seu blog faça as alterações necessárias.
▼Clique em Continue Lendo▼

1º►COMO ACRESCENTAR AS WIDGETS NAS ABAS
1º- Clique sobre o número da Aba que você deseja colocar a widget;
2º- Clique em: Editar para alterar o conteúdo da widget que já está naquele número (pode ser apagando a widget e colocando outra ou editando a já existente), ou em Adicionar elemento de página caso este apareça;
►Os TÍTULOS das abas serão sempre o título da widget que você escolher para colocar mesmo que apareça números na página de Elementos de Página.

ATENÇÃO

»O menu em abas funciona com um JavaScript que deve ser hospedado por você;
»BAIXE E SALVE o arquivo java que está em azul:
<script src="'http://www.barelyfitz.com/projects/tabber/tabber.js' type='text/javascript'">;
»Hospede no local de sua preferência substituindo o LINK: http://www.barelyfitz.com/projects/tabber/tabber.js no código do seu template pelo LINK fornecido por sua hospedagem;
»Desta forma não haverá o risco de suas abas não funcionarem, a não ser que você hospede muitos arquivos e sua taxa de transmissão de banda ultrapassar o limite do site de hospedagem.

2º►CONFIGURANDO AS WIDGETS DE POSTS E COMENTÁRIOS RECENTES

Em Layout→Elementos de página:
» A widget de Posts Recentes já estará aparecendo, ou não, por ser a tab ativa em "1", então clique em editar e acrescente o código como está explicado neste link: Widget de Posts Recentes .
»Se a widget de posts recentes não estiver aparecendo clique em Adicionar um elemento de página e coloque a widget que quiser.

» A widget de Comentários Recentes está na tab "2", então clique em 2 e em editar e acrescente o código como está explicado neste link: Widget de Comentários Recentes.

3º►COLOCANDO MAIS ABAS OU MAIS MENUS EM ABAS:
Em Editar HTML, na caixinha com o código do seu blog encontre:

<div id='tabsidebar-wrapper'>

<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg1' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='Posts Recentes' type='HTML'/>
</b:section>
</div>

<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg2' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='Comentários Recentes' type='HTML'/>
</b:section>
</div>

<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg3' maxwidgets='1' showaddelement='yes'>
<b:widget id='Label1' locked='false' title='Marcadores' type='Label'/>
</b:section>
</div>

<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg4' maxwidgets='1' showaddelement='yes'>
<b:widget id='BlogArchive1' locked='false' title='Arquivo' type='BlogArchive'/>
</b:section>
</div>

</div><!-- End tab1-->

<div class='tabber' id='tab2'>

<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg5' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList2' locked='false' title='Sobre o Blogger' type='LinkList'/>
</b:section>
</div>

<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg6' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML3' locked='false' title='Como Instalar o Template' type='HTML'/>
</b:section>
</div>

<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg7' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML4' locked='false' title='Política de Privacidade' type='HTML'/>
</b:section>
<</div>

</div><!-- End tab2-->

</div><!-- End Tabsidebar-->

Obs: tab1 e tab2 representam os menus com abas.

►PARA ACRESCENTAR ABAS:
É simples:
Veja que cada código class='tabbertab' representa uma aba.
☺→Então para acrescentar ABAS você deverá copiar este código base:

<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg1' maxwidgets='1' showaddelement='yes'/>
</div>

e colocar no menu que desejar, lembrando sempre de alterar uma coisa:
Está vendo o código em vermelho:tabberwidg1
► SEMPRE QUE VOCÊ CRIAR UMA NOVA ABA DEVERÁ ALTERAR O NÚMERO 1 PARA OUTRO DESDE QUE NUNCA SE REPITAM.
→No código original eu uso de 1 a 7, então para você acrescentar outra aba deverá começar com o nº8.

Feito isso SALVE o seu código e vá em Elementos de página, lá estará o nº da aba que você criou, Adicione o elemento de página que preferir e pronto, sua aba nova já foi acrescentada.

►PARA ACRESCENTAR OUTRO MENU:
Você deve acrescentar entre os códigos:

</div><!-- End tab2-->
►ACRESCENTE AQUI O CÓDIGO BASE ABAIXO◄
</div><!-- End Tabsidebar-->

Este código base:

<div class='tabber' id='tab3'>
<div class='tabbertab'>
<b:section class='tabberwidg' id='tabberwidg#' maxwidgets='1' showaddelement='yes'/>
</div>
</div><!-- End tab3-->

→O terceiro menu será representado por tab3.

→Irá funcionar da mesma forma para acrescentar mais abas tendo que alterar o nº(#) da tabberwidg# por um diferente. (O simbolo # representa o nº)

→ Você também terá que acrescentar um código CSS para o menu novo:

Abaixo deste código:
.tabberlive#tab2 { float:right;
}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;
}

Acrescente este:
.tabberlive#tab3 { float:right;
}
.tabberlive#tab3 .tabbertab {
height:200px;
overflow:auto;
}

Pronto!
Se quiser, faça estas alterações e APROVEITEM O TEMPLATE!

Continue Lendo »

Ganhe um Template Logo e Domínio para o Seu Blog

Minha Amiga Juliana lançou esta semana a Promoção de Aniversário do Dicas Blogger, onde quem ganha é o leitor!

Vale dar uma olhada e participar, quem sabe você ganha um template só seu, um logo e um domínio! Tudo de bom!

Clique em continue lendo e saiba como participar!

Para participar é necessário seguir rigorosamente as regras abaixo.

INSCRIÇÃO: de 29 de julho a 29 de agosto

1. Faça um post no seu blog anunciando a promoção. Neste post deve conter o link para esta postagem, o banner da promoção e um convite para mais 04 blogs amigos participarem.
2. Envie um email escrito "promoção" no campo "assunto", confirmando sua inscrição, com o link do seu post.
3. Ficam excluídos da promoção blogs que:

• façam apologia à violência;
• promovam qualquer tipo de preconceito;
• não respeitem Direitos Autorais;
• contenham pornografia;
  

Semanalmente irei divulgar a lista de inscritos e seus respectivos números para o sorteio.

Não esqueçam de convidar os 4 blogs!

SORTEIO:

Acontecerá no dia 31 de agosto, dia do aniversário de 01 ano do Dicas Blogger.

SOBRE O PRÊMIO:

O template e o logotipo serão criados pelo Paulo Estevão, do Códigos Blog, o mesmo autor do template anterior do Dicas Blogger. O ganhador poderá escolher uma layout do seu gosto ou deixar por conta da criatividade do Paulo. Conheça outras obras dele clicando aqui.

O domínio poderá ser escolhido a critério do ganhador e pagaremos a primeira anuidade.

FAQ:

Blogs do Wordpress poderão participar?

Infelizmente não, pois o template é para o Blogger.

Para que convidar 4 amigos?

Para alcançar um maior número de blogs e também prestigiar nossos amigos, linkando-os.

Por que preciso apontar para o link desta postagem e não para o do Dicas Blogger?

Pois um das formas de contabilizar os inscritos será via backlinks.

E se eu não quiser o domínio?

Não haverá problemas. Você será contemplado com o template e o logotipo.

Posso apenas divulgar a promoção?

Sim, com certeza! Só serão contabilizadas as inscrições confirmadas por email.

Continue Lendo »