Pequenos macetes para blogueiros: 2013

quarta-feira, 13 de março de 2013

Exibir vídeos numa única tela (popup)

O Blogger oferece um mecanismo que lhe permite exibir vídeos na tela: para cada vídeo linkado ao seu blog você ganhará "uma janelinha" do YouTube. Isso pode parecer funcional. Mas se você acumula um grande número de vídeos numa mesma página, aí você começa a ter problemas de espaço... Sem contar com o problema estético...

Eis aqui a solução para que uma única tela, na forma de popup, se abra sempre que você quiser exibir um vídeo. Não importa onde estiveres, sempre que for clicado no "link para vídeo", que pode ser um texto ou uma imagem, a tela de vídeo se abrirá ao centro e, depois da apresentação, não será necessário retornar ao seu blog, pois a tela apenas se sobrepôs à sua página do blog.

Comece por adicionar ao script principal da sua página o código padrão que vai lhe permitir abrir os vídeos de qualquer local do seu blog. Para tanto, em "Configurações" vá para "Modelo" abra a edição em HTML.
ATENÇÃO: é sempre conveniente que antes de se fazer qualquer alteração no scrit, que se preserve o que está rodando. Assim, faça um backup do script antes de qualquer alteração.
Feito o backup, tecle Ctrl+F para abrir o mecanismo de pesquisa da parte de HTML (na parte superior do IE ou inferior do Monzila). Tecle </Head> para encontrar esta cláusula no script principal . Logo acima desta cláusula ( independentemente do que tiver acima), abra uma linha e cole o seguinte código (sem os traços, lógico):

-----------------------
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js' type='text/javascript'/>
<script src='http://lab.abhinayrathore.com/jquery_youtube/jquery.youtubepopup.min.js?' type='text/javascript'/>
<script type='text/javascript'>
$(function () {$.fn.YouTubePopup.defaults.draggable = true;$("a.youtube").YouTubePopup({ autoplay: 1 });$("img.youtube").YouTubePopup({ idAttribute: 'id' }); $("button.youtube").YouTubePopup({ idAttribute: 'id' });$("a.custom").YouTubePopup({ idAttribute: 'youtube' });$("a.hideTitle").YouTubePopup({ hideTitleBar: true }); });function scrollTo(id){var offset = $('#' + id).offset().top;$('html,body').animate({scrollTop: offset}, 50);}</script>
-----------------------
Acrescentado o script para popup, salve seu script principal. Ele estará pronto para apresentar o popup a cada link clicado.

Para CRIAR O LINK:
Você pode incluir o link tanto na barra lateral do seu blog como dentro das páginas secundárias ou postagens. De início, opte por incluí-los na barra lateral. Para tanto, em Configurações vá para "Layout" e clique para criar um Gadget. Escolha o Gadget HTML/Java Script e cole, no modo HTML (não Rich Text), um dos seguintes códigos:

a) Se quiseres o link em forma de texto:

<a class="youtube" href="#" rel="VIDEO ID" title="jQuery YouTube Popup Player Plugin TEST">TEXTO DO LINK</a>

Onde as partes em vermelho devem substituídas por você da forma a saber:

i) substitua a expressão VIDEO ID pela identidade do vídeo junto ao YouTube. Para obter essa identidade, vá para o vídeo desejado (no YouTube), e clique em "COMPARTILHAR". Abaixo lhe será apresentado o código de compartilhamento no formato http://youtu.be/dfuhkCoiiB8, Despreze o que está destacado e fique só com o que vem depois da barra... Este é o ID do vídeo que deve substituir a expressão VIDEO ID.

ii) substitua TEXTO DO LINK pela expressão que você pretenda que apresente o vídeo ao ser clicada.

b) Se quiseres o link em forma de imagem:

<a class="youtube" href="#" rel="VIDEO ID" title="jQuery YouTube Popup Player Plugin TEST"><img src="LINK DA IMAGEM" /></a>
 

Da mesma forma, substitua a expressão VÍDEO ID e, ao invés de TEXTO DO LINK, agora você tem que substituir a expressão LINK DA IMAGEM pelo link de acesso à imagem que deseja mostrar.

Completada a inserção dos scripts no Gadget, salve-o e visualize seu blog para testá-lo.
Bem... Você pode inserir quantos links quiser, um após o outro no mesmo Gadget ou em partes separadas da página inicial, outras páginas ou postagens do blog.

Clique abaixo, no link para vídeo, para ver o efeito mencionado.

Vídeo para teste... Chocolate... Força...

Bom divertimento!

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:

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

Jazz in Paris: Chet Baker Quartet Plays Standard<div style="line-height:12px;">

Chet Baker (trompete)

Gérard Gustin (piano)

Jimmy Bond (duplo baixo)

Bert Dahlander (bateria)

</div>

Songs:

1 Summertime -

George Gershwin / Ira Gershwin / DuBose Heyward - 4:15

2 You Go to My Head -

J. Fred Coots / Haven Gillespie - 5:54

3 Tenderly -

Walter Gross / Jack Lawrence - 6:39

4 Lover Man -

Jimmy Davis / Roger "Ram" Ramirez / Jimmy Sherman - 4:52

5 There's a Small Hotel -

Lorenz Hart / Richard Rodgers - 3:47

6 Autumn in New York -

Vernon Duke - 7:07

7 These Foolish Things -

Harry Link / Holt Marvell / Jack Strachey - 4:44

8 I'll Remember April -

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:

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

Música para você!... É Chet Baker...

Tudo de bom !

Jazz in Paris: Chet Baker Quartet Plays Standards

Chet Baker (trompete)

Gérard Gustin (piano)

Jimmy Bond (duplo baixo)

Bert Dahlander (bateria)

Songs:

1 Summertime - George Gershwin / Ira Gershwin / DuBose Heyward  4:15

2 You Go to My Head - J. Fred Coots / Haven Gillespie  5:54

3 Tenderly - Walter Gross / Jack Lawrence; 6:39

4 Lover Man - Jimmy Davis / Roger "Ram" Ramirez / Jimmy Sherman  4:52

5 There's a Small Hotel - Lorenz Hart / Richard Rodgers 3:47

6 Autumn in New York - Vernon Duke 7:07

7 These Foolish Things - Harry Link / Holt Marvell / Jack Strachey 4:44

8 I'll Remember April - Gene DePaul / Patricia Johnston / Don Raye  5:52

Atenção: esta coleção serve de

trilha para todo o blog, ao mudar de página ou post você pode interromper o som. Neste caso, já no seu lugar de destino, retorne aqui para o topo e religue o som.

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

Páginas