Saiba como:"Configurar o " Next Post " e o "Previous Post" do seu Blog

Saiba como:"Configurar o " Next Post " e o "Previous Post" do seu Blog

- fonte e créditos deste presente post :

templatesparavoce

 

 

Quando você está lendo um post e, no final quando está terminando a sua leitura sempre tem os links de postagem mais recente e postagem mais antiga.

Se você gosta do que leu, muitas vezes é impulsionado a clicar em um destes links e continuar a ler os bons artigos do blog.

» Você pode deixar estes links como estão ou pode alterá-los colocando imagens com setas para a direita ou para a esquerda, com os dizeres Posts mais Antigos e Posts mais Recentes, com os símbolos ◄ ► ou até com o título do post anterior e do próximo, etc…
Vou ensinar como fazer tudo isso neste artigo:

Não Se Esqueça:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

Entre no seu blog: Vá em Modelo → Editar HTML [Clique em Prosseguir] → Marque a caixinha Expandir modelos de widgets

Encontre o bloco de linhas abaixo▼

Procure pela Linha: <b:includable id='nextprev'>

 

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' 

expr:href='data:newerPageUrl' 

expr:id='data:widget.instanceId + "_blog-pager-newer-link"' 

expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' 

expr:id='data:widget.instanceId + "_blog-pager-older-link"' 

expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
</div>
  <div class='clear'/>
</b:includable>

»Não se preocupe se o seu bloco de linhas estiver um pouco diferente deste o que interessam são as tags em vermelho.

1º Colocando imagens de setas nos links:

» Encontre e defina as imagens de setas para a direita, para a esquerda e de “Home” que te agradarem mais. Procure em sites de ícones.


Sugestões:» Ícones para o seu blog / » 22 Links de Sites de Ícones para Download → Nos sites de ícones procure por Arrow que significa Seta em inglês.

Salve as imagens em seu computador » Hospede em algum site de imagens ou no seu próprio blog » Guarde a URL das imagens

Eu escolhi estas imagens:

  

Para colocar a seta da Esquerda que significa Post mais Recente

Substitua a primeira tag em vermelho <data:newerPageTitle/> do código acima por esta tag:

<img alt='Next' border='0' src='URL da Seta da Esquerda'/>

Para colocar a seta da Direita que significa Post mais Antigo

Substitua a primeira tag em vermelho  

<data:olderPageTitle/> 
do código acima  
por esta tag: 

<img alt='Previous' border='0' src='URL da Seta da Direita'/>

Para colocar a imagem de Home que Significa Início

Substitua a primeira tag em vermelho  

<data:homeMsg/> 

do código acima por esta tag: 

<img alt='Home' border='0' src='URL da IMAGEM de Home'/>

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.


"Veja como ficou neste Blog de Demonstração "

2º Colocando Símbolos nos Links

Existem vários símbolos que representam setas que você pode colocar no seu blog. 
Veja em:
 
..." Demoplate ...":
..." símbolos ◄ ► 
que são representados pelos atalhos Alt+17 e Alt+16 respectivamente.

"Veja neste post: Símbolos - Atalhos do Teclado 
 a lista de símbolos e atalhos do teclado para você colocar."

"Para colocar a seta da Esquerda que significa Post mais Recente"

Substitua a primeira tag em vermelho 

 <data:newerPageTitle/> 

do código no começo do post pelo atalho do símbolo:

[Alt+17 = ◄] ou 
[Alt+27 = ←] ou 
[Alt+174 = «]

Para colocar a imagem da Direita que significa Post mais Antigo

Substitua a primeira tag em vermelho <data:olderPageTitle/> 
do código no começo do post 
pelo atalho do símbolo:

[Alt+16 = ►] ou 
[Alt+26 = →] ou 
[Alt+175 = »]

O Código ficará assim:

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>◄</a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>►</a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
</div>
  <div class='clear'/>
</b:includable>

Neste caso não alterei o link do início. Mas fica a seu critério alterá-lo ou não.

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Para colocar dizeres diferentes dos pré estabelecidos pelo blogger você faz o mesmo procedimento descrito acima.

3º Colocando os Títulos dos Posts no lugar dos links Next Post e Previous Post

1- Aqui vamos usar jQuery e precisamos colocar o link do javascript no HTML do blog:

» Cole esta tag <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>  acima da tag </head>


♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

♦ Clique em Fechar .


2- Vá em Layout » Clique em Adicionar um Gadget » Escolha um gadget HTML/JavaScript » Cole o código abaixo em Conteúdo e Clique em Salvar.

<style type="text/css"> 
#blog-pager-newer-link {font-size:100%;width:200px;text-align:left;} 
#blog-pager-older-link {font-size:100%;width:200px;text-align:right;} 
</style> 
<script type="text/javascript">
$(document).ready(function(){ 
var newerLink = $("a.blog-pager-newer-link").attr("href"); 
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() { 
var newerLinkTitle = $("a.blog-pager-newer-link").text(); 
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle); 
}); 
var olderLink = $("a.blog-pager-older-link").attr("href"); 
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() { 
var olderLinkTitle = $("a.blog-pager-older-link").text(); 
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt 
}); 
}); 
</script>

"Visualize seu blog e verá os títulos dos posts anterior e próximo. "

"Confira no blogs de demonstrações Demoplate2."

"OBS: »Você pode configurar os títulos como desejar alterando estas linhas de código CSS:"

#blog-pager-newer-link {font-size:100%;width:200px;text-align:left;}
#blog-pager-older-link {font-size:100%;width:200px;text-align:right;}

Veja as imagens:

Antes:



Depois:




  ...hack 
aplicado
em
no TPV (templates Para Você). "

"OBS: Este hack funciona em todos os templates do blogger 2006 e 2010."

Fontes - Tradução e Adaptação dos artigos:
How To Change Older Post And Newer Post Link
Replace Older & Newer Post Links With Post Titles

Categories: blogger, customizar, dicas, Hacks

Snapfit: Um script para gerar quebra-cabeças

Snapfit é uma script que gera quebra-cabeças qualquer imagem que possa ser usado na maioria dos browsers de última geração.

Podemos incluir diretamente no modelo ou uma entrada para isso, basta baixar o ZIP que inclui uma demonstração e hospedar o arquivo em um snapfit.js servidor. Em seguida, adicioná-lo como qualquer outro:

 

src = "URL_snapfit.js">

 

Para usar, basta adicionar onload = "   snapfit.add (this);"   

para o tag IMG que esta sempre contido em uma DIV:

 

" width = "valor"Height ="valor"Id ="nome"

Src ="URL_imagen"/>

Assim, sem parâmetros, podemos acessar as diversas funções que são tratadas com o teclado ou mouse:

Mover: Clique e arraste
Girar : Dê um duplo clique gira 90 graus no sentido horário do relógio
Flip Horizontal : ALT + clique duplo ou clique direito
Flip Vertical : Dê um duplo clique ou botão do mouse SHIFT + média
Reset : CES
Mix : DELETE ou BCKSP
Resolver : Tecla ENTER

Parâmetros, podemos controlar a forma de exibir a imagem:

Mix: snapfit.admix (ID_imagen);
Resolve: snapfit.solve (ID_imagen);
Mudança de nível: snapfit.reset (ID_imagen, valor), Onde o valor pode variar entre 0 e 6

Isto, podemos aplicar, por exemplo, com um link:

 

" onclick = "snapfit.solve 

(document.getElementById 

('ID_imagenResolver'));"> 

Mix | Resolver | Fácil | Médio | Difícil

Tudo o que podemos acrescentar também no caso onload a imagem como parâmetros, por exemplo, isso mostraria que misturada no nível mais difícil:

 

onload = "snapfit.add (esta {nível: 6, mistos: true});"

 

Vários parâmetros que controlam outros detalhes:

mistas mistas ou não, verdadeiro ou falso (o padrão é falso)
simples mistura apenas as posições (o padrão é falso)
nível valores 0-6 (padrão é 3)
nokeys se desativa verdade que o uso do teclado (o padrão é falso)
polígono se polígonos verdade são usados em vez de retângulos (o padrão é falso)
aimag se for verdade, o fundo é a imagem original (o padrão é falso)
endereço verdade se você adicionar um limite (o padrão é falso)
aopacity é a opacidade do fundo (o padrão é 0,33)
bopacity é a opacidade das partes de borda (o padrão é 0,50)
sopacity é a opacidade da parte ativa (o padrão é 0,75)
mcolor , fcolor, acolor e bcolor controle de cor

Há muitos outros detalhes e recursos para personalizar a script, A chamada callback usá-lo para executar funções adicionais, por exemplo, mostrar uma janela de alerta quando o enigma foi resolvido:

 

onload = "snapfit.add (este, 

{callback: function () 

{alert ('resolveu o nível .');}, 

puzzle: 4, 

mista: true polígono: true});"

RESOLVE

MIX

VEJA IMAGENS

fonte e créditos:
http://vagabundia.blogspot.com/2010/10/snapfit-un-script-para-generar-puzzles.html















e, recebi em meu e-mail:

 

Vagabundia  para mim

Vagabundia

---

Snapfit: Un script para generar puzzles Posted: 14 Oct 2010 08:00 PM PDT Snapfit es un script que permite generar puzzles de cualquier imagen y que puede ser utilizado en la mayoría de los navegadores de última generación. Lo podemos incluir directamente en la plantilla o en una entrada, para eso, basta descargar el ZIP que incluye un demo y alojar el archivo snapfit.js en un servidor. Luego, lo agregamos como a cualquier otro: Para utilizarla, basta que agreguemos onload="snapfit.add(this);" a la etiqueta IMG que conviene que este siempre contenida en un DIV: valor" height="valor" id="nombre" src="URL_imagen" /> Así, sin parámetros, ya podemos acceder a las distintas funciones que se manejan con el teclado o el ratón: Mover: click y arrastrar Rotar: con doble click gira 90º en el sentido de las agujas del reloj Flip Horizontal: doble click + ALT o botón derecho Flip Vertical: doble click + SHIFT o botón central Reset: tecla ESC Mezclar: tecla SUPR o BCKSP Resolver: tecla ENTER Con parámetros, podemos controlar la forma en que se mostrará la imagen: Mezclar: snapfit.admix(ID_imagen); Resolver: snapfit.solve(ID_imagen); Cambiar el nivel: snapfit.reset(ID_imagen, valor); donde valor puede variar entre 0 y 6 Esto, lo podemos aplicar, por ejemplo, con un enlace: ID_imagen'));"> Resolver Mezclar | Resolver | Fácil | Medio | Difícil Todo eso también lo podemos agregar en el el evento onload de la imagen como parámetros; por ejemplo, esto haría que se mostrara mezclado en el nivel más difícil: onload="snapfit.add(this,{level:6,mixed:true});" Hay más parámetros que controlan otros detalles: mixed mezclado o no, true o false (por defecto es false) simple mezcla solo las posicioes (por defecto es false) level valores 0 a 6 (por defecto es 3) nokeys si es true se deshabilita el uso del teclado (por defecto es false) polygon si es true se usan polígonos en lugar de rectángulos (por defecto es false) aimage si es true, el fondo es la imagen original (por defecto es false) aborder si es true se agrega un borde (por defecto es false) aopacity es la opacidad del fondo (por defecto es 0.33) bopacity es la opacidad del borde de las piezas (por defecto es 0.50) sopacity es la opacidad de la pieza activa (por defecto es 0.75) mcolor, fcolor, acolor y bcolor controlan los colores Hay muchos otros detalles y funciones para personalizar el script; la llamada callback la utilizamos para ejecutar funciones extras, por ejemplo, mostrar una ventana de alerta cuando el puzzle ha sido resuelto: onload="snapfit.add(this,{callback: function() {alert('Ha resuelto el puzzle.');},level:4,mixed:true,polygon:true});" RESOLVER MEZCLAR VER IMAGEN Vagabundia

You are subscribed to email updates from Vagabundia




















http://mensagensdiversificadas1.blogspot.com  

Categories: dicas

Como consultar seu local de votação?

 

Como consultar seu local de votação

quinta-feira, 30 de setembro de 2010

"  Quem vai votar pela primeira vez nestas Eleições 2010 pode está em dúvida quanto ao local de votação. Até mesmo quem  já votou anteriormente pode ter a surpresa de chegar no local de votação e não encontrar a sessão esperada."

Para evitar contratempos de última hora no dia 3 de outubro, dia das Eleições 2010, o eleitor que quiser confirmar seu local de votação pode fazer a consulta por meio da página do Tribunal Superior Eleitoral (TSE).

Para isso, basta escolher um dos links a seguir:

• Consultar local de votação pelo nome do eleitor                          
• Consultar local de votação pelo número do título                        

"  Nos dois casos, é necessário informar a data de nascimento e o nome da mãe (quando houver). Informando esses dados e clicando no botão    "  consulta  ",    o sistema apresenta a seção, zona e endereço do local de votação. Há, ainda, a possibilidade de imprimir o resultado da pesquisa."

fonte e créditos:

 http://www.castrodigital.com.br

Intense Debate Comments
http://mensagensdiversificadas1.blogspot.com
 

Categories: dicas