quinta-feira, 2 de junho de 2011

Novidade: Novo botão recomendar (+1) do google

Logo +1Foi lançado a pouco tempo pelo Google um botão bem legal chamado “+1”. O google +1 tem como objetivo ajudar a melhorar os artigos na pesquisa google, dando melhor posição na busca e também valorização.
O botão funciona como aqueles botões “Gostei” das redes sociais, semelhante ao do facebook e do Twitter, porém, esse sendo do google, ele se integra no sistema de busca do mesmo, que quando damos um clique, automaticamente estamos valorizando o artigo para melhor visualizações no google.

Divulgue seu website com o +1

Veja o vídeo abaixo, está em inglês, mas você terá noção do que se trata.

Novo Botão Google +1

Se você está achando esse botão inútel, trate-o de gostar pois ele pode ajudar e muito a melhorar a questão de visitas e posição do seu blog.

[Exemplo de como um post no blog +1' d pelos visitantes aparece nos resultados de pesquisa do Google página]

Então que tal instalar este botão em seu blog?

O botão pode ser implantado no rodapé de suas postagens. Como você pode ver, abaixo desta postagem você terá o resultado final deste tutorial.

Você pode estar usando dois métodos para inserir o botão em seu blog:

  1. Pela barra de compartilhamento do do blogger
  2. Usar o botão individualmente no rodapé das postagens

Instalando usando a barra de compartilhamento

Pra adquirir esse método, apenas vá em “Design” – “Elementos da página”, na área de postagem clique em ‘Editar’ e marque a caixinha conforme mostrado na figura abaixo:

Colocar +1 no blog

Colocando só o botão no rodapé das postagens

Nesta outra maneira, você pode configura o tamanho do botão antes de inserir no final nas postagens, portanto, entre no link abaixo:

Agora configure deixando do jeito que mais lhe agrade. Não se esqueça de escolher o idioma Português.

Google +1 

Automaticamente será gerado um código mais abaixo. Preste atenção agora, esta é a parte mais importante.

Dentro da caixa possui dois códigos, o primeiro é o script, o segundo é a tag para inserir o gadget.

1. Faça o seguinte, Copie o primeiro código que tem na caixa.

Google +1 código

Entre no Blogger, vá em “Design” – “Editar HTML”, procure pela tag </head> e cole ACIMA dessa tag.

2. Depois copie este outro código abaixo.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span style=”Font: 12px;”>Gostou da postagem? Então recomende!

RESTANTE DO CÓDIGO

</span>
</b:if>

Vá no “Editar HTML” , procure por <div class='post-footer'> e cole o código ACIMA dessa linha.

3. E por último, copie o segundo código lá da caixa.

Google +1 Código 
E substitua na parte destacada em vermelho do passo 3, deverá ficar assim:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span style='Font: 12px; float: right;'>Gostou da postagem? Então recomende!

<!-- Inclua esta tag onde desejar que o botão +1 seja exibido -->
<g:plusone size="tall"></g:plusone>

</span>
</b:if>

Depois disso, Salve o modelo e veja se funcionou. Se não funcionou, deixe um comentário reportando o erro.

Se gostou da postagem, Clique no botão ao baixo e  recomende na pesquisa do google! :)

Marcadores: , , , , ,

Ampliando Images com jQuery

jQuery Image Ampliar permite que qualquer imagem na página a ser ampliada por um fator desejado, quando clicado, através de um elegante zoom in / out efeito.A imagem ampliada é centralizada na tela do usuário até rejeitado. Ele funciona em ambas as imagens com e sem largura explícita / altura atributos definidos. Isto significa que você pode pegar uma imagem grande que, por padrão ficaria fora de lugar, quando demonstrado, reduzi-lo usando largura explícita atributos / altura, depois que os usuários possam ampliá-lo sob demanda para suas dimensões originais quando a imagem é clicada usando este script.

Esse script é extremamente fácil de configurar para permitir a ampliar o "efeito" sobre a imagem, basta dar-lhe uma classe CSS de " magnify ". Você também pode chamarimageMagnify() dinamicamente em uma imagem para aplicar o efeito de ampliar a ela, ou até mesmo afetar a reaplicação após a sua src for alterada, por exemplo. É hora de deixá-lo utilizadores dar uma olhada nas imagens de demonstração da  minha  página! demo aqui http://blogandocomfacilidadedemo.blogspot.com/2011/06/teste.html

1- Passo selecione o codigo abaixo e aplique ele antes do fechamento da tag </head>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://h1.ripway.com/mamedes/jquery.magnifier.js">
/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>


As referências de código acima dois arquivos externos que você deve fazer o download abaixo (clique no botão direito e selecione "Salvar Como"):

2 º Passo: Em seguida, aplicar o efeito de permitir ampliar uma imagem basta inserir uma classe CSS de " magnify "no seu interior, por exemplo:

<img src="ocean.gif" class="magnify" style="width:200px; height:150px" />

<img src="forest.gif" class="magnify" border="0" />

Se sua imagem contém largura explícita atributos / altura, então o script irá ampliar a imagem em relação a essas dimensões. 
Normalmente, isso é o que você quer fazer encolhe uma imagem bastante grande na página e permitir que o usuário ampliá-la apenas sob demanda. Por outro lado, se sua imagem não contém atributos largura explícita / altura, em seguida, suas dimensões natural será utilizado como base da ampliação.
O poder de ampliação padrão, entre outras configurações um pouco, são definidas globalmente na parte superior da jquery.imageWarp.js , que você pode personalizar:

dsettings: {
magnifyby: 3 / / fator de aumento de padrão de imagem ampliada
Duração: 500, / duração / default da animação, em milisegundos
mgopacity: 0,2 / / opacidade da imagem original, quando a imagem ampliada coloca-
}
imagem original cursorcss: 'url (magnify.cur),-moz-zoom-in', / / para o CSS é 'cursor Value' atributo, adicionado a


"magnifyby" valor de 3 significa ampliação 3x, enquanto 1,5 vezes significa 1.5x etc Anote o valor em vermelho, o que costuma ser definida como a URL completa onde"magnify.cur" está localizado em seu servidor. O " url() "atributo CSS é suportado no IE e muda o cursor para uma lupa quando o cursor passa sobre as imagens com a classe CSS" magnify "nesse navegador.

Imagem disponível atributos

Você pode facilmente especificar uma ampliação diferentes e duração de animação para uma imagem específica que se desvia do padrão global, através da inserção de atributos especiais dentro da imagem. Ao lado da classe CSS pré-requisito de " magnify ", os seguintes atributos são suportados que lhe permitem personalizar o efeito para aquela imagem em particular:

"Ampliar" imagens atributos
HTML AtributoDescrição
class="magnify"necessáriaObrigatório. Dê todas as imagens que você deseja ter a capacidade de aumentar esse nome da classe CSS.
data-magnifyby="number"opcionalPermite definir o poder de ampliação para esta imagem em particular. O valor deve ser um número acima de 1, como 1,5 ou 3 etc Padrões para 3, se não definido.Exemplo:
<img src="ocean.gif" class="imagewarp" data-magnifyby="2.5" style="width:200px; height:150px" />
data-magnifyto="number"opcional. v1.1 atributoPermite definir a largura explícita em pixels da imagem deve expandir-se (a altura é redimensionado de acordo). Este atributo se sobrepõe definido " magnifyby "acima.Exemplo:
<img src="ocean.gif" class="imagewarp" data-magnifyto="900" style="width:200px; height:150px" />
data-magnifyduration="number"opcionalPermite definir a duração da animação para esta imagem em particular. Valor deve ser um número que denota milissegundos, como 500 para 1 / 2 segundo, 2.000 por 2 segundos etc Padrões para 500 se não definido.Exemplo:
<img src="forest.gif" class="imagewarp" data-magnifyby="4" data-magnifyduration="1000" />

Links que expandir um particular "ampliar" a imagem

Para a imagem que levam a classe CSS " magnify ", clicando sobre eles, obviamente, provoca o efeito multiplicador. No entanto, se isso não bastasse, você também pode adicionar links arbitrários na página que expandir um particular "ampliar" a imagem também. Tendo em conta o seguinte: " magnify imagem ":
<img id="sarah" src="girl.gif" class="imagewarp" data-magnifyby="5" style="width:200px; height:150px" />
O link seguinte arbitrária também ampliar a superior, quando o link for clicado:
<a href=#" rel="magnify[sarah]"> Zoom sobre Sarah </ a>
A sintaxe é simples rel="magnify[imageid]" , acrescentou dentro do link, onde ImageID é a identificação do " magnify "a imagem que você deseja associar a ligação com.Naturalmente, não se esqueça de dar o seu "ampliar" a imagem de um ID único e de primeira.
Está aqui um exemplo:

 Dinamicamente aplicar o efeito de ampliar uma imagem

Até agora tudo o que acima se refere à adição de ampliar o efeito de uma imagem estática na página, modificando a sua marcação. Você pode, entretanto, também aplicar o efeito de ampliar uma imagem dinâmica, ou reaplicar o efeito para a mesma imagem, como depois da imagem src foi alterado, por exemplo.
Para adicionar o efeito de aumentar a uma imagem na demanda, chamar o método imageMagnify(options) no desejado "imagens jQuery objeto wrapper, tais como:
jQuery ("# ​​myimage"). imageMagnify ({/ / aplicar o efeito de imagem com ID = "myimage"
magnifyby: 5
})
ou
jQuery ("mygallery div # img"). imageMagnify ({/ / aplicar o efeito de imagem com ID = "myimage"
magnifyto: 750,
magnifyduration: 1000 //<-- vírgula no final após última opção!
})
Se você não estiver familiarizado com a seleção de elementos usando jQuery, consulte seletores jQuery . Ao chamar imageMagnify(options) , as seguintes opções podem ser passadas para o método, com o mesmo objectivo como o seu atributos HTML colegas acima:
imageMagnify() "Opções de parâmetro
HTML AtributoDescrição
magnifyby: "number"Mesmo como contrapartida atributo acima.
magnifyto: "number"Mesmo como contrapartida atributo acima. Se as substituições definidas
magnifyby definição acima.
magnifyduration: "number"Mesmo como contrapartida atributo acima.
thumbdimensions: [width, height]Informa o script da imagem de "miniatura" dimensões antes que a imagem é ampliada.
Isso é necessário quando você está chamando imageMagnify() em uma imagem que
 não possui dimensões explícitas definidas (seja via CSS ou script) no momento da chamada imageMagnify() nele. Isso pode acontecer por imagens que são dinamicamente
adicionados à página ou apenas teve a sua src propriedade atualizada, na qual novas
 dimensões da imagem em miniatura pode ser diferente do velho um. Por exemplo:
MyImg var = document.createElement ("img")
myimg.src = "test.gif"
jQuery (MyImg). imageMagnify ({
magnifyby: 2,
humbdimensions: [150, 200] / / especificar as dimensões da imagem de pré
ampliação, como nesta imagem do ponto de não retornar alguma informação
dimensões
})
document.body.appendChild (MyImg)
Vamos ver um exemplo prático agora. Vamos dizer que você deseja aplicar o efeito de ampliar para uma imagem que pode ser alterado através de um menu drop-down. A cada mudança de imagem é necessário reaplicar o efeito de ampliar a imagem de novo, tanto como a sua src e as dimensões mudaram. Então chamamos imageMagnify()sobre a imagem cada vez que a imagem é alterada dentro do nosso código:
<form>
id="imageselect"> <select
<option> Selecione uma imagem e clique para ampliar </ option>
<option> Amsterdam 1 </ option>
<option> Amsterdam 2 </ option>
<option> Amsterdam 3 </ option>
<option> Amsterdam 4 </ option>
</ Select>
</ Form>


<img id="imagebox" src="amster1.jpg" class="magnify" data-magnifyby="2" style="width:200px" />


<script type="text/javascript">


Imagebox var = document.getElementById ("Imagebox")
imageselect var = document.getElementById ("imageselect")
imagelist var = ["amster1.jpg", "amster2.jpg", "amster3.jpg", "amster4.jpg"]


função imageselect.onchange = () {
if (this.selectedIndex! = 0) {
imagebox.src = [this.selectedIndex-1] imagelist
jQuery (Imagebox). imageMagnify ({ 
magnifyby: 2 
})

}
}


</ Script>

Marcadores: , ,

Como postar no blogger pelo Microsoft Word 2010

Como sabemos, o Office é um suíte (pacote) de programas para escritórios, e nele contém um grande processador de texto, o Microsoft Word. Logo Icon

Com ele criamos documentos de qualidade, possibilitando a inserção de imagens tabela, gráficos e  criar um trabalho limpo e organizado.

Contendo diversas funcionalidades, o Microsoft Word 2010, assim como o 2007, tem um recurso muito útil e interessante, criar postagem e publicar em blogs.

Portanto, pra quem se interessou pelo assunto, neste artigo vou ensinar como criar uma postagem e postar no seu blog (Blogger). Siga atentamente os passos para não fazer nada errado e efetuar o tutorial com sucesso.

Vamos usar o Microsoft Office 2010 para postar, mas você também pode usar a versão 2007.

1. Abra o Microsoft Word vá em Arquivo –> Novo –> e escolha a opção “Postar no Blog”.

Como postar pelo Word 2010

2. Ao escolher esta opção, será aberta uma pequena janelinha para registrar uma conta de blog, dentre as opções, escolha “Registrar Agora”.

Como postar pelo Word 20103. Escolha opção Blogger e avance;

Como postar pelo Word 2010 

4. Digite seu nome de usuário e senha do blogger e dê OK;

Como postar pelo Word 2010 
5. Se aparecer uma janela abaixo, cliquem em sim;

Como postar pelo Word 2010

6. Na próxima caixa de diálogo, escolha a opção mostrada na figura abaixe e clique em OK;

Como postar pelo Word 2010Lembrando que não será possível postar imagens no blog, apenas textos. Fiz uma profunda pesquisa de como configurar pra postar imagens no blog, tentando usar o próprio provedor do blogger, mas mesmo assim não consegui. Por tanto, se você fazer um milagre e conseguir postar imagens, por favor, deixe um comentário para atualizarmos esta postagem e melhorar nossos tutoriais, consequentemente o conteúdo.

7. Tendo realizado todos os passos acima, o registro terá sucesso, e você poderá começar a criar sua postagem, inserindo o título e conteúdo. Para postar apenas clique no botão mostrado na imagem abaixo:

Como postar pelo Word 2010

Marcadores: , , ,