Páginas

sexta-feira, 18 de janeiro de 2013

Excluir molduras das figuras

Se você quiser excluir as molduras brancas que alguns modelos do Blogger apõem às figuras, utilize o código abaixo. Se o modelo permitir, inclua, em personalizar-avançados-CCS ou HTML Caso contrário, adicione no 'HTML' do post, logo no início...

.post-body img, .post-body .tr-caption-container, .ss, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}

Figuras fora do padrão do Blogger



Vou inserir aqui uma figura à qual solicitei que o Blogger exibia no tamanho “muito grande” … Observe como sobra espaços na área de postagem...




Agora vou reinserí-la com outro tamanho, maior, impossível de fazer pelo monitor do Blogger.



 
As figuras máximas do Blogger (muito grandes), têm por defaut 640 pixels. Isso faz com que elas se mantenham dentro da área de postagem com folga... Entretanto, as vezes você quer uma figura maior.... Como fazer?

Bem, o fator limitante é sempre a largura da sua área de postagem, que você regula na parte de personalização (modelos, personalização, largura das barras). Tendo feito essa regulagem (que é para o blog todo), você pode obter figuras maiores do 640 pixels de largura alterando a cláusula do HTML que estabelece o tamanho da figura.

Para tanto, entre na postagem, ache a parte da configuração da figura que é mais ou menos assim:
 
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/(aqui é complemento do endereço da tua figura no blogger) " imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="550" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf2JxUxUt7Qqy6wQtcr5WCpQDNSBqjS3HU-CFFHrE6k-6Ec1_fdb2YOvGTKTuE68LN6BDozqdE9OI8MCxYdUZZUk8AkhghXXDLxYSLYMfvoc3u6qXETR04IZieOmfr6mK4eVBkQ0tYq7em/s640/Picture9A.png" width="800" /></a></div>

... onde “height” é a altura e “width” é a largura.

Considere que você tem nessa cláusula, originalmente, o máximo que  Blogger permite, digamos, 440 de altura por 640 de largura (a máxima – tamanho “muito grande” do configurador do Blogguer). Faça a seguinte regrinha de três: se para 640 de largura tenho 340 de altura, quanto terei para 800 de largura? Ora, é só multiplicar a altura original pela nova largura e dividir pela largura antiga. Assim teremos 440 % 800 + 640, e obtemos a nova altura para manter a proporção da figura, o que, no caso, dá 550. Assim, atribua para “height” o valor 550 e para “width” 800. Isso funciona para qualquer tamanho. 

Lembre-se, seu limite é a largura da área do post, o que também pode ser alterado conforme mencionado acima.

Altura da linha - Blogger (e outros scripts em 'html')


Cada vez que entro no Blogger e tento fazer algo de diferente não posso deixar de me lembrar do Geocities... Há tanto tempo... E tinha todos os recursos que faltam ao Blogger... Superposição de figuras, textos sobre figuras, etc.... Foi realmente uma pena o Yahoo ter acabado com o Geocities...

Será que o Blogger não tem mesmo? O HTML está lá... Para você fazer o que quiser... É só encontrar um site que abrigue seus arquivos... Eu recomendo o “Box.com”.

Agora veja um problema comum do Blogger... A altura das linhas... Elas estão pré-formatadas. Você tem que se contentar com as opções  de títulos e tamanho das fontes....

E o Blogger é mestre em colocar seu texto do jeito que a CSS (Cascaded Style Sheet) foi elaborada.

Mas em relação à altura da linha, veja este scrip abaixo. Ele está na abertura do meu blog "Estórias Eróticas" (www.estoriaseroticas.blogspot.com), quando apresento as músicas que vc pode ouvir enquanto lê os textos...

Logo em seguida à formação da linha normal, entro com uma cláusula de limitação quanto à altura da linha. Veja em destaque... no caso quis que a altura fosse de 12 pixels. Pouco depois encerro a cláusula com um </div> para reabrí-la no formatação a seguir, novamente... Isso porque a folha de estilos (CSS) do Blogger insiste em modificar certas coisas...

<p style="margin-top: 0; margin-bottom: 0; line-height:200%"><font face="Journal"><b><font size="2" color="#FFFFFF">Jazz in Paris: Chet Baker Quartet Plays Standard</font></b><font color="#FCD254" size="2"><div style="line-height:12px;">
Chet Baker (trompete)<br />
Gérard Gustin (piano) <br />
Jimmy Bond (duplo baixo) <br />
Bert Dahlander (bateria) <b> <br />
</b>
</div>
</font><b><font size="2" color="#FFFFFF">Songs:</font></b><font color="#FCD254" size="2"><br />
<div style="line-height:12px;">
<b>1 Summertime -</b>
George Gershwin / Ira Gershwin / DuBose Heyward - 4:15 <br />
<b>2 You Go to My Head</b> -
J. Fred Coots / Haven Gillespie - 5:54 <br />
<b>3 Tenderly</b> -
Walter Gross / Jack Lawrence - 6:39 <br />
<b>4 Lover Man</b> -
Jimmy Davis / Roger &quot;Ram&quot; Ramirez / Jimmy Sherman - 4:52 <br />
<b>5 There's a Small Hotel</b> -
Lorenz Hart / Richard Rodgers - 3:47 <br />
<b>6 Autumn in New York</b> -
Vernon Duke - 7:07 <br />
<b>7 These Foolish Things</b> -
Harry Link / Holt Marvell / Jack Strachey - 4:44 <br />
<b>8 I'll Remember April</b> -
Gene DePaul / Patricia Johnston / Don Raye - 5:52
</div>

Aqui, usei a forma genérica, mas você pode introduzir a cláusula para formatar uma lista, por exemplo, assim:

<div style="line-height:número de pixels desejadopx;"><li>
itens da lista (uma abaixo do outro
</li></div>

O que está grafado em verde é o que você deve substituir, segundo suas conveni~encias, ao aplicar o script.

Bem... Aí está uma forma prática de você atribuir às linhas o número de pixels que deseja à altura.

domingo, 13 de janeiro de 2013

Colocar som no blog ou postagem

Para colocar músicas no ‘blog”

1)       Escolha um lugar para você “armazenar” suas músicas (mp3).

2)      Eu recomento do site “box.com”, assim vou ensinar como se faz com este site:

a.       Vá para o endereço e se cadastre. Ele vai te enviar um e-mail de confirmação. Após confirmar ele abrirá uma tela que logo acima diz “UPLOAD”, clique nela e abrirá o painel do Windows para se escolher o arquivo. Selecione o arquivo. O BOX  pedirá confirmação... Confirme o “upload”

b.      Aguarde concluir o “upload” e clique na música com o botão esquerdo do mouse, escolha a opção share  e  get a link to file. Aparecerá uma caixa de diálogo com guias, escolha a guia “embed”.

c.       Se abrirá, então, outra caixa de diálogo para você configurar seu player... escolha largura (width) — recomendo entre 150 a 230 — e altura (Heigth)  — recomendo usar 30). A cor não terá muita importância, vc já saberá o porquê...

d.      Posicione o cursor sobre o código mais abaixo copie-o para seu bloco de notas (atente para pegar TODO o código... ESTE É O CÓDIGO QUE COLOCARÁS NO BLOGGER COMO PASSO A EXPLICAR...

e.      Já no bloco de notas, altere a condição “opaque” para “transparent”, isso tornará o script um pouco mais lento mas o efeito será melhor que “opaque” — Isso não é obrigatório...

3)      Na página frontal: já na parte de “Layout” do blog, escolha inserir gadget onde quiseres... não escolha daquele tipo de meia coluna porque senão terás que alterar a configuração do player para menor.... Procure o gadget “Configurar HTML/JavaScript”.

4)      Ao abrir, coloque o título e olhe à direita qual a mensagem que aparece. Se for “Formato Rich Text”, é sinal que vc está em “Editar HTML”, que é onde você tem que estar; se aparecer “Editar HTML”, então você clica na mensagem, pois deseja postar um código htmL/Java, portanto precisa ir para “Editar HTML”.
5)      Cole nesse campo o código que extraíste do BOX.
6)      Mande salvar...
7)      Pronto! Já podes ouvir a música.... Peça para visualizar o blog...
8)      Agora algumas dicas adicionais.
9)      Se vc for colocar o som dentro do post, recomendo que faça logo no início, pois vai ser complicado para vc achar um outro lugar no meio do código HTML. Assim, faça seu post regularmente: figura,  texto, etc., depois passe a visualização para HTML (uma opção à esquerda). Em cima de tudo, bem no começo, cole aquele código que extraíste do BOX.com. Volte para a escrita normal e ali acrescente espaços, textos sobre a música, etc... Aí salve normalmente.
10)   Se você quiser o meu modelo: de postagem, aqui vai...
 


Código
Comentário
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
<p style="margin-top: 0; margin-bottom: 0"><font color="#FCD254" face="Journal">Música para você!... É Chet Baker...
Tudo de bom !</font></p>
<p style="margin-top: 0; margin-bottom: 0">
<embed src="https://www.box.com/embed/rl374axyiu3cntb.swf" width="200" height="30" loop="true" wmode="transparent" type="application/x-shockwave-flash" allowFullScreen="true" allowScriptAccess="always">
</p>
<p style="margin-top: 0; margin-bottom: 0"><font face="Journal"><b><font size="2" color="#FFFFFF">Jazz in Paris: Chet Baker Quartet Plays Standards</font></b><font color="#FCD254" size="2"><br>
Chet Baker (trompete)<br>
Gérard Gustin (piano) <br>
Jimmy Bond (duplo baixo) <br>
Bert Dahlander (bateria) <br>
<br>
</font><b><font size="2" color="#FFFFFF">Songs:</font></b><font color="#FCD254" size="2"><br>
1 Summertime - George Gershwin / Ira Gershwin / DuBose Heyward&nbsp; 4:15 <br>
2 You Go to My Head - J. Fred Coots / Haven Gillespie&nbsp; 5:54 <br>
3 Tenderly - Walter Gross / Jack Lawrence; 6:39<br>
4 Lover Man - Jimmy Davis / Roger &quot;Ram&quot; Ramirez / Jimmy Sherman&nbsp; 4:52 <br>
5 There's a Small Hotel - Lorenz Hart / Richard Rodgers 3:47<br>
6 Autumn in New York - Vernon Duke 7:07<br>
7 These Foolish Things - Harry Link / Holt Marvell / Jack Strachey 4:44 <br>
8 I'll Remember April - Gene DePaul / Patricia Johnston / Don Raye&nbsp; 5:52</font></font></p>
<p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
<p style="margin-top: 0; margin-bottom: 0">
<font face="Journal" size="2" color="#FFE653">Atenção: esta coleção serve de
trilha para todo o blog, ao mudar de página ou <i>post</i> você pode interromper o som. Neste caso, já no seu lugar de destino, retorne aqui para o topo e religue o som.</font></p>
<p style="margin-top: 0; margin-bottom: 0">
<font color="#FCD254">
<br>
</font>
<br>
&nbsp;</p>
Nesta cor você tem o nome da fonte: Não use diversas fontes, procure modelos que têm no blog...

Nesta cor você tem o tamanho da fonte... 1 equivale a 8, 2 equivale a 10 e 3 equivale a 12.

Nesta cor vc tem a cor da fonte, anexo, no  e-mail, está o link de onde podes obter a relação de cores entre RGB e HEX e, um outro link que te ajuda a achar cor.

Nesta cor vc tem o texto, que pode alterar à vontade... cuidado, entretanto, com os inícios e finais onde tem os códigos.

Os demais textos, sem fundo, são códigos QUE VOCÊ NÃO PODE ALTERAR...