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.

Novidades: Novas condicionais suportadas pelo Blogger/ O fim do Blogger Brasil

Na calada da noite da última sexta, a equipe do Blogger soltou novos recursos, que para o usuário comum, em nada terá efeito, mas para quem for experiente, vai ajudar em muito para estilizar o código de seu template, e ainda, o fim do Blogger Brasil.
- Novas expressões suportadas pelo Blogger
- O fim do Blogger Brasil

O que fazer quando você não consegue ativar um recurso novo no Blogger

Você nunca ficou nervoso quando um determinado recurso não consegue ser ativado em seu blog? Você não entende como alguns tem e você não? Pois é, o Blogger faz essa pegadinha com os seus usuários. Você pode mexer à vontade em seu layout, incrementar com gadgets de terceiros pois o Blogger permite que você faça essas modificações. Mas existe o outro lado da história, algo que não é dito diretamente para você...

Aniversário do Blogger: Novas funcionalidades

O Blogger estará fazendo 10 anos no próximo domingo, 23 de agosto, e novas funcionalidades serão implantadas na plataforma, de acordo com o BloggerBuzz. Observando com cuidado o código do template Mínima, já se pode notar essas novas funcionalidades em ação (cliquem nas imagens para ampliar):





Algumas dessas novidades estão descritas no Icebreaker, que fez um apanhado geral dos recursos que mais foram pedidos pelos usuários.

Eu só posso dizer uma coisa: CHUPA WORDPRESS! Mas chupa muito mesmo!

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 personalizar o widget dos seguidores

Update 01/03/2009: Com a integração dos Seguidores com o Google Friend Connect, esse hack não mais funciona. Vamos aguardar as novidades!

Há muito tempo eu queria personalizar o widget dos Seguidores do Blogger, colocando uma cor no background e talvez uma borda. Observando o código no template, tentei usar uma das class mas ela acabava alterando as propriedades dos thumbnails. Não há uma class ou id referente a toda caixa.
O autor do blog The Technical Thought Of You, entretanto, criou um código nesta página para personalizar o widget.

O código disponibilizado cria várias "class" que alteram os links, as imagens e é claro, o que eu queria, a aparência do widget. Analisando o hack, percebi que é só criar uma div com uma class diferente e depois no css, colocar os atributos que eu queria, tais como o background, border, padding e marging. Assim nasceu em minha mente a class "followerbox"!

Portanto, aqui vai o tutorial como eu fiz:

a) Antes de tudo, faça um backup de seu template!

b) O código css abaixo

.followersbox {
background: #eee ;
padding: 10px;
margin: 3px;
border: 1px solid #ff6600;
}

deve ser colocado antes de

]]></b:skin>

Explicando:

background: #eee; =>> Aqui eu defino a cor do fundo da caixa
padding: 10px; =>> A padding deve ser ajustada conforme as medidas de seu blog
margin: 3px; =>> A marging deve ser ajustada conforme as medidas de seu blog
border: 1px solid #ff6600; =>> Aqui defino a grossura, o tipo e a cor da borda que vai envolver a caixa


c) Marque expandir o modelo de widgets em Lay-out>>Editar HTML e localize essa linha:

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'>
<b:includable id='main'>

d) Acrescente a div que está em negrito:

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'>
<b:includable id='main'><div class='followersbox'>

e) Localize o final do código e antes de

</b:includable>

colocar </div>

Pronto! O widget dos seguidores está personalizado:


As alterações que fiz bastam para mim, caso queiram alterar por completo o widget, recomendo que siga o tutorial do The Technical Thought Of You na íntegra.

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!!!