sexta-feira, 10 de agosto de 2012

Criar Índice para o Blog

índice
Tal como a paginação, formulário de contacto e o widget de artigos relacionados, a criação de um índice é também uma tarefa a desenvolver por todos os webmasters, pois este é um recurso que permite direccionar o visitante aos artigos mais antigos do blog e que normalmente estão menos visíveis ou acessíveis. A incorporação do índice pode ser feita através de várias ferramentas existentes na internet, podendo depois este ser actualizado de forma automática.

A sugestão aqui apresentada é um widget criado por um webmaster muito conhecido (abu-farhan) que se dedica à criação de aplicações para a plataforma Blogger.  Após a incorporação a actualização do  índice é automática, ou seja, sempre que é criado um novo artigo este é automaticamente adicionado ao índice. De referir ainda que os artigos são apresentados por ordem cronológica.

Como instalar índice automático?


  1. No painel do Blogger vai a "Modelo" e depois clica em "Editar HTML".
  2. No template procura pela tag "]]></b:skin>".
  3. Logo acima de ]]></b:skin> cola o seguinte código:

    /*--------MBT TOC-----*/
    .judul-label{
    background-color:#E5ECF9;
    font-weight:bold;
    line-height:1.4em;
    margin-bottom:5px;
    overflow:hidden;
    white-space:nowrap;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 1px 1px 4px #AAAAAA;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    color: #e9e9e9;
    border: 2px solid white !important;
    background: #6e6e6e;
    background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
    background: -moz-linear-gradient(top, #888, #575757);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
    }
    .data-list{
    line-height:1.5em;
    margin-left:5px;
    margin-right:5px;
    padding-left:15px;
    padding-right:5px;
    white-space:nowrap;
    text-align:left;
    font-family:"Arial",sans-serif;
    font-size:12px;
    }
    .list-ganjil{
    background-color:#F6F6F6;
    }
    .headactive{
    color: #fef4e9;
    border: 2px solid white !important;
    background: #1C8DFF;
    background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
    background: -moz-linear-gradient(top, #9dc2e7, #438cd2);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
    }
  4. De seguida guarda o modelo do template.
  5. Agora no painel do Blogger vai a "Páginas", depois cria uma nova página com o título "Índice" e insere o seguinte código:

    <script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
    <script src="http://www.oteublog.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
    <script type="text/javascript">
    var accToc=true;
    </script>
    <script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

  6. No código não te esqueças de alterar para o link do teu blog, onde diz "<script src="http://www.oteublog...".

Se gostaste deste artigo considera assinar a Newsletter.

Enter your email address:


Delivered by FeedBurner

Sobre o Autor:
Adicionar caixa sobre autor no rodapé dos posts Facebook | Twitter | Google +

João Paulo Gramacho é o criador do Bizzarru.com onde escreve artigos sobre como ganhar dinheiro, dicas para blogs e técnicas SEO. Além de Webmaster também é licenciado em Química pela Faculdade de Ciências das Universidade de Lisboa.
Reacções:
Blog Widget by LinkWithin