Slide Profissional em JQuery com setas laterais para deixar seu blog bem mais bonito.
Vários blogueiros gostam de estilizar seu blog e nada melhor do que um slide profissional que você poderá destacar suas principais postagens. O slide não é tão complicado de instalar, mas requer atenção pois teremos que alterar o template.
Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.
Tutorial
1º Passo: Acesse seu blogger, no menu lateral clique em "Modelo" e depois em "Editar HTML".
2º Passo: Clique no código, pressione "CTRL + F", procure por </b:skin> e logo ACIMA cole o seguinte código:
/*
* jQuery Nivo Slider v2.5.1
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
#slider-wrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrv27zOWw0GKJcd2RYCF6ro9xnWyW2KCnv3KEtl0b9VOvRauMU7RHrd_bLdSPTgdXgLSl0kvV02jNToYOT0ucovVK8JeLidDQbB3ltXup3dg8x6vftd_4h18aFNIgDYTGk5hvK4o_MDyU/s1600/slider.png) no-repeat;
width:998px;
height:392px;
margin:0 auto;
padding-top:74px;
margin-top:50px;
}
#slider {
position:relative;
width:618px;
height:246px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSFoJSDC-4tbU0TX5zektaOi2rT7oP2Fbw0ml8-jvOWP0DVzVzQIaSIDJQkIAtK-HffVjymLS1ElwtGXGYI6zCI-KRRYZVCIWBa_O3fV-Usipt9pDPqGKnT5hyphenhyphenenur3Tyl-B-zCZmzjw8/s1600/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_C35Rb0njwITDYoZKcQwPuK0fwA9HF5MYWnlCPhdKjAzeNxSK-LN-nozbVdvhE7Ee3674DsjTF4VQkwV4D292MvIW8niSeluUXizKwtM2NGRQoTxl6l-VNClWaZokCAXupoO_0TfzPic/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsSFC6r8RVzKH2myjzfrcyJeElBBrlyqb6SHYhoNNnnDlJFhWd0EUJsmBRV0x0KP2JvQX7_VXbcR8aOVm9V6kgOYLxOhcVh6GNHgT5Jr-Vh-Gs9RKB-pGklw7wChjPR6njfTnvmuq6Wfs/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
/* 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;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsSFC6r8RVzKH2myjzfrcyJeElBBrlyqb6SHYhoNNnnDlJFhWd0EUJsmBRV0x0KP2JvQX7_VXbcR8aOVm9V6kgOYLxOhcVh6GNHgT5Jr-Vh-Gs9RKB-pGklw7wChjPR6njfTnvmuq6Wfs/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
/* 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;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_C35Rb0njwITDYoZKcQwPuK0fwA9HF5MYWnlCPhdKjAzeNxSK-LN-nozbVdvhE7Ee3674DsjTF4VQkwV4D292MvIW8niSeluUXizKwtM2NGRQoTxl6l-VNClWaZokCAXupoO_0TfzPic/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
3º Passo: Agora pesquise por </head> e logo ACIMA cole o seguinte código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/1611641113/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
4º Passo: Clique em "Salvar modelo".
5º Passo: Copie o código abaixo e cole no Bloco de Notas para fazer as alterações necessárias:
<div id="slider">
<a href="LINK DA POSTAGEM"><img src="URL DA IMAGEM" alt="" title="TITULO SLIDE 1" /></a>
<a href="LINK DA POSTAGEM"><img src="URL DA IMAGEM" alt="" title="TITULO SLIDE 2"/></a>
<a href="LINK DA POSTAGEM"><img src="URL DA IMAGEM" alt="" title="TITULO SLIDE 3" /></a>
<a href="LINK DA POSTAGEM"><img src="URL DA IMAGEM" alt="" title="TITULO SLIDE 4"/></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
* Crie imagens com o tamanho de 618 x 246 px e hospede em um servidor de sua preferência.
Em LINK DA POSTAGEM, troque pelos links de seus posts que você irá destacar;
Em URL DA IMAGEM, troque pelas urls das imagens que você hospedou;
Em TÍTULO SLIDE, troque pelos títulos que você queira que apareça no slide.
6º Passo: Em seguida no menu lateral do blog clique em "Layout", "Adicionar um gadget", escolha"HTML/Javascript" e cole o código que você alterou no Bloco de Notas.
7º Passo: Clique em "Salvar" e veja o resultado no seu blog.
Deixe seu comentário, pois ele é a motivação para nosso trabalho.
Comentários