Web Dois Ponto Zero: Blogger Hacks

Mostrar mensagens com a etiqueta Blogger Hacks. Mostrar todas as mensagens

Este "tweak" para o blogger é interessante pois permite-lhe saber quantos leitores estão a navegar pelo seu blog em cada um dos posts.

É muito fácil de aplicar pois basta colocar o código seguinte onde quiser: no rodapé, na barra lateral (onde tenho o meu na secção de expansíveis e colapsáveis), etc.


<style type="text/css">.readingtopics_text {font-weight:bold}</style>
<script type="text/javascript">
reader_text = "leitor(es)";
</script>
<script src="http://mig_.pand.googlepages.com/reading-num.js" type="text/javascript"></script>
Obrigado!<br/>

Vejamos o resultado:

É evidente que:
1. Depois, pode colocar o código entre tags div e trabalhar a sua aparência com css.
2. Pode usar o código directamente ou pode descarregar o script de ... (onde está, no meu servidor) e colocá-lo no seu servidor, alterando, naturalmente o endereço que aparece no código.
Mais uma vez, este código foi retirado de http://en.vietwebguide.com/2008/06/new-cool-widget-display-your-useronline.html, a quem agradecemos.
Boa sorte!

[+/-]

Paginação no Blogger

Quando o número de posts no nosso blog começa a aumentar, será prático colocar-lhe paginação, para permitir-nos e aos nossos visitantes o salto de várias páginas em direcção aos posts anteriores (ou posteriores), em vez de múltiplos cliques no link "Mensagens antigas" (ou "Mensagens recentes") situado no fundo da página.
Foi o que fiz, e que podem ver e experimentar, exactamente no fundo desta página.

Então vamos ver como se faz.

Passo 1:
Painel de Controlo >> Esquema >> Editar HTML e clique na caixa "Expandir os Widgets"
Passo 2:
Encontrar

<b:include name='nextprev'/>
Passo 3:
Colocar imediatemente abaixo o seguinte código:


<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- Pager v1.0 (C)2008 en.vietwbguide.com-->
<script type='text/javascript'>

var home_page = &quot;http://webdoispontozeroplus.blogspot.com/&quot;;
var blogID = &quot;7125179335870608043&quot; ;

var pager_max_main = 5;
var pager_num_of_button = 13;

var pager_link_alt_text = &quot;Click to go to page&quot;;
var pager_total_text = &quot;Total: &quot;;
var pager_posts_text = &quot; posts, &quot;;
var pager_pages_text = &quot; pages.&quot;;
</script>
<script src='http://vietwebguide2.googlepages.com/blogger_pager_script_v10.js' type='text/javascript'></script>
<hr/><div id='blogpagerShowToTal' style='margin:3px 2px 3px 2px; padding:2px; font-weight:bold'></div>
<div id='blogpager' style='margin:3px 2px 3px 2px; padding:2px;
border-bottom:1px #090 dotted; font-weight:bold'>Jump to page: </div>
<script type='text/javascript'>
window.onLoad = createBlogPager();
window.onLoad = pager_showTotal();
</script>
</b:if>

Obviamente substituindo o endereço do meu blog pelo endereço do seu, na linha 4;
e o meu blog ID pelo seu, na linha 5 (o ID dos seus blogs pode ser visto quando faz o login em http://blogger.com/home e depois poisa o rato num dos links, por exemplo "Definições". O ID aparece no fundo do seu ecrã, na barra inferior do seu browser.)

E é tudo.
Se quser estilizar os seus botões/links de Paginação pode colocar algum CSS.
Eu utilizei o seguinte,


<style type="text/css">
.blogpaging {
background:#CCC;
border:0px #ccc solid;
padding:2px;
}
</style>

imediatamente antes do final do tag </head>

Boa sorte!

NOTA: Este "tweak" foi retirado, traduzido e adaptado de http://en.vietwebguide.com/2008/07/blogger-pager-script-version-10.html

[+/-]

Expandir / Contrair Posts

[+/-]

Pista de Migalhas de Pão / Breadcrumb Trail

Quem não ficou já perdido na nevegação de um site. Especialmente daqueles enormes, com uma grande profundidade hierárquica, com páginas que chamam páginas-filho, páginas-neto, e por aí fora.
OK, não é o caso dos blogs, especialmente do meu, mas mesmo assim vou aqui descrever a técnica que permite atenuar essa sensação de perda, um widget que ajuda a mantermos sempre a visão da situação da página onde nos encontramos e rapidamente (através de um clique) voltarmos um nível (ou mais) acima.
Esse widget tem o nome de "breadcrumb trail" e aparece em muitos sites.

O meu blog tem outro contra em relação à sua eficaz utilização, que é o facto de ter colocado logo no topo da página, sobre o espaço das mensagens, o "menu de abas / tab view", o que faz com que o "breadcrumb trailer" que irei instalar fique abaixo desse menu, impossibilitando a sua visão fácil.
Estão avisados.
Mesmo assim vou instalá-lo por algum tempo, pois como prometi no início deste blog, tentarei, sempre que possível, instalar as dicas que descrevo.
Não é na da difícil:
Passo 1: Instalar a Função de Definição do Widget e a sua Função de Chamada
Edite o Esquema do seu blog >> Editar HTML (veja como e os cuidados a ter)
Marque a caixa "Expandir os Esquemas de Widgets"
Procure (utilize o menu Editar >> Procurar do seu browser):
<b:widget id="Blog1" locked="false" title="Blog Posts" type="Blog">
Procure:
<b:includable id='main' var='top'>
que está ali por perto
Imediatamente antes de
<b:includable id='main' var='top'>
Coloque o código seguinte:


<b:includable id='breadcrumbs' var='post'>
<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
 You are here:
 <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  &gt;
 <b:loop values='data:post.labels' var='label'>
   <b:if cond='data:label.isLast == "true"'>
     <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
   </b:if>
 </b:loop>
 <b:if cond='data:post.title'>
   &gt;  <b><data:post.title/></b>
 </b:if>
</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrums Hack -->
</b:includable>

A seguir Adicione a linha seguinte (ver ainda imagem anterior):


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

imediatamente antes da linha
<b:if cond='data:post.dateHeader'>
que se encontra um pouco mais abaixo.
Passo 2: Estilizar com CSS
Imediatamente antes de
]]></b:skin>
Coloque o seguinte código:


.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

para estilizar o seu "breadcrumb trail".
Naturalmente que pode alterar esse estilo a seu gosto.
E é tudo.
Espero que tudo funcione.
Questões nos comentários, p.f.

[+/-]

Flickr - Partilhe o seu álbum de fotografias

Um dos sites com maior sucesso neste mundo da web 2.0, da partilha, das comunidades sociais, do trabalho cooperativo, da imagem e dos telemóveis, é o Flickr.
Ele permite o envio das suas fotos (divididas em álbuns/temas) e a partilha, por grupos privados ou a todo o mundo, das suas imagens.
Só tem de ir a Flickr, registar-se e fazer o upload das suas fotos.
Depois tem inúmeras hipóteses de partilhá-las.
Falarei apenas no widget que pode colocar no seu site/blog e de um slideshow que pode construir para colocar também online.
Para exemplificar, e como sou professor de electrónica e electrotecnia, usarei algumas fotos de um trabalho que os meus alunos desenvolveram ao longo deste último período escolar:

www.flickr.com

Esse é um módulo do Flickr que mostra itens de um álbum chamado ITED. Faça seu próprio módulo aqui.

Para fazer este widget, depois de ter criado o seu álbum, tem de ir aqui, registar o seu blog ou site, seguir os passos, recolher o código e postá-lo no seu site/blog.
O resultado é o que apresentamos acima.
Para criar um slideshow, é mais complicado, porque o Flickr ainda não o permite (está na calha, segundo informam), mas há sempre uns maduros que não têm paciência para esperar.
Então vá a este blog, preencha o campo indicado com o seu User ID. Se não o souber, eles dão uma ajuda: basta digitar a página do seu álbum, que pode criar no Flickr, e eles dão imediatamente o seu User ID.
Depois é só embeber o seguinte código no vosso blog/site, tendo o cuidado de substituir o User Id pelo vosso:


<style type="text/css"><!--
.dtop,.dbottom{display:block;background-color:#ffffff /* change the color of the corners here */}
.dtop b,.dbottom b{display:block;height:1px;overflow:hidden;background:#000}
.d1{margin:0 5px}.d2{margin:0 3px}.d3{margin:0 2px}.dtop .d4,.dbottom b.d4{margin:0 1px;height:2px}
--></style>
<div style="text-align:center"><div style="background:#000;width:550px">
<b class="dtop"><b class="d1"></b><b class="d2"></b><b class="d3"></b><b class="d4"></b></b>
<iframe style="margin-top:10px" src=http://www.flickr.com/slideShow/index.gne?user_id=28022181@N04 frameBorder=0 width=400 height=400 scrolling=no></iframe><br />
<a style="font-size:10px;text-decoration:none;color:#555" href="http://blogger-templates.blogspot.com/2005/09/flash-slideshow.html">Flash Slideshow</a>
<b class="dbottom"><b class="d4"></b><b class="d3"></b><b class="d2"></b><b class="d1"></b></b>
</div></div>

et voilá... é gerado o código que pode embeber no seu site/blog.
O resultado é o que apresentamos abaixo.
OK, é bué de grande para o meu blog (pelo menos enquanto eu não modificar o template) e eles não nos dão hipótese de diminuir o tamanho ... buááááá!!!
Mas pode ser que fique bem no vosso site/blog.
Também posso pô-lo noutro sitío do blog, como por exemplo no footer.

Flash Slideshow

[+/-]

Painéis de Etiquetas / Labels Colapsáveis / Expansíveis

Ao fim de algum tempo, quando o nosso blog começa a ganhar fôlego e as mensagens já são muitas, começamos a lutar com a falta de espaço. Refiro-me concretamente, por exemplo, a algumas das listas que aparecem na barra lateral como a lista das labels/etiquetas e dos arquivos do blog.
Há uma maneira muito elegante de resolver esse problema. Trata-se de construir um painel colapsável/expandível, que é carregado apenas com um título e um link (ocupando muito pouco espaço, portanto), o qual quando clicado pelo visitante faz expande-se/desdobra-se e a lista torna-se visível, podendo depois ser colapsada de novo e voltar à primeira forma.
Podem ver esta funcionalidade no meu blog, na barra lateral, exactamente no que se refere às etiquetas e ao arquivo de mensagens.
É, pois, essa funcionalidade que vamos descrever neste post, de modo a que possam implementá-la nos vossos blogs, caso o desejem.
Este post foi traduzido e adaptado daqui. Obrigado Annie!
Vamos tratar o caso das etiquetas/labels, mas facilmente se pode depois adaptar também ao arquivo de posts do blog:
1. Mais uma vez, no layout do template/modelo, vão a “Editar HTML
Descubram a seguinte parte do código, na stylesheet:


...
.comment-footer a:link {
color: $mainTextColor;
}
.deleted-comment {
font-style:italic;
color:gray;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
...

e a seguir à chaveta, antes do /*Profile, insiram as seguintes linhas de código na stylesheet:


.commenthidden {display:none}
.commentshown {display:inline}

2. No cabeçalho, entre o e o , logo no seu início, insiram:

3. Vão ao vosso blog, façam clique da direita do rato, e cliquem em “Ver código fonte da página”.
Nesse código fonte encontrem:




… a lista das labels …

Será qualquer coisa do tipo (é o que eu tenho à data de hoje, como minha lista de etiquetas:





Adsense

(1)



alexa


(1)



apresentação

(1)



artigos recentes

(1)




aumento de visitas

(4)



badges

(1)




blog directories

(1)



blog ranks

(2)



blogger

(1)




classificar mensagens

(1)



classificar posts

(1)




code snippet

(1)



comentários com links

(1)



comunidades

(1)




código

(3)



follow me

(1)




google

(1)



inserir código nos posts

(1)



lastfm

(1)




lista de artigos

(1)



mensagens recentes

(1)




mensagens relacionadas

(1)



monetizar blog

(1)



movimentos

(1)




notícia

(1)



posts recentes

(1)




posts relacionados

(1)



radio

(1)



radio lastfm

(1)




retagrr

(1)



sigam-me

(1)




sites sociais

(1)



table of contents

(1)



technorati

(1)




tradução do blog

(1)



tradução do blog com bandeiras

(1)




twitter

(1)



votar em posts

(1)



votações

(1)




widget radio

(1)



widgets

(11)

4. Vão novamente ao layout, abram o template/modelo nos “elementos de página”, adicionem um elemento de página (não liguem onde vai ficar) do tipo html/javascript.
Adicionem como seu conteúdo:


Titulo

Escolhendo um nome único para UniqueName nos dois locais. Escolham um nome “esquisito” para terem a garantia que não haverá mais nenhum identificador com o mesmo nome em todo o blog.
No “título” ponham o título que quiserem para esse painel, por exemplo “+/- Etiquetas”.

5. Copiem o código que encontraram no passo 3. (a lista de todas as vossas etiquetas) para a posição que indicamos a seguir: