Que tal adicionar uma galeria de fotos no seu blog com o jQuery. Mas o que é jQuery?


jQuery é um framework para ajudar os desenvolvedores a se concentrarem na lógica dos sistemas da web e não nos problemas de incompatibilidade dos navegadores atuais.
Seu lema é escrever menos e fazer mais.


Com ele é possível criar vários efeitos no seu Blog,está semana vou procurar mais efeitos com o jquery para blogger hoje vai ser o primeiro da serie, o efeito de hoje é exibir uma imagem pequena que ao passar o mouse ou rato ele ficará maior então vamos aplicar este lindo efeito:


1.Faça login no Blogger


2.Acesse a area Layout->Editar html


Agora com as tecla Ctrl e F pesquise o código abaixo:
]]></b:skin>
Agora antes do código acima insira o código abaixo:
/* Blogger Zoom Gallery By AllBlogTools.com */ ul.thumb { float: left; list-style: none; margin: 0; padding: 10px; width: 360px; } ul.thumb li { margin: 0; padding: 5px; float: left; position: relative; /* Set the absolute positioning base coordinate */ width: 110px; height: 110px; } ul.thumb li img { width: 100px; height: 100px; /* Set the small thumbnail size */ -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */ border: 1px solid #ddd; padding: 5px; background: #f0f0f0; position: absolute; left: 0; top: 0; } ul.thumb li img.hover { background:url(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center; /* Image used as background on hover effect border: none; /* Get rid of border on hover */ }
Agora procure pela código abaixo:
</head>
E antes dele coloque o código abaixo:
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ //Larger thumbnail preview $(&quot;ul.thumb li&quot;).hover(function() { $(this).css({&#39;z-index&#39; : &#39;10&#39;}); $(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop() .animate({ marginTop: &#39;-110px&#39;, marginLeft: &#39;-110px&#39;, top: &#39;50%&#39;, left: &#39;50%&#39;, width: &#39;174px&#39;, height: &#39;174px&#39;, padding: &#39;20px&#39; }, 200); } , function() { $(this).css({&#39;z-index&#39; : &#39;0&#39;}); $(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop() .animate({ marginTop: &#39;0&#39;, marginLeft: &#39;0&#39;, top: &#39;0&#39;, left: &#39;0&#39;, width: &#39;100px&#39;, height: &#39;100px&#39;, padding: &#39;5px&#39; }, 400); }); //Swap Image on Click $(&quot;ul.thumb li a&quot;).click(function() { var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name $(&quot;#main_view img&quot;).attr({ src: mainImage }); return false; }); }); </script>
Salve as alterações.


Inserindo imagens e criando uma micro galeria


1.Vá para Layout->Elementos da página->Adiciona um Gadget->Html/JavaScript
E coloque o código abaixo dentro do Gadget fazendo as alterações necessárias
<ul class="thumb"> <li><a href="#"><img src="picture 1 Link" alt="" /></a></li> <li><a href="#"><img src="picture 2 Link" alt="" /></a></li> <li><a href="#"><img src="picture 3 Link" alt="" /></a></li> <li><a href="#"><img src="picture 4 Link" alt="" /></a></li> </ul>
Notas: O código em vermelho é o link da imagem se não quiser adicionar um link a imagem deixe como está, o código em verde é o url da imagem deve ser substituído pelo url da imagem desejada ex: http://i30.tinypic.com/zx1fn8.png, para inserir mais imagens repita está linha abaixo antes do código </ul> :
<li><a href="URL 1 #"><img src="picture 1 Link" alt="" /></a></li>
Para ver um demo do script clique aqui

Referência: Allblogtools,Wiki
Leia mais...


Características
  • Três colunas
  • Espaço para banner de 468x60
  • Espaço para video
  • Leia mais (automático)
  • Auto thumbnail nas imagens das postagens
  • SEO otimize
  • Search box ( caixa de pesquisa)
Referência: Blogger tricks
Leia mais...

screenshot stellarium

Stellarium é um aplicativo open-source (funciona em Linux, Windows e Mac OSX) com uma base de dados de mais de 210 bilhões de estrelas, planetas e satélites principais, que ele pode exibir em tempo real, diretamente no seu computador.


No seu mais básico, Stellarium irá mostrar o céu visto de qualquer lugar do planeta.Investigando as características mais avançadas que você pode fazer todo tipo de coisa realmente interessante ver como as constelações de uma dúzia de diferentes culturas, o Pegasus da mitologia grega é a tartaruga, na tradição Navajo.


Você pode assistir a rotação dos astros em tempo real, as condições de controle atmosférico, zoom, como se usando um telescópio poderoso, e sobrepor uma riqueza de informações sobre o céu noturno, como os nomes das estrelas, as órbitas dos planetas, e as ilustrações das constelações.


Se você estiver usando o Stellarium em seu laptop para completar a sua observação de estrelas, você pode ativar um modo de noite que escurece o brilho e exibe os menus em uma noite-visão de preservação vermelho.


Se quiser ver mais seções de screenshots visite site Stellarium.


Download Stellarium (Windows. Exe, Mac OSX. Dmg e arquivos fonte do Linux) |Download Stellarium para Ubuntu e Debian (deb). 


Referência: W8
Leia mais...
Características
  • Tema do Twitter
  • 2 colunas
  • 3 colunas no footer
  • Caixa de Pesquisa
  • Botão twittar isto
  • Menu Horizontal
  • Botão Leia mais
  • Leia mais automático
Leia mais...
Rotacionar imagens serve para diminuir o espaço ocupado por elas no template, elas seram exibidas de forma aleatória facilitando a colocação em qualquer espaço disponível, e também o efeito é muito bonito e pode ser aplicado para parceiros ou mesmo para exibição de papeis de parede veja como é fácil aplicar este efeito ao seu Blog :

1.Faça login no Blogger

2.Vá para Layout->Editar html



Obs: Se você já tem o Scriptaculous no seu blog pule este passo 2, e vá para o próximo para evitar a dublicidade de scripts.


Agora utilizando as teclas Ctrl e F que ajudam bastante na procura de códigos, encontre o código abaixo:
</head>

Agora acima do código de anterior coloque o código abaixo:
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

Salve as alterações.

Adicionando Imagens ao script


1.Vá para Layout->Elementos da página->Adicionar um Gadget

Agora selecione html/JavaScript e como conteúdo coloque o código abaixo fazendo algumas alterações:
<div style="height: 200px; text-align: center; width: 100%;">
<div class="slide" id="slideshow1">
<div>
<img src="URL_DA_IMAGEM" /></div>
</div>
<div class="slide" id="slideshow2" style="display: none;">
<div>
<img src="URL_DA_IMAGEM" /></div>
</div>
<div class="slide" id="slideshow3" style="display: none;">
<div>
<img src="URL_DA_IMAGEM" /></div>
</div>

</div>

<script type="text/javascript">

start_slideshow(1, 3, 2000);

function start_slideshow(start_frame, end_frame, delay) {
setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
}

function switch_slides(frame, start_frame, end_frame, delay) {
return (function() {
Effect.Fade('slideshow' + frame);
if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
setTimeout("Effect.Appear('slideshow" + frame + "');", 850);
setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 850);
})
}
</script>

Nota: O código em vermelho é o total de imagens que o script está executando mude de acordo com a quantidade de imagens ex: 10.Adicione abaixo do código em azul o código abaixo para adicionar mais imagens ao script veja :
<div class="slide" id="slideshow4" style="display: none;">
<div>
<img src="URL_DA_IMAGEM" /></div>
</div>

E para adicionar mais além dessas que citei repita o mesmo código mudando o número em amarelo em ordem crescente 1,2,3,4,5... e assim vá adicionando.
E no código em verde adicione a url da imagem ex: http://i30.tinypic.com/zx1fn8.png ; para transformar a imagem em um link substitua o <img src="URL_DA_IMAGEM" /> por <a href="url-do-site"><img src="url-da-imagem"/></a> . Agora deixe um comentário mostrando a sua experiência com o script.
Leia mais...
Características:
  • 4 Colunas
  • Menu
  • Caixa de busca
  • Espaço para anúncios
  • Customizavel
  • Adicionar ou remover Gadget pelo menu do blogger
  • Três colunas no footer 


Referência: Themescook
Leia mais...
O Blogger Buz anúncio ontem uma nova opção do Gadget marcadores,a opção nuvem de marcadores ou tag,cloud,recurso este que ainda dependia de scripts,veja como fazer a sua nuvem:-)

1.Faça login no Blogger


2.Vá para Layout->Elementos da página->Adicionar um gadget
3. Escolha o gadget Marcadores

4. Ai você verá uma tela como está abaixo :


Selecione Cloud e clique em salvar, uma vez ativado o gadget exibira os marcadores mais populares em negrito e os outros em letra normal veja a imagem abaixo :



Se quiser selecionar os marcadores que deseja exibir volte ao passo 4 e selecione "Marcadores selecionados" e clique em "Edit" ai você verá uma tela como está abaixo para selecionar os marcadores que deseja exibir :
Após selecionar clique em concluído para finalizar a seleção e depois em salvar ;)
Agora você possui uma nuvem se marcadores sem necessidade de scripts externos.
Leia mais...
A resposta para todas as perguntas quem dera ter uma caixa de busca na mente

Uma caixa de busca significa mais tempo no seu site, e também facilita o visitante a buscar o que procura de forma fácil e direta sem ficar clicando em cada categoria para ver se encontra alguma coisa, para inseri-la é muito fácil veja abaixo o tutorial :

1.Faça login no Blogger


2.Vá para Layout ->Elementos da página->Adicionar um Gadget


3.Agora selecione html/JavaScript



E como conteúdo do gadget coloque o seguinte :
<p align="left">
<form id="searchthis" action="
Url-do-seu-blog/search" style="display:inline;" method="get">
<strong>
Nome do seu blog<br/></strong>
<input id="b-query" maxlength="255" name="q"
size="20" type="text"/>
<input id="b-searchbtn" 
value="Pesquisar"type="submit"/>
</form></p>

Nota: Em Url-do-seu-blog coloque o seu endereço exemplo: http://noticiaeblog.blogspot.com e em nome do seu blog coloque o nome do seu blog ;) ex:Notícia e blog, em value="Pesquisar" substitua o pesquisar por outra palavra se quiser pois este será o texto do botão, pode ser buscar,achar,search etc, em size="20" é a largura da caixa de busca você pode substituir o 20 por outro número. Depois de fazer as alterações salve...E verá uma caixa de busca como está abaixo:


Notícia e blog



Sua caixa de busca está pronta :-) 


créditos:Tips for new blogger
Leia mais...

Quando fazemos um blog ele está sujeito a muitos imprevistos como uma imagem ultrapassar a margem da página ou ele não ser visto em um navegador, um script entrar em conflito com outro e etc... Então está aqui a solução fechar o blog para manutenção ou construção isto facilita muito pois não queremos exibir um conteúdo em nossa página com má formatação veja como proceder:
Atenção: Para reabrir seu blog lembre-se de remover todos os scripts, se não seu blog só será visto por você ;)

1.Faça login no blogger

2.Vá para Layout-> Editar html

e com as teclas Ctrl e F procure pelo código abaixo:
<body>
e abaixo dele insira o código abaixo:
<div style='text-align: center;'><img height='100%' src='http://1.bp.blogspot.com/_8AL-4bHE9zs/SpLLj4X9ySI/AAAAAAAABJI/B2Ne8kAUxQI/s320/construcao%5B1%5D.jpg' width='100%'/></div> <span class='item-control blog-admin'>
Nota: Em amarelo é a imagem que aparecerá quando seu blog estiver fechado, mude-a como quiser ;)

3.Agora procure pelo código abaixo:
</body>
e acima dele cole o código abaixo:
</span>

Lembre de remover os códigos para reabrir seu blog
Leia mais...
Player de mp3 são muito bons para colocar música diretamente na página do blogger sem a necessidade de baixar a música para depois ouvi-la, vamos ao tutorial :

1.Player mp3 do Google
1.1Primeiramente obtenha uma url do arquivo mp3 como está http://sites.google.com/site/noticiaeblog/dontmatter.mp3 uma dica de hospedagem que publiquei recentemente pode ajudar a obter está url de música Hospedagem GrátisAgora já com url da música crie uma postagem no blogger que deseja colocar a música e clique em editar html veja:
Clique para ampliar

2.Agora copie o código abaixo fazendo as devidas modificações :
<embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=URL_DO__ARQUIVO_MP3" width="400" height="27" allowscriptaccess="never" quality="best" bgcolor="#ffffff" wmode="window" flashvars="playerMode=embedded" />
Nota: Em URL_DO_ARQUIVO_MP3 cole a url da música como aquela que citei acima.
O player deve ficar como esse abaixo:


2.Player do Yahoo
Siga o passo 1.1
2.Agora copie o código abaixo fazendo as modificações necessárias :
<embed src="http://webjay.org/flash/dark_player" width="400" height="40" wmode="transparent" flashVars="playlist_url=URL_DO__ARQUIVO_MP3&amp;skin_color_1=-145,-89,-4,5&skin_color_2=-141,20,0,0" type="application/x-shockwave-flash" />

Nota: Em URL_DO_ARQUIVO_MP3 cole a url da música como aquela que citei acima.
O player deve ficar como esse abaixo:


3.Player do Odeo

Siga o passo 1.1
2.Agora copie o código abaixo fazendo as modificações necessárias :

<embed type="application/x-shockwave-flash" src="http://www.odeo.com/flash/audio_player_standard_gray.swf" width="400" height="52" allowScriptAccess="always" wmode="transparent" flashvars="audio_duration=DURAÇÃO&amp;external_url=URL_DO__ARQUIVO_MP3" />

Nota: Em URL_DO_ARQUIVO_MP3 cole a url da música como aquela que citei acima.
O player deve ficar como esse abaixo:


4.Player do Windows Media Player
Siga o passo 1.1
2.Agora copie o código abaixo fazendo as modificações necessárias :

<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/windows/mediaplayer/download/default.asp" filename="URL_DO_ARQUIVO_MP3" uimode="mini" src="URL DA MÚSICA" autostart="1" showstatusbar="0" showdisplay="0" autosize="0" showcontrols="True" autorewind="1" statusbar="false" animationatstart="false" showaudiocontrols="TRUE" showpositioncontrols="False" align="texttop" height="24" width="170"></embed>
Nota: Em URL_DO_ARQUIVO_MP3 cole a url da música como aquela que citei acima.
O player deve ficar como esse abaixo:


Pronto vários players para blogger para você escolher o melhor ;)
Leia mais...
Logo do Twitter Feed um passarinho com um símbolo do feed

O twitter feed é um site que envia tudo que é publicado no seu blog para o twitter. Além de divulgar seu blog, é uma forma simples de não ter que ir ao twitter para cada postagem feita, para ter essa facilidade acesse o twitter feed e clique em registre now - registrar agora e em seguida preencha seu e-mail e escolha uma senha e clique em create account - criar conta.


Agora você vai colocar o seu twitter para que ele envie as postagens vamos aos passos
1. Create new feed to - criar feed para, selecione Twitter e depois clique em connect your feed to your Twitter Account para conectar o twitter a sua conta ai o site levara você para twitter onde você deve preencher seu e-mail e senha do twitter e clicar em allow. Após isso o twitter redirecionará novemente para o site do twitter feed.
2.Give your feed a name and add the URL - preencha o nome e a url do feed e clique em create feed.


Agora toda vez que criar uma postagem ela vai também para o twitter já com a url do post.
Leia mais...
A gente precisa atualizar-se ;)

As vezes eu vejo em alguns blogs umas frases que ao atualizar o navegador mudam com um passo de mágica eu pensava que utilizavam BD mais não, eles utilizam um hack que muda automaticamente a frase ao atualizar pesquisando na internet achei este hack então vamos a aplicação:


1.Faça login no Blogger


2.Vá para Layout -> Editar Html -> Adicionar Gadget









3. Html/JavaScript









e como conteúdo cole o código abaixo fazendo as modificações a seguir
<script language="JavaScript">
citas = new Array(4)
citas[0] = "
Blogger ou blogspot"
citas[1] = "
Cms ou blogger"
citas[2] = "
O que?"
citas[3] = "Pra que?"
aleatorio = Math.random() * (citas.length)
aleatorio = Math.floor(aleatorio)
document.write(citas[aleatorio])
</script>


Nota: A parte em amarelo deve ser aumentada de acordo com o número de frases, a parte em azul deve ser repetida para adicionar mais frases, e o número em laranja deve ser aleatório. A parte em roxo deve ser alterada para suas frases.


4.Clique em Salvar

Seu Gadget de frases aleatórias está pronto :)


Agora os devidos créditos este Hack eu retirei do Elescaparatederosa mas ele támbem é encontrado no Usuário Compulsivo ;)
Leia mais...


O Google sites o substituto do Google pages recebeu algumas funções a mais agora além de criar seu site rápido e fácil ele também está hospedando, mais uma hospedagem gratuita e segura, pelo que testei ele hospeda .Js, .Swf, Pdf, .Gif, .Jpg, .Css entre outros que utilizamos aqui no blogger veja como utilizar ;)

Acesse o Google sites e faça login com sua conta do Google se não tiver crie uma, após criar o seu site e receber um endereço tipo esse http://sites.google.com/site/noticiaeblog sendo o verde seu nome de endereço escolhido. Após isso acesse administrar site e em seguida anexos e clique em fazer upload e selecione o arquivo que deseja após isso clique com o botão direito do mouse em copiar o endereço do link ira aparecer um link como esse veja:
http://sites.google.com/site/noticiaeblog/recente.js?attredirects=0
Remova a parte em laranja e vai como esse abaixo:
http://sites.google.com/site/noticiaeblog/recente.js
Agora você já tem a sua hospedagem de arquivos e do Google, uma empresa de confiança ;) mas que deixou muito gente na mão aposentando o Google pages mas agora está aos poucos reabrindo espaço para nossos arquivos.
Leia mais...

                                               Twittar postagens

Aprenda a adicionar no final das postagens um link para adicionar ao twitter, muito bom para ajudar seus leitores a divulgar suas postagens, Veja como fazer:

1.Faça login no blogger
2.Vá para Layout->Editar html
3.Marque Expandir modelos de widget
4.Agora procure pelo código ou similar abaixo utilizando as teclas Ctrl e F :
<div class='post-footer'>
5.Imediatamente após essa linha, cole o seguinte código:
<a expr:href='"http://twitter.com/home?status=Reading " + data:post.title + " @SEU-TWITTER-USERNAME " + data:post.url' title='Tweet it on Twitter'>Tweet isto</a>

Nota:
Em seu SEU-TWITTER-USERNAME coloque seu twitter exemplo: noticiaeblog este no caso é o meu twitter, coloque o seu.

Em seguida, salve o seu modelo. Isto irá adicionar um "Tweet isto" no rodapé do post abaixo cada postagem do blog. Os leitores podem clicar nesse link para enviar um modelo já pronto de "Tweet como este:




Fonte: Blogger buster
Leia mais...


Se o seu relacionamento está difícil com muitas discussões.Aprenda agora como terminar uma discussão em 30 segundos.



Passos


  1. Escute com cuidado e não diga nada. Descubra o que a outra pessoa está pensando antes de falar algo. Falar antes de entender completamente a situação pode agravar as coisas. Se a ação não puder ser desfeita, desculpe-se imediatamente. Não hesite.

  2. Abafe seu ego, pelo menos por agora. Fazer com que pareça superior a outra pessoa somente vai fazer com que a discussão não acabe. Escute o que a pessoa tem a dizer, e concorde com a cabeça.

  3. Peça desculpas mesmo que não seja sua culpa. Tente terminar a discussão se retratando de um modo sincero. Por exemplo, se estiverem discutindo sobre como ela teve que andar de volta para casa com a roupa da academia porque você se esqueceu de buscá-la, desculpe-se com sinceridade.

  4. Faça de conta que a discussão não é grande coisa. Traga a tona uma situação ou assunto que faça com que aquilo que irritou sua parceira(o) pareça pequeno. Tente usar a verdade, mas o objetivo aqui é desviar o assunto e terminar a discussão.


Se seguiu os passos e conseguiu comente.

Fonte: Original em creative comons pt.wikihow.com
Leia mais...