Posts Relacionados com Imagens Miniatura (Thumbnails) - Widget para Blogger -

Se abrirem um qualquer post deste blogue e forem lá abaixo, quase ao fundo da página, poderão ver o novo widget que agora vou explanar: a forma de inserir, no final de cada post, um conjunto de links para posts relacionados com aquele que estão a ler. A novidade aqui é que esses links são acompanhados de uma imagem miniatura/thumbnail, retirada precisamente do post em questão (o relacionado).

É muito simples e de belo efeito.

Passo 1:

Inicie a sua sessão no blogger
Vá para o seu Painel
Clique no separador Design
Clique em editar HTML
Marque a caixa Expanda os Widgets do Template

Passo 2: 

Procure, no código do seu blog, o seguinte:

</head>

Depois, substitua-o pelo seguinte código:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAKoTchZMTegkmIbq5R1ALuRKH_MpSPhcxTlTIx1hxHOuFkrcSOqayvK100OYEAx6K-irUyhrT57iyxmiERYSBUpdBJg6Y4jREjCpm6vOPHPoQxeo2r6WZaMsFO2jQFPvZybkifOI_NWM/s400/noimage.png";
var maxresults=6;
var splittercolor="#d4eaf2";
var relatedpoststitle="Posts Relacionados";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

Passo 3:

A seguir, procure:

<div class='post-footer-line post-footer-line-1'>

Se não encontrar, procure:

<p class='post-footer-line post-footer-line-1'>

Passo 4:

Qualquer que tenha sido o que encontrou, imediatamente a seguir a essa parte de código, ponha esta:

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

E é isso. Deverá resultar. Comigo resultou.

No caso de surgir algum problema, reporte nos comentários, pf.

Widget: Recomendações Facebook

Um interessante widget para colocarmos na barra lateral do nosso blog(ger).
As dimensões, tipo de letra, cor da border, etc., são configuráveis.
Pode obtê-lo, num minuto, aqui.
Make your opinion!

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

Alterar o Script de Comentários do Plural para o Singular

Já devem ter reparado que quando um determinado post tem apenas 1 (um) comentário no Blogger aparece "1 comentários".
OK, isto é uma minhoquice. Mas para aqueles que são minhoquinhas, aqui vai como podem resolver o problema:




1. Encontre o seguinte código no html do seu blog
(não se esqueça de expandir os widgets)

1  

2. Substitua esse código por este:

 1 Comentário
 
 Responda a este post
 
  Comentárioa
 
  

3. Repita o passo 1 e 2 porque o código está lá duas vezes.

E já está.
É evidente que, por exemplo, em vez de "Responda a este post" pode colocar o que quiser:
"Fale", "Seja o primeiro a comentar", "Chute", "Vamos falar", etc.

NOTA: Esta é mais uma dica patrocinada por BlogU

Tags: blogger, dicas blogger, comentários com links

Pedro Mexia - Estado Civil

Pedro Mexia é formado em Direito pela Universidade Católica de Lisboa e ganhou notoriedade a partir do boom dos blogues, por volta de 2003, altura em que, com outros companheiros do lado direito do espectro político participou em algumas polémicas, designadamente com o não menos célebre blogue de Daniel Oliveira do Bloco de Esquerda, o Barnabé.
Esses tempos passaram, Mexia passou pela televisão, tornou-se crítico literário no DN e, presentemente, no Público.

É verdade que Proust disse que devemos deixar as mulheres belas para os homens sem imaginação. Mas também é verdade que Proust era gay.

Título: Estado Civil, Diário de Uma Crise
Autor: Pedro Mexia
Editora: Tinta da China
Ano: 2009
Número de Páginas: 447
ISBN: 978-972-8955-99-1

A dado momento, George Costanza (Seinfeld) demite-se e David Brent (The Office) é despedido. No entanto, ambos regressam no dia seguinte, à espera de que ninguém repare que eles estão de volta. Eis a linha divisória entre o cómico e o patético.

Mas nunca deixou de blogar e o presente livro é o terceiro que edita, em pouco tempo, tendo como base a sua escrita blogueira, neste caso particular o blogue "Estado Civil", encerrado no início deste ano.
O livro cobre a vida do blogue (2006-2009) e ressente-se de facto da mudança de média. Não sei se houve seleccção e/ou alterações aos textos, mas alguns dos posts eram, a meu ver, evitáveis na edição em livro.
Dito isto, o livro apresenta alguns textos brilhantes. Mexia escreve duma forma fluída e cativante e os textos que mais gostei foram aqueles em que apresenta/divulga vários livros, discos e filmes, e, sobretudo, alguns aforísticos (originais ou citações). Também aqueles em que a sua veia pessimista e as suas teses de direita heterodoxa afloram são deveras incisivos e cortantes.
O autor sublinha demasiado o facto de o período abarcado ter sido um dos mais negros da sua vida, daqueles em que a nossa maneira de viver e de pensar se altera marcadamente, supostamente devido a um problema de amores. Realmente muitos dos textos são dedicados a este assunto e, na minha opinião, salvo raras excepções, sem grande interesse.
Mas, tal como referi anteriormente, o livro, de quatrocentas e tal páginas, acaba por ter muita escrita recompensadora que, sem margem para dúvidas, tornam valioso o investimento na sua compra.

Do editor:

Estado Civil, terceiro volume dos diários de Pedro Mexia (depois de "Fora do Tempo" e "Prova de Vida"), reúne os melhores textos escritos entre Outubro de 2006 e Janeiro de 2009 para o blogue homónimo, entretanto encerrado.
Enquanto autobiografia, é uma «tragicomédia que nunca se esquiva às situações insustentáveis: a fraqueza, o fracasso, o isolamento, a insanidade». É também, tal como os diários anteriores, uma constante apropriação de citações memoráveis da música, da literatura, do cinema. E é ainda uma sucessão de críticas e homenagens a acontecimentos e personalidades do nosso tempo.

Uma boa leitura para os dias de férias que se aproximam.

Os Idiotas
Flaubert tinha razão quando disse que sempre que atacamos os idiotas corremos o risco de também nos tornarmos idiotas. Os idiotas devem ser ignorados. O que é aliás a coisa que mais enfurece um idiota.

Tags: livros, pedro mexia, blogues, blogger, blogging

Gadget Google para eventos (c/ Screencast)

Mais um dos muitos gadgets proporcionados pela Google, ou por programadores que utilizam a sua API: o "Google Event Gadget".
Trata-se de um widget em que podemos anunciar um qualquer evento que ocorra nas nossas redondezas (ou não) em princípio relacionado com o tema do blog, e que permite a adição de fotos do evento, google maps do evento e um botão em que os utilizadores podem indicar se estão a pensar em ir presenciar esse evento ou não.
Podem ver um exemplo deste gadget na minha barra lateral, lá para o fundo da mesma.




Estou, no entanto, com um problema:
O primeiro é que não consigo obter os botões clicáveis.
Caso alguém consiga perceber porquê, agradecia que me informasse, atravé do email de contacto, que está no fundo da barra lateral do blog.

Mas vamos lá então explicar como podem adicionar este gadget aos vosso blog(ger)s:
NOTA: No final do post há um Screencast para verem tudo "ao vivo e a cores".
Coloquem dúvidas e sugestões nos comentários ou através do email de contacto, sito no fundo da barra lateral do blog.
Obrigado.

1. Façam login no Blogger.come marquem a caixa Remember Me para facilitar o login da próxima vez que lá vão.

2. Vão a Google Friend Connect. Aí verão todos os vossos blogs listados na barra lateral à esquerda do ecrã, abaixo do título "Sites"

3. Cliquem no título do vosso blog onde querem adicionar o gadget e ele expandir-se-à para mostrar um submenu abaixo dele.

4. Cliquem no link "Social Gadgets"

5. Cliquem no link "Event Gadget"

6. Nas opções seleccionem as que desejarem, preencham o título do evento e a sua descrição; escolham as datas de início e termo do evento e a vossa Timezone; preencham a localização do evento, endereço e o url de uma imagem, logótipo ou vídeo do evento.

7. Escolham o tamanho do gadget, de acordo com o vosso espaço disponível, por exemplo a largura da vossa sidebar (barra lateral) se for lá que quiserem colocar o gadget.

8. Cliquem no botão "Generate Code"

9. Copiem o código gerado para um gadget HTML do vosso blog, que entretanto terão de criar se quiserem pô-lo na barra lateral.

Segue-se o Screencast respectivo:

Free online screencasting tool

Este post foi retirado e adaptado de The Blog Doctor A.K.A. Betablogger for Dummies Obrigado para ele!

Tags: blogger, dicas blogger, google gadgets, google API, gadgets, widgets, 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

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

Lista de posts recentes em Ajax - animada

A lista de posts recentes que acabei de colocar no topo do meu blog é muito fácil de implementar e dá um magnífico efeito uma vez que é feita em Ajax e, assim, implementa algum movimento / animação ao texto.
É um excelente tweak, que tirei com algumas outras coisas, do excelente blog http://hoctro.blogspot.com. Um obrigado para ele!
Venham pois daí para ver como se faz:


Antes de tudo não se esqueçam de fazer backup ao vosso template antes de começar a mexer no código html do vosso blog.

1. Sacar a chave/key Google API do blog

Para isso basta ir a http://code.google.com/apis/ajaxfeeds/signup.html e preencher uma caixa de texto que lá está com o URL do vosso blog.
No ecrã seguinte aparece logo a vossa chave/key que devem copiar pois vão utilizá-la já a seguir.

2. Inserir o script

Editem o vosso código html e procurem pela tag

</head>

Imediatamente antes dela coloquem o seguinte código:

Não se esqueçam de colocar a vossa Google API key neste código, em vez de "YOUR-KEY"

3. Criar Widget para receber a lista

Criem um widget ("Adicionar uma miniaplicação") "HTML/JavScript" e coloquem lá, no conteúdo (no título não ponham nada), a seguinte linha de código:

A carregar...

E já está...
Para adaptarem as cores ao vosso blog, joguem com o css que aparece no script:

.gfg-title {

color : #612e00;

background-color: #FFF3DB;

}

.gfg-title a {

color : #612e00;

}

.gfg-root {

border: 1px solid #956839;

font-family: "Georgia", sans-serif;

}

Boa sorte!

Em futuro post direi como se implementa a lista de blogs que andamos a ler, numa apresentação similar a esta, como podem apreciar no footer deste meu blog.

Tags: recursos blogger, blogger, posts recentes, ajax, google api, widgets

Google Maps interactivos nos seus posts

Uma funcionalidade que se pode tornar interessante para incluírem nos vossos posts se quiserem indicar alguma localização, seja lá por que motivo for (onde estão, onde vivem, onde trabalham, onde é a vossa loja, etc.) são os mapas que a Google nos faculta e que podemos facilmente incluir nos nossos posts.
Abaixo insiro o Google Map do meu local/escola de trabalho, como exemplo.
Na continuação do post irei descrever o processo para obterem e incluírem os vossos mapas nos vossos posts do blogger.
No final repetirei o processo mas em vídeo/screencast.
Bons mapas!

View Larger Map

Então sigam os passos:

1. Vão ao website do Google Maps

Digitem na caixa de texto (no cimo do ecrã) a morada que querem mostrar no vosso mapa.



Por exemplo, eu digitei "escola alfredo da silva barreiro portugal" e obtive logo o mapa centrado nessa morada e várias indicações/marcas/legendas no lado direito do ecrã, uma delas que tinha sido escrita por mim há tempos :-)



2. Ajustar o zoom

Em seguida, com a função zoom, ajustem o mapa para ficar centrado no local que pretendem e com o tamanho/zoom que preferirem.
Uma vez finalizado este processo, cliquem no link "Link" que fica no canto superior direito do ecrã.
Aí, cliquem no link "Customize and preview embedded map"
Devem mesmo fazer isto senão os resultados não serão, pela certa, do vosso agrado.
Uma vez dado o clique, aparecerá uma nova janela popup em que podem configurar o vosso mapa à vontade:
- Tamanho: recomendo entre 300 a 350 px de largura para os blogs em que a coluna dos posts não é muito larga, como é o caso do meu. Para os outros adaptem à vossa vontade.
- O zoom, pois este é mesmo o mapa que depois vai aparecer no vosso post.
- etc.




3. Finalização

Uma vez finalizada a vossa configuração pessoal do mapa, recolham o código abaixo do mesmo e insiram-no no vosso post.



Simples, não?
Boa sorte!

Vejamos agora o vídeo/screencast para o caso de terem ficado algumas dúvidas:

Tags: web 2.0, google, google maps, blogger, recursos blogger, mapas

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

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

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

O seu blog a partir de telemóvel

Uma das certezas que todos nós já temos sobre o futuro da web é que as plataformas ir-se-ão tornando cada vez mais uniformes, podendo aceder-se a todos os sites e serviços a partir de qualquer uma delas, conforme a situação e o contexto em que nos encontramos.
A possibilidade de podermos facilmente criar uma versão do nosso blog para telemóvel é já uma realidade. E quando digo facilidade é mesmo isso que quero dizer. Em 5 segundos pode ter a versão do seu blog para telemóvel acessível para todo o mundo.
Veja como.

A primeira coisa a fazer é visitar o site da mofuse.mobi e, se o seu blog estiver no blogger, clicar em "click here" como se pode ver na imagem seguinte (este link está na área inferior direita da página de entrada do site).

Depois é só preencher o campo com o endereço do seu blog e clicar no botão "Mobilize".

Foi o que fiz para o meu blog referente a uma turma que tenho e obtive de imediato os resultados.

Nada mais fácil.
Se quiser explorar mais a funcionalidade desta aplicação, deverá registar-se. Foi o que fiz para criar a versão mobile para este blog (veja na barra lateral o anúncio) e cuja página, que poderá ver também no seu telemóvel, pode ser vista clicando aqui.


Imagem exemplo:

Boas mobilidades!

Tags: web 2.0, blogger, telemóvel, sites sociais