Mostrando postagens com marcador gadgets. Mostrar todas as postagens
Mostrando postagens com marcador gadgets. Mostrar todas as postagens

segunda-feira, 15 de dezembro de 2008

Formulário de e-mail Kontactr








Há alguns dias um de nossos leitores não conseguiu instalar em seu blog o formulário de e-mail básico e então eu prometi que faria uma postagem sobre como conseguir um formulário de e-mail do Kontactr. Este formulário é simples, mas muito prático e útil. Além de evitar os robôs de busca dos spammers, também pode dar um toque elegante em sua página, dependendo de como você customizá-lo (ou então isto é besteira minha...). O melhor de tudo é que o negócio é incrivelmente fácil de instalar. Porém, para os que estiverem com muita preguiça, fiz este tutorial aqui, que espero facilite para vocês. Vamos lá? Vou dar tudo bem ilustrado com telas, seguindo os passos. ;)

1. Entre no site http://www.kontactr.com/ e clique em Sign Up, como na imagem abaixo.

2. Preencha o formulário de inscrição  com os dados: Nome, Sobrenome, Endereço de e-mail, Nome de usuário, senha e confirme a senha. Muito fácil! Quando tiver preenchido todos clique em Submit.
3. Você será redirecionado para a página Sucesso. Agora, você deve verificar seus e-mails buscando o e-mail de confirmação do Kontactr. Lembre-se de que alguns servidores de e-mail identificam e-mails automaticamente gerados como este como spam. Então, se não achar o e-mail, verifique se ele não se escondeu na pasta de itens excluídos.

4. Após receber o e-mail, clique no link nele fornecido, para ativar a sua conta.
5. Então, na página Sucesso, clique onde está escrito Click here to login once you have activated.
6. Faça login, com seu nome de usuário e senha.
7. Após fazer o login você entrará numa página como a da figura abaixo. Você verá duas caixas de texto. Uma Embed Widget e a outra Embed Widget - AJAX. Clique em Customize this widget, embaixo da segunda caixa.
8. Nesta página, você poderá customizar o seu formulário de contato, definindo suas cores. Ao acabar, clique em OK.
9. Copie o código desta caixa de texto (ver imagem abaixo) e cole-o em uma nova postagem em seu blog. Dê o nome à postagem de Contato ou do que achar melhor e publique.
 Seu formulário estará pronto! Que tal o achou?

Widget Top Comentaristas customizado

Wanda e Cosmo, os comentaristas mágicos!
Há alguns dias atrás me veio uma ideiazinha impertinente que me perseguiu até que a pus em prática: uma customização do super-usado widget Compulsivo Top Comentaristas.

A modificação coloca tudo numa lista em menu suspenso, em vez da lista clássica e sempre usada. Após enviar um e-mail para o Compulsivo perguntando se estava tudo bem publicar aqui o código, e-mail este que foi respondido em menos de dois minutos, aqui estou disponibilizando para quem quiser a modificação. E para facilitar ainda mais para quem quiser instalar o widget, há o mesmo gerador usado lá no Compulsivo. Vejamos o que é dito sobre o widget na postagem original:

Quer aumentar pra valer os comentários no seu blog? Instale o Widget Compulsivo Top Comentaristas para o Blogger / Blogspot e estimule seus leitores a participarem das discussões para ganhar links!

Este Widget exibe uma lista de links para os sites dos comentaristas mais ativos, permite filtrar até dois nomes na lista e definir a quantidade de comentaristas exibidos.

E as principais características e diferenciais do widget do Yahoo no qual foi baseado:

Características e Diferenciais do Widget Compulsivo:


  • Backlinks: Os links na lista apontam para o blog do comentarista e não para o comentário mais recente. Este é o maior estimulante, pois os aqueles que mais comentaram usando a opção OpenID, recebem um backlink direto. Quem comenta usando a Conta Google recebe um backlink para a página do seu perfil no Blogger;
  • Lista simples: Ao invés de usar uma lista numerada, optei pela lista simples. Afinal os Top Comentaristas já são organizados em ordem decrescente. Além disso a lista simples integra-se melhor a maioria dos templates;
  • Filtragem de Comentaristas: Além de filtrar seu próprio nome da lista de comentaristas mais ativos, você também terá disponível a opção de filtrar mais um nome, caso haja necessidade. Essa opção é particularmente útil em blogs com mais de um autor ou onde o nome do autor tenha sido alterado;
  • Quantidade de comentaristas: Com o Widget Compulsivo Top Comentaristas, você pode definir a quantidade de links exibidos na lista sem necessidade de alterar códigos.
Diferença do Widget Modificado
  • Lista em menu suspenso: ao invés de utilizar a lista normal, a lista é contida em um espaço muito menor em um menu suspenso. Assim, mesmo ocupando um lugar de destaque em seu template, não preencherá muito espaço do seu blog.
Veja aqui as duas imagens do widget em meu blog:
         Lista no modo anterior                  Lista em menu suspenso 

Como faço para instalar este widget?

Muito fácil! Para instalar o widget original, clique aqui, e para instalar o widget customizado, clique aqui!

É só preencher os campos no gerador e clicar, que o widget será instalado automaticamente em seu blog. Bom proveito!
Aviso: Não remova os créditos, agora acrescidos dos meus. ;)

domingo, 14 de dezembro de 2008

Abrir links externos em nova janela

Durante estes últimos dias, achei no site Dynamic Drive um script muito interessante, que muitos gostariam de ter em seus blogs. Em geral, quando queremos que links em nosso blog abram em uma nova janela, adicionamos o atributo target="_blank" no código do link. Porém, para não ter que fazer isto em todos os links, e deixar o leitor escolher se quer sair da página ou não, existe este belo script. Uma das coisas mais chatas para por num blog é fazer com que os links do próprio blog abram em outras janelas. E o script inclui esta opção... O script aparece assim:
Podem vê-lo na minha barra lateral. Se a caixa for marcada, com está na imagem acima, todos os links para outros blogs e sites abrirão em uma nova janela, ou aba, porém os links do Mestre Blogger continuarão na mesma janela. Tirando a marca da caixa, links externos também abrirão em nova janela. O melhor de tudo é que este excelente script é facílimo de instalar em seu blog, leva poucas modificações, e não sobrecarrega a página. Para instalá-lo em seu blog...:
1. Vá para o painel de seu blog. Entre na página Layout -- Elementos de página.
2. Clique em Adicionar um Gadget. Escolha a opção HTML/Javascript na janela pop-up que aparecerá.
3. Neste gadget, cole o seguinte script:

<script type="text/javascript">
//Open offsite links in new window script- http://www.dynamicdrive.com/
//Created: August 28th, 2007'
var ddwindowlinks={
//1)Enter domains to be EXCLUDED from opening in new window:
excludedomains: ["mestreblogger.blogspot.com"],

//2) Target for links that should open in a new window (ie: "_blank", "secwin" etc):
linktarget: "_blank",

//3) Specify operating mode ("auto" or "manual"):
mode: "manual",

//4) If mode is "manual", customize checkbox HTML to show to users (Preserve id attribute):
toggleHTML: '<form><input id="targetcheckbox" checked="checked" type="checkbox"/><label for="targetcheckbox">Abrir links exteriores em uma nova janela?</label></form>',

//5) If mode is "manual", enable user persistence so the state of the checkbox is remembered?
persist: true,

assigntarget:function(){
var rexcludedomains=new RegExp(this.excludedomains.join("|"), "i")
var all_links=document.getElementsByTagName("a")
if (this.mode=="auto" || (this.mode=="manual" && this.togglebox.checked)){
for (var i=0; i<=(all_links.length-1); i++){
if (all_links[i].hostname.search(rexcludedomains)==-1 && all_links[i].href.indexOf("http:")!=-1)
all_links[i].target=ddwindowlinks.linktarget
}
}
else{
for (var i=0; i<=(all_links.length-1); i++)
all_links[i].target=""
}
if (this.mode=="manual" && this.persist)
this.setCookie("dlinktarget", (this.togglebox.checked)? "yes" : "no", 30) //remember user setting for 30 days (set to -1 then reload page to erase cookie)
},

init:function(){
if (document.getElementById && this.mode=="manual"){
document.write(this.toggleHTML)
this.togglebox=document.getElementById("targetcheckbox")
this.togglebox.onclick=function(){ddwindowlinks.assigntarget()}
if (this.persist && this.getCookie("dlinktarget")!="")
this.togglebox.checked=(this.getCookie("dlinktarget")=="yes")? true : true
}
if (window.addEventListener)
window.addEventListener("load", function(){ddwindowlinks.assigntarget()}, true)
else if (window.attachEvent)
window.attachEvent("onload", function(){ddwindowlinks.assigntarget()})
},

getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
},

setCookie:function(name, value, days){
var expireDate = new Date()
//set "expstring" to either an explicit date (past or future)
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/"
}

}
ddwindowlinks.init()
</script>


Sim, a coisa é longa, mas não precisa se incomodar, pois é muito fácil de adicionar...

4. Modifique o trecho em vermelho do script para o endereço de seu blog. Lembre-se: o endereço não deve levar os atributos http:// ou www.
5. Salve o gadget e visualize o blog. Está feito!
Importante - Os créditos ao site http://www.dynamicdrive.com/ devem permanecer intactos para uso legal. Não os remova sob hipótese alguma. Fora isto, use o script à vontade que nada irá incomodá-lo.

sexta-feira, 12 de dezembro de 2008

Código para adicionar aos favoritos

Depois de interessar os leitores em seu blog, é muito importante mantê-los visitando seu blog. Para isso, em primeiro lugar você deve ser regular nas postagens, postar o mais freqüentemente possível. Depois, fazê-los lembrar-se do endereço do blog, saber de onde acessar, é o que interessa. O gadget lançado pelo Blogger Seguidores facilitou muito isto, pois quem estiver interessado no blog não o perderá mais de vista podendo acompanhá-lo. Outra coisa interessante a fazer é colocar o botão Adicione aos Favoritos em seu blog. Assim você facilita para que o visitante adicione sua página em sua lista de favoritos, e assim volte com mais facilidade. A seguir passo o melhor código, em minha opinião, para este efeito. Ele funciona seguramente nos navegadores  Internet Explorer, Firefox e Opera.
Aqui está o código:
<script language="JavaScript" type="text/JavaScript">

function favoritos() {
if ( navigator.appName != 'Microsoft Internet Explorer' )
{ window.sidebar.addPanel("Mestre Blogger","http://mestreblogger.blogspot.com",""); }
else { window.external.AddFavorite("http://mestreblogger.blogspot.com","Mestre Blogger"); } }
</script>
<a href="javascript:void(favoritos());">Adicionar aos Favoritos</a>

Nele, modifique todos os trechos em verde. Nos lugares onde está escrito Mestre Blogger, escreva o nome de seu blog, como ele aparecerá na lista de favoritos. Onde está o endereço do Mestre Blogger, deixe o endereço do seu blog, sem esquecer do http://

O trecho Adicionar aos Favoritos é o link, ou botão, que será clicado para favoritar a página. Modifique pelo texto que você desejar que apareça.

Para usá-lo, faça o seguinte:

1. Vá para Layout -- Elementos de página.
2. Clique em Adicionar um Gadget.
3. Selecione a opção HTML/Javascript.
4. Aí, cole o código e salve o elemento.
5. Se quiser, arraste o gadget para outro lugar e salve a modificação.










Agora o script já estará funcionando, e seus visitantes poderão usá-lo à vontade!

Atualização -

Para colocar em vez de uma frase uma imagem que, clicada, adicionará seu blog aos Favoritos do leitor, use este código:

<script language="JavaScript" type="text/JavaScript">

function favoritos() {
if ( navigator.appName != 'Microsoft Internet Explorer' )
{ window.sidebar.addPanel("Mestre Blogger","http://mestreblogger.blogspot.com",""); }
else { window.external.AddFavorite("http://mestreblogger.blogspot.com","Mestre Blogger"); } }
</script>
<a href="javascript:void(favoritos());"><img src="http://urldasuaimagem.png" border="0"/></a>

Substitua os trechos em verde como mostrado antes, e o trecho em vermelho modifique para a URL (endereço) da imagem que você usará e salve o gadtet.

E aqui está um exemplo de como fica este script depois de publicado:
Adicione o Mestre Blogger à sua lista de Favoritos!

quinta-feira, 11 de dezembro de 2008

Removendo a contagem de seguidores

Depois que eu instalei o gadget Seguidores em meu blog, tive um pequeno problema com isto. É que após ter criado o gadget e dado um nome, foi adicionada a contagem automática de quantos estão me acompanhando, logo no título. Veja como:
Aqui eu pus o nome Seguidores, como exemplo.
Aqui, no tíulo do gadget, aparece a contagem. No entanto, eu não queria a contagem no título, pois esta já está colocada no próprio gadget. Então, quem também quiser tirar a contagem, faça como eu fiz:
1. Vá na página Layout -- Editar HTML.
2. Aqui, marque Expandir modelos de widgets.
3. Busque o seguinte código: (<data:totalFollowerCount/>) .
4. Após achado, remova-o inteiramente. É isto. Salve as alterações no template e visualize o blog.
5. Caso você deseje inserir novamente o código, faça os passos 1 e 2. A seguir, encontre este código:
<b:if cond='data:totalFollowerCount != ""'>

<h2 class='title'><data:title/></h2>
</b:if>
Cole entre <data:title/> e </h2> o trecho que tinha sido removido. Salve e pronto.

Outros interessantes

Para colocar o nome do gadget em outra disposição com a contagem, você pode fazer de algum modo como abaixo. Antes de ver as dicas, vá para Layout -- Editar HTML e marque a caixa Expandir modelos de widgets. Ache o seguinte código: <data:title/> (<data:totalFollowerCount/>)

Tenho 10 seguidores - Este formato deixa a contagem no meio. Para consegui-lo, substitua todo o trecho  <data:title/> (<data:totalFollowerCount/>) por Tenho <data:totalFollowerCount/> seguidores

10 acompanhando este blog - Este formato deixa a contagem antes. Primeiro deve-se mudar o nome do gadget para acompanhando este blog. Depois, troque o trecho <data:title/> (<data:totalFollowerCount/>) por <data:totalFollowerCount/> <data:title/>. Você também pode por outros nomes no gadget como seguidores para que apareça 10 seguidores. Modifique as coisas como quiser! Lembre-se que:

<data:title/> - É o título que você escreveu no próprio gadget.
<data:totalFollowerCount/> - É a contagem de seguidores.

Agora utilize a sua criatividade e ponha o título como quiser ;)

Gadget Seguidores

Hoje algumas palavras sobre o mais recente gadget personalizado do Blogger. O Seguidores. Palavras do Blogger:

O que é Acompanhar?


Você tem um blog favorito e quer que o autor e os leitores saibam que você é um fã? Agora você pode fazer isso e muito mais com o recurso Acompanhamento do Blogger. Você pode até mesmo controlar os blogs que acompanha usando a sua Lista de leitura no painel do Blogger.

Como faço para ser seguidor de um blog?


Existem várias maneiras de se tornar seguidor de um blog. Uma das maneiras mais fáceis é visitar um blog que tenha adicionado o gadget Acompanhamento e clicar no link Acompanhar esse blog . Veja a figura abaixo:
Agora você verá uma janela pop-up com as opções de acompanhar o blog publicamente ou anonimamente.
Selecione como você gostaria de acompanhar e clique em Acompanhar (ou Follow). Pronto! Você já é um seguidor do blog. Se você escolheu acompanhar o blog publicamente, a foto do seu perfil será exibida no blog, com um link para o perfil do seu Blogger. No seu perfil do Blogger o blog será adicionado na lista Blogs que eu acompanho. No painel do Blogger você pode verificar as atualizações dos blogs que você acompanha. Veja a imagem:
 

Como faço para acompanhar um blog se ele não tiver o gadget Seguidores adicionado?

 Se o blog que você quer seguir não tiver o gadget Seguidores adicionado, você pode adicioná-lo em sua Lista de Leitura indo pelo Painel do Blogger. Faça assim:

1. Entre no painel do Blogger.
2. Desça até o fim da página.
3. Embaixo da Lista de Leitura você verá um botão ADICIONAR. Clique nele. Uma janelinha como esta da imagem aparecerá.
4. Digite o URL (endereço) do blog que você quer acompanhar e clique em Próxima.
5. Na próxima página que abrirá, clique em Acompanhar e pronto!

Como faço para adicionar este gadget em meu blog?
Muito simples! Faça assim:

1. Vá em Layout -- Elementos de página.
2. Clique no link Adicionar um Gadget.
3. Na janela pop-up que aparecerá escolha a opção Seguidores (novo!):

4. Escolha um nome para o gadget e clique em Salvar. Está feito!

Agora, cada vez que você acessar o seu painel do Blogger você poderá ver quantos seguidores seu blog tem.
E que tal acompanhar o Mestre Blogger? Como você vê, é muito fácil... ;)

quarta-feira, 10 de dezembro de 2008

Imagem na barra lateral

Aqui uma dica para os que ainda estão começando a blogar, e ainda não conhecem as principais funcionalidades e gadgets do Blogger. Quando eu ainda estava aprendendo a blogar, queria a qualquer custo colocar uma imagem na barra lateral, e como não entendia HTML só consegui fazer isto quando descobri este gadget. Então aqui está a dica para os que não conhecem.

Para adicionar uma imagem na barra lateral de seu blog, há dois modos. Um é usando HTML básico, a outra é a que mostraremos aqui. Então, faça o seguinte.

1. Vamos para a página Layout, à partir de seu painel no Blogger.
2. Clique em Adicionar um Gadget.
3. Escolha a opção Imagem, que é como a figura acima mostra.
4. Aí, carregue a imagem que quiser, ponha um link para a imagem no campo Link; ponha uma legenda, se quiser, e um título para o gadget. Clique em Salvar.

Pare para um descanso...

5. Ainda na página Layout, vamos para Editar HTML.
6. Clique em Expandir modelos de widgets.
7. Aí, busque o título do gadget da imagem. Digamos que eu criei um gadget onde carreguei a imagem, coloquei um link na imagem e salvei. O título deste gadget pode ser Imagem. Após achar o nome, veja o código, que será como o abaixo:

<b:widget id='Image1' locked='false' title='Imagem' type='Image'>

<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:link != ""'>
<a expr:href='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
<br/>
<b:if cond='data:caption != ""'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

O trecho do código acima, logo no começo, que marquei com vermelho, é o título do gadget, que você terá achado na tag.
8. Logo abaixo do título, ache o trecho <a expr:href='data:link'> que acima eu marquei em verde, e substitua-o por <a expr:href='data:link' target='_blank'>. A seguir salve as alterações no template, e confira se está funcionando.

Gadget Postagens Recentes

Eu achava que esta ferramenta do Blogger era muito conhecida de todos. No entanto, como recentemente vi que há muitos que não a utilizam simplesmente porque não a conhecem ou não sabem como montar, estou deixando a dica aqui. Não há nada mais fácil do que adicionar este gadget que mostra as últimas postagens publicadas em seu blog. Então, para os que não sabem como fazer, vamos lá.



1. Vamos na página Layout -- Elementos de página de seu blog, à partir do painel do Blogger.
2. Clique em Adicionar um gadget.
3. Na janela pop-up que aparecerá, selecione a opção Feed, que aparece como na imagem abaixo.
4. Após ter clicado em Feed, uma janela como a mostrada na figura abaixo aparecerá. No campo em branco URL do Feed, cole o seguinte endereço: http://mestreblogger.blogspot.com/feeds/posts/default . Substitua o mestreblogger.blogspot.com pelo endereço de seu blog. Por exemplo: meublog.blogspot.com . Então, clique em Continuar.
5. Você será redirecionado para uma janela como a da figura abaixo. Escolha o nome do gadget, quantas postagens deverão aparecer na lista, e clique em Salvar.
Agora está pronto! Você já terá o gadget instalado e funcionando corretamente.

sábado, 29 de novembro de 2008

Quanto tempo falta para o Natal

Um dia destes, achei no site Dynamic Drive o script que dou a seguir, que faz uma contagem regressiva até uma data programada (no caso, o Natal). "Faltam tantos dias, horas, minutos, segundos para o Natal! Após algumas modificações e melhorações no script, resolvi compartilhá-lo aqui no blog. Vejam na barra lateral como ele pode ficar.



Mestre Blogger


Este gadget pode ser adicionado no seu blog sem problema nenhum. Há duas opções. Clique o botão da opção 1 para instalar o gadget automaticamente em seu blog ou copie o código da segunda opção e cole-o em um novo elemento de página em seu blog (HTML/Javascript).

1. Instalar automaticamente:


2. Instalar manualmente:

<table border="1" bordercolor="#ffffff" cellpadding="20">

<tr>
<p></p>
<td bgcolor="#efeefe">
<p></p>
<script src="http://upwpqw.blu.livefilestore.com/y1p9an6lvEK0hzJ0-cQnBLLxeFYcta-aFlf2nHWhNGf_bk3CKWdbO2mQoCKGSfVs7b2tVV5UzINwbc/natal.js?download" language="JavaScript1.2"></script>
<p></p>
<noscript><span onclick="window.open(http://mestreblogger.blogspot.com)">Você deve habilitar javascript em seu computador para ler a mensagem.</span></noscript>
<a href="http://mestreblogger.blogspot.com/" target="_blank">Mestre Blogger</a>
<p></p>
</td>
</tr>
</table>

O script também contém uma opção que avisa o visitante caso ele esteja com o bloqueador de javascript ativado para que ele o desative e possa ver a mensagem. Os trechos mostrados em verde no código acima podem ser modificados de acordo com sua preferência.

Não remova os créditos.

terça-feira, 25 de novembro de 2008

Como montar uma janela pop-up

Bem, anteriormente já havíamos postado algumas dicas sobre as janelas pop-ups em blogs, mas agora tudo vai junto com algumas dicas novas e está mais fácil de acompanhar.

Os pop-ups são estas janelinhas que aparecem automaticamente quando você entra em algum site (se você estiver com o bloqueador de pop-ups desativado) e também ao ser clicados alguns tipos de link. Aqui vamos mostrar os três tipos de pop-up principais.


n° 1 - Modo automático simples

Descrição: Este é o modo simples de pop-up que aparece tão logo carrega o blog em que ele está instalado (automaticamente). Se você tiver o bloqueador de pop-ups ativado eles não funcionarão em seu computador.

Código:

<script language="javascript">window.open('http://url_da_página_pop-up','Info','width=200,height=250,scrollbars=no,resizable=no,status=no,left=100,top=47');
</script>

Modificações no código:

Todos os trechos mostrados em verde no código podem ser modificados de acordo com a sua vontade. Modifique http://url_da_página_pop-up pelo endereço completo da página que deverá abrir como pop-up. Modifique 200 de width=200 pelo tamanho da largura da página e 250 de height=250 pela altura. resizable=no define se a janela será redimensionável. Caso deseje permitir isto, modifique no por yes. Modifique o no de scrollbars=no para yes caso você queira que a janela tenha barras de navegação.


Como adicionar:

Após acessar o painel de sua conta no blogger, vá para a página Layout -- Elementos de página. Selecione Adicionar um gadget e na janela com as opções de gadgets que aparecerá escolha HTML/Javascript. A seguir, cole o código do pop-up no gadget e, após modificar os campos desejados, salve o gadget e visualize o blog. Este código também pode ser adicionado em uma postagem qualquer.


n° 2 - Modo automático avançado

Descrição: Praticamente o mesmo pop-up anterior, porém desta vez o código contém um sistema de cookies que impede que o pop-up abra mais de uma vez na mesma janela. Após ter aparecido uma vez você poderá atualizar a página quantas vezes quiser que o pop-up não será ativado novamente.

Código:

<script>

function openpopup(){
var popurl="http://url_da_página_pop-up"
winpops=window.open(popurl,"","width=200,height=250,")
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
onset = document.cookie.indexOf(search)
if (onset != -1) {
onset += search.length
end = document.cookie.indexOn(";", onset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(onset, end))
}
}
return returnvalue;
}
function loadornot(){
if (get_cookie('poppedup')==''){
openpopup()
document.cookie="poppedup=yes"
}
}
loadornot()
</script>

Modificações no código:

Modifique http://url_da_página_pop-up pelo endereço da página que abrirá em pop-up. Modifique o 200 de width=200 para o tamanho da largura da janela e 250 de height=250 para a altura.

Como adicionar: Siga os mesmos passos do modo anterior.



n° 3 - Modo OnClick
Descrição: A janela a ser aberta é exatamente como a do n° 1, porém ativa-se ao ser clicado um link. Alguns bloqueadores de pop-ups não funcionam com janelas clicadas.

Código:

<a onclick="window.open('http://url_da_página_pop-up','Info','status=yes,scrollbars=yes,resizable=yes,width=200,height=250,left=100,top=47');" href="javascript:void(0)">Texto do link</a>


Modificações no código: As modificações no código também são como as do exemplo n° 1, exceto pelo trecho Texto do link, que você modificará para o texto do link que abrirá a janela. javascript:void(0) é o que aparecerá na barra de status. Não haverá diferença prática modificando-se este último trecho.
Como adicionar: Esta forma de pop-up pode ser adicionada na barra lateral (seguindo-se os passos do exemplo n° 1) ou numa postagem qualquer.



n° 4 Modo OnMouseOver

Descrição: Este modo é quase exatamente igual ao n° 3, sendo que a única diferença é que ele é ativado ao passar-se o mouse sobre o link (onMouseOver), e não ao ser clicado, como no exemplo anterior.

Código:


<a onmouseover="window.open('http://url_da_página_pop-up','Info','status=yes,scrollbars=yes,resizable=yes,width=200,height=250,left=100,top=47');" href="javascript:void(0)">Texto do link</a>


Modificações no código: Modifique tudo como no exemplo n° 3.

Como adicionar: Também este código pode ser adicionado como no n° 3




E aí você tem os principais modos de pop-up. No entanto, quanto ao pop-up automático, lembre-se de não exagerar com isso porque se usado demasiadamente pode incomodar seus visitantes e fazê-los fechar o blog o quanto antes. Também o modo onMouseOver pode ser muito irritante, por isso tome cuidado na sua utilização.

quinta-feira, 20 de novembro de 2008

Caixa de pesquisa de seu blog

O formulário de busca sobre o qual falaremos aqui é o mesmo que aparece na barra do Blogger no topo do blog. No entanto você pode querer ocultar a barra do Blogger ou simplesmente deixar esta busca mais visível adicionando-a num novo elemento de página na barra lateral. O procedimento para isto é bem simples.
1. Entre no painel de sua conta do blogger em http://www.blogger.com/ ou http://www.draft.blogger.com/ .
2. Entre na página de edição de seu blog Layout.
3. Agora, clique Adicionar um Gadget.
4. Nas opções de gadgets para instalar, escolha HTML/Javascript.
5. Então cole neste elemento de página o seguinte código:
<form action="/search">

<input value="partner-pub-8388769928851076:mvc0johxlvb" name="cx" type="hidden"/>
<input value="ISO-8859-1" name="ie" type="hidden"/>
<input name="q" size="28"/>
<input value="Pesquisar" name="sa" type="submit"/>
</form>

Este é o modo mais simples. O campo de busca aparecerá assim:




Agora vamos adicionar o grande efeito que é muito interessante e pouquíssimos blogs tem. Isto será um texto que aponta o lugar onde o visitante deve digitar a busca. Quando clicado em cima, o texto de amostra desaparece. Explicado em palavras é meio difícil de entender. Veja o exemplo abaixo.




Para conseguir o efeito, utilize este código:

<form action="/search">
<input name="cx" type="hidden" />
<input name="ie" type="hidden" />
<input name="q" onblur="if(this.value==''){this.value='Digite sua busca aqui'}" onfocus="if(this.value=='Digite sua busca aqui')this.value=''; "value="Digite sua busca aqui" size="28"/>
<input name="sa" type="submit" value="Pesquisar" /></form>

O trecho que foi adicionado para conseguir o efeito está marcado com fundo cinza. O trecho que você deve modificar está escrito em verde. Agora modifique todos os trechos Digite sua busca aqui pelo texto que aparecerá na caixa. Por ex.: Sua busca aqui... ou Pesquisar blog. Deixe como quiser. Lembre-se de deixar o mesmo texto nos três lugares, como demonstrado acima.

Agora, uma opção adicional. Caso você queira, você pode modificar o botão Pesquisar por uma imagem qualquer. Sim, é isso mesmo! E é bem simples também. Veja no código abaixo:

<form action="/search">
<input name="cx" type="hidden" />
<input name="ie" type="hidden" />
<input name="q" onblur="if(this.value==''){this.value='Digite sua busca aqui'}" onfocus="if(this.value=='Digite sua busca aqui')this.value=''; "value="Digite sua busca aqui" size="28"/>
<input name="sa" type="submit" value="Pesquisar" /></form>

O trecho acima marcado define o botão de enter. Substitua todo o trecho marcado pelo seguinte:

<input type="image" src="http://ra606a.blu.livefilestore.com/y1puZOyb7_6YKWR3s7ODnkSP0k0H8-vfexl0-9rHkE-5CVvWFDMpIVhHYfdLA4zjVYh2ZQNZR-nmrI/bot_9.gif" />

Modifique todo o trecho em verde para o endereço da imagem que servirá de botão. O código deverá, então, aparecer assim:

<form action="/search">
<input name="cx" type="hidden" />
<input name="ie" type="hidden" />
<input name="q" onblur="if(this.value==''){this.value='Digite sua busca aqui'}" onfocus="if(this.value=='Digite sua busca aqui')this.value=''; "value="Digite sua busca aqui" size="28"/>
<input type="image" src="http://ra606a.blu.livefilestore.com/y1puZOyb7_6YKWR3s7ODnkSP0k0H8-vfexl0-9rHkE-5CVvWFDMpIVhHYfdLA4zjVYh2ZQNZR-nmrI/bot_9.gif" /></form>

E a visualização, será esta:





E aí você tem uma bela caixa de pesquisa. Aproveite! :)

domingo, 16 de novembro de 2008

Faça os links abrirem em uma nova aba

Na postagem Editando Links mostramos como montar um link em texto básico e também como fazer os links abrirem em uma nova janela. Ora, na lista de links da barra lateral não é possível fazer os links abrirem em uma nova janela, ao contrário da lista de Blogs (ou BlogRoll) onde isso acontece automaticamente. Anteontem, porém, achei no blog http://htmhelen.helenfernanda.com/ a dica de como fazer isso mexendo no HTML do blog. Vamos lá? É muito fácil!

1. Vá em Layout -- Editar HTML.

2. Clique em Baixar modelo completo. Assim, caso você faça algo errado no modelo de seu blog não há perigo de perder a forma anterior.

3.Marque Expandir modelos de widgets. Qual é o nome da sua lista de links? Meus links, Blogroll, Recomendo… não importa. A lista de links que estou usando como exemplo se chama Favoritos. Procure pelo nome (use as teclas CTRL + F) da sua lista de links no código do seu blog expandido:

<b:widget id='LinkList1' locked='false' title='Favoritos' type='LinkList'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content'> <ul> <b:loop values='data:links' var='link'> <a expr:href='data:link.target'><data:link.name/></a></li>

3. Identifique a tag <a>, como destacado acima e acrescente target='_blank'.

4. Antes da modificação:
 <a expr:href='data:link.target'><data:link.name/></a>

5. Depois da modificação: <a expr:href='data:link.target' target='_blank'><data:link.name/></a>

6. Salve as alterações do modelo e acesse o seu blog. Pronto, está feito! Diga se não foi fácil, hein?

Baseado na postagem original Faça os Links Abrirem em Uma Nova Aba por Helen Fernanda.

terça-feira, 4 de novembro de 2008

Diferenças entre o Draft Blogger e o Blogger

Não muito tempo atrás o google lançou o Draft Blogger (Blogger em Rascunho), uma versão do Blogger só que com diversas opções novas para o blogspot. Abaixo você pode ver algumas destas diferenças.


Compare esta imagem com a de baixo e veja as diferenças da janela CRIAR POSTAGEM nos dois programas.


Também as duas barras de ferramentas para postagem apresentam diferenças. A do Draft Blogger não tem aquela opção para carregar vídeos na postagem, porém tem outras a mais. Veja abaixo a comparação.


Barra de ferramentas do Draft Blogger


Barra de ferramentas do Blogger


Ainda existem outras diferenças. Por exemplo, nas OPÇÕES DE POSTAGEM ou na VISUALIZAÇÃO da postagem, que aparece exatamente como o resultado depois de publicada a postagem, o que não acontece na visualização do Blogger. O Draft Blogger também disponibiliza um gadget que o Blogger ainda não tem: a caixa de busca do Google. Veja como adicioná-la nas figuras abaixo.

Vá na página LAYOUT do Draft Blogger e clique ADICIONAR GADGET nos elementos de página. Selecione a opção CAIXA DE PESQUISA. Depois escolha os detalhes que você quiser e salve as alterações (ver imagens abaixo).


Clique no gadget CAIXA DE PESQUISA


Determine as opções que a caixa deverá ter


Para ter o Draft Blogger como padrão, faça o seguinte:

Acesse http://www.draft.blogger.com/. Caso você não esteja logado, entre com sua conta do blogger (gmail). Marque a opção TORNAR O BLOGGER EM RASCUNHO MEU PAINEL PADRÃO (v. imagem abaixo), e pronto! Agora, quando você entrar no Blogger você será redirecionado para o Draft Blogger. Caso prefira voltar a postar com o modelo antigo desmarque a opção e o padrão voltará a ser o velho Blogger...


Faça do Blogger em Rascunho seu painel padrão!

segunda-feira, 3 de novembro de 2008

Como ocultar os ícones de edição do blog

Recentemente vi numa postagem em um blog de dicas o comentário do autor de que ele não consegue visualizar seu blog como os visitantes normais, estando conectado como administrador do blog, porque os ícones de edição atrapalham o visual do blog, ocupando um espaço maior. (Veja abaixo a visualização diferente)

Ás vezes este probleminha chega a atrapalhar seriamente a visualização de seu blog, e por isso você pode querer removê-lo. Possivelmente você já sabe como fazer isso, mas caso não saiba aí está a dica.

Acesse a página de edição de seu blog LAYOUT. Agora você está na sup-página ELEMENTOS DE PÁGINA. Nesta página você verá o elemento chamado POSTAGENS NO BLOG. Aí você deverá clicar em EDITAR (v. imagem abaixo).

Na janelinha de edição que aparecerá, tire a seleção na opção MOSTRAR EDIÇÃO RÁPIDA e salve as alterações (v. imagem abaixo).

Agora, você pode visualizar seu blog conectado como administrador sem problema!

quinta-feira, 30 de outubro de 2008

Como ocultar um elemento de página

Do mesmo modo que muitas vezes queremos ocultar a navbar do blogger (ver aqui), as vezes seria conveniente que pudessemos ocultar um simples elemento de página (ou gadget), que não mais queremos, mas que pode vir a ser útil depois. Para isso existe um meio muito fácil utilizando-se de códigos CSS. Vejamos como fazer isso em três passos simples.

Digamos que você quer ocultar o gadget de seu Perfil do blogger, na barra lateral. Proceda assim:
  1. Vá para a página LAYOUT -- EDITAR HTML. Agora, procure pelo nome do gadget que você quer ocultar (no caso, o seu Perfil). Por exemplo, "Quem sou eu". Para procurar utilize as teclas CTRL+F e digite o nome, como mostrado na figura abaixo.
  2. Você encontrará o título nesta linha: <b:widget id='Profile1' locked='false' title='Quem sou eu' type='Profile'/>. Então, copie o id do perfil; neste caso, como você vê, o id é Profile1.
  3. Agora busque a tag ]]></b:skin> e cole imediatamente antes dela o código #Profile1 { display:none; }. O resultado ficará algo assim:
    Escondendo um gadget
    Naturalmente, se o gadget a ser oculto for outro você deverá modificar o nome Profile1 para o ID do gadget que você deseja ocultar. Então, salve as alterações e confira o seu blog.

quinta-feira, 11 de setembro de 2008

Informador do número de visitas

Os caros visitantes devem ter reparado que na minha barra lateral do blog há um aviso indicando o número de vezes que eles atualizam a página. Ao contrário dos scripts que contam o número de atualizações em geral, este código mostra a cada visitante as visitas que apenas ele fez. Se o visitante remover os cookies do computador a contagem recomeçará. Para instalar este script em seu blog, vá para a página LAYOUT das opções de edição de seu blog. Escolha ADICIONAR GADGET e na janela com as opções selecione HTML/JAVASCRIPT. Neste elemento de página cole o código abaixo e salve o elemento de página. Visualize o blog. A contagem já terá começado com VOCÊ!

Este é o código: