Felipe Campos http://felipecampos.blog.br Design e Desenvolvimento Sat, 18 Feb 2012 03:09:02 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Novo site do Samuel Barbosa http://felipecampos.blog.br/novo-site-do-samuel-barbosa/ http://felipecampos.blog.br/novo-site-do-samuel-barbosa/#comments Sat, 18 Feb 2012 03:09:02 +0000 admin http://felipecampos.blog.br/?p=262 Criação de layout e desenvolvimento do site.

Acesse: http://www.samuelbarbosasb.com

]]> http://felipecampos.blog.br/novo-site-do-samuel-barbosa/feed/ 0 Últimos tweets para seu site http://felipecampos.blog.br/ultimos-tweets-para-seu-site/ http://felipecampos.blog.br/ultimos-tweets-para-seu-site/#comments Fri, 17 Feb 2012 01:50:19 +0000 admin http://felipecampos.blog.br/?p=259 Vou postar um pequeno script que mostra no site os seus últimos tweets de uma forma que você possa deixar com um estilo diferente daquele que você pega direto do site do twitter.

É simples, seus tweets são mostrados no seu html por listas <li>

<div id="twitter">

<ul id="twitter_update_list"></ul>

<script type="text/javascript" src="http://www.seusite.com/js/script.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/AQUI-SEU-USUARIO.json?callback=twitterCallback2&amp;count=1"></script>

</div>

Primeiro coloquei tudo dentro de uma div qualquer, a tag <ul> com a id twitter_update_list é onde vai mostrar seus tweets e é op id que você vai estilizar em seu css, logo abaixo você chama 2 scripts um você coloca em seu servidor junto com o site (pegue o script aqui) e outro é direto do twitter. Onde diz AQUI-SEU-USUARIO você coloca o usuário do seu twitter e no final onde diz count=1  é a quantidade de tweets que você deseja mostrar, para mostras os 5 ultimo mude para count=5

Isso ae, qualquer duvida comente :D

]]> http://felipecampos.blog.br/ultimos-tweets-para-seu-site/feed/ 0 Mostrar e esconder div com efeito toggle jQuery http://felipecampos.blog.br/mostrar-esconder-div-efeito-toggle-jquer/ http://felipecampos.blog.br/mostrar-esconder-div-efeito-toggle-jquer/#comments Thu, 16 Feb 2012 03:05:14 +0000 admin http://felipecampos.blog.br/?p=257 Estou trabalhando em um site www.samuelbarbosasb.com e em algumas áreas do site teriam muitas informações para aparecer na pagina, aí tive a idéia de usar divs que ficassem ocultas, e quando clicar em abrir, ou mostrar conteúdo, a div abre com um efeito tipo slide para baixo, e se clicar novamente a div recolhe ficando oculta.

É bem fácil. Primeiro chamamos o plugin jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Entre as tags <head> e </head> cole o seguinte script

<script type="text/javascript">
jQuery.fn.toggleText = function(a,b) {
return   this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;}));
}

$(document).ready(function(){
$('.tgl').before('<span><center>Revelar</center></span>');
$('.tgl').css('display', 'none')
$('span', '#box-toggle').click(function() {
$(this).next().slideToggle('slow')
.siblings('.tgl:visible').slideToggle('fast');
// aqui começa o funcionamento do plugin
$(this).toggleText('Revelar','Esconder')
.siblings('span').next('.tgl:visible').prev()
.toggleText('Revelar','Esconder')
});
})
</script>

E no seu HTML o conteúdo que você quer ocultar coloque entre as divs:

<div id="box-toggle">
<div class="tgl">
<div class="sessao" >

<p>Aqui o Conteudo</p>

</div>
</div>
</div><!-- fim do toggle -->

Pronto, está feito, agora é só arrumar o estilo.

Note que o efeito funciona quando clicar em Revelar e Esconder, para usar como Abrir e Fechar, basta alterar a palavra no script do jQuery, onde estiver escrito Revelar troque para Abrir e onde estiver Esconder, troque para Fechar. Não tem erro, se tiver dúvidas, deixe seu comentário.

]]> http://felipecampos.blog.br/mostrar-esconder-div-efeito-toggle-jquer/feed/ 0 Banner com efeito simples em jQuery http://felipecampos.blog.br/banner-com-efeito-simples-em-jquery/ http://felipecampos.blog.br/banner-com-efeito-simples-em-jquery/#comments Tue, 14 Feb 2012 00:12:39 +0000 admin http://felipecampos.blog.br/?p=252 Achei interessante postar esse script, você pode criar vários banners, e com um script em jQuery ele trocas os banners com efeito fade in e fade out. 

Dentro das tags <head> e </head> cole o seguinte script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript">
function animar() {
	$('#banner div').eq(0).animate({opacity: 0}, 0 , function() {
	$(this).appendTo('#banner').animate({opacity: 1}, 1000);
	})
}
$b(document).ready(function() {
	$('#banner div').each(function() {
		$(this).css({
		position: 'absolute'
		})
	})
		setInterval(animar, 3000);
});
</script>

Na primeira linha chamamos o jQueri direto do servidor do google, na linha 5 pegamos o id da div onde estará os banners,  sua div poderá ter qualquer id, basta trocar nas linhas onde está id #banner para a id que vc quiser usar. Na linha 15 você poderá alterar o tempo do intervalo para cada banner.

No seu HMTL você usa assim:

<div id="banner">

<div><a href="#"><img src="images/banner_1.jpg" /></a></div>
<div><a href="#"><img src="images/banner_2.jpg" /></a></div>
<div><a href="#"><img src="images/banner_3.jpg" /></a></div>

</div>

Note que o id da div #banner é a mesma no script do jQuery.

Dentro da div #banner  todas as imagens estão dentro de divs, você deverá usa-las para que o efeito funcione.

É isso ae, bem fácil, se tiver dificuldades comenta ae!

]]> http://felipecampos.blog.br/banner-com-efeito-simples-em-jquery/feed/ 0 Site Pazelo Buffet http://felipecampos.blog.br/site-pazelo-buffet/ http://felipecampos.blog.br/site-pazelo-buffet/#comments Mon, 13 Feb 2012 00:12:57 +0000 admin http://felipecampos.blog.br/?p=248 Criação de layout do site e desenvolvimento em wordpress

Acesse: http://pazelobuffet.com.br/

]]> http://felipecampos.blog.br/site-pazelo-buffet/feed/ 0 Guitar Girl http://felipecampos.blog.br/guitar-girl/ http://felipecampos.blog.br/guitar-girl/#comments Thu, 09 Feb 2012 14:15:57 +0000 admin http://felipecampos.blog.br/?p=227 Brincando um pouco com a foto da minha linda esposa *—*

]]> http://felipecampos.blog.br/guitar-girl/feed/ 0 Vestibular SPEI http://felipecampos.blog.br/vestibular-spei/ http://felipecampos.blog.br/vestibular-spei/#comments Tue, 07 Feb 2012 22:19:21 +0000 admin http://felipecampos.blog.br/?p=220 Desenvolvimento do layout e do Hotsite em flash. Pela Agência BDDB

Acesse: http://www.spei.br/vestibular

]]> http://felipecampos.blog.br/vestibular-spei/feed/ 0 Lipatin Sports http://felipecampos.blog.br/lipatin-sports/ http://felipecampos.blog.br/lipatin-sports/#comments Tue, 07 Feb 2012 22:16:27 +0000 admin http://felipecampos.blog.br/?p=217 Desenvolvimento do layout e site em wordpress. Pela Agência BDDB

Acesse: http://www.lipatinsports.com.br

]]> http://felipecampos.blog.br/lipatin-sports/feed/ 0 Agência BDDB http://felipecampos.blog.br/agencia-bddb/ http://felipecampos.blog.br/agencia-bddb/#comments Tue, 07 Feb 2012 22:12:24 +0000 admin http://felipecampos.blog.br/?p=209 Desenvolvimento do layout e site com wordpress. Pela agência BDDB

Acesse: http://www.bddb.com.br

]]> http://felipecampos.blog.br/agencia-bddb/feed/ 0 Faculdades SPEI http://felipecampos.blog.br/faculdades-spei/ http://felipecampos.blog.br/faculdades-spei/#comments Tue, 07 Feb 2012 22:08:29 +0000 admin http://felipecampos.blog.br/?p=206 Desenvolvimento do layout e site com CMS em wordpress pela Agência BDDB

Acesse: http://www.spei.br

]]> http://felipecampos.blog.br/faculdades-spei/feed/ 0