sábado, setembro 18, 2010

Como ajustar a largura dos novos modelos Blogger


Por João Cruzué

As larguras dos modelos antigos do Blogger estavam espalhadas no CSS - com acesso em Editar Hmtl. Eu estava fazendo um update de alguns pequenos blogs meus, experimentando, antes de mudar o maior deles. Ainda estou em fase de pesquisas, mais o que descobri hoje posso compartilhar. O modelo experimentado é o "Travel".


Olhe as figuras abaixo:

1) para ajustar a largura ao Banner (Cabeçalho) do seu blog, é só deslizar o botão da primeira barra até que a visualização fique perfeita.

Blogger


2) Para ajustar o box lateral (Sidebar) o procedimento é feito na segunda barra.


3) E agora, onde fica o ajuste da largura da caixa de postagens?
.
Blogger


Observe a linha de medidas onde aparece "260px". Ela normalmente vem com "360px". Esta medida afeta, tanto a largura da Caixa de postagens (main) quanto a do box lateral (sidebar).

Se você reduzir os 360 para 260px, como fiz acima, vai aumentar a largura da caixa de postagens ao mesmo tempo que a largura do box lateral (sidebar) vai se reduzir.

Resumindo: nestas linhas de CSS também estão o controle das medidas do (novo) modelo "Travel" do Blogger. O acesso a elas fica em "Editar Html" e as configurações da figura ficam logo abaixo das linhas de CSS do "Footer".



Visite meu blog: Olhar Cristão , eu também preciso de amigos. He he he!




.

domingo, agosto 29, 2010

Como tornar + rápida a navegação do seu Blogspot

.

Por João Cruzué

Olá amigos. A Paz de Cristo.

A maioria dos que atualizaram os modelos do Blogspot pela sugestão do novo design, enfrentaram problemas de lentidão, na navegação das páginas dos Blogs. Creio que o Google deve ter imaginado que todos nós temos computadores com processadores e sistema operacional de última geração.

Eu simplesmente não consigo mais navegar nos blogs que implementei esta mudança. A mesma coisa aconteceu quando visitei blogs de outros colegas.

Eu resolvi o problema da seguinte forma: troquei o novo modelo do Blogger por um template baixado deste site: www.btemplate.com.


SUGESTÕES:

a) Você faz o download do modelo na área de trabalho (desktop) do seu computador.

b) Depois clica com o botão direito e seleciona a opção "explorar".

c) Vai abrir o arquivo zipado. Dentro, você copia a pasta do modelo e cola na área de trabalho.



Agora vamos ao processo de instalar o noVo template (modelo)


a) Entre do painel do seu blog, clique em "design".

b) Depois em "Editar Html".

c) Clique em "Selecionar arquivo" - vai abrir os locais de seu computador

d) Direcione para "Área de Trabalho" ou "Desktop".

e) Localize a pasta que você colou , dentro dela clique no arquivo "xml".

f) Feito isso, clique em "Fazer Upload.

g) Salve com a opção "manter os Widgets" do seu Blog.


Resultado: garanto que a velocidade de abertura das páginas de seu blog vão melhorar.


Mais uma dica: Às vezes a velocidade de navegação de um blog aumenta quando você clique em "Configurações", depois em Formatação, e alterar o número de "Mostra no máximo "tantas" postagens na página principal. A velocidade diminui com o aumento das postagens na página principal. Eu tenho usado 03.


Abraço.

Visite meu blog: Olhar Cristão
Faça parte da Associação de Blogueiros Cristãos. aqui: Associe-se



Irmão João Cruzué
Salvo por Cristo,
Congregação: Igreja Ev. Assembléia de Deus.



.

sábado, junho 26, 2010

Os novos modelos e design do Blogger


Por João Cruzué
/ do Blog Olhar Cristão

Estive analisando, de forma rápida, os novos modelos e o menu "design" do Blogger. Percebi que certas coisas que passei anos para entender para mudar por conta própira, agora estão disponíveis no Blogspot. Já é possivel aumentar as larguras, mudar a cor de fundo, escolher entre uma ou duas barras laterais, etc.

Uma coisa é muito importante quando o assunto é fazer mudanças no seu Blog. Se você quiser experimentar primeiro, para depois implementar as mudanças, siga o caminho mais seguro: 1) crie um blog de testes; 2) Em Editar HTML, copie toda página de configurações do seu blog principal e salve no bloco de textos. Agora venha comigo, para dar uma olhada nas novidades.


A figura abaixo é o Painel do Blogger.
Estou usando como exemplo o Blog de testes João Cruzue


Prints de João Cruzué

Prints de João Cruzué

New  Blogger
Figura 1

PRIMEIRO PASSO: Para escolher/mudar o Modelo, Layout, Cabeçalho/Banner HTML, CSS e outros, no painel do Bloger você clica em "Design". Observe bem a figura acima.


New Blogger 2
Figura 2


SEGUNDO PASSO:
No menu Design, você seleciona "Designer do modelo". Ao fazer isso, você acessa o painel abaixo, onde pode mudar Modelos, Plano de Fundo, Layout (larguras) e Avançado.


New  Blogger
Figura 3


TERCEIRO PASSO
: Sempre que precisar salvar alguma mudança, clique em APLICAR AO BLOG. A figura abaixo, é a metade da esquerda da figura acima. Para tornar acessar o menu da figura 2, clique em "Voltar para o Blogger". Para ver as mudanças: "Visualizar blog".


New Blogger 4
Figura 4



Clique nas próximas figuras para ampliar e analisar.


O PLANO DE FUNDO DA FIGURA 3
As opções de cores já previamente testadas estão à sua disposição

Figura 5


O LAYOUT - Figura Abaixo.

1 - Você pode ajustar o CORPO, formado pela Caixa de textos e Barra(s) lateral(is)

2 - Ajustar o Rodapé para uma, duas ou três caixas

3 - Ajustar LARGURA de todo o Blog e a largura do(s) Box(es)


Figura 6


O menu AVANÇADO
Uma série de mudanças para você experimentar.

Figura 7
Como expliquei (lá em cima) clique na figura para abrir a imagem.


O Blog de testes pronto



Abraço,



João Cruzué - cruzue@gmail.com

Faça parte da Associação de Blogueiros Cristãos."






sábado, junho 12, 2010

Prêmio Blogueiro Cristão 2010


CONCURSO LITERÁRIO

PARA BLOGUEIROS EVANGÉLICOS

Além do Prêmio + R$500,00 em dinheiro.



e João Cruzué

Caros Leitores,

Em protesto contra aqueles que podem, mas não querem fazer, O Blog Olhar Cristão vai dar início ao primeiro concurso literário do gênero. Nosso objetivo de premiar a originalidade, dar visibilidade a blogueiros iniciantes e incentivar a produção de conteúdo cristão com um Prêmio Literário reforçado por uma pequena quantia em dinheiro.


PROPOSTA:

Se você começou a blogar a partir de 2008 e seu blog ainda não tem visibilidade na busca do Google nem os leitores que gostaria de ter, eu, Irmão João Cruzué, estou disposto a oferecer duas oportunidades: O Prêmio Blogueiro Cristão 2010 e R$500,00 em dinheiro. Veja as Regras.

No mês de novembro de 2010, vou conceder o Prêmio Blogueiro Cristão 2010 ao autor do melhor texto. E para acompanhar o Prêmio Virtual, um cheque no valor de R$500,00 (Quinhentos Reais). Se alguma empresa cristã quiser apoiar a iniciativa e elevar o valor do prêmio, a proposta vai ser analisada.

REGRAS:


I -O prêmio é exclusivo para cristãos de Igrejas Evangélicas, que começaram a blogar a partir de 2008;

II - Para ter direito a participar do prêmio, você precisa enviar 05 (cinco) textos de sua autoria. Um em cada mês, a partir de 12 de julho. Vou conceder uma única tolerância para o mês de julho. O texto de julho, pode ser entregue até 12 de agosto de 2010. Daí em diante, o texto de cada mês deve ser entregue no próprio mês. O de agosto, em agosto, o de setembro, em setembro, o de outubro, em outubor e o último texto - novembro - deve ser entregue, sem atraso, até 20 de novembro de 2010.

III - Não basta apenas enviar o texto. É preciso que ele chegue até a mim e seja publicado no Blog da Associação de Blogueiros Cristãos - www.blogueiroscristaos.blogspot.com .

IV - A premiação é exclusiva para textos de própria autoria - inéditos (ainda não publicados) .Não vale textos copiados ou escritos por outra pessoa da família. O prêmio é para a originalidade.

V - Os dois melhores textos de cada mês serão publicados no blog www.olharcristao.blogspot.com dando o respectivo crédito aos autores e o endereço de seus blogs estarão dispostos nos textos.

VI - No final de novembro farei a escolha do melhor texto, entre os textos de todos os meses, e com a graça de Deus, comunicarei o prêmio e farei o depósito dos R$500,00 na conta do premiado, com sugestão de que aplique uma parte em oferta de missões.

VII - O critério da classificação dos textos é subjetivo e objetivo. Subjetivo porque vai levar em conta meus seis anos de blogagem. Objetivo, porque vai levar em conta o assunto, o contexto e a Língua Portuguesa.

VIII - Faça seu cadastro enviando um email com: 1) seu nome completo, 2) endereço, 3) Igreja onde congrega, 4) Data de seu primeiro blog, 5) E digite o texto no final do email: "CONHEÇO E CONCORDO COM AS REGRAS DO PRÊMIO BLOGUEIRO CRISTÃO 2010"


IX - O Concurso não será levado adiante se a quantidade de participantes for inferior a 50 participantes.

X - TRANSPARÊNCIA: O nome dos participantes e outras informações importantes serão publicados, abaixo, nesta mesma postagem, que pode ser acessada do menu "Concurso" no cabeçalho deste Blog.


Patrocinador
:
João Batista Cruzué
Blog Olhar Cristão/ Associação de Blogueiros Cristãos
Prêmio Blogueiro Cristão 2010.

Comunicação:

email para tirar dúvidas e enviar textos: cruzue@gmail.com




.

sábado, maio 29, 2010

Topnav - Com colocar menu de site no seu Blog


TOPNAV - CSS e HTML


O resultado do Topnav

Por João Cruzué

Desde o início, eu sempre desejei ter um menu de site no Olhar Cristão. Como eu sei que você também já deve ter imaginado isto, se ainda não conseguiu a mudança vou compartilhar outra vez este assunto para sua análise.

Se acaso um dia quiser testar esta melhoria, é preciso escolher entre tuas medidas de segurança:
1) Fazer uma cópia de todas as linhas de configurações usando o Ctrl+a, Ctrl+c, e colando com Ctrl+v em arquivo do bloco de textos. Salve o arquivo com o nome de meublog; 2) Se achar melhor, crie um blog de testes semelhante ao modelo que tiver, para testar a inserção do CSS (figura 1) e HTML (figura 2). Depois de experimentar e acertar, siga os mesmos passos para inserir o Topnav no seu Blog principal. Relembrando, para acessar o "Editar HTML" do seu blog você pode ir pelo menu Layout ou Personalizar.

clique duas vezes para ampliar a figura
Figura 1 - CSS

A primeira parte das configurações do blogspot é escrita em CSS. No Modelo Rounders 3, as linhas de CSS do Topnav são inseridas abaixo do HEADER. Em outros modelos você precisa fazer o teste para saber ONDE INSERI-LAS. As linhas de CSS alteram configurações de backgroundCollor, tamanho das fontes, espaçamento... clique 2x na figura 1


Figura 2: HTML

No final das linhas de CSS, iniciam outras configurações em HTML. É bem no começo que você insere a segunda parte das configurações para colocar o menu de site no blogspot. Observe bem quando começa o HTML com a tag ]] skin . As linhas em vermelho mostra o que acrescentei para finalizar a configuração. A posição fica entre o /div e a linha que tem as tags croscol-wrapper.



Há muito tempo desejei ter um menu de site no meu blog. Aprendi sozinho, observando. Gostei e estou compartilhando. Irmão João Cruzué, da Associação de Blogueiros Cristãos ABC

Visite o blog da Associação de Blogueiros Cristãos para copiar as linhas do CSS e HTML das figuras. Funciona assim: se você clicar com o botão direito do mouse em nosso blog, vai abrir uma caixa de seleção. Escolha a opção código-fonte, Copie e cole cada uma em arquivos separados do programa bloco de notas.

Este programa existe no seu computador em: Iniciar/Todos Programas/ Acessórios/Bloco de Notas. Depois que você copiar os dois grupos de linhas (CSS e HTML) em arquivos do bloco de notas, salve com os nomes de CSS e HTML. Para mudar os links do meu blog para os seus, observe na figura 2 as linhas que estão em azul. É provável que isto pareça grego para você. Era assim que eu também achava. Mas o compromisso de oferecer melhor conteúdo em melhor visual me levou a investir um pouco do meu tempo investigando e aprendendo essas coisas.

Um abraço sincero. João. cruzue@gmail.com

Associe-se na ABC. Veja como no menu do meu blog - lá em cima. Já é resultado do efeito Topnav.



.



domingo, maio 16, 2010

Curso de Blogs - Sintaxe do CSS do Blogspot



Por João Cruzué.

Não é preciso ser graduado em TI para entender algumas coisinhas sobre a linguagem das páginas do blogspot. Tenho uma opinião formada sobre a edição de Blogs: buscar a melhoria do conteúdo sem esquecer a forma é uma atitude de compromisso, de respeito para com nossos leitores. Esta melhoria passa pelo conhecimento de detalhes da sintaxe da linguagem do "HTML" do Blogspot. A curiosidade levou-me a resolver alguns problemas e concretizar planos que julgava difíceis para mim.

No Começo, eu conheci o Blog O Levita do irmão Daniel Miranda. Achava o máximo design do banner do Levita. Por uns dois anos e continuei com o cabeçalho original do meu blog. Só depois disso é que me aventurei a desenhar meus banners.

Mas antes disso já conseguia alterar a cor de fundo, do fundo da caixa de textos, a cor das fontes dos títulos, datas , boxes laterais e rodapé. Por último, isto faz menos de um mês, eu consegui colocar um menu de site debaixo do cabeçalho de alguns de meus blogs. Continua sem compreender HTML, mas dá para experimentar algumas mudanças.


SINTAXE.

Definição: A Sintaxe é a parte da gramática que estuda a disposição das palavras na frase e a das frases no discurso, bem como a relação lógica das frases entre si. (...) Para isso, as palavras são relacionadas e combinadas entre si. A sintaxe é um instrumento essencial para o manuseio satisfatório das múltiplas possibilidades que existem para combinar palavras e orações. [1]

Dito isto, vamos ao ponto. Abra uma outra página na internet e digite o endereço do meu blog: www.olharcristao.blogspot.com . Olhe bem para a figura acima. Na página do meu blog, clique com o botão direito do mouse, ao lado do botão amarelo "João Cruzué". Vai abrir esta caixinha de menu onde lá embaixo está a opção "Código-fonte" - clique com o mouse esta opção. Se você fez tudo certo, vai abrir esta página abaixo. Clique para ampliar.


Como esta é uma dica restrita aos modelos de páginas do Blogspot, não vou tratar de outros assuntos, a não ser isto: toda página da Internet que se abre no seu monitor tem por trás de sua beleza uma estrutura construída de HTML ou de línguagens complementares. Basta clicar com o botão direito do mouse nos espaços vazios que vai aparecer seu código-fonte.


DETALHES E TÍTULOS DO CÓDIGO FONTE

Do início da página do código-fonte (Doctype) até a última linha das "/* Variable definitions" a linguagem é (X)HTML. Depois das Variáveis, começa as linhas em CSS, conforme abaixo.

*/
body {
background:#ebe5d5;

Daqui ele se estende até bem abaixo, passando por vários títulos: como

1 - /* Page Structure

2 - /* Links

3 - /* Blog Header

4 - /*nav

5 - /* Posts

6 - /* Comments

7 - /* Profile

8 - /* Sidebar Boxes

9 - /* Footer

Recomeço do HTML em -->

------------------------------------------------------

Antes da sintaxe do CSS vamos olhar um pouco as linhas de "Variable definitions" ou traduzido: definição das variáveis.

1 - Main Background Collor
Quer dizer a cor do fundo da caixa de textos onde você escreve as postagens.

2 - Text Collor
Quer dizer a cor (default) das letras (fontes) que você digita seu texto.

3 - Post Title Collor
A cor da fonte do título da sua postagem.

4 - Date Header Collor
A cor da fonte das datas da sua postagem.

5 - Post Border Collor
A cor das bordas da caixa de textos e do box lateral

6 - Link Collor
A cor default de todos os links no blog

7 - Visited Link Coll0r
A cor do link depois de visitado

8 - Page Header Background Collor
A cor de fundo dos cabeçalhos orgiginais do Blogspot.
Não tem utilidade nos blogs de cabeçalhos modificados.

9 - Blog title collor
A cor da fonte do título do blog
Não tem utilidade nos blogs com títulos feitos diretamente sobre o Banner do cabeçalho

10 - Top Sidebar Title Color
A cor da fonte do título do primeiro box lateral

11 - Top Sidebar background collor
A cor do fundo do primeiro box lateral

e assim por diante... Estas cores podem ser modificadas nos 9 títulos do CSS abaixo.


SINTAXE DO CSS

Definição: Cascade Style Sheets: folhas de estilo em cascata. O CSS é uma linguagem criada por volta de 1994 e é muito usada em redesign do HTML. No blogspot ela é usada para alterar cores de fundo, tamanho de fontes, cores de textos, links, posições dos menus: altura, espaçamento, distâncias etc. Sua sintaxe é mais clean do que o HTML. O CSS não funciona sozinha; precisa do HTML para lhe conceder beleza de forma e espaço.


1 - /* Body
O primeiro título do CSS no Blog Olhar Cristão (Modelo Rounders 3)

A chave {background "#ebe5d5" dá a cor de fundo de externo de todo o blog. No caso é uma cor café-com-leite bem clara. Se está cor fosse "#000000" a cor de fundo seria o preto. Se fosse "#ffffff" seria o branco. São cores hexadecimais que começam em "000000" e terminam em "ffffff". Qualquer grupo númerico, alfa ou alfa-númerico de até 06 posições entre [0 a 9] e [a até f] vão definir as cores tanto no CSS quanto em HTML.

2 - Page Estructure

Outer -wrapper { width: 956px
É a largura máxima com base no banner (cabeçalho) do Blog Olhar Cristão. A largura original era bem mais estreita. Ela pode ser alargada até 980px.

Main Wrapper1 { width: 700px
Estabelece a largura da caixa de textos da postagem. Eu alterei esta largura de 484px para aproveitar o expaço útil para 700px

Sidebar - Wrap { width:240px;
Estabelece a largura da caixa do box lateral.



Bom não preciso ir muito adiante. As posições de largura, altura e espaçamento são estabelecidas em px. Todo número neste formato pode ser modificado, resultando ou não em mudanças. Todo formato #000000 ou #ffffff estabelece cor para o ítem selecionado. O melhor site para mostrar paletas de cores é o December.com.

Creio que aqui tem material de sobra para auxiliar em suas pesquisas.

Última dica: para mudar o banner do blog olhar cristão eu levo pouco mais de 5 segundos. Vou em personalizar/Editar HTML, faço uma cópia da sua configuração, depois vou em escolher novo modelo (para habilitar a opção do cabeçalho que fica travada) escolho o mesmo modelo do meu blog. A seguir vou em elementos da página, o cabeçalho já está liberado, removo o cabeçalho antigo, faço o upload do novo, clico em salvar. Depois vou para Editar HTML, seleciono o conteúdo, deleto e reponho as configurações que tinha copiado antes da mudança. Salvo, e o novo banner do "HEADER" (cabeçalho) já está configuradíssimo.

Abraço.

Se você
é evangélico e gostou desta dica, afilie-se na Associação de Blogueiros Cristãos





Related Posts Plugin for WordPress, Blogger...