O proximo passo nos meus estudos foi utilizar o algoritmo de pathfinding A*. Depois de pesquisar um pouco, descobri uma implementacao muito boa, feita pelo usuario sqlboy.O resultado pode ser visto no video. Desenvolvi uma maneira de criar um slider das suas fotos em uma postagem do blogspot, utilizando o Unslider. So nao consegui desativar o slider do blogspot de quando voce clica na foto do post.Mesmo tendo desenvolvido o script especialmente para o Blogger, ele pode ser utilizado em qualquer site, desde que carregadas as dependencias e o estilo especificados no post.Para colocar o slider, primeiramente voce deve incluir tres scripts. Para isso, voce deve acessar o layout do seu site e incluir um gadget do tipo "HTML/JavaScript". Nesse gadget, voce deve incluir o seguinte codigo: <script src="//code.jquery.com/jquery-latest.min.js"></script> <script src="//unslider.com/unslider.min.js"></script> <script type="text/javascript" src="http://yourjavascript.com/52113791313/myslider.js"></script> Esse codigo inclui o JavaScript do JQuery, o JavaScript do Unslider e o JavaScript que eu criei para auxiliar a implantacao do slider.Depois disso, voce deve incluir o CSS do Slider no seu modelo. Parte desse CSS foi baseado no disponibilizado por Winston Wolf no site cssdeck. Para isso, va na configuracao de modelo, Personalizar, Avancado, Adicionar CSS e inclua o seguinte codigo CSS (voce pode alterar esse CSS de acordo com o estilo que quiser, essa e apenas uma sujestao inicial): .dots { position: absolute; left: 0; right: 0; bottom: 20px; } ol.dots { margin-left: auto; margin-right: auto; } .dots li { display: inline-block; width: 10px; height: 10px; margin: 0 4px; text-indent: -999em; border: 2px solid #000; border-radius: 6px; cursor: pointer; opacity: .4; -webkit-transition: background .5s, opacity .5s; -moz-transition: background .5s, opacity .5s; transition: background .5s, opacity .5s; } .dots li.active { background: #000; opacity: 1; } .next, .prev { color: #333; display: inline-block; font: normal bold 4em Arial,sans-serif; overflow: hidden; position: relative; text-decoration: none; width: auto; opacity: .4; } .next, .prev { padding: 0.7em 1.5em } .next { text-align: right } .next:before, .next:after, .prev:before, .prev:after { background: #333; -moz-border-radius: 0.25em; -webkit-border-radius: 0.25em; border-radius: 0.25em; content: ""; display: block; height: 0.5em; position: absolute; right: 0; top: 50%; width: 1em; } .prev:before, .prev:after { left: 0 } .next:before, .prev:before { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .next:after, .prev:after { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .prev:after, .next:before { margin-top: -.36em } .next:hover, .next:focus, .prev:hover, .prev:focus { color: #c00 } .next:hover:before, .next:hover:after, .next:focus:before, .next:focus:after, .prev:hover:before, .prev:hover:after, .prev:focus:before, .prev:focus:after { background: #c00 } .prev { float:left; position:absolute; left:0; bottom:50%; } .next { float:right; position:absolute; right:0; bottom:50%; } Pronto. Seu blog esta pronto para receber o slider. Agora, voce vai criar seu post normalmente, inserindo em sequencia as fotos que voce quer que sejam incluidas no slider.Depois de inserir as fotos, voce deve mudar para o modo de edicao HTML para colocar o codigo que possibilitara o slider. Voce deve identificar o bloco HTML correspondente as fotos que voce acabou de inserir.Antes da primeira foto, voce deve incluir uma div com algum seletor, que sera utilizado para identificar o slider. Aqui, colocaremos uma div com o id "fotosSlide". <div id="fotosSlide"/> No