» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

my Fontbook e um site com Fontes Gratis




my Fontbook é um site que oferece um Visualizador das Fontes do seu computador on line e pode ser usado livremente por qualquer navegador web.

Basta se cadastrar, confirmar o cadastro no email e fazer o login. Então coloque seu email de login, senha e entre no Font Viewer que demora um pouquinho mas localiza e apresenta as fontes como a imagem ao lado.




Principais Vantagens
  • Você pode digitar o texto que quer e visualizar em qual fonte fica melhor.

  • A janela de visualização fonte fornece uma visão geral de todas as fontes instaladas no seu pc;

  • Você pode imprimir uma fonte selecionada para visualizá-la melhor;

  • Você pode ver suas fonte na exibição condensados, ou alternar para exibição de lista para ver cada letra com texto exemplo expandido;

  • Você pode definir tags (etiquetas) para as suas fontes classificando-as de vários tipos diferentes da forma que quiser.


A outra dica é de um site onde você pode baixar fontes gratuitas sem limite de download.
Este site é o FONTex .
Um site de fácil navegação com inúmeras fontes gratuitas para você baixar para o seu computador.









Estas dicas eu vi nos sites:
Smashing apps
By Marina


Atualizando este post...

Hoje encontrei este programa leve, grátis e fácil de baixar que é também um visualizador de fontes.
É só clicar na imagem ao lado para ir até o site e baixar.
O programa abre automaticamente as fontes instaladas no seu pc facilitando a sua escolha.
Já testei e gostei muito.


Atualização em 30/08/2009

Template Iara




» Este template tem o nome da blogueira Iara dona do blog Mais Atitudes e foi criado em sua homenagem. Um blog que tem a seguinte proposta:"Breves divagações sobre: Comportamento, Cotidiano, Relacionamentos e coisas de mulheres."
Conheço Iara desde 2007 quando criei o Aukimia e desde então, estamos sempre por aí, uma com o link da outra, de vez em quando nos falamos e comentamos. Iara é muito simpática e sincera, qualidades que gosto muito. Ela havia me pedido para fazer um template com uma coluna apenas como é o blog dela, mas não consegui e coloquei uma sidebar no template. Mesmo assim acho que ficou uma combinação bem legal.
Então aproveitem o template.
Mas, NÃO SE ESQUEÇAM, NÃO RETIREM OS CRÉDITOS.
Nem REDISTRIBUAM SEM A MINHA PRÉVIA AUTORIZAÇÃO.

Hacks instalados:
  1. Hack Leia Mais com Imagens Reduzidas

  2. Lista de Posts Relacionados no Fim do Post

  3. Paginação no Blogger
    » Veja o 2º Passo deste link como configurar a Paginação no Seu Blog para que Funcione Corretamente.

  4. Breadcrumb - Uma ferramenta de Usabilidade

  5. Link de Comentários Corrigido

  6. Personalizando a Data do seu Post
QUALQUER DÚVIDA SOBRE OS HACKS CLIQUE NOS LINKS DOS MESMOS PARA ENTENDER MELHOR!
Observações:
♦ Você deve configurar o ícone com o link do Twitter colocando o seu ID no Twitter. Para isso encontre a linha <a href='http://twitter.com/seuID'> e substitua "seuID" pelo seu ID no Twitter.
♦ Os outros dois links de Feeds e Feeds-Email já estão configurados para funcionar automaticamente.
♦ Todos os códigos Javascript usados no template estão contidos nele.
A Pasta de Download Contém
  • Código XML;
  • Imagens usadas no template.
Sugestões de hacks para você usar em seu template:
Aproveitem :)

Instalando o Menu em Abas no Seu Blogger





Pesquisando na net aprendi a fazer este menu em abas que está instalado aqui no Templates, da imagem ao lado, mais fácil para quem tem menos experiência com os códigos e mais editável.
Principais Vantagens:
♦ Neste menu você pode aumentar ou diminuir o número de abas e até criar outro menu abaixo;
♦ Simples e fácil de ser adicionado em seu template.
Aprendi a fazer este menu neste site: BarelyFitz Designs
O código javascript é opensource.

Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ 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.

Obs: ♦ Estou utilizando como base o Template: Minima, Designer: Douglas Bowman que é disponibilizado pelo blogger.
♦ Este post foi publicado a 1ª vez em Abril/2008 e está sendo Republicado com várias modificações na intenção de melhorar o aprendizado.

Vamos ao Hack:
Clique em Layout ► Editar HTML.

1º Passo - Criar uma Gadget para o Menu em Abas

» Você vai criar uma nova gadget/gadget para seu menu em abas.

1º - Adicione o código CSS no HTML do seu template abaixo do código da #sidebar-wrapper(coluna lateral).

♦ O código em vermelho é o que vai ser adicionado.
Ficará desta forma:
#sidebar-wrapper {
width: 220px;
float: $endSide;
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*/
}
#tabsidebar-wrapper{
width: 220px;/*Defina a largura do seu widget*/
margin:30px 0px 5px 0px;
border: 1px none $bordercolor;
float:right;
}
OBS:
♦ margin ► Margens → Siga o raciocínio: 30px-superior, 0px-direita, 5px-inferior, 0px-esquerda Nesta ordem. Defina as margens de acordo com as necessidades do seu template.
♦ float ► Aqui você define qual o lado seu menu vai flutuar: right-direita, left-esquerda.

2º - Acima da tag <div id="'sidebar-wrapper'"> cole o código:

<div id='tabsidebar-wrapper'>

</div><!-- End Tabsidebar-->
♦ Clique em Visualizar para se certificar que está indo tudo certo.

2º Passo - Colocando o Estilo CSS do Menu em Abas

» Copie o código CSS do menu e cole acima da linha ]]></b:skin>(Use Ctrl+F para encontrar esta linha):
/*--------Tabber ---------------------------------*/
.tabberlive .tabbertabhide { display: none }
.tabberlive { margin-top: 8px }
/*------------ Tabernav=Navegação -------------------*/
ul.tabbernav { margin: 0;
               padding: 6px 0;
               border-bottom: 1px solid $bordercolor; /*Variável bordercolor pode ser alterada por um código de cor*/
               font: bold 12px Verdana, sans-serif;
               padding: 6px 0; }
ul.tabbernav li { list-style: none;
                  margin: 0;
                  display: inline; }
/*--- Abas Inativas ---*/
ul.tabbernav li a { padding: 6px 0.5em;
                    margin-left: 3px;
                    border: 1px solid $bordercolor;
                    border-bottom: none;
                    background: #D5DFE8; /*Cor do fundo das abas inativas*/
                    text-decoration: none; }
ul.tabbernav li a:link { color: #333 } /*Cor do texto das abas inativas*/
ul.tabbernav li a:visited { color: #667 }
ul.tabbernav li a:hover { color: #B30000; /*Cor do texto coloca o mouse sobre a aba*/
                          background: #dedede; /*Cor do fundo quando coloca o mouse sobre a aba*/
                          border-color: #dedede; }
/*--- Abas Ativas ---*/
ul.tabbernav li.tabberactive a { background-color: #fff; /*Cor do fundo da aba ativa »Deve ser igual a cor do conteúdo da aba*/
                                 color: #B30000; /*Cor das letras da aba ativa*/
                                 border-bottom: 1px solid #fff; /*Deve ser igual a cor do conteúdo da aba*/ }
ul.tabbernav li.tabberactive a:hover { color: $linkcolor; /*Cor do texto coloca o mouse sobre a aba*/
                                       background: white; /*Cor do fundo coloca o mouse sobre a aba*/
                                       border-bottom: 1px solid white; }
/*------ Tabbertab = Conteúdo da Tab/Abaixo das Abas -----------*/
.tabberlive .tabbertab { background: #fff; /*Cor do fundo abaixo »Deve ser igual ao da aba ativa*/
                         padding: 5px;
                         border: 1px solid $bordercolor;
                         border-top: 0;
                         font-size: 100%; }
.tabbertab ul { list-style: none;
                margin: 0 0 0;
                padding: 0 0 0 0px; }
/*----- Links Internos -----*/
.tabbertab ul li { /*Estilo para os links*/
                   background: url("http://i8.tinypic.com/6lip3c7.gif") no-repeat; /*Seta para os links*/
                   background-position: 0 5px;
                   border-bottom: 1px dotted #B30000; /*Cor da borda inferior dos links*/
                   text-indent: 10px;
                   color: $linkcolor; /*Cor do link*/
                   list-style: none;
                   margin: 0;
                   padding: 2px 0 3px 2px; }
/*-----Tabberlive-----*/
.tabberlive .tabbertab h2, .tabberlive .tabbertab h3 { display: none }
.tabberlive#tab1 .tabbertab, .tabberlive#tab2 .tabbertab { height: ;
                                                           overflow: auto; }
» Este código vai definir a aparência do seu menu. Por exemplo se você quer que o fundo das abas inativas fiquem cinza ou azuis, tamanho do menu, etc.
♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

3º Passo - Instalar o Javascript

» Copie o código Javascript abaixo e cole acima da tag </head>:
<script src='http://www.barelyfitz.com/projects/tabber/tabber.js' type='text/javascript'/>
ATENÇÃO
»O menu em abas funciona com um JavaScript que deve ser hospedado por você;
»BAIXE E SALVE o arquivo java que está em azul:
<script src="'http://www.barelyfitz.com/projects/tabber/tabber.js' type='text/javascript'">;
»Hospede no local de sua preferência substituindo o LINK: http://www.barelyfitz.com/projects/tabber/tabber.js no código do seu template pelo LINK fornecido por sua hospedagem(Sugestão Dropbox);
»Desta forma não haverá o risco de suas abas não funcionarem, a não ser que muitas pessoas usem o mesmo endereço do java e sua taxa de transmissão de banda ultrapassar o limite do site de hospedagem.
Você tem a opção de colocar o código javascript incorporado ao seu template, ou seja, Hospedar no próprio Blogger, para que não corra o risco do site de hospedagem dar problemas.
» Para isso copie o código abaixo e cole acima da linha </head>
<!-- JavaScript Tabber-->
<script type='text/javascript'>
//<![CDATA[
/* Copyright (c) 2006 Patrick Fitzgerald */
function tabberObj(argsObj)
{var arg;this.div=null;this.classMain="tabber";this.classMainLive="tabberlive";this.classTab="tabbertab";this.classTabDefault="tabbertabdefault";this.classNav="tabbernav";this.classTabHide="tabbertabhide";this.classNavActive="tabberactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabberid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg];}
this.REclassMain=new RegExp('\b'+this.classMain+'\b','gi');this.REclassMainLive=new RegExp('\b'+this.classMainLive+'\b','gi');this.REclassTab=new RegExp('\b'+this.classTab+'\b','gi');this.REclassTabDefault=new RegExp('\b'+this.classTabDefault+'\b','gi');this.REclassTabHide=new RegExp('\b'+this.classTabHide+'\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null;}}
tabberObj.prototype.init=function(e)
{var
childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false;}
if(e.id){this.id=e.id;}
this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1;}}}
DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title='';}
if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"");}
break;}}}
if(!t.headingText){t.headingText=i+1;}
DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabber=this;DOM_a.tabberIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabberid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9-]/gi,''));DOM_a.id=aId;}
DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li);}
e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabber:this});}
return this;};tabberObj.prototype.navClick=function(event)
{var
rVal,a,self,tabberIndex,onClickArgs;a=this;if(!a.tabber){return false;}
self=a.tabber;tabberIndex=a.tabberIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabber':self,'index':tabberIndex,'event':event};if(!event){onClickArgs.event=window.event;}
rVal=self.onClick(onClickArgs);if(rVal===false){return false;}}
self.tabShow(tabberIndex);return false;};tabberObj.prototype.tabHideAll=function()
{var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i);}};tabberObj.prototype.tabHide=function(tabberIndex)
{var div;if(!this.tabs[tabberIndex]){return false;}
div=this.tabs[tabberIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide;}
this.navClearActive(tabberIndex);return this;};tabberObj.prototype.tabShow=function(tabberIndex)
{var div;if(!this.tabs[tabberIndex]){return false;}
this.tabHideAll();div=this.tabs[tabberIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabberIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabber':this,'index':tabberIndex});}
return this;};tabberObj.prototype.navSetActive=function(tabberIndex)
{this.tabs[tabberIndex].li.className=this.classNavActive;return this;};tabberObj.prototype.navClearActive=function(tabberIndex)
{this.tabs[tabberIndex].li.className='';return this;};function tabberAutomatic(tabberArgs)
{var
tempObj,divs,i;if(!tabberArgs){tabberArgs={};}
tempObj=new tabberObj(tabberArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabberArgs.div=divs[i];divs[i].tabber=new tabberObj(tabberArgs);}}
return this;}
function tabberAutomaticOnLoad(tabberArgs)
{var oldOnLoad;if(!tabberArgs){tabberArgs={};}
oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabberAutomatic(tabberArgs);};}else{window.onload=function(){oldOnLoad();tabberAutomatic(tabberArgs);};}}
if(typeof tabberOptions=='undefined'){tabberAutomaticOnLoad();}else{if(!tabberOptions['manualStartup']){tabberAutomaticOnLoad(tabberOptions);}}  //]]>
</script>
♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

4º Passo - Fazer Funcionar o Menu em Abas

» Agora você vai colocar o código HTML e fazer funcionar seu menu em abas.Acrescente o código no local que deseja no seu blog.
  • Por exemplo: Se você quer que fique acima da sidebar (coluna lateral) do seu blog deve ser colocado acima do código correspondente ao da sidebar → <div id="'sidebar-wrapper'">.

1º - Copie o código abaixo:

<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='tabbertab' id='tabbertab1' maxwidgets='1' preferred='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabbertab' id='tabbertab2' maxwidgets='1' preferred='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabbertab' id='tabbertab3' maxwidgets='1' preferred='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabbertab' id='tabbertab4' maxwidgets='1' preferred='yes'/>
</div>
</div><!-- End tab1-->

<div class='tabber' id='tab2'>
<div class='tabbertab'>
<b:section class='tabbertab' id='tabbertab5' maxwidgets='1' preferred='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabbertab' id='tabbertab6' maxwidgets='1' preferred='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabbertab' id='tabbertab7' maxwidgets='1' preferred='yes'/>
</div>
</div><!-- End tab2-->

2º - Cole este código entre as tags:

<div id='tabsidebar-wrapper'>

</div><!-- End Tabsidebar-->
» Criadas no 1º Passo. Lembra?

3º - Observações Importantes:

♦ Com este código acima você irá acrescentar 2 menus em abas, sendo o primeiro com 4 abas e o segundo com 3 abas.

♦ Você pode retirar um dos menus RETIRANDO este código:
<div class='tabber' id='tab2'>
<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab5' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab6' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab7' maxwidgets='1' showaddelement='yes'/>
</div>
</div><!-- End tab2-->
</div><!-- End Tabsidebar-->
♦ Se você quiser acrescentar mais abas repita o código:
<div class='tabbertab'>
<b:section class='tabberlive' id='tabbertab#' maxwidgets='1' showaddelement='yes'/>
</div>
♦ Não se esqueça de alterar # por um número que não se repita.
♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Post Atualizado em 17/08/09 e Republicado nesta data.

Atualização Importante 18/09/2011:
Este hack não funciona no seu blog se você tiver domínio próprio, mesmo que seja redirecionado como é o meu por exemplo: http://www.templatesparavoce.com Precisa ter o blogspot no endereço. Fiquei super triste quando tentei colocá-lo neste blog depois de comprar o domínio, mas não deu certo.

NÃO Retire os Créditos!
NÃO é Permitido redistribuir os templates ou os tutoriais/hacks do TPV sem a prévia autorização de sua Autora.

Como Repetir a Data do Post




CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO
No post Personalizando a Data do seu Post ensinei como colocar a data no formato que tem aqui no blog. Este formato possibilita que coloquemos imagens na data e que ela fique com a aparência de calendário, basta colocar uma imagem de fundo e ajustar o código CSS da data. (Não se preocupem, estou produzindo um tutorial de como colocar a imagem na data para que fique como calendário.)

Para quem já usa este recurso que ensinei neste post, aprendi como repetí-la quando criamos posts no mesmo dia. Um recurso que ainda não tem no blogger.

Se você pretende aplicar este recurso pela primeira vez leia primeiro o post Personalizando a Data do seu Post , aí então faça a alteração que estou ensinando agora.
Lembra que você teve que substituir a linha:
<h2 class='date-header'><data:post.dateHeader/></h2>
Pelo código:
<div id='fecha'><script>remplaza_fecha('<data:post.dateHeader/>');</script></div>
Pois é. Para que sua data se repita você deve substituir este código acima ou a linha <h2 class='date-header'><data:post.dateHeader/></h2> por este código abaixo:
<div id='fecha'>
<script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='fecha'>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>
<script>remplaza_fecha(ultimaFecha);</script>
</div>
Clique em Salvar modelo

Assim sua data se repetirá quando você criar mais de um post no mesmo dia.

Aprendi esta dica no Templates para Novo Blogger e adaptei ao tutorial que já havia publicado aqui.

Post Atualizado em 30/08/09

Template Left Black




Este template é a versão escura do Gray Left com um papel de parede como background.
A fonte usada é Arial diferente da Trebuchet do Gray Left.


Orientações Sobre o Menu e Caixa de Pesquisas
Hacks instalados:
  1. Postagens Resumidas com imagem (thumbnail)

  2. Abas nos Comentários
    » Para que Funcione corretamente Configure os comentários do seu blog em: Configurações » Comentários » Posição do formulário de comentários » Marque:Postagem abaixo incorporada.

  3. Lista de Posts Relacionados no Fim do Post

  4. Paginação no Blogger
    » Veja no 2º Passo neste link como configurar para que a paginação no seu blog funcione.

  5. Breadcrumb - Uma ferramenta de Usabilidade

  6. Link de Comentários Corrigido

  7. Personalizando a Data do seu Post
QUALQUER DÚVIDA SOBRE OS HACKS CLIQUE NOS LINKS DOS MESMOS PARA ENTENDER MELHOR!
A Pasta de Download Contém
  • Código XML;
  • Imagens usadas no template;
  • Todos os códigos dos javascript usados.
Sugestões de hacks para você usar em seu template:

Aproveitem :)

Paginação no Blogger




Este hack é para você colocar, abaixo dos posts do seu blog, uma linha de paginação onde você vai poder escolher qual página quer ir dentro do blog. Facilitando a navegação. (Usabilidade)
Veja a demonstração aqui mesmo no TPV, vá até o fim da página principal.
Vantagens:
» O usuário pode navegar nas páginas de posts do seu blog e voltar quando quiser naquela que o chamou a atenção;
» Melhor organização do seu blog;
» Design simples e bonito sem ocupar muito espaço.

Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ SEMPRE TENTE ANTES NUM BLOG DE TESTES.
♥ SALVE O SEU TEMPLATE ANTES DE COMEÇAR, CLICANDO EM Baixar modelo completo.
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

Vamos ao hack:
Clique em Layout ► Editar HTML ► Clique em Expandir modelos de widgets.
1º- Passo:
» Encontre a linha:
<b:include name='nextprev'/>
» Copie o código abaixo:
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
.blogpager {
font-size:16px;
color: #060;
font-weight:bold;}
A.blogpager:hover {
background:transparent;
color:white;}
#vwg-pager-first, #vwg-pager-last, #vwg-pager-next, #vwg-pager-prev{
padding:2px 5px;
border:1px #cccccc solid;
font-weight:bold;
margin:2px;}
#vwg-pager-first:hover, #vwg-pager-last:hover, #vwg-pager-next:hover, #vwg-pager-prev:hover{
padding:2px 5px;
border:1px navy solid;
background-color:#24618E;
color:white;
font-weight:bold;}
</style>
</b:if>
<div align='center' style='margin:5px;'>
<form action='#' name='pager20'>
<span id='vwg-pager-first'/> <span id='vwg-pager-prev'/> <input name='showingpage' onfocus='this.select()' size='4' title='Enter page number that You want to go' type='text' value='init...'/>/<input disabled='disabled' name='pagestotal' size='4' type='text' value='init...'/> <input onclick='checkpager()' type='button' value='Go'/> <span id='vwg-pager-next'/> <span id='vwg-pager-last'/>
</form>
</div>

<script type='text/javascript'>
var blogID = &quot;3972232990891503524&quot;;
var home_page = &quot;http://tpviara.blogspot.com/&quot;;
var pager_max_main = 3;

var pager_first_text = &quot;First&quot;;
var pager_last_text = &quot;Last&quot;;
var pager_prev_text = &quot;Prev&quot;;
var pager_next_text = &quot;Next&quot;;
</script>
<script src="http://www.freewebs.com/anhvo/blogger/blogger_pager_script_v20.js" type="text/javascript"></script>
» Cole abaixo da linha:
<b:include name='nextprev'/>
♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.
Antes de ir para o 2ºPasso:
» Você pode colocar o código Javascript direto no seu template, evitando a hospedagem externa.
► Para isso substitua:
<script src="http://www.freewebs.com/anhvo/blogger/blogger_pager_script_v20.js" type="text/javascript"></script>

► Pelo código javascript:
<script type='text/javascript'>
//<![CDATA[
/********************************
Blogger Pager Script v2.0
(C) 2008 by Anhvo, http://vietwebguide.com
Visit http://www.vietwebguide.com to get more cool hacks
********************************/

var pager_max_results = 20;
if(location.href.match("max-results=")){
pager_max_results = parseInt(location.href.substring(location.href.indexOf("max-results=")+12).split("&")[0]);
} else if(!location.href.match("/search/label/")){
pager_max_results = pager_max_main;
}


var per_page = pager_max_results ;
if(!location.href.match('/search/label/')) {
pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary";
pager_pageurl = home_page+"search";
}
else {
label = location.href.split("/")[5];
label = label.split("?")[0];
label = label.replace(/ /g,"%20");
pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary/-/"+label;
pager_pageurl = home_page+"search/label/"+label;
}

var pager_opening = 1;
if(location.href.match("popening=")){
pager_opening = parseInt(location.href.substring(location.href.indexOf("popening=")+9).split("&")[0]);
}

var num_pages = 1;

function createBlogPager(){
var script = document.createElement('script');
script.src = pager_feedx+"?start-index=1&max-results=0&alt=json-in-script&callback=countnumpost";
script.type = "text/javascript";
document.getElementsByTagName('head')[0].appendChild(script)
}

function countnumpost(json) {
var posts  = json.feed.openSearch$totalResults.$t;
num_pages = (posts%per_page == 0) ? posts/per_page : Math.floor(posts/per_page)+1;
//////////////////////////////
var a1 = document.createElement("a");
a1.className = "blogpager";
a1.title = "Jump to page: (1)";
a1.href = "javascript:page(1)";
a1.innerHTML = pager_first_text;
document.getElementById("vwg-pager-first").appendChild(a1);
var a4 = document.createElement("a");
a4.className = "blogpager";
a4.title = "Jump to page: ("+num_pages+")";
a4.href = "javascript:page("+num_pages+")";
a4.innerHTML = pager_last_text;
document.getElementById("vwg-pager-last").appendChild(a4);

var prev = (pager_opening!=1) ? pager_opening-1 : 1;
var a2 = document.createElement("a");
a2.className = "blogpager";
a2.title = "Jump to page: ("+prev+")";
a2.href = "javascript:page("+prev+")";
a2.innerHTML = pager_prev_text;
document.getElementById("vwg-pager-prev").appendChild(a2);

var next = (pager_opening!=num_pages) ? pager_opening+1 : num_pages;
var a3 = document.createElement("a");
a3.className = "blogpager";
a3.title = "Jump to page: ("+next+")";
a3.href = "javascript:page("+next+")";
a3.innerHTML = pager_next_text;
document.getElementById("vwg-pager-next").appendChild(a3);

document.pager20.showingpage.value = pager_opening;
document.pager20.pagestotal.value = num_pages;

}

function checkpager(){
var uinput = parseInt(document.pager20.showingpage.value);
if((uinput <= num_pages)&&(uinput >= 1)) {
page(uinput);
}
else {
alert("Invalid page number. Please try by another!");
document.pager20.showingpage.focus() ;
document.pager20.showingpage.select();
}
}

function getDateAndGo(json){
var date2 = json.feed.entry[0].published.$t;
ss = parseFloat(date2.substring(17,19));
if(ss<59) ss++;
if(ss<10) { ss = "0"+ ss; }
date4  = encodeURIComponent(date2.substring(0,17)+ss+date2.substring(23,date2.length));
location.href = pager_pageurl+'?updated-max='+date4+'&max-results=' + per_page + '&popening=' + pager_opening;
}

function page(startindex) {
pager_opening = startindex;
var i = per_page*(startindex-1)+1;
var script2 = document.createElement("script");
script2.src =  pager_feedx+"?start-index="+i+"&max-results=1&alt=json-in-script&callback=getDateAndGo";
document.getElementsByTagName('head')[0].appendChild(script2)
}


createBlogPager();
//]]>
</script>

» O código COMPLETO da Paginação ficará assim:
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
.blogpager {
font-size:16px;
color: #060;
font-weight:bold;}
A.blogpager:hover {
background:transparent;
color:white;}
#vwg-pager-first, #vwg-pager-last, #vwg-pager-next, #vwg-pager-prev{
padding:2px 5px;
border:1px #cccccc solid;
font-weight:bold;
margin:2px;}
#vwg-pager-first:hover, #vwg-pager-last:hover, #vwg-pager-next:hover, #vwg-pager-prev:hover{
padding:2px 5px;
border:1px navy solid;
background-color:#24618E;
color:white;
font-weight:bold;}
</style>
</b:if>
<div align='center' style='margin:5px;'>
<form action='#' name='pager20'>
<span id='vwg-pager-first'/> <span id='vwg-pager-prev'/> <input name='showingpage' onfocus='this.select()' size='4' title='Enter page number that You want to go' type='text' value='init...'/>/<input disabled='disabled' name='pagestotal' size='4' type='text' value='init...'/> <input onclick='checkpager()' type='button' value='Go'/> <span id='vwg-pager-next'/> <span id='vwg-pager-last'/>
</form>
</div>

<script type='text/javascript'>
var blogID = &quot;3972232990891503524&quot;;
var home_page = &quot;http://tpviara.blogspot.com/&quot;;
var pager_max_main = 3;

var pager_first_text = &quot;First&quot;;
var pager_last_text = &quot;Last&quot;;
var pager_prev_text = &quot;Prev&quot;;
var pager_next_text = &quot;Next&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
/********************************
Blogger Pager Script v2.0
(C) 2008 by Anhvo, http://vietwebguide.com
Visit http://www.vietwebguide.com to get more cool hacks
********************************/

var pager_max_results = 20;
if(location.href.match("max-results=")){
pager_max_results = parseInt(location.href.substring(location.href.indexOf("max-results=")+12).split("&")[0]);
} else if(!location.href.match("/search/label/")){
pager_max_results = pager_max_main;
}


var per_page = pager_max_results ;
if(!location.href.match('/search/label/')) {
pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary";
pager_pageurl = home_page+"search";
}
else {
label = location.href.split("/")[5];
label = label.split("?")[0];
label = label.replace(/ /g,"%20");
pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary/-/"+label;
pager_pageurl = home_page+"search/label/"+label;
}

var pager_opening = 1;
if(location.href.match("popening=")){
pager_opening = parseInt(location.href.substring(location.href.indexOf("popening=")+9).split("&")[0]);
}

var num_pages = 1;

function createBlogPager(){
var script = document.createElement('script');
script.src = pager_feedx+"?start-index=1&max-results=0&alt=json-in-script&callback=countnumpost";
script.type = "text/javascript";
document.getElementsByTagName('head')[0].appendChild(script)
}

function countnumpost(json) {
var posts  = json.feed.openSearch$totalResults.$t;
num_pages = (posts%per_page == 0) ? posts/per_page : Math.floor(posts/per_page)+1;
//////////////////////////////
var a1 = document.createElement("a");
a1.className = "blogpager";
a1.title = "Jump to page: (1)";
a1.href = "javascript:page(1)";
a1.innerHTML = pager_first_text;
document.getElementById("vwg-pager-first").appendChild(a1);
var a4 = document.createElement("a");
a4.className = "blogpager";
a4.title = "Jump to page: ("+num_pages+")";
a4.href = "javascript:page("+num_pages+")";
a4.innerHTML = pager_last_text;
document.getElementById("vwg-pager-last").appendChild(a4);

var prev = (pager_opening!=1) ? pager_opening-1 : 1;
var a2 = document.createElement("a");
a2.className = "blogpager";
a2.title = "Jump to page: ("+prev+")";
a2.href = "javascript:page("+prev+")";
a2.innerHTML = pager_prev_text;
document.getElementById("vwg-pager-prev").appendChild(a2);

var next = (pager_opening!=num_pages) ? pager_opening+1 : num_pages;
var a3 = document.createElement("a");
a3.className = "blogpager";
a3.title = "Jump to page: ("+next+")";
a3.href = "javascript:page("+next+")";
a3.innerHTML = pager_next_text;
document.getElementById("vwg-pager-next").appendChild(a3);

document.pager20.showingpage.value = pager_opening;
document.pager20.pagestotal.value = num_pages;

}

function checkpager(){
var uinput = parseInt(document.pager20.showingpage.value);
if((uinput <= num_pages)&&(uinput >= 1)) {
page(uinput);
}
else {
alert("Invalid page number. Please try by another!");
document.pager20.showingpage.focus() ;
document.pager20.showingpage.select();
}
}

function getDateAndGo(json){
var date2 = json.feed.entry[0].published.$t;
ss = parseFloat(date2.substring(17,19));
if(ss<59) ss++;
if(ss<10) { ss = "0"+ ss; }
date4  = encodeURIComponent(date2.substring(0,17)+ss+date2.substring(23,date2.length));
location.href = pager_pageurl+'?updated-max='+date4+'&max-results=' + per_page + '&popening=' + pager_opening;
}

function page(startindex) {
pager_opening = startindex;
var i = per_page*(startindex-1)+1;
var script2 = document.createElement("script");
script2.src =  pager_feedx+"?start-index="+i+"&max-results=1&alt=json-in-script&callback=getDateAndGo";
document.getElementsByTagName('head')[0].appendChild(script2)
}


createBlogPager();
//]]>
</script>
♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.
♦ Clique em SALVAR ALTERAÇÕES.
2º- Passo:
Viu as 3 linhas em vermelho?
1- var blogID = &quot;5879906334350418630&quot;;2- var home_page = &quot;http://endereçodoseublog.blogspot.com/&quot;;3- var pager_max_main = 6;
Você deve fazer algumas alterações nestas linhas:
1- Colocar o número do seu blogID:
Olhe para a barra de endereços do seu navegador. Olhou?
Veja o endereço do blogger como este da imagem:



Veja que neste endereço tem o número do ID do seu blog. Copie este número e substitua o nº em verde na linha do código abaixo:
var blogID = &quot;5879906334350418630&quot;;
2- Substituir a URl: [http://endereçodoseublog.blogspot.com/] pelo Real Endereço do SEU BLOG.
var home_page = &quot;http://endereçodoseublog.blogspot.com/&quot;;
3-Posts a serem Exibidos na Página Principal
Sabe quando você seleciona a quantidade de posts que devem ser exibidos no seu blog? Pois é, o Número de postagens da página inicial deve ser igual ao número do [var pager_max_main].
var pager_max_main = 6;
Para isso:
Clique em Elementos de página » Postagens no blog » Clique em Editar » Veja a imagem.
♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.
♦ Clique em SALVAR ALTERAÇÕES.

3º- Passo:
» Para que seu Blog Pager funcione corretamente e SEMPRE você deve baixar o Arquivo Javascript. Veja em azul no código original.
» Hospedá-lo em um site de sua preferência. Sugestão Dropbox.
» E substituir o endereço do Javascript original: [http://www.freewebs.com/anhvo/blogger/blogger_pager_script_v20.js] pelo endereço hospedado por você.

4º- Passo:
» Tirar os links Postagens mais recentes e Postagens mais antigas OU NÃO:
Em Layout ► Editar HTML ► Clique em Expandir modelos de widgets
» Encontre as linhas de código abaixo e apague-as:
<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'><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'><data:olderPageTitle/></a>
</span>
</b:if>

» OU NÃO → Encontre as linhas acima e altere para que apareçam apenas nas páginas dos posts, sem as palavras Postagens mais recentes e Postagens mais antigas e SIM com os síbolos ◄ e ►.
» Basta selecionar os códigos descritos acima e substituir pelas linhas abaixo:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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></b:if>


♦ Clique em SALVAR ALTERAÇÕES

Pronto! Seu blog ficou muito mais elegante com este hack! ;)

Fonte: Tradução e adaptação do link Blog Pager Version 2.0

Template Eddie




» Baseado no template Mínima Left do blogger.
» Um template clean com vários hacks instalados.
Image and video hosting by TinyPic
Hacks instalados:
  1. Postagens Resumidas com imagem (thumbnail)

  2. Abas nos Comentários
    » Para que Funcione corretamente Configure os comentários do seu blog em: Configurações » Comentários » Posição do formulário de comentários » Marque:Postagem abaixo incorporada.

  3. Lista de Posts Relacionados no Fim do Post

  4. Paginação no Blogger
    » Veja no 2º Passo neste link como configurar para que a paginação no seu blog funcione.

  5. Breadcrumb - Uma ferramenta de Usabilidade

  6. Link de Comentários Corrigido
QUALQUER DÚVIDA SOBRE OS HACKS CLIQUE NOS LINKS DOS MESMOS PARA ENTENDER MELHOR!
A Pasta de Download Contém
  • Código XML;
  • Imagens usadas no template;
  • Todos os códigos dos javascript usados.
Sugestões de hacks para você usar em seu template:

Aproveitem :)

Ja Ouviram Falar em Sitemap?




"Um Sitemap é uma lista das páginas do seu site. Criar e enviar um Sitemap ajuda a garantir que os Mecanismos de Busca, sejam o Google, Bing, Yahoo, etc, tenham conhecimento de todas as páginas do seu site, incluindo URLs que não seriam normalmente encontrados através do processo normal de rastreamento dos mesmos."
Mas porque estou falando sobre isso?
Este é um recurso de SEO que ajuda o seu blog a ser "mais encontrado" nos sites de busca.
Estive lendo sobre e resolvi selecionar alguns bons links que nos ajudam a entender melhor sobre estes assuntos.

Vamos lá:

Sitemap completo no Blogger com Feedburner - Este é um artigo do Usuário Compulsivo sobre os Sitemaps, foi a primeira vez que ouvi falar em Sitemap para os blogs.

Ferramentas para Webmasters e Sitemap - Considero este artigo um roteiro excelente de dicas sobre SEO. Porque além de explicar sobre adicionar o seu Sitemap no Google em Ferramentas para Webmasters o Marcos Lemos(autor) também cita outros artigos dele mesmo relacionados ao assunto que também devem ser lidos.

Bing Webmaster Center - Sitemap - Também é um artigo do Marcos Lemos que me ensinou a adicionar os meus blogs no Webmaster Center do Bing.

Guia de Otimização para Mecanismos de Pesquisa - Este é o material criado e distribuído pelo setor de Ajuda a Webmasters do Google.

Então não perca tempo, leia e aprenda! :)

 
Copyright ©2007-2014. Templates para VOCÊ - Todos os Direitos Reservados
Licença Creative Commons
Baseado no Tema Johny Classicsite | Tecnologia do Blogger