Rede Social

Navegação


Links Patrocinados


Links Recomendados


Outros Links


Visitantes

Bem-vindo, visitante ( Entrar | Registrar )


Seja bem vindo visitante!

Olá seja bem vindo ao Verdinhas. Somos uma comunidade jovem e vibrante. Rapidamente estamos nos tornando referência nacional e internacional para webmasters, investidores e empreendedores online - algo singular para língua portuguesa.

Em pouco tempo atingimos a marca de mais de 7.000 usuários registrados e acima de 1.500 visitas únicas diárias. Temos PageRank 3 e estamos entre os 6.000 sites mais visitados e ativos do Brasil e entre os 4.000 em Portugal.

Junte-se a nossa comunidade! NÓS QUEREMOS VOCÊ!


 
Reply to this topicNew Topic
Tutorial - Com Criar Efeitos De Ampliar Imagem No Blogger, Amplie A Imagem Sem Abrir Ou Mudar De Janela
Mαяіο Јúηiοя
post Mar 28 2010, 06:26 PM
Post #1


MercaDolar.net Admin
Ícone do grupo

Grupo: Moderador
Posts: 1.695
Registrado: 14-September 08
De: Goiânia/GO
Membro N°: 12.027
País: Brasil
Interesse: Investidor
Investidor: Agressivo
iTrader: 20 (100%)
Pontos: $978 Verdinhas
Exibir inventário


Esse sistema é mais comum em plataformas Wordpress, mas aqui explicarei como usa-la no Blogger. Clique na imagem abaixo para ver uma demonstração:


(Clique em qualquer miniatura no site acima para ver uma prévia.)

Passo a Passo:
1. Baixe o pacote de Scripts e CSS aqui.
2. Extraia o arquivo ZIP e envie as pastas para qualquer servidor, respeitando os caminhos.
3. Vá no Blogger, Editar HTML e coloque o seguinte código logo acima da tag </HEAD>, substituindo "http://www.site.com/" pelo site onde você hospedou as pastas com os arquivos (imagens, CSS e scripts):
CODE
<script type='text/javascript' src='http://www.site.com/js/prototype.js'></script>
<script type='text/javascript' src='http://www.site.com/js/scriptaculous.js?load=effects,builder'></script>
<script type='text/javascript' src='http://www.site.com/js/lightbox.js'></script>

4. Insira o código abaixo entre as tags <HEAD> e </HEAD>:
CODE
<link rel="stylesheet" href="http://www.site.com/css/lightbox.css" type="text/css" media="screen" />

5. Crie um novo post no seu blog e adicione uma imagem qualquer.
6. Vá para o Editar HTML em sua atual postagem e você verá um código similar ao abaixo:
CODE
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_fn3ju830LgY/S6-0iKVBAlI/AAAAAAAABoM/vHRkNzu8RPc/s1600/waavy.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 317px; height: 320px;" src="http://3.bp.blogspot.com/_fn3ju830LgY/S6-0iKVBAlI/AAAAAAAABoM/vHRkNzu8RPc/s320/waavy.jpg" alt="" id="BLOGGER_PHOTO_ID_5453776172750013010" border="0" /></a>

7. Adicione antes da tag "onblur" o comando rel="lightbox". O código então fica:
CODE
<a rel="lightbox" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_fn3ju830LgY/S6-0iKVBAlI/AAAAAAAABoM/vHRkNzu8RPc/s1600/waavy.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 317px; height: 320px;" src="http://3.bp.blogspot.com/_fn3ju830LgY/S6-0iKVBAlI/AAAAAAAABoM/vHRkNzu8RPc/s320/waavy.jpg" alt="" id="BLOGGER_PHOTO_ID_5453776172750013010" border="0" /></a>

8. Publique a postagem e clique na imagem do seu blog para testar. Caso não funcione, verifique se os caminhos especificados no arquivo CSS estão corretos, em relação ao de onde você instalou seu script.



--------------------
--------------------
Go to the top of the page
 
+Quote Post

Fast ReplyReply to this topicNew Topic
1 usuário(s) está(ão) lendo este tópico (1 visitantes e 0 usuários anônimos)
0 membros:

Collapse

> Tópicos Similares

Tópico Respostas Autor Visualizações Última ação
No new Fixado: Tutorial - Como Investir Em Hyips Passo A Passo
Dicas e Explicação Detalhada Para Novos Investidores
27 Mαяіο 4.779 18th May 2012 - 09:54 PM Último post por: milionclub
No New Posts Tutorial - Como Comprar Na Dinodirect
Loja Mais Barata Que A FocalPrice e Deal Extreme!
1 Mαяіο 909 28th March 2012 - 05:56 PM Último post por: Angel84
No New Posts Tutorial Completo - O Que É Webmoney (wmz)?
Aprenda Mais Sobre Essa E-Currency
0 Mαяіο 203 24th March 2012 - 02:23 PM Último post por: Mαяіο
No New Posts Tutorial - Como Comprar Na Focalprice
★★ Comprando da China Pelo PayPal ★★
18 Mαяіο 2.662 21st March 2012 - 03:17 PM Último post por: Mαяіο
No new Tutorial - Ganhe Mais De $200 Mensais No Sharecash
Faça Você Mesmo Seu Lucro!
40 Mαяіο 8.379 6th March 2012 - 11:07 AM Último post por: wal_rocha

 

Skin designed by IPB Forum Skins

Verdinhas PageRank Web Statistics