Tutorial: Slider Automático com Posts Recentes
Oi pessoal, hoje vou mostrar para vocês como fazer um slide para blogger, ele funciona automaticamente, você não precisa está trocando direto as imagens, assim que você fizer algum post novo, ele vai automaticamente para o slide. Então, decidi mostrar esse tutorial aqui pra vocês, espero que gostem e que agradem a todos.
1 - No painel do Blogger vá em MODELO -> Editar HTML. Clique na área de códigos do template e aperte Ctrl + F para abrir a caixa de pesquisa.
Atenção: No novo modelo do blogger você só deve abrir a barra de pesquisa (Ctrl + F) após clicar dentro da caixa de códigos, caso contrário a sua pesquisa não apresentará resultados.
- Pesquise por ]]></b:skin> e logo acima disso adicione o código seguinte:
/*----- INÍCIO DO SLIDER ----------------------------------------*/.theme-default .nivoSlider {position:relative;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYnQNCdk7NmdIiZLv71qZpkZWRBrZYN2XGbC0bvtFxdLUrj3xFGjpLrBg8MhmAgMHaWO2N4C-Gi2ICD3km_bP6m5Uo8oZoDPRKUdYBPW6UPUxmqRzru_IfSX0ee8vzIk-dwryAu0Sv03s/s1600/loading.gif) no-repeat 50% 50%;-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;box-shadow: 0px 1px 5px 0px #4a4a4a;}.theme-default .nivoSlider img {position:absolute;top:0px;left:0px;display:none;}.theme-default .nivoSlider a {border:0;display:block;}.theme-default .nivo-controlNav {position:absolute;left:50%;bottom:-42px;margin-left:-40px; /* Tweak this to center bullets */}.theme-default .nivo-controlNav a {display:block;width:22px;height:22px;background:url(https://lh6.googleusercontent.com/-0EkJ0yn2heg/VFk-76AZAZI/AAAAAAAADjs/93B4rr-mLvA/s40/BolinhaCinza.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left;}.theme-default .nivo-controlNav a.active {background-position:0 -22px;}.theme-default .nivo-directionNav a {display:block;width:30px;height:30px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr1qBU-Y7j2QMqkEfblOv_re2tzwkEfTGZzVzbxueuIRJNR1I2UPPAhg2Qgc_ITLNYEJOHcQtSAfSf9FMiJWn0_xp0mtAXYF6l7sQpbVlVu8ymwbBYvQDj2xuzYDMTc575o_5UIJEmN24/s1600/arrows.png) no-repeat;text-indent:-9999px;border:0;}.theme-default a.nivo-nextNav {background-position:-30px 0;right:15px;}.theme-default a.nivo-prevNav {left:15px;}.theme-default .nivo-caption {font-family: Helvetica, Arial, sans-serif;}.theme-default .nivo-caption a {color:#fff;border-bottom:1px dotted #fff;}.theme-default .nivo-caption a:hover {color:#fff;}/* The Nivo Slider styles */.nivoSlider {position:relative;}.nivoSlider img {position:absolute;top:0px;left:0px;}/* If an image is wrapped in a link */.nivoSlider a.nivo-imageLink {position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;}/* The slices and boxes in the Slider */.nivo-slice {display:block;position:absolute;z-index:5;height:100%;}.nivo-box {display:block;position:absolute;z-index:5;}/* Caption styles */.nivo-caption {position:absolute;left:0px;bottom:0px;background:#888888;color:#fff;opacity:0.8; /* Overridden by captionOpacity setting */width:100%;height:50px;z-index:8;}.nivo-caption p {padding:10px;margin:0;font-size:15px;}.nivo-caption a {display:inline !important;}.nivo-html-caption {display:none;}/* Direction nav styles (e.g. Next & Prev) */.nivo-directionNav a {position:absolute;top:45%;z-index:9;cursor:pointer;}.nivo-prevNav {left:0px;}.nivo-nextNav {right:0px;}/* Control nav styles (e.g. 1,2,3...) */.nivo-controlNav a {position:relative;z-index:9;cursor:pointer;}.nivo-controlNav a.active {font-weight:bold;}.theme-default #slider {margin:10px -20px 60px 10px; /* Aqui você define a posição do slide */width:600px;height:300px;}.theme-pascal.slider-wrapper,.theme-orman.slider-wrapper {margin-top:150px;}.clear {clear:both;}/*----- FIM DO SLIDER ----------------------------------------*/
Em azul está o tamanho em pixels da altura de cada slide.
Em verde está o tamanho em pixels da largura de cada slide.
Em lilás está o código da imagem dos controladores (os coraçõezinhos que controlam os slides).
Em rosa está a cor do plano de fundo das legendas.
Em verde está o tamanho em pixels da largura de cada slide.
Em lilás está o código da imagem dos controladores (os coraçõezinhos que controlam os slides).
Em rosa está a cor do plano de fundo das legendas.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/><script src='http://yourjavascript.com/9634421461/nivo-slider-modified-min.js' type='text/javascript'/><script type='text/javascript'> $(window).load(function() { $('#slider').nivoSlider(); }); </script>
3- Agora vá na aba LAYOUT. Adicione um novo gadget e escolha HTML/Java Script. Nele, cole o código:
<div class="slider-wrapper theme-default"><div class="ribbon"></div><script style="text/javascript" src="http://yourjavascript.com/9644611160/galleryslide.js"></script><script style="text/javascript">var numposts_gal = 4; //number of postsvar image_height = 300; //image heightvar image_width = 600; //image width</script><script src="http://ENDEREÇO DO SEU BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script></div>
Troque o trecho rosa pelo endereço do seu blog.
Em vermelho está o número de slides.
Em azul está o tamanho em pixels da altura de cada imagem do slide.
Em verde está o tamanho em pixels da largura de cada imagem do slide.
Lembre-se de deixar o tamanho das imagens igual ao tamanho dos slides no passo 2.
Nenhum comentário:
Postar um comentário