Home Programas Revistas Ebooks Videos Online Ufologia
2008-11-01

Criar Hack para suas postagens  


Esse tutorial é para criar um Hack (botão, link) de todos os post, ou seja, direcionar o leitor do seu blog para um lugar (logo abaixo do cabeçalho do seu blog) onde todos os artigos do seu blog estão reunidos, com organização de data e titulo da sua publicação em uma bonita e eficiente tabela em ajax, quando clicado aparece todos os posts publicados e, clicando novamente desaparece, na mesma janela de navegação (na sua Home).

Primeiro passo: Acesse a página de configurações do seu blog e, clique em "EDITAR HTML". Encontre essa linha de código:
<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

Ao encontrar esta linha pode ser que ela esteja sem o "maxwidgets 2", e "no" onde deveria estar "yes" em "showaddelement". Então, coloque o 'maxwidgets' com o valor "2" e coloque o 'showaddelement' com "yes", exatamente como no código acima. Salve o seu template.

Segundo passo:Veja em "Layout" (Adicionar e organizar elementos da página)... irá perceber que agora você pode adicionar widgets, acima da coluna principal, ou seja onde se encontra os artigos publicados no seu blog, então, clique nesse "Adicionar um Gadget" e nele coloque a seguinte linha html, mas deixe seu widget sem titulo, depois salve:
<div id="toc"> </div>






Terceiro passo:
Agora vamos adicionar o link ou botão no topo da barra lateral, depois você pode mudar de lugar se quiser, mas por enquanto siga os passos corretamente. Crie um novo widget, agora na sua barra lateral e adicione o seguinte código:
<div id="toclink"><a href="javascript:showToc();">Conteudo do Blog</a></div>
<script style="text/javascript" src="http://7ekadw.bay.livefilestore.com/y1pMfum252BrWVA7OAQjAv3uTMZN4g2MDSIQC14gMxyLsLgYzwa2f1sFy8AQbhvr-jBMQ-zWguI2MzZxMHplzxrJA/blogtoc.js">
</script>
<script src="http://NOMEDOSEUBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
Obs: No código que está escrito em letra maiúscula "NOMEDOSEUBLOG" não esqueça de colocar o nome do seu blog!

Onde está escrito "conteúdo do blog", você pode alterar ao seu gosto já que este é o link que irá aparecer, pode até colocar uma imagem desde que altere apenas a área escrita "conteúdo do blog".

Observe também que na linha http://7ekadw.bay.livefilestore.com/y1pMfum252BrWVA7OAQjAv3uTMZN4g2MDSIQC14gMxyLsLgYzwa2f1sFy8AQbhvr-jBMQ-zWguI2MzZxMHplzxrJA/blogtoc.js, dá pra perceber que este arquivo foi hospedado por mim, mas se você quiser, hospede em um site/host de sua confiança, no meu caso hospedei no SkyDrive (Windows Live). Como hospedar Java Script no Skydrive.

|download do código|


Quarto passo: Acesse novamente a página de configurações do seu blog e clique em "EDITAR HTML". Copie o código abaixo e cole logo acima da tag ]]></b:skin> do seu Template e salve.

<style type="text/css">
#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ffd595;
color: #000000;
padding-left: 5px;
width:250px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:80%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:80%;
text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:70%;
}
</style>

Pronto. Agora seus leitores podem optar em ver todos os seus posts, e selecionar vê-los por data ou categoria.
Qualquer dúvida...




Bookmark este post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google

VEJA TAMBEM



Postar um comentário

Por favor deixe seu email pra futuro contato. Comentários sem email válido não serão respondidos!