Web Dois Ponto Zero

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:

[+/-]

Surpreenda os visitantes do seu blog com uma Caixa de Boas-Vindas

Este hack permite apresentar uma caixa de boas-vindas aos visitantes do seu blog. E, ainda por cima, com mensagem personalizada que tem em conta a página de onde vem esse visitante do seu blog (google, facebook, twitter, digg, etc.).
Vamos ver então como fazer:

Passo 1:

Vá até ao Painel do seu blog --> Desugn --> Editar HTML --> Marque a caixa "Expandir modelos do widget"

Passo 2:
Procure o seguinte código

<data:post.body/>

Passo 3:

Substitua esse código por:

<script src='http://www.profelectro.info/Uploads/luisj/TextToBeDisplayedDiv.js' type='text/javascript'>
</script>
<div id='mainDisplayDiv' style='background:#F8F8FF;border:1px solid #B6AFA9;display:none'>
<div style='float: right; margin-right: 5px; margin-top: 5px;'>
<href a='#' onclick='closeGreetBox(&apos;7&apos;)'><img alt='x' border='0' src='http://img214.imageshack.us/img214/9837/closebutton.gif'/>
</href></div>
<div id='dynamicContentDisplayed'>
</div>
<script type='text/javascript'>
// Give your feed url here
var feedURL = &quot;http://feeds2.feedburner.com/bestwidgets&quot;;
var dynamicHTMLText = displayRequiredText(feedURL);
document.getElementById(&quot;dynamicContentDisplayed&quot;).innerHTML = dynamicHTMLText;
</script>
</div>
<script src='http://www.profelectro.info/Uploads/luisj/HideShowDiv.js' type='text/javascript'>
</script>
<script type='text/javascript'>
showHideDiv();
</script>
<br/><data:post.body/>

Passo 4:

Finalmente, no código anterior, substitua

http://feeds2.feedburner.com/bestwidgets

pelo URL do Feed do seu blog.

Aqui ficam 3 dos exemplos de resultados obtidos:

É simples!
Boa sorte!

[+/-]

Como seleccionar todos os amigos do Facebook - com screencast -

Uma coisa irritante no Facebook acontece quando desejamos seleccionar todos (ou quase todos) os nossos amigos para, por exemplo, lhe sugerirmos um grupo, uma página, etc.
Com esta dica, que descobri recentemente, esse calvário terminou.
Vejam como se faz! É muito fácil:

Apenas temos que clicar no link do Facebook "Suggest to your friends".
Quando a janela pop-up com os seus amigos se abrir, basta colar na barra de endereço o seguinte código e dar Enter, e voilá!

javascript:elms=document.getElementById('friends').getElementsByTagName('li');for(var fid in elms){if(typeof elms[fid] === 'object'){fs.click(elms[fid]);}}

Se ainda tem dúvidas, veja o screencast que preparei para si:

Record your screencast online

Bye!

[+/-]

Permita que os Visitantes Aumentem ou Reduzam o tamanho da letra (fonte) do seu blogue

Uma das regras de ouro quanto à boa acessibilidade dos sites/blogues é a possibilidade de o visitante poder aumentar ou diminuir o tamanho de letra do mesmo.
E isso é mais fácil do que, geralmente, se pensa.

Experimente manter a tecla Ctrl pressionada e fazer rolar a roda do seu rato. Surpreendente, hein?
E, se o seu rato não tem roda, ou pretende um ajuste mais fino, não se vá já embora. Experimente manter a tecla Ctrl pressionada e vá dando impulsos nas teclas + e/ou -
Como vê é muito fácil.
Mas, como sugerido no que escrevi, muitos dos visitantes do seu blogue desconhecem certamente esta funcionalidade.
Daí a utilidade de se colocar um link/botão/ícone para que o tamanho da letra do seu blogue/site possa ser aumentada (o mesmo para reduzir o tamanho).
É disso que vamos tratar de seguida.

Passo 1:

Vá ao Esquema do seu blog
Edite o HTML
Expanda os widgets
Procure

<head>

Copie, logo para baixo dessa tag, o seguinte código:

<script language="JavaScript" type="text/javascript">
function changeFontSize(inc){
var p = document.getElementsByTagName('p');
for(n=0; n<p.length; n++) {
if(p[n].style.fontSize) {
var size = parseInt(p[n].style.fontSize.replace("px", ""));
} else {
var size = 12;
}
p[n].style.fontSize = size+inc + 'px';
}
}
</script>

Passo 2:

Procure

]]></b:skin>

Logo acima coloque o seguinte código:

.textresize {
padding-left:20px;
padding-top:5px;
}

Passo 3:

Procure

<div class=’post header-line-1>

Logo abaixo, coloque o seguinte código:

<a href="javascript:changeFontSize(1)">Aumentar tamanho da letra</a>
<a href="javascript:changeFontSize(-1)">Diminuir tamanho da letra</a>

Em vez das frases "Aumentar tamanho da letra" e/ou "Diminuir tamanho da letra", pode usar o texto que quiser ou,até, uma imagem/botão/ícone, como tenho aqui neste blog.

Boa sorte!

[+/-]

Mostre o número de visitas dos seus posts

Uma função que o blogger não tem de raiz é a contagem de visitas de cada um dos nossos posts, isto é, o número de vezes que foram já vistos pelos visitantes do blog.

Este tweak, que abaixo vos passarei, permite que essa função seja adicionada, indicando esse número em todos os posts e páginas do seu blogger.
Mais, esse contador aparecerá também na página principal do blog.
Podem comprovar isso mesmo aqui neste blogue.

Mas então como se faz? Muito simples:

Passo 1:
Vá ao Esquema >> Editar HTML do seu blogue;
Expanda os Modelos de Widget.

Passo 2:
Encontre a linha de código:

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

Passo 3:
Logo abaixo dela insira o seguinte código:

<b:if cond='data:blog.pageType == &quot;item&quot;'><img height='16' src='http://forums.bit-tech.net/images-light/misc/stats.gif' width='16'/><img alt='counter' expr:src='&quot;http://demo.bloggerwidgets.cz.cc/counter.php?page=&quot; + data:post.id + &quot;&amp;digit=4&quot;'/>  <b>Views</b><b:else/><img height='16' src='http://forums.bit-tech.net/images-light/misc/stats.gif' width='16'/><img alt='counter' expr:src='&quot;http://demo.bloggerwidgets.cz.cc/counter2.php?page=&quot; + data:post.id + &quot;&amp;digit=4&quot;'/>  <b>Views</b></b:if>

That´s all!
Se não conseguir ou algo correr mal, utilize a caixa de comentários para reportar. Obrigado.

[+/-]

Reparar o TweetDeck

[+/-]

Social Bookmarking Widget for Blogger, com função de autoscroll

Se quiser colocar no seu Blog(ger) um widget como aquele que aparece no lado esquerdo do ecrã do meu blog, e que permite enviar os posts para as redes sociais Facebook, Twitter e Google Buzz, siga os seguintes passos:

Passo 1:
Vá ao Esquema do seu blog
Edite o HTML

Passo 2:
Procure por

]]></b:skin>

Passo 3:
Imediatamente antes coloque o sehuinte código:

#share_scroller {
left:0;
position:fixed;
top:700px;
}
#share_button {
left:0;
position:fixed;
top:700px;
width:80px;
}
#shares {
-moz-border-radius-bottomleft:3px;
-moz-border-radius-topleft:3px;
background-color:#FE6602;
border-color:#A5A5A5 #E8E7E7 #A5A5A5 #A5A5A5;
border-style:solid;
border-width:1px;
bottom:100px;
margin-top:10px;
position:fixed;
width:63px;
}
#shares .SMVote {margin:7px}
div.SMGap {background-color:#E3E3E3; height:1px; width:35px; margin:5px auto;}
/* FB button (shrink width) */
.fb_share_count_top {width:48px!important}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px!important}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px!important;}

Passo 4:
Procure

<body>

Passo 5:
Imediatamente abaixo coloque:

<div id='share_scroller'>
<div id='share_button'>
<div id='shares'>
<div class='SMVote'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>
<div class='SMGap'/>
<div class='SMVote'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><div class='clear'/></div>
<div class='SMGap'/>
<div class='SMVote'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
<div class='SMGap'/>
</div>
</div>
</div>

Passo 6:
Grave

Passo 7:
Diga comigo: Niiiice!

[+/-]

Mário Crespo - A Última Crónica / Livro

[+/-]

Sexy Sidebar

Caso queiram adicionar um widget como aquele que aparece neste blog, do lado esquerdo do ecrã, é muito simples:

- No vosso painel do blogger, vão a Esquema e cliquem em Adicionar uma Aplicação;
- Na janela pop-up que se abre, escolham HTML/Javascript;
- Copiem para o código seguinte para o conteúdo dessa Aplicação e Gravem.
E é tudo.
Tenham apenas o cuidado de alterar a última parte do código, colocando os vossos links, que podem dizer respeito a qualquer coisa: a vossa presença na web, o vosso blogrool, uma lista de posts do vosso blog, etc.

<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/prototype.js" type="text/javascript"></script>
<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/effects.js" type="text/javascript"></script>
<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/side-bar.js" type="text/javascript"></script>
<style>
body{
    font-size:75%;
}
a{
    outline: none;
}
a:active{
    outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
    color:#FFFFFF;
    font-size:110%;
    font-family:arial;
    margin:10px 10px 10px 10px;
    font-weight:bold !important;
}
#sideBar h2 span{
    font-size:125%;
    font-weight:normal !important;
}
#sideBar ul{
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}
#sideBar li{
    margin:0px 10px 3px 10px;
    padding:2px;
    list-style-type:none;
    display:block;
    background-color:#DA1074;
    width:177px;
    color:#FFFFFF;
}
#sideBar li a{
    width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
    color:#FFFFFF;
    font-family:verdana;
    font-size:100%;
    text-decoration:none;
    display:block;
    margin:0px 0px 0px 0px;
    padding:0px;
    width:100%;
}
#sideBar li a:hover{
    color:#FFFFFF;
    text-decoration:underline;
}
#sideBar{
    position: fixed;
    width: auto;
    height: auto;
    top: 140px;
    left:0px;
    background-image:url(http://i49.tinypic.com/121abrq.jpg);
    background-position:top right;
    background-repeat:repeat-y;
}
#sideBarTab{
    float:left;
    height:137px;
    width:28px;
}
#sideBarTab img{
    border:0px solid #FFFFFF;
}
#sideBarContents{
    float:left;
    overflow:hidden !important;
    width:200px;
    height:320px;
}
#sideBarContentsInner{
    width:200px;
}</style>
<div id="sideBar">
        <div id="sideBarContents" style="display:none;">
        <div id="sideBarContentsInner">
            <h2>side<span>bar</span></h2>
                    <ul>
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
                <li><a href="#">Link Four</a></li>
                  </ul>
                </div> </div>
    <a id="sideBarTab" href="#"><img alt="sideBar" src="http://i46.tinypic.com/ao8h9u.jpg" title="sideBar"/></a>
</div>

Ok, repararam que a minha barra não tem links de texto mas imagens.
Eis o meu código. Copiem-no e alterem a última parte para os vossos links e imagens.
Se, eventualmente, quiserem usar botões como os meu, visitem o Brilliant Button Maker e criem-nos de uma penada.
Boa sorte!

Widget recolhido de Best Blogger Widgets. Obrigado!

<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/prototype.js" type="text/javascript"></script>
<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/effects.js" type="text/javascript"></script>
<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/side-bar.js" type="text/javascript"></script>
<style>
body{
    font-size:75%;
}
a{
    outline: none;
}
a:active{
    outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
    color:#FFFFFF;
    font-size:110%;
    font-family:arial;
    margin:10px 10px 10px 10px;
    font-weight:bold !important;
}
#sideBar h2 span{
    font-size:125%;
    font-weight:normal !important;
}
#sideBar ul{
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}
#sideBar li{
    margin:0px 10px 3px 10px;
    padding:2px;
    list-style-type:none;
    display:block;
    background-color:#DA1074;
    width:177px;
    color:#FFFFFF;
}
#sideBar li a{
    width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
    color:#FFFFFF;
    font-family:verdana;
    font-size:100%;
    text-decoration:none;
    display:block;
    margin:0px 0px 0px 0px;
    padding:0px;
    width:100%;
}
#sideBar li a:hover{
    color:#FFFFFF;
    text-decoration:underline;
}
#sideBar{
    position: fixed;
    width: auto;
    height: auto;
    top: 140px;
    left:0px;
    background-image:url(http://i49.tinypic.com/121abrq.jpg);
    background-position:top right;
    background-repeat:repeat-y;
}
#sideBarTab{
    float:left;
    height:137px;
    width:28px;
}
#sideBarTab img{
    border:0px solid #FFFFFF;
}
#sideBarContents{
    float:left;
    overflow:hidden !important;
    width:200px;
    height:320px;
}
#sideBarContentsInner{
    width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>
Eu na<span>Web</span></h2>
<ul>
<li><a href="http://www.profelectro.info/"><img src="http://www.profelectro.info/Uploads/luisj/ligadoscorrente.png" /></a></li>
<li><a href="http://esasrenovaveis.blogspot.com"><img src="http://www.profelectro.info/Uploads/luisj/renovaveis.png" /></a></li>
<li><a href="http://www.cpeacomandoesas.blogspot.com"><img src="http://www.profelectro.info/Uploads/luisj/automacao.png" /></a></li>
<li><a href="http://musicaesquisita.blogspot.com"><img src="http://www.profelectro.info/Uploads/luisj/musicaesquisita.png" /></a></li>
<li><a href="http://www.profelectro.info/fm"><img src="http://www.profelectro.info/Uploads/luisj/fm-1958-2005.png" /></a></li>
<li><a href="http://fmstereo.awardspace.com"><img src="http://www.profelectro.info/Uploads/luisj/fm.png" /></a></li>
<li><a href="http://webdoispontozeroplus.blogspot.com"><img src="http://www.profelectro.info/Uploads/luisj/WEB20.png" /></a></li>
<li><a href="mailto:mig.pand@gmail.com"><img src="http://www.profelectro.info/Uploads/luisj/gmail.png" /></a></li>
</ul>
</div>
</div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="http://i46.tinypic.com/ao8h9u.jpg" title="sideBar" /></a>
</div>

[+/-]

Deixe os visitantes Tuitar a partir do seu blogue

É verdade!
Agora já pode permitir que os visitantes do seu blogue possam tuitar para o mundo a partir do seu blogue/site, podendo permitir-lhes inclusive o envio de mensagens personalizadas, como por exemplo para feedback sobre os seus artigos/posts/blogue.
E é muito rápido e simples.
Para comprovar, vá até ao fundo da minha barra lateral e experimente.
Também o pode fazer a partir deste post, como já estará, certamente, a ver.
Veja como pode incorporar esta funcionalidade no seu blogue, abaixo, neste mesmo post.

Vamos então ver como se faz.

Passo 1:

Vá até ao site @anywhere, que é propriedade do Twiiter, ele mesmo, e que lhe permitirá criar a aplicação, que acede ao twitter api.

Faça o seu registo e crie a sua aplicação. É muito fácil e rápido.

Passo 2:

Crie, na barra lateral do seu blogue, um widget/aplicação, do tipo html/script e coloque nele o seguinte código:
Nota: tenha o cuidado de colocar a sua API key em vez da minha; para além de alterar o meu twitter username para o seu.

</div>
    <style type="text/css" media="screen">
  
  .anywhere-example {
    border: 1px solid #5082A3 !important;
    padding: 0px 0px 0px 0px;
    width:200px !important;
    margin-left: 0px;
    margin-top: 0px;
  }
  .anywhere-example h4 {
    font-weight: bold;
    background-color: #5082A3;
    color:white;
    width: 200px;
    padding:0;
    margin:0;
    text-align:center;
  }
  h3 { font-weight: bold; font-size:1.1em;}
</style>
<script src="http://platform.twitter.com/anywhere.js?id=jIvIfrLGaODd37NJiqArCQ&amp;v=1" type="text/javascript"></script>
<div id="linkify-this-content" class="anywhere-example">
<div class="anywhere-example">
<center>
<div id="follow-luisj"></div>
</center>
<div class="anywhere-example">
<p>Cuidado: Estas caixas são reais. <br/>Se Tuitar, Tuíta mesmo!</p>
<p><strong>Comunique com o mundo<br/>através do twitter</strong></p>
<div id="default-tweetbox"></div>
<p><strong>Envie-nos uma mensagem<br/> personalizada através<br/> do
Twitter</strong></p>
<div id="custom-tweetbox"></div>
</div>
</div>
<div class="anywhere-example">
<div id="connect-1">
<div id="twitter-connect-placeholder"></div>
<script type="text/javascript">
var anywhereApiKey = "abcdefghi-123";
twttr.anywhere(anywhereApiKey, "1.0.0", onAnywhereLoad);
function onAnywhereLoad(twitter) {
// Simplest use case: Append a connect button to the specified DOM
// element.
twitter("#twitter-connect-placeholder").connectButton();
// Connect buttons have a range of sizes to choose from:
// small, medium, large, xlarge. "medium" is the default size.
// You can specify the size as follows:
twitter("#twitter-connect-placeholder").connectButton({ size: "large" });
};
</script>
<div id="twitter-connect-placeholder"></div>
<script type="text/javascript">
var anywhereApiKey = "abcdefghi-123";
twttr.anywhere(anywhereApiKey, "1.0.0", onAnywhereLoad);
function onAnywhereLoad(twitter) {
# Conditionally display the Connect Button based on current logged in state:
if (twitter.isConnected) {
currentUser = twitter.User.current;
screenName = currentUser.data('screen_name');
profileImage = currentUser.data('profile_image_url');
profileImageTag = "<img src='" + profileImage + "'/>";
$('#twitter-connect-placeholder').innerHTML = "Logged in as " + profileImageTag + " " + screenName;
} else {
twitter("#twitter-connect-placeholder").connectButton();
};
};
</script>
<a href="#" onclick="twttr.anywhere.signOut();">Sign
out of Twitter</a>
<script type="text/javascript">
twttr.anywhere(function(twitter) {
twitter("#linkify-this-content").linkifyUsers();
twitter("#hovercard-example").hovercards();
twitter('#follow-luisj').followButton("luisj");
twitter("#default-tweetbox").tweetBox(
{
      counter: true,
      height: 100,
      width: 180
    });
twitter("#custom-tweetbox").tweetBox(
{ counter: true,
      height: 100,
      width: 180,
label: "O que pensa do nosso Blogue?",
defaultContent: "@luisj "
});
twitter("#twitter-connect-placeholder").connectButton();
twitter.connectButton({
    authComplete: function(loggedInUser) {
     // triggered when auth completed successfully
   },
   signOut: function() {
     // triggered when user logs out
   }
});

});
</script></div>
</div>
</div>

E é tudo.
Boa sorte.

[+/-]

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

[+/-]

Widget para Citação/Mensagem Aleatória

Se repararem no fundo da barra lateral deste blogue poderão ver duas secções com os nomes seguintes: "Citação (aleatória)" e "Bom Recurso Didáctico (aleatório)".
e muitos outros se podem adicionar segundo o mesmo princípio.
De referir que este widget pode ser utilizado na barra lateral mas não só. Pode utilizá-lo no rodapé, no cabeçalho, num post, numa página, enfim... no local que quiser do seu blogger.

A natureza aleatória provém do facto de que quando se navega para outra página do blogue, ou mesmo quando se recarrega a mesma página em que estamos, a citação, ou o recurso, apresentada muda.
De seguida passarei a explicar como fiz para obter este efeito/widget, de modo a que o possam também usar nos vossos blogues.

Passo 1: Inserir as citações na base de dados.

No fornecedor de serviços de hospedagem do vosso blog/site deverão inserir as citações que pretendem numa base de dados própria, ou aproveitando uma das que já tenham em funcionamento, acrescentando um novo campo.

Passo 2: Escrever o código PHP para "sacar" da base de dados a citação, de uma forma aleatória, sempre que se (re)carregar uma página do vosso blogue/site.


Could not select the database because: <b>' . mysql_error() . '</b>');
 }

} else {
 die ('<p>Could not connect to MySQL because: <b>' . mysql_error() . '</b></p>');
}
 
// Define the query.
$query = 'SELECT * FROM TABLE_Q
ORDER BY RAND()
LIMIT 1';
 
if ($r = mysql_query ($query)) { // Run the query.

 // Retrieve and print every record.
 while ($row = mysql_fetch_array ($r)) {
  print "<p>{$row['fldMEMO1']}";
 }

} else { // Query didn't run.
 die ('</p><p>Could not retrieve the data because: <b>' . mysql_error() . "</b>. The query was $query.</p>");
} // End of query IF.

mysql_close(); // Close the database connection.

?&gt;

Este código PHP deve ser inserido numa página html normal, que será alojada num qualquer servidor mas, mais naturalmente, naquele que hospeda o vosso site.

Devem substituir:
********* pela password de aceso à vossa base de dados;
========= pelo endereço de acesso ao vosso servidor de hospedagem da base de dados (é fornecido pelo serviço de hospedagem do vosso site);
randomquote pelo nome da vossa base de dados;
TABLE_Q pelo nome da vossa tabela;
fldMEMO1 pelo nome da coluna/campo da base de dados que contém a citação/mensagem a publicar.

Passo 3: Exibir a mensagem/citação aleatória na barra lateral (ou noutro local que queiram) do vosso blogger.

Vamos usar a técnica da iframe.
Para isso, na vista de esquema do blogger, devem criar uma nova aplicação, escolher o tipo html/script e colocar lá dentro o seguinte código:


<iframe src="http://www.profelectro.info/conf2.html" frameborder="0" height="220" scrolling="no" width="240">&amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;gt;  &amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;gt;Your browser does not support iframes.&amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;gt;</iframe>

E é isto. Boa sorte.

NOTA: Caso não possuam um domínio vosso, logo não possuam um servidor de hospedagem onde possam criar as vossas bases de dados, podem usar o código seguinte para usarem este widget. Neste caso, é óbvio que estarão a usar as minhas citações/mensagens/links/... e não as vossas.

Citações:


<iframe src="http://www.profelectro.info/conf2.html" frameborder="0" height="220" scrolling="no" width="240">&amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;gt;  &amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;gt;Your browser does not support iframes.&amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;gt;</iframe>

Recursos Didácticos:


<iframe src="http://www.profelectro.info/conf3.html" frameborder="0" height="220" scrolling="no" width="240">&amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;gt;  &amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;gt;Your browser does not support iframes.&amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;gt;</iframe>