Colocar uma Caixa Twitter no seu blog(ger)

Já vos falei em post anterior do serviço do Twitter, o @AnyWhere.
Aqui vai mais uma funcionalidade desse serviço, que permite que adicione ao seu blogue (a cada post) uma caixa que permitirá aos seus visitantes, através de um simples clique, fazer o RT de uma mensagem indicando o seu post/blogue.
Vejam como fazer:

Passo 1:

Vá até à página do @AnyWhere e crie uma aplicação. É muito simples, basta fornecer alguns dados do seu blogue, como mostramos na figura abaixo.

Passo 2:

Depois de ter registado a sua aplicação no @AnyWhere, ser-lhe-á fornecido o código (javascript) que deverá introduzir no seu blog(ger)

Passo 3:

De seguida, entre no seu Painel do blogger, edite o seu HTML, e Expanda os seus Widgets

Passo 4:

Procure

</head>

e meta o código javascript que obteve no passo 2., logo acima. Grave o seu Design.


Passo 5:

Procure

<data:post.body/>

e coloque, imediatamente abaixo, o seguinte código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bp_tweetBox'/>
<script type='text/javascript'>
bp_tweet_link=&quot;<data:post.url/>&quot;;
twttr.anywhere(function (T) {
T(&quot;#bp_tweetBox&quot;).tweetBox({
width: 560,
label: &quot;Partilhe este post - Clique no botão Tweet abaixo. Grato.&quot;,
defaultContent: &quot;RT @luisj <data:post.title/>&quot;+&quot; &quot;+bp_tweet_link
});
});
</script>
</b:if>

Grave o seu Design.

Veja se funcionou!
Abraços.

Expandir (Short) Links em Sites/Blogues

Os compressores de links permitem reduzir o tamanho de certos links enormes. Sobretudo no Twitter, mas não só, são de grande utilidade.
Em muitas páginas são também utilizadas com a propósito por razões práticas e estéticas.
Tudo bem.
Só que, com o tudo, há um reverso da medalha. Olhando para eles, não fazemos a mínima ideia onde nos vão conduzir. Só clicando sabemos a que página correspondem.
Normalmente não há qualquer problema, mas já tem acontecido ser conduzido a sites de conteúdos sexuais explícitos, páginas com malware, páginas sem qualquer relevância para o assunto, etc.
Para evitar essas dúvidas ou suspeitas sobre os seus links comprimidos, sempre que os coloque, por qualquer motivo, pode agora usar o hack seguinte, que permite que ponha no seu blog um botão cuja função é descomprimir/expandir o short link para o link "normal" correspondente.
Assim, os visitantes do seu blog ficarão mais descansados.
No caso de ser você a navegar numa página em que a desconfiança seja da sua parte, existe também um link/botão que pode adicionar à sua barra de ferramentas e em que pode clicar quando visita qualquer página e desconfia dos short links aí presentes. Bastará então clicar nesse botão na barra de ferramentas do seu browser e todos os short links dessa página serão transformados nos links verdadeiros.

Vamos então vercomo se faz.

1. Uma demonstração

http://tinyurl.com/39t6ox5

Home Page

Slashdot

tinyurl.com/2gwyv



Clique no botão acima e verá, após refresh da página, os links reais para onde será conduzido, em vez dos short links que apareciam anteriormente na página. No caso em que os links correspondem a uma palavra/frase (ex: Slashdot) bastará colocar o rato sobre esse link para ver a página de destino na barra ao fundo do seu ecran.
O que acontece com os outros também, aliás.

2. Se quiser colocar um destes botões no seu site, basta colocar o seguinte código:

<input type="button" value="Embiggen" onclick='Embiggen={"runNow":true}; var s=document.createElement("script"); s.type="text/javascript"; s.src="http://ghill.customer.netspace.net.au/embiggen/embiggen.js"; document.getElementsByTagName("head")[0].appendChild(s);'></input>

3. Se pretender ter um botão na sua barra de ferramentas do browser, para poder expandir os short links de qualquer página em que navegue, clique e arraste o link seguinte para a sua barra de ferramentas/bookmarks, e ficará pronto para poder fazer isso no futuro.

Expandir

Fica assim:

Efeito Peek-A-Boo a partir das Etiquetas dos posts

Mais um efeito espectacular.

Quando clica numa etiqueta do seu blogue, aquelas etiquetas/tags com que classifica os seus posts consoante o assunto dos mesmos, os resultados são apresentados numa página, aparecendo os posts completos. Se houver muitos com essa etiqueta, a primeira página apresentará uns quantos e, no fundo, o link para ver os mais antigos. As usual...

Com este hack poderá apresentar nessa página de resultados, não os posts completos, mas apenas o título de cada um, ordenados por data, e um símbolo ao lado de cada título [+/-], símbolo este que, quando clicado, lhe expandirá e mostrará o post completo. Quando quiser, clica novamente no símbolo e o post contrair-se-á novamente, podendo então clicar, da mesma forma, no símbolo de outro post e assim examiná-lo facilmente.

É um efeito espectacular e que, quando há muitos resultados de posts com a mesma etiqueta, nos ajuda muito a examinar o conteúdo de vários posts rapidamente, pois muitas vezes, apenas pelo título, não conseguimos saber se nos interessa, isto é o seu conteúdo.

Mas a conversa já vai longa e mais do que mil palavras as imagens que se seguem são completamente elucidativas.

Depois das imagens segue-se a explicação de como podem aplicar este efeito nos vosso blogues.

1. Ecrã com lista, contraída, de posts (títulos) para tag/label/etiqueta "Blogger Hacks"



2. Ecrã depois de expandido o primeiro post da lista (efeito peek-a-boo), após clicar no símbolo [+/-] que aparece ao lado esquerdo do título de cada post.



3. Ecrã depois de expandido o segundo post da lista (antes contraí/colapsei) o anterior.



Criação do Efeito:



Passo 1:

Abra, no seu blogue, Painel >> Esquema >> Editar HTML >> Expandir templates do widget
Logo a seguir ao início do cabeçalho do seu blog (tag <head>), coloque o seguinte código:

<script type='text/javascript'>
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
</script>

Passo 2:

Procure no código do seu blogue, a seguinte parte:

<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Antes dele adicione o seguinte código

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>

Passo 3:

Procure:

<b:include data='post' name='post'/>

Antes dele insira

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>

Passo 4:

Procure (2ª instâmcia deste o início do html do blogue, uma vez que no passo anterior colocámos outra instância, como pode constatar):

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>

Depois dele insira:

</b:if>

Não se esqueça que, antes de mexer no seu HTML, é conveniente gravar o seu template, podendo assim reverter todas as alterações no caso de algo correr mal.

Boa sorte!

Correr Javascript no corpo dos seus posts Blogger

Uma das dificuldades com que me tenho debatido desde o início deste blog é fazer correr Javascripts dentro dos posts.
Parece que o Blogger não o permite, embora na barra lateral, como widget, não exista qualquer problema.
Parece que foi desta que descobri a solução, graças a um post colocado neste blog e que agora irei traduzir a adaptar.

Se colocar o código seguinte no interior de um post, nada acontecerá pois o script não correrá.

<a onclick=javascript:showMessage() href="#" >Teste</a>
<script language="JavaScript">
function showMessage()
{
alert("Está a funcionar no post?");
}
</script>

Mas se colocar o mesmo script na forma seguinte, funcionará.

<a onclick="alert('Isto Funciona')" href="#" >Teste</a>

Em conclusão: se colocar o código dentro de aspas ("") funciona.
Mas esta não é uma solução satisfatória pois pode querer usar e reutilizar uma função de Javascript (por exemplo a função showMessage(), isto é, que ela seja chamada de vários pontos do post e aqui, com as funções Javascript, não há maneira de colocá-las entre aspas.

Por outro lado se você colocar o seu código de Javascript num ficheiro .js, depois fizer o upload desse ficheiro para um servidor na web e, finalmente, no seu post fizer a sua chamada, tudo funcionará:

<script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript">
</script>

Esta é uma boa solução e deve ser por ela que vou optar.
Todavia, muitas pessoas não têm servidores na web disponíveis (bem, há montes deles de acesso gratuito) ou não estão para se chatear com isso.

Então existe um outro modo:
Examine o código html do seu blog e reparei no seguinte:

<script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript">
</script>

Há aqui um problema. Nas novas linhas. Cada vez que você começa a escrever numa outra linha o editor do blogger adiciona a tag <br />
E é por causa desta tag que o browser não consegue executar o Javascript.

Então a correcção para o problema deve ser algo como:

Test

Para funcionar bem nos posts do blogger, o Javascript deve ser todo escrito numa única linha.

Eis um exemplo que funciona (clique na palavra Teste para confirmar)

Teste

Tags: recursos blogger, blogger, Blogger Hacks, Blogger Tweaks, javascript, dicas blogger

Widget para exibição de posts aleatórios (com excerto)

Quando o nosso blog começa a ficar com muitos posts é cada vez mais improvável que as pessoas que o visitam tenham acesso fácil a esses posts.
Este widget é uma maneira de ultrapassar, em certa medida, esse facto.
Ele vai exibindo um post antigo, de forma aleatória, a cada 5 segundos, um dos posts antigos do seu blog, permitindo assim que a atenção dos visitantes seja, eventualmente, captada para um desse posts cuja visualização seja do seu interesse.
Pode colocá-lo onde bem entender: a seguir ao header, a seguir ao espaço dos posts, no footer, na barra lateral, etc.
No meu caso experimentei colocá-lo a seguir ao header e podem ver que funcionou, conforme mostra a figura abaixo.
Apenas não o deixei ficar porque ele interfere com o outro que lá tenho (ambos provêm do google feeds), pelo que tive de optar.
No entanto, pode vê-lo em acção neste meu outro blog, logo a seguir ao cabeçalho.
Vocês escolherão o que mais lhes agradar.




O widget, como podem ver acima, possui as seguintes características:
1. Mostra o título de um post de cada vez
2. Linka para esse post
3. Mostra um excerto do post também.
4. A cada 5 segundos mostra um outro post
5. Percorre todos os posts do seu blog de uma forma cíclica
6. Começa um novo ciclo no fim da lista
7. Uma vez carregado continua a executar o ciclo mesmo quando você não está online
8. Usa tecnologia AJAX oficial
9. Funciona noutras plataformas que não o blogger (não testado)
9. Se colocarmos o ponteiro do rato sobre o título a rotação pára

Vamos então explicitar os passos a realizar para pormos em funcionamento este útil widget:

1. Faça o login no blogger.com
2. Clique na Tab "Esquema" no seu Painel
3. Clique no link "Adicionar Aplicação" situado na barra lateral na subtab "Elementos de Página" e depois clique em Html/Javascript
4. Na janela de pop-up que se abre faça scroll para baixo e depois clique em Html/Javascript
5. Na janela de conteúdos, copie para ela o código abaixo, depois de o ter modificado de acordo com as indicações que vamos dar.

  

  
Loading...
  
Gadget by The Blog Doctor.

Relativamente ao código acima faça as seguintes alterações:

    function showGadget() {
      var feeds = [
       {title:'title',
        url:'http://MEU_BLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
       
       ];

      new GFdynamicFeedControl(feeds, 'feedGadget',
                               {numResults : 1000, stacked : true,
                               title: "BLOG_TITULO ~ Random Posts."});
    }

Altere "MEU_BLOG" para o seu subdomínio real e "TITULO_BLOG" para o título real do seu blog.
Depois cole o código, já modificado, na janela pop-up (Html) e Guarde/Grave.

Obtenha AQUI a sua chave API AJAX e coloque-a no código acima, no local onde diz 'PONHA_AQUI_A_SUA_CHAVE_AJAX'

Finalmente, clique e arraste a Aplicação que criou na barra lateral para o local que mais desejar (acima da zona dos posts, abaixo da zona dos posts, etc.).
Isto porque, como já acima dissemos, a largura e função do widget adequa-se mais a áreas mais largas do layout do seu blog e não à barra lateral. Mas também pode experimentar deixar na barra lateral e ver se gosta ou não.

Agradecimentos para blogdoctor.

Tags: widgets, web 2.0, blogger, Blogger Hacks, Blogger Tweaks, recursos blogger

Colocar texto ao redor das imagens nos posts do blogger

Uma coisa que pode ser interessante no nosso blog é ter a possibilidade de fazer rodear de texto as imagens que colocamos nos nossos posts do blog(ger).

Como sabem, quando inserimos imagens nos posts, o blogger encarrega-se de as centrar e apenas podemos ter texto acima ou abaixo delas, ficando sempre um espaço em branco nas zonas laterais dessa imagem.
Esse "contratempo" pode ser ultrapassado agindo do seguinte modo:

Passo 1:

- Edite o HTML do seu blog;
- Localize a zona CSS da sua folha de estilos;
- Copie o seguinte código para lá, por exemplo logo abaixo da secção de posts.

    /*Wrap text around image
    .left {
    float: left;
    margin: 3px;
    }

    .right {
    float: right;
    margin: 3px;
    }

Passo 2:

Para qualquer imagem da internet, ou sua que tenha alojado na internet, que queira inserir, faria algo do tipo

Então adicione apenas a tag class="right" ou class="left", ficando com

Colocando essa tag class="right", a imagem flutuará para a direita e o texto rodea-la-à à sua esquerda... e vice-versa, naturalmente.

Só uma nota final.
Se quiser aplicar esta dica, sempre que quiser inserir uma imagem seguindo estes passos, deve inserir-la com a janela onde escreve o seu post em "Editar Html" e não "Redigir".
Experimente e boa sorte!

NOTA: Esta é mais uma dica patrocinada por BlogU

Tags: dicas blogger, blogger, Blogger Hacks, Blogger Tweaks, recursos blogger, texto redor imagens, imagens

Tab Menu para o cabeçalho do seu blogger

Já viram que acrescentei um "Tab Menu" no cabeçalho do meu blog.
Para quem queira fazer o mesmo vou passar a descrever os passos que deve executar.




1. Abram o Painel >> Esquema >> Editar HTML.

Localizem, na zona do CSS (entre ) e adicionem o código seguinte.
Um bom sítio para o colocarem é depois de terminada a secção do Header da vossa folha de estilo CSS, mas pode ser noutro local da zona CSS:

/*credits : http://blogger-freetemplates.blogspot.com , HariesDesign.com*/
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background:url("LEFT IMAGE") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background:url("RIGHT IMAGE") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

Grave o seu Esquema.

2. Ainda no seu HTML encontre:

maxwidgets='1' showaddelement='no'>
title='your blog title (Header)' type='Header'/>

e substitua-o por:

maxwidgets='2' showaddelement='yes'>
title='your blog title (Header)' type='Header'/>

Grave o seu Esquema.
Abra a página dos seus "Elementos de Página" do seu Esquema.
Constate que agora tem a opção de adicionar um elemento de página na sua secção de Cabeçalho. É mesmo o que se pretende para podermos adicionar o nosso Tab Menu, que depois pode colocar acima ou abaixo do Cabeçalho.

Clique em Adicionar Elemento de Página e ponha o código seguinte na janela de pop-up que abre, substituindo os meus links pelos seus:

Home

Livros/Discos
Twitter 
Expansíveis
Artigos
Adsense

Grave.

Quanto ao código estamos conversados. Vamos agora à parte gráfica:


3. Gráficos / Imagens

Vá a Tab Menu Set 1
ou a Tab Menu Set 2

e veja se lhe agrada algum conjunto.
Em caso afirmativo, faça o download do conjunto / set onde se encontra o Tab Menu que mais gostou, aqui:

Conjunto 1
Conjunto 2

Vai precisar de fazer o upload das imagens que mais gostar para o seu servidor ou para um gratuito qualquer.
Depois desse upload é só substituir LEFT IMAGE e RIGHT IMAGE pelos URLs onde colocou as suas imagens, no código acima.

É tudo.

Se houver alguma dificuldade coloquem a questão nos comentários ou enviem-me um email directo, que eu prometo ajudar.

Boa sorte.

Tags: Tab Menu, blogger, blogger hacks, blogger tweaks, recursos blogger

Google Books: nova funcionalidade e Widget (com screencast)

A Google não pára e desta vez apresenta-nos uma funcionalidade muito útil para todos os leitores compulsivos e detentores de grandes (ou pequenas) bibliotecas: a possibilidade de criarem uma base de dados dos vossos livros e partilharem-na online.
E tudo de uma forma muito fácil pois basta fazer uma pesquisa do livro ou escreverem o respectivo ISBN e com um único clique adicionarem o livro/item à base de dados, havendo ainda a possibilidade de os classificarem de uma a cinco estrelas e escreverem uma crítica ou descrição do mesmo.
Como não há bela sem senão, tudo é perfeito mas... se formos americanos ou ingleses, pois a base de dados/busca/ISBN disponibiliza muito poucos livros de outras origens. já encontrei alguns brasileiros, mas é tudo. Admito que haja alguns portugueses, mas a dúvida mantém-se.

Primeiro farei a apresentação via escrita e imagens de como se:
1 - Usa o Google Books para criar a sua biblioteca online
2 - Criar um Widget com essa sua lista de livros criada no Google Books e colocá-lo no seu blog(ger)
No fim apresento um vídeo screencast a explicar todos os (mesmos) passos a percorrer.



No meu caso, como possuo algumas dezenas de livros em inglês vou aproveitar esta funcionalidade. Para já, iniciei o processo com dois ou três livros mas irei adicionar vários outros. E no futuro, pode ser que esta funcionalidade se estenda a Portugal. Fiquem atentos!
Podem ver a minha base de dados aqui.

Depois de terem criado a vossa lista de livros/biblioteca online poderão criar um widget para colocar no vosso site/blog, widget esse disponibilizado pelo blog Beatiful Beta.

Mas vamos ver como se faz:



A- Criação da Lista de Livros / Biblioteca

1. Vá a Google Books
2. Crie a sua biblioteca
Basta fazer o login com a sua conta Google (a mesma do seu gmail e/ou blogger)
3. Seleccione "mais" da barra de menus na página principal. Isso fará abrir uma janela pop-up onde deve seleccionar "livros"
4. Será conduzido à página dos livros onde poderá começar a adicionar livros à sua biblioteca através de "importar de livros", digitando o respectivo ISBN. Pode adicionar logo uma lista de uma vez só.
5. Volte à página da biblioteca (clique em "A Minha Biblioteca") e ver a sua lista de livros antes adicionada.
Aí pode classificar cada um dos livros de uma a cinco estrelas, escrever comentários, recensões, descrições ou críticas em cada um dos livros

B. Criação do Widget

1. Obtenha o URL da sua Biblioteca anteriormente criada no Google Books
Vá à página da sua Biblioteca Google Books, seleccione o endereço que aparece na barra de endereços, dando um clique da direita do rato e seleccionado "Copiar".

2. Criação do Widget no Yahoo Pipes



Clique no link. No campo de entrada cole o URL que acabou de copiar no passo anterior.
Clique no botão "Run Pipe".
A sua biblioteca será resgatada e mostrada como uma lista de títulos e descrições.
Se estiver tudo como esperava siga para o próximo passo.




3. Adicionar o Widget ao seu Blog
Clique em "Get as Badge", o que o levará à página de configuração do Widget, onde poderá proceder às configurações que desejar, designadamente o tipo e tamanho para o seu Widget, entre outras coisas.




No campo de entrada cole de novo o URL da sua página de Biblioteca Google Books e clique em "Next".




Isto levá-lo-à ao seu conhecido ecrã do Blogger, onde pode seleccionar o Blog e escrever o título do seu novo "Elemento de Página".
Clique em "Add Widget" e veja o seu blog...



SCREENCAST

Screencasts and videos online

Tags: google, widgets, recursos blogger, Blogger Hacks, Blogger Tweaks, livros, google API

Alargar a área dos posts

Bom, os mais atentos já devem ter reparado que fiz aqui umas pequenas alterações ao layout do meu blog.
Umas das coisas que fiz foi alargar a área dos posts.
Se quisrem fazer o mesmo no vosso blog(ger), sigam-me.




É muito simples.
Como bom estudante "universitário blogger" esta dica é mais uma que paga direitos de autor ao BlogU, mais particularmente à sua simpática editora, anniebluesky.
Então vamos lá:

1. Encontrar um pedaço de código que seja parecido com o seguinte (os valores podem ser diferentes):

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

2. Substituir o valor de Width a vosso gosto (neste exemplo aumentei 200 px):

#outer-wrapper {
width: 860px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 610px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Thst's it!

Tags: dicas blogger, recursos blogger, Blogger Hacks, Blogger Tweaks, css, layout blogger

Blogroll em Ajax - Animado -

A lista de blogs que seguimos, vulgarmente denominada de "blogroll" é uma constante na maioria dos blogs/sites. Geralmente essa lista é estática.
Não é o que acontece com o exemplar que podem ver no rodapé deste meu blog, que apresenta efeitos dinâmicos muito atractivos.
Trata-se de mais um "freebie" do Hoctro's Place, e vou aqui tentar explicar como o podem incorporar nos vosso blog.




1. Obtenha a sua "API key" do google aqui:
http://code.google.com/apis/ajaxfeeds/signup.html

2. Adicione um "Elemento de Página" / "Miniaplicação" do tipo "HTML/Javascript" no seu blog, a partir do seu "Esquema".



Pode adicioná-lo logo na localização que pretenda que ele fique, mas isso não é crucial uma vez que, como sabe, o poderá depois mudar de sítio no seu layout, por simples "Clique e arrastamento"

Coloque o código seguinte imediatamente antes da tag

</head>

depois de a localizar no código html do seu blog, não se esquecendo de colocar a sua "API key" do Google no local apropriado deste código

<script src='http://www.google.com/jsapi/?key=YOUR-KEY' type='text/javascript'/>
<script src='http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js' type='text/javascript'/>

<style type='text/css'>
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");

#feedControl {
margin-top : 20px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 16px;
}
.gfg-title {
color : #612e00;
background-color: #FFF3DB;
}
.gfg-title a {
color : #612e00;
}
.gfg-root {
border: 1px solid #956839;
font-family: "Georgia", sans-serif;

}
</style>

3. Adicione o código seguinte à "Miniaplicação" que criou no passo 2

<b:widget id='BlogList2' locked='false' title='' type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<div id='blog-list-title'>
<h2 class='title'><data:title/></h2>
</div>
</b:if>
<div id='bl2008'>Loading ...</div><br/><br/>
<h6>Widget by <u><a href='http://hoctro.blogspot.com/2008/10/showing-your-blog-list-as-ajax-feed.html'>Hoctro</a></u></h6>
<div class='widget-content'>
<script type='text/javascript'>
<!-- *****************http://hoctro.blogspot.com*****Oct,2008********** -->
<!-- *************Blog List as Feed Widget by Hoctro- Take One******* -->
var feedArray = new Array();
var feedName;
var feedUrl;

<b:loop values='data:items' var='item'>
feedName = "<data:item.blogTitle/>";
feedArray.push(feedName);

feedUrl = "<data:item.blogUrl/>";
var string_b = "blogspot.com";
var iof_b = feedUrl.indexOf( string_b );
if( iof_b != -1 )
feedUrl = "<data:item.blogUrl/>feeds/posts/default";

feedArray.push(feedUrl);
</b:loop>

// Handcode external blog feeds such as Wordpress' here, in two lines of code
// First is the name inside the quote, i.e., feedArray.push("ThemeLib");
// then the url, i.e., feedArray.push("http://feedproxy.google.com/Themelib");
//feedArray.push("ThemeLib");
//feedArray.push("http://feedproxy.google.com/Themelib");

function blogList2008() {
new GFdynamicFeedControl(feedArray, 'bl2008',
{stacked : true, numResults : 3,
title : 'My Blog List', displayTime : 7500});
}

google.load("feeds", "1");
google.setOnLoadCallback(blogList2008);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4. Vá a Layout/page elements e clique em Editar no widget que criou e clique depois em "Adicionar à lista"



Agora é só ir adicionando, através do respectivo URL, os blogs que pretende que façam parte da sua lista de blogs
Irá obter algo parecido com
E pode ver este widget no meu blog, em funcionamento no rodapé deste blog.
Happy Christmas.

Tags: widgets, Blogger Hacks, Blogger Tweaks, blog rolling, blogger, recursos blogger

Assinar posts com fonte de 'escrita manual' (com screencast)

Caso pretendam assinar os vossos posts usando uma fonte que origine uma assinatura digital que se pareça com uma assinatura manual, sigam os seguintes passos:



Passo 1: "Escrever" a assinatura
Como em ambiente web 2.0 tudo hoje se faz online, vão até este site e façam um bocadinho de scroll para baixo.
Pronto, têm aí a aplicação online onde podem brincar um pouco, alterando os parâmetros a vosso gosto até obterem uma assinatura vossa que vos satisfaça.

Para cada experiência que queiram fazer, cliquem no botão "Preview" que vos conduzirá a uma nova página em que mostra como fica a assinatura e vos permite até enviarem uma mensagem de email a quem quiserem, "devidamente assinada".


Passo 2: Recolher a (imagem) da assinatura
A seguir, usando um programa de captura de écran (penso que o próprio PrintScreen do teclado dá) façam a captura da vossa assinatura.
No meu caso uso o Printkeyy200, que pode ser recolhido gratuitamente aqui
Este programa permite fazer logo o corte/crop à medida da assinatura (ponto pequeno, portanto).



Passo 3: Colocar a imagem num servidor
Coloquem a imagem que capturaram num servidor hospedeiro de ficheiros, tal como o Google Page Creator, o Windows Live Drive, ou outro qualquer.

Passo 4: Colocar a assinatura nos vossos posts
Finalmente, vão ao vosso Painel de Controlo do blogger
>> Esquema >> Editar HTML
e procurem pela seguinte linha de código:
<p><data:post.body/></p>
(Vejam na imagem abaixo melhor, onde podem ver o endereço da imagem da minha assinatura. No meu caso coloquei também um link na imagem para me enviarem uma mensagem de email quando clicam na assinatura, mas podem deixar apenas a imagem, sem link).




Podem também ver todo o processo no seguinte Screencast:

Tags: screencast, assinatura de posts, fontes, web 2.0, Blogger Hacks, Blogger Tweaks, blogger, assinatura manual de posts, assinatura digital de posts, dicas blogger

Anúncios Google dentro dos posts (com screencast)

Como sabem o Blogger não permite a inserção de scripts no corpo de um post (apenas o permite nas barras laterais e rodapé). Assim, torna-se difícil inserir, no corpo de cada post, os ditos anúncios uma vez que eles são constituídos precisamente por um script.
No entanto há maneira de dar a volta a esta limitação.
Vejamos como:

A única maneira de inserir anúncios na zona dos posts é inserindo um widget prédefinido pelo Blogger. No entanto esse widget limita-nos bastante as opções de colocação pois apenas permite a inserção entre os posts e não no seu interior.

Se preferir colocar os seus anúncios no interior (início) do texto dos seus posts faça ao seguinte:

1. Grave o seu Esquema/Template
de modo a poder evitar catástrofes se algo correr mal.

2. Copie o código (script) do seu anúncio, que obteve na página do Google Adsense, para a aplicação Bloco de Notas / Notepad


3. Use a função Replace All do notepad para substituir todas as ocorrências de
< por < e > por >



4. Procure pelo código
<div class='post-body...'> e insira o código do seu anúncio, depois de alterado, abaixo desse código.



E é isso.
Neste caso o anúncio aparecerá na zona central da sua zona de posts, logo a seguir ao título do post, como acontece no meu blog.
No caso da página frontal (home) do blog, aparecerá um anúncio nos três primeiros posts, pois a Google limita a apresentação de anúncios em cada página a esse número.
Se pretender que o anúncio apareça encostado à direita (e a seu lado texto do post)
terá de, entre os passos 3 e 4 criar uma classe CSS na sua zona de CSS do códifo html do seu blog (fica na zona inicial):

/* Posts
———————————————– */
#post-left {
float: left;
margin-right: 5px;
}

Neste caso o anúncio fica encostado ao lado esquerdo e o texto do seu post começa a ser colocado à direita do anúncio (se este não ocupar toda a largura da zona de posts). Óbvio que pode fazer ao contrário.
Neste caso terá de colocar o seu script do anúncio entre uma div id='post-left'

Vamos ver agora o screencast completo, que se poderá tornar mais esclarecedor:

Free online screencasting tool

Boa sorte!

Tags: google, Adsense, google adsense, anúncios, Blogger Tweaks, Blogger Hacks, dicas blogger, recursos blogger

Top de Comentadores do seu blog

Não é que o meu blog tenha muitos comentários (infelizmente) mas existem caso em que este widget que aqui vos apresento se pode revelar de grande utilidade.
Trata-se de um widget que podem colocar na vossa barra lateral e que apresenta, de forma automática, por ordem decrescente, os visitantes que mais comentários fizeram no respectivo blog. A lista baseia-se nos 500 últimos comentários e o vosso nome pode aparecer nela ou não, dependendo da configuração que fizerem na filtragem do vosso nome.
Como é habitual, vou inseri-lo na minha barra lateral, permanentemente visível, sendo que posteriormente o passarei para rol dos expansíveis/colapsáveis, que aparece também na barra lateral mas que requer um click extra para ser visível.
Mas vamos à prática:


Para instalar este widget no seu blog basta:
. Alterar o título a seu gosto;
. Alterar o URL para o URL do seu blog.
Se o seu blog tiver um URL blogspot basta-lhe digitar:

onomedoseublog.blogspot.com

Se usar um domínio personalizado, simplesmente digite o URL correspondente.
Em ambos os casos não digite a parte "http://".
Se quiser remover o seu nome da lista de Top Comentadores digite o seu nome na caixa "Filtre o seu nome".
Use o formulário abaixo para adicionar o Widget ao seu blogger:

Boa sorte!
Nota: Este widget foi baseado em:
http://www.bloggerbuster.com/2008/03/top-commenters-widget-for-blogger-blogs.html

Tags: web 2.0, widgets, comentários com links, Top Comentadores, recursos blogger, blogger, Blogger Hacks, Blogger Tweaks

Como construir um mini blog na sua barra lateral

Por vezes temos pequenos posts para colocar que, por qualquer motivo, não configuram um post normal do nosso blog. Por exemplo uma pequena mensagem, um link que queiramos divulgar, etc. À boa maneira do Twitter, podemos criar um mini blog na nossa barra lateral para os posts que cumpram este desiderato. Vejamos como:


1. Gravar o seu modelo actual no seu PC
Atenção:
Antes de tudo grave o seu o seu Modelo pois se algo correr mal poderá assim repor a situação anterior.
Para o fazer é Painel >>Esquema >>Editar HTML e depois clicar no link a azul "Transferir modelo completo" e o seu modelo será transferido / download para o seu PC. Se mais tarde quiser repor a situação deverá
Carregar um modelo a partir de um ficheiro no seu disco rígido, como indicado na linha abaixo do tal link azul que falei.

2. Editar a zona de 'loop' dos seus posts
Vá ao seu Painel >>Esquema >>Editar HTML e marque a caixa "Expandir modelos do Widget"

Procure <!-- posts --> e encontrará uma coisa deste tipo:

<!-- posts -->
 <div class='blog-posts hfeed'>

   <b:include data='top' name='status-message'/>

   <data:adStart/>
   <b:loop values='data:posts' var='post'>

     <b:if cond='data:post.dateHeader'>
       <h4 class='date-header'><data:post.dateHeader/></h4>
     </b:if>
     <b:include data='post' name='post'/>
     <b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
<b:include data='post' name='comment-form'/>
<div id='backlinks-container'>
   <div expr:id='data:widget.instanceId + "_backlinks-container"'>
      <b:if cond='data:post.showBacklinks'>
        <b:include data='post' name='backlinks'/>
      </b:if>
   </div>

Substitua todo o seu código por este abaixo:

<!-- posts -->
 <div class='blog-posts hfeed'>

   <b:include data='top' name='status-message'/>

   <data:adStart/>
 <b:loop values='data:posts' var='post'>
   <b:if cond='data:post.labels'>
     <b:loop values='data:post.labels' var='label'>
     <b:if cond='data:label.isLast == "true"'>
       <b:if cond='data:label.name != "Sideblog"'>
     <b:include data='post' name='post'/>
     <b:if cond='data:blog.pageType == "item"'>
       <b:include data='post' name='comments'/>
     </b:if>
     <b:if cond='data:post.includeAd'>
       <data:adEnd/>
       <data:adCode/>
       <data:adStart/>
     </b:if>
     </b:if>
     </b:if>
     </b:loop>
   </b:if>
 </b:loop>
   <data:adEnd/>
 </div>

Grave o seu Modelo

3. Adicionar um Widget onde irá aparecer o seu mini blog de barra lateral
A maneira mais simples é através do Feedburner. Se não tem uma conta vá ao site e crie uma.
Depois crie um feed a partir do seguinte endereço:
http://oseublog.blogspot.com/feeds/posts/default/-/Sideblog
Em que, obviamente, "oseublog" será o verdadeiro nome do seu blog.
De seguida use o código do widget BuzzBoost (está em Publicize >> BuzzBoost) do Feedburner e coloque esse código num widget do seu blogger que criará (do tipo HTML/JavaScript). Esse widget poderá depois colocá-lo, por simples arrasto no local da sua barra lateral que quiser.

Atenção:
Deve notar que para que tudo isto funcione deverá aplicar a label / etiqueta "Sideblog" em todos os seus mini-posts que queira ver aparecer no seu mini-blog da barra lateral e não como post normal.

Vejam o meu em acção na barra lateral. Mais tarde será possível que o incorpore na zona de Expansíveis e Colapsáveis, pelo que se está a ler este post muito depois da sua data de criação, procure essa área de Expansíveis/Colapsáveis e expanda o mini-blog para o ver.

Boa sorte!

Tags: miniblog, barra lateral, sidebar, Blogger Hacks, Blogger Tweaks, dicas blogger, recursos blogger

Efeito de neve no seu blog

Agora que a época natalícia se aproxima e que o tempo frio aperta, dar uma marca alusiva à quadra já não é problema.
Este bonito efeito (flocos de neve a caírem pelas páginas do seu blog abaixo) que já incorporei nos meus blogs, incluindo este, pode ser facilmente colocado no seu blog, desde que a plataforma que utiliza seja a blogger (.../blogspot.com).
Para tal basta clicar no botão abaixo e, depois, autorizar a incorporação deste widget através de mais um único clique.
Cortesia do BloggerBuster.
Grazie!

Tags: efeitos, dicas blogger, widgets, Blogger Hacks, Blogger Tweaks, blogger

Eliminar - Subscrever: Mensagens (Atom)

Quando criamos o nosso próprio feed a partir de um serviço mais profissional, flexível e completo, como o Feedburner, por exemplo, para que os nossos visitantes possam seguir as nossas actividades descansadamente no seu leitor de feeds ou através de alertas por email, visitando assim o nosso site apenas quando algum tópico/post lhes interessa, normalmente pretendemos eliminar a mensagem/link que o blogger proporciona:
Subscrever: Mensagens (Atom) ou Subscribe: to posts (Atom) se estiverem com o vosso painel em inglês.


Isso é muito simples:

1. Vão ao vosso painel >> cliquem no separador "Esquema" >> cliquem no link "edit HTML"
2. Cliquem na caixa "Expandir modelos do Widget"
3. Procurem o seguinte código:

  <b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
  <b:if cond='data:feedLinks'>
  <div class='blog-feeds'>
  <b:include data='feedLinks' name='feedLinksBody'/>
  </div>
  </b:if>

4. Removam esta linha:

<b:include data='feedLinks' name='feedLinksBody'/>

That's all.

Tags: dicas blogger, blogger, Blogger Hacks, Blogger Tweaks