É muito fácil instalar-os emoticons em seu Blog

Todos sabem que o formulário de comentários do Blogger não possui nenhum recurso. Navegando por alguns metablogs, encontrei uma dica no BloggerStop.Net, que ensina a adicionar emoticons no formulário de comentários do Blogger. É muito fácil instalar os emoticons em seu Blog, basta fazer as edições necessárias no código HTML.

image

Antes de seguir com o tutorial, faça o backup de seu Blog, para evitar que futuros erros aconteçam.

Faça o Backup de seu Blog para proteger o seu template e seus gadgets

iremos prosseguir com o tutorial. No painel de seu Blog, vá em: Layout -> Editar HTML -> Marque a opção "Expandir modelos de widgets" -> Pressione CTRL + F e procure pelas seguintes tags:




ENTRE estas tags, inclua o seguinte código HTML:

:))
;))
;;)
:D
;)
:p
:((
:)
:(
:X
=((
:-o
:-/
:-*
:|
8-}
:)]
~x(
:-t
b-(
:-L
x(
=))

Já incluimos o primeiro código HTML, agora deveremos seguir mais uma etapa para concluir a instalação. Antes de salvar seu template, procure pela seguinte tag:



ANTES dela, inclua o seguinte código:

Calendário de postagens para blogger

backup do seu template baixando o modelo completo. Isso é para que se algo dê errado você tenha como reverter a situação.

Agora, se você ainda não adicionou um gadget de "Arquivo do Blog", adicione porque esse código do calendário na verdade é uma modificação desse gadget e por isso ele é necessário.

Agora volte a parte de edição de HTML e sem marcar a caixa de expandir modelos de widgets, pressione as teclas "CTRL+F", digite "BlogArchive" na caixa de pesquisa e procure por um trecho como o mostrado na imagem abaixo.

Você deverá substituir a linha de código:



Pelo seguinte código:

• 
  ()
  

(?)

Após inserir a segunda parte do código configure seu gadget de arquivo do blog como lista simples.


Após inserir a segunda parte do código configure seu gadget de arquivo do blog como lista simples.

Eu sei que parece estranho substituir uma linha de código por tantas outras, mas é assim mesmo. Foi por isso que eu disse que não podia expandir modelos de widgets, pois na verdade o gadget original também possui várias linhas, mas quando não expandimos os modelos de widgets todas as linhas do código do gadget ficam representadas por somente uma linha de código. Muito mais fácil de fazer a substituição.

Visualize a página para ver se não vai ocorrer nenhum erro. Se ocorrer erro é porque você pode ter se enganado na substituição do código. Aí é só tentar de novo.

No lugar do gadget deverá aparecer a seguinte mensagem:

Após inseir a segunda parte do código configure seu gadget de arquivo do blog como lista simples.

Isso significa que você fez tudo certo, vamos então inserir a segunda parte do código.

Mais uma vez pressione "CRTL+F" para abrir a caixa de pesquisa do seu navegador caso precise e nela digite:



Depois de encontrá-la coloque acima dela o seguinte código:

Ficando parecido com a imagem abaixo:

Agora tente visualizar o template para ver se não ocorre nenhum erro. Se aparecer alguma mensagem de erro tente outra vez.

Ainda continuará aparecendo uma mensagem no lugar do gadget. Isso é assim mesmo, nós vamos corrigir isso agora. Vá até "Elementos da página" e clique no botão "Editar" do gadget. Você deverá configurá-lo como "Lista simples".

Agora ele já deve estar funcionando.

Bom, como eu já disse esse código não é invenção minha. Eu apenas modifiquei um pequeno trecho dele para ficar do meu gosto. Se você quer o código original pode pegá-lo no link:

http://ricardouk.no.sapo.pt/widgets/calendario_arquivo.html

As mudanças visíveis que eu fiz estão somente na segunda parte do código.

ATUALIZAÇÃO 06/03/2011.

O código foi atualizado e agora o calendário ficará centralizado.

É isso aí, até a próxima!

Slideshow personalizado para blogs

Todas as formas acima são bacanas, mas nenhuma delas nos permite uma personalização mais detalhada.

Ontem passei horas procurando uma forma de colocar uma apresentação de slides, na qual eu pudesse escolher fontes, cores, planos de fundo, tipo de transição e etc, como fazemos no Power Point, por exemplo.

Entre idas e vindas, acabei descobrindo o site Kizoa, que oferece um serviço gratuito para armazenamento e edição de imagens,bem como um prático gerador de slideshow.

Para criar a apresentação de imagens, é preciso criar uma conta (é rapidinho). Depois, você deve clicar em launch kizoa, para começar a diversão.

Para subir suas imagens, clique em upload. Para começar a criar o slideshow,clique em slideshow maker. Arraste as imagens que farão parte da apresentação, para o local indicado na imagem abaixo (drag your photo here):

Acima das fotos tem um menu com as transições, efeitos especiais, texto, animações e até música. Brinque à vontade. Depois que o slideshow estiver ponto, clique em save. Dê um título a sua obra de arte e clique em save novamente.

Para gerenciar os slideshows, acesse my slideshows. Clique em add to my blog para colocar o slideshow em seu blog. Também é possível enviar por email, ao Facebook, Twitter ou então gravar em CD/DVD, editar novamente ou apagar.

Ao clicar em add to my blog, abrirá uma nova janela. Escolha o tamanho da apresentação – que não deve ultrapasar a largura do local onde você irá inseri-la em seu blog – e copie o código HTML, conforme indicado abaixo:

Para colocar a apresentação em um gadget, escolha o tipo HTML/Javascript.

Para colocar dentro de um post, clique na aba editar HTML do editor de postagens e cole o código do slideshow. Visualize e clique em publicar.

Vejam como ficou o meu portifólio de templates, usando o slideshow maker:

Portifolio - Free Slideshow Maker

Criar slides com javascript

O melhor de tudo é que é bem fácil de se fazer.


1.Copie o código abaixo:




2.Vamos em Design e vamos adicionar um gadget embaixo do cabeçalho:

3. Procure por HTML/Javascript:

4. Agora, o único trabalho que vamos ter vai ser colocar URLs e os títulos nos lugares indicados em negrito.

O mais adequado será utilizar imagens da mesma altura, para ficar mais homogênio.


Ainda, no começo do código podemos fazer algumas alterações:

var sliderwidth="960px": Aqui colocamos a largura adequada para o slide;


var sliderheight="144px": Aqui a altura que terá o slide. O ideal é colocar 5 pixels a mais do que a altura de nossas imagens;


var slidespeed=1: Esta é a velocidade de deslizamento de nossas imagens;

slidebgcolor="black" : Cor de fundo, aqui no exemplo preta;


var imagegap="" : Aqui nós não colocamos um espaço vazio entre as imagens, se quiser deixar um epaço coloque um número, por exemplo: var imagegap="2"

Quando terminar todas as alterações salve.