Dicas para Blogs
Dicas para Blogs |
Mostrar slides com as postagens recentes do blog Posted: 14 Mar 2010 08:26 AM PDT Veja como criar uma apresentação de slides com as suas postagens mais recentes no blog, assim você poderá gerar mais visitas dentro do seu próprio blog, melhorando até sua classificação no Google e outros sites de busca. O modo de colocar esse widget é muito simples, entre na pagina layout, adicionar gadget, html/javascript e cole o código abaixo e já está pronto! <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"> </script> <script type="text/javascript"> $(document).ready(function(){ var first = 0; var speed = 800; var pause = 6500; function removeFirst(){ first = $('ul#slide li:first').html(); $('ul#slide li:first') .animate({opacity: 0.5}, speed) .fadeOut('slow', function() {$(this).remove();}); addLast(first); } function addLast(first){ last = '<li style="display:none">'+first+'</li>'; $('ul#slide').append(last) $('ul#slide li:last') .animate({opacity: 1}, speed) .fadeIn('slow') } interval = setInterval(removeFirst, pause); }); </script> <style type="text/css"> #slide{ height:150px; width:360px; overflow:hidden; border: 1px solid #ccc; margin: auto; padding:5px; } #slide li{ margin: 10px 0 0 0; list-style:none; } #slide .news-title{ display:block; text-align: center; line-height: 10px; } #slide img{ float:left; margin-right:2px; padding:10px; border:solid 1px #ccc; } </style> <script language="JavaScript"> imgr = new Array(); imgr[0] = "URL IMAGEN 1"; imgr[1] = "URL IMAGEN 2"; imgr[2] = "URL IMAGEN 3"; imgr[3] = "URL IMAGEN 4"; imgr[4] = "URL IMAGEN 5"; showRandomImg = true; tablewidth = 360; cellspacing = 1; borderColor = ""; bgTD = "#ffffff"; imgwidth = 120; imgheight = 120; fntsize = 16; acolor = "#ff0000"; aBold = true; icon = " "; text = "no"; showPostDate = false; summaryPost = 40; summaryFontsize = 12; summaryColor = "#0000ff"; icon2 = " "; numposts = 10; label = ""; home_page = "http://www.dicasparablogs.com.br/"; </script> <script src="http://acessoriosparablogs.com.br/scripts/slide.js" type="text/javascript"></script> Apenas será necessário colocar o endereço do seu blog no local indicado no final do código (deixe a barra no final do endereço). Além disso, se quiser pode configurar os tamanhos de fontes e quantidades de caracteres que tem o resumo veja a seguir como personalizar o código da apresentação de slides dos posts recentes do blog, sugerimos primeiro instalar sem fazer nenhuma alteração apenas para testar, porque são muitas as opções que podemos alterar e fazendo isso aos poucos e visualizando o resultado no blog ficará mais fácil achar e corrigir algum erro durante as modificações. Veja aqui o código das cores em html para alterar esse gadget. Outro trecho que está no inicio controla a velocidade, veja: var first = 0; var speed = 800; var pause = 6500; Como isso funciona: var first: tempo para iniciar(deixe o valor 0) var speed: velocidade da transição(mudança de slide) var pause: tempo de pausa em cada slide Veja este trecho fica no final de código e controla praticamente tudo: imgwidth = 120; imgheight = 120; fntsize = 16; acolor = "#000"; aBold = true; icon = " "; text = "no"; showPostDate = false; summaryPost = 40; summaryFontsize = 12; summaryColor = "#ccc"; icon2 = " "; numposts = 10; Agora veja o que as principais linhas de código fazem e depois altere como desejar Imgwidth: largura da miniatura Imgheight: altura da miniatura Fntsize: tamanho da letra do titulo Acolor: cor do titulo summaryPost: numero de letras do resumo(começo da postagem) summaryFontsize: tamanho da letra do resumo summaryColor: cor da letra do resumo numposts: numero de postagens mostradas Existem outras coisas que podem ser modificadas como, por exemplo, a cor da borda que é #ccc; e nas mesmas linhas podemos até mudar o estilo das bordas, mas enfim depois que instalar o código poderá ver quais modificações farão esse novo widget combinar melhor com o seu blog. |
You are subscribed to email updates from Dicas para Blogs To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google Inc., 20 West Kinzie, Chicago IL USA 60610 |
Nenhum comentário:
Postar um comentário