Slider com atualização automática e link para postagens recentes

Quem procura acha e o Repertório Nerd mostra agora para você como fazer um Slider que se atualize automaticamente conforme a publicação de suas postagens. (ATUALIZADO CÓDIGO FONTE)

Vamos ao que interessa, particularmente falando pesquisei e experimentei diversos, mas diversos códigos mesmo no meu blog e nenhum fazia o que eu esperava, procurava um slider pra que fosse usado como um menu de postagens na página inicial, alguns funcionavam mas não faziam automaticamente a atualização, outros faziam a atualização mas não lincavam para a página da postagem publicada, mas após muita pesquisa e persistência trago para vocês o tutorial completo:

OBS: Antes de mais nada salve sua template!

1º Passo:

Faça login na sua conta do Blogger > clique em MODELO > Clique em EDITAR HTML > PROSSEGUIR.

Localize a tag:

]]></b:skin>

e cole este código acima dele:

/*----- INÍCIO DO SLIDE  ----------------------------------------*/

.theme-default .nivoSlider {

 position:relative;

 background:#fff url(http://i1043.photobucket.com/albums/b436/JBollton/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:45%;bottom:-42px;

 margin-left:-40px; /* Tweak this to center bullets */

}

.theme-default .nivo-controlNav a {

 display:block;width:22px;height:22px;

 background:url(http://i1043.photobucket.com/albums/b436/JBollton/bullets.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(http://i1043.photobucket.com/albums/b436/JBollton/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;

}

/*----- END Default Theme ----------------------------------------*/

/* 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:#000;

 color:#fff;

 opacity:0.8; /* Overridden by captionOpacity setting */

 width:100%;

 z-index:8;

}

.nivo-caption p {

 padding:5px;

 margin:0;

}

.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 auto 70px auto;

 width:580px; /* Make sure your images are the same size */

 height:315px; /* Make sure your images are the same size */

}

.theme-pascal.slider-wrapper,

.theme-orman.slider-wrapper {

 margin-top:150px;

}

.clear {

 clear:both;

}

.showpageNum a {

padding: 3px 8px;

margin:0 4px;

text-decoration: none;

border:1px solid #999;

-webkit-border-radius:3px;-moz-border-radius:3px;

background: #ddd;

}

.showpageOf {

margin:0 8px 0 0;

}

.showpageNum a:hover {

border:1px solid #888;

background: #ccc;

}

.showpagePoint {

color:#fff;

text-shadow:0 1px 2px #333;

padding: 3px 8px;

margin: 2px;

font-weight: 700;

-webkit-border-radius:3px;-moz-border-radius:3px;

border:1px solid #999;

background: #666;

text-decoration: none;

}

2º Passo:

Procure pela Tag

</head> 

e cole o código abaixo acima da Tag </head>

<!-- jQuery -->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
 <script src='http://teste.bymetemplates.zip.net/nivo-slider-modified.min.js' type='text/javascript'/>
 <script type='text/javascript'>

 <script type='text/javascript'>

 $(window).load(function() {

 $(&#39;#slider&#39;).nivoSlider({

effect: &#39;fade&#39;,  //&#39;fold,fade,sliceDown&#39;

pauseTime: 8000,

});

 });

 </script>

3º Passo:

Clique em Expandir Modelos de Widgets e procure pela TAG:

<div id='main-wrapper'> 

e cole o código abaixo, abaixo dela.

<!-- SLIDER PAGINA INICIAL -->

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<div class='slider-wrapper theme-default'>

<div class='ribbon'/>

 <script src='http://teste.bymetemplates.zip.net/galleryposts.js' style='text/javascript'/>

<script style='text/javascript'>

 var numposts_gal = 6;   //number of posts

 var image_height =315; //image height

 var image_width =580;  //image width

</script>

<script src='http://COLOQUE-SEU-ENDERÇO-AQUI/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts'/>

</div>

</b:if>

<!-- FINAL SLIDER PAGINA INCIAL-->

Bem como vocês podem ver o código é inserido diretamente no HTML, ao contrário dos tantos outros que encontrei e é adicionado como widget, nunca ficando na posição acima das postagens que é como explico aqui.

Este slider é o mesmo que utilizo em meu site na página inicial, qualquer duvida a respeito da configuração do mesmo envie um comentário que logo responderei.

Compartilhe no Google Plus

Sobre J.A Carlot

Criador do Repertório NERD, adora garimpar a internet atrás de coisas que julga interessantes e outras que nem tanto, na vida real corretor de empréstimos, skatista, violeiro, vive na praia mas não visita o mar, adora agregar e compartilhar conhecimento, faz uso de linguagem não muito ortodoxa.