Como esconder um texto sem usar javascript

Eu tenho um blog que uso como uma ferramenta auxiliar de ensino, onde coloco textos e atividades para os meus alunos. E nele sempre uso o recurso de esconder determinados trechos das páginas, para não ter que ficar toda vez copiando e colando.

Como eliminar as bordas duplas em tabelas HTML

Construir tabelas em HTML pode ser trabalhoso, mas depois que você pega o jeito, nunca mais esquece. O objetivo aqui não é ensinar profundamente como construir tabelas usando CSS, mas sim, mostrar uma dica que acabei usando em alguns posts antigos.

Como criar botões para links de download usando CSS

Os dois últimos tutoriais aqui no blog foram relacionados a criar links de download de arquivos armazenados no Google Drive. Neste tutorial irei apresentar como estilizar esses links usando apenas os estilos em CSS.

Como criar um menu horizontal simples no Blogger

Hoje, um tutorial bem fácil. Como fazer um menu horizontal usando uma nova tag do HTML 5 chamada de nav. A construção do código HTML envolve criação de listas com links para navegação em seu blog. Eu uso esse recurso neste blog e no Dorgas on Fire. E milagre: a tag nav funciona no IEca!!!

Como hospedar CSS e Scripts do Blogger no Google Drive

Semana passada, mostrei como o Google Drive pode ser usado para hospedar páginas inteiras da web de forma gratuita, e mencionei que podemos também hospedar o CSS de blogs da plataforma blogspot, bem como os scripts.

Como customizar o CSS dos Threaded Comments do Blogger 2

Conforme eu tinha prometido, eis como customizar o CSS dos links Responder e Excluir, a fim de que eles pareçam como se fossem botões. Leia primeiro este post para saber do que estou falando. Abaixo como ficou neste blog:

Como colocar uma faixa em seu blog

Recebi um email perguntando como foi que eu tinha colocado uma faixa, no canto superior direito do blog, na ocasião do aniversário da cidade da São Paulo. Bem, ao invés de responder o email, preferi fazer esse post, assim se mais alguém quiser, fica como fonte de informação.

Como customizar o CSS dos Threaded Comments do Blogger

Ao implementar o Threaded Comments conforme ensinei aqui ou neste outro método no blog da Clau, o Mundo Blogger, o código CSS simplesmente desaparece nos templates customizados! Em templates nativos, ele é incorporado normalmente ao CSS do layout. Portanto ele tem que ser incluído no template.

Como colocar um plano de fundo nas imagens inseridas no Blogger

Sempre quis colocar um fundo nas imagens aqui do blog e isso tornou-se possível a partir do momento em que o Blogger introduziu as legendas (captions) nas imagens. Ao clicar em adicionar legenda (add caption), cria-se no código da imagem um atributo class (classe) denominado de "tr-caption-container" conforme pode ver abaixo:

Como enfatizar um termo ou uma frase em seus textos

Muitas vezes, ao escrevermos um texto, queremos dar uma ênfase à uma determinada palavra ou frase. Geralmente fazemos isso colocando os atributos negrito e itálico, usando as tags <b> e <i>, respectivamente, ou até mesmo colocamos uma cor diferente ao do texto, ou uma cor de fundo, procedimentos estes feitos a partir do editor de textos do Blogger e/ou Wordpress.

Como fazer bordas arredondadas com CSS

Eu já falei que odeio o Internet Explorer? Sim, e várias vezes seja aqui ou no Twitter. Algumas funcionalidades (scripts ou hacks) simplesmente deixam de funcionar ou acabam com o lay out da página.

Um exemplo disso é a criação de bordas arredondadas sem o uso de imagens, apenas usando CSS. Browsers como o Firefox(Eu o amo!!!), Chrome e o Safari já apresentam em seus códigos o reconhecimento das especificações do CSS3, mas o Explorer, bem que mer...cadoria!!!

O meu template tinha bordas arredondadas feitas a partir de imagens. Muitas vezes o servidor dava pau e elas simplesmente desapareciam, por isso deletei por completo qualquer vestígio delas, deixando as colunas retas.

Para colocar bordas arredondadas sem imagens basta inserir no CSS de seu template uma propriedade nova chamada border-radius que define o tamanho do raio da curva:

border-radius: 10px;

Essa propriedade irá definir um raio de 10 px em cada canto da borda.

Como essa funcionalidade ainda não está totalmente implementada, os navegadores deram nomes especiais para essa propriedade. Para o Firefox, esse atributo fica assim:

-moz-border-radius: 10px;

Para aqueles que são baseados no Webkit , como o Chrome e o Safari, o atributo fica desse jeito;

-webkit-border-radius: 10px;

Dessa maneira, devemos acrescentar no CSS de cada coluna esse atributo da seguinte maneira:

coluna qualquer (header, main, sidebar, footer, etc){
-moz-border-radius: 10px;/* para funcionar no Firefox*/
-webkit-border-radius: 10px;/* para funcionar no Chrome ou no Safari */
border-radius: 10px;/* É bom colocar caso haja alguma compatibilidade no futuro */
}

Como exemplo, vocês podem ver esse atributo funcionando acima, no meu header. Legal, não? Se você estiver lendo o meu blog no IE, infelizmente não verá nada. Dançou, playboy!!!

E vou repetir de novo: Odeio o IE!

Além do mais, você pode criar bordas circulares apenas alterando as medidas em px. Tente criar uma div colocando 200px no comprimento do raio da borda, e veja o resultado que acontece.

E eu que odiava o CSS... Mas depois que comecei a decifrá-lo e entendê-lo, vi a maravilha de linguagem que é. Styles really rock, man!!!

Fontes: Maujor e Somebo

Como dividir o texto em 2 colunas usando CSS

Tenho verificado em comentários de outros blogs que muitos perguntam como dividir um texto em duas colunas. O processo não é difícil, é só usar comandos div, como eu já tinha mencionado antes, quando estava dividindo o rodapé. Esse hack eu tinha visto primeiramente no Bloggerbuster tempos atrás, e desde então venho usando-o em vários widgets do meu blog.

Apesar de muitos já conhecerem essa técnica, sempre vai haver alguém perguntando sobre isso, e portanto, aqui vai a minha simples contribuição. Abaixo está um exemplo de um post dividido em duas colunas:

---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac augue. Quisque quis turpis. Donec risus elit, lacinia a, viverra porta, adipiscing non, lorem. Donec placerat tristique felis. Aenean vulputate eros eget augue. Suspendisse pellentesque pretium eros. Quisque fringilla. Integer nisl elit, blandit vitae, lacinia ac, molestie ac, lectus. Etiam sodales tincidunt sapien. Sed convallis nunc sed elit. Sed ac lacus vitae ligula faucibus tempor. Pellentesque dignissim commodo lectus. Curabitur varius urna in lectus. Maecenas ac dui ut velit bibendum dapibus. Maecenas eu nisi. Cras elementum. Donec congue quam et dolor. Aliquam ipsum sapien, viverra quis, cursus ut, mollis vitae, tortor. Phasellus posuere laoreet est.

Duis sollicitudin varius nisl. Pellentesque vel elit quis leo elementum aliquet. Proin cursus sapien eget diam. Sed velit. Quisque ac nunc eu neque pharetra tempor. Fusce condimentum dignissim dolor. In turpis purus, imperdiet ut, lobortis bibendum, porttitor sit amet, quam. Aenean sed neque sit amet leo iaculis faucibus. Suspendisse feugiat. Suspendisse auctor tortor sollicitudin urna. Integer bibendum turpis id ipsum. Pellentesque sed libero. Nunc fringilla, nisi in pulvinar adipiscing, eros lacus lacinia lorem, ac sollicitudin lectus magna in arcu. Praesent pulvinar, sem nec scelerisque vestibulum, nunc tortor tincidunt massa, at ultrices lorem nisl non metus. Mauris feugiat odio in diam.

---

O código a ser usado é esse:

<div style="width: 45%; float: left;">COLOQUE AQUI O TEXTO
DA COLUNA À ESQUERDA</div>
<div style="width: 45%; float: right;">COLOQUE AQUI O TEXTO
DA COLUNA À DIREITA</div>
<div style="clear: both;"></div>

O último comando div com o estilo clear: both é para assegurar que uma coluna não deslize sobre a outra.
Vocês podem ver o uso desse hack no meu header, abaixo do banner, em duas situações: na primeira, fiz quatro colunas para conter a citações, data, hora e as bandeirinhas de tradução; na segunda com o adsense e o search do Google.
Abaixo das postagens, vem o posts recentes por categorias, que também foi dividido da mesma maneira. E no rodapé, onde há duas colunas. Como podem ver, é muito prático!

Como o template foi alterado (e muito!) não tenho mais esse hack, mas sempre que quero fazer colunas eu o uso, até mesmo com imagens no lugar do texto, desde que elas sejam do mesmo tamanho.

Um outro método é usar tabelas com o comando table, mas não recomendo. Atualmente deixa o carregamento da página muito lento, e muitos preferem aboli-lo, o uso das tabelas teve o seu tempo e foi muito útil, hoje em dia devemos seguir os Padrões Web, já ouviu falar do movimento Tableless na internet? Esteticamente o uso de CSS é muito mais padronizado e a maioria dos navegadores se entendem com essa linguagem(menos o IE em alguns casos... Ahhhh maldito IE!), creio eu!

Espero que essa dica tenha sido de grande ajuda!

Como colocar a data o dia da semana e a hora no seu blog

Nas minhas andanças pelo Google, a procura de alguns scripts ou códigos, me deparo com o blog Dicas para Blogs, e vejo um script para colocar o dia do mês e a semana. No Codigos Blog, há um script para se ter um relógio simples. Aí pensei, será que não dá para combinar os dois num único widget?

Usando comandos divs para fazer colunas e bordas, isso foi possível e o resultado vocês podem ver em cima do meu banner. Abaixo o widget que fiz unindo os dois scripts:

<div style="background: #eee ;border: 2px solid ; padding: 2px;"><div style="width: 80%; float: left;"><script language="JavaScript">
<!--
mydate = new Date();
myday = mydate.getDay();
mymonth = mydate.getMonth();
myweekday= mydate.getDate();
myyear= mydate.getYear();
weekday= myweekday;
if(myday == 0)
day = " Domingo"
else if(myday == 1)
day = " Segunda - Feira"
else if(myday == 2)
day = " Terça - Feira"
else if(myday == 3)
day = " Quarta - Feira"
else if(myday == 4)
day = " Quinta - Feira"
else if(myday == 5)
day = " Sexta - Feira"
else if(myday == 6)
day = " Sábado"
if(mymonth == 0)
month = "Janeiro "
else if(mymonth ==1)
month = "Fevereiro "
else if(mymonth ==2)
month = "Março "
else if(mymonth ==3)
month = "Abril "
else if(mymonth ==4)
month = "Maio "
else if(mymonth ==5)
month = "Junho "
else if(mymonth ==6)
month = "Julho "
else if(mymonth ==7)
month = "Agosto "
else if(mymonth ==8)
month = "Setembro "
else if(mymonth ==9)
month = "Outubro "
else if(mymonth ==10)
month = "Novembro "
else if(mymonth ==11)
month = "Dezembro "
document.write(day+", "+myweekday+" de "+month+" de 2008");
// -->
</script></div>

<div style="width: 10%; float: right;"><script>
function hora_atual(){
if(eval('typeof(document.FORM)') != 'undefined') {
var date = new Date();
document.FORM.horario.value = date.getHours()+':'+ ((date.getMinutes() < name="FORM" style="font-family:verdana,arial,helvetica;font-size:12px;color:#CC0000;background:transparent; width:40;border:0;cursor:default" name="horario" size="4" type="text" style="clear: both;">


Ficou algo bem simples, não é mesmo? Nada de imagens ou códigos em flash que acabam travando a abertura da página. É só entrar em elementos de páginas, e criar o widget, copiando e colando o código acima no lugar de sua preferência.

Vamos agora decifrar cada linha:

<div style="background: #eee ;border: 2px solid ; padding: 2px;">

• background: #eee = define a cor de fundo do widget, se quiser outra cor, troque o #eee por alguma outra cor de sua preferência.Veja aqui.

• border: 2px solid = aqui é a borda do widget. Troque o 2px pela largura de sua preferência e o solid(linha sólida) por outro tipo. Veja aqui, no blog Codando.

<div style="width: 80%; float: left;"><

• Aqui defino a largura(width) da 1ª coluna à esquerda(left)

<div style="width: 10%; float: right;">

• Aqui defino a largura(width) da 2ª coluna à direita(right)

Dificuldades:

No Dicas, há uma forma de customizar a fonte e cor do dia e data da semana, mas não deu certo, pois as letras ficaram muito grandes e mexeu com todo o template. Preferi deixar o script do jeito que estava, pois tanto a fonte quanto a cor dela já estão definidas para o meu blog(editar layout > fontes e cores).
No script do relógio, você pode mudar isso porque já está nele mesmo:

name="FORM" style="font-family:verdana,arial,helvetica;font-size:12px;color:#CC0000;background:transparent; width:40;border:0;cursor:default" name="horario" size="4" type="text" style="clear: both;

Em font-family, você define o tipo da fonte que quer, em font-size o tamanho da fonte em px, em color a cor da fonte que coloquei em vermelho(#CC0000). O resto, deixe do jeito que está. Se eu souber como mudar no primeiro script, voltarei aqui e atualizarei o post.

Esse post mostra o auto didatismo do Cidão em busca da compreensão de códigos para a internet, css e afins.
Eu que pensava que px e pt eram a mesma coisa... ledo engano! Tenho "muuuito" ainda a aprender!!!

Novo lay out, mesmo template, problemas a mil!

Há tempos eu queria colocar uma terceira coluna no meu blog, mas não queria mudar esse template, o Rounders 2, já oferecido pelo Blogger. Tinha medo de perder todos os widgets aqui instalados e portanto havia desistido desse trabalho.

Como a turbulência real (né, Ru?) já havia passado, resolvi então embarcar nessa missão. Um detalhe, levei tanto tempo para aprender HTML, e a linguagem do blog é CSS, ou seja, como fazer isso? Estou cansado de tantos símbolos e códigos. Meu mau humor vai a mil!!!

Procurando na net, achei o blog da Ariane, Templates para o novo blogger, e resolvi encarar o desafio, mas não me interessei muito pelos templates de lá até que vi um post sobre como adicionar uma nova coluna num template já existente do Blogger. Após uma troca de emails, percebi que mexer nos códigos CSS seria algo muito difícil, e preferi deixar para lá.

Ontem, descobri o blog Webtalks, e lá tinha o meu template com as três colunas desejadas, aí, fiz o teste, pelo próprio Blogger, e voilá. E lá eu tinha o que eu queria: um blog com três colunas com o template que mais me identifico, mas, como o universo conspira contra mim, os problemas continuaram...

As fontes e cores não funcionavam, os botões de editar, enviar mensagem e links nem apareciam. O blog ficou meio que estranho, com letras pequenas com um tom bem fraco. Bem, isso já era quase uma da manhã, e eu tinha que trabalhar cedo e deixei para lá. E eu estava furioso...

Hoje, após uma manhã sem fazer nada no colégio, apenas cumprindo horário, chego em casa e após o almoço tento mais uma vez mexer no blog. Acabei achando outro blog, o Blog P, que usa o mesmo template e de lá baixei o código disponibilizado e tentei de novo. O resultado final é esse que vocês estão vendo, as letras e cores voltaram ao normal, como se estivesse no antigo, mas ainda continuam os problemas: as cores e fontes funcionam precariamente, os botões antes mencionados não aparecem, mas com um detalhe: eles estão lá pois quando aponto o mouse, aparece o link. Ou seja, é a famosa Lei de Murphy, algo de ruim sempre tem que acontecer. Acredito que deva ser um problema nos códigos e espero que alguma alma abençoada apareça e me dê uma solução, porque eu já cansei. Aliás, mandei e-mails para os donos desses últimos dois blogs e estou aguardando respostas.

No mais, o blog ficou como eu queria, três colunas para distribuir melhor os widgets, e as postagens no meio.

Agora, serviço de cão mesmo foi ter que copiar e colar no bloco de notas todos os widgets e copiar e colar de novo no blog, algo que fiz duas vezes(ontem e hoje).

Mas só vou mexer nele agora quando alguém me der a solução dos problemas antes mencionados.

Somebody help me!!!!!!!!!!!!!!! Please!

Lembrem-se: EU E OS GATOS TEMOS ALGO EM COMUM... SOMOS GATOS!