• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

Hoje vou mostrar como criar um slideshow de imagem deslizante usando apenas CSS3.

Eu já publiquei outros tutoriais com diferentes slideshows para instalar no seu blog. Se quiser, pode conferir no marcador: Slides.

Este slide foi projetado por Codrops. Eu achei o efeito dele bem legal, por isto resolvi compartilhar com vocês.

Atenção: o resultado deste slide só funcionará perfeitamente como pretendido em navegadores que suportam transições e animações em CSS3.

Demo

Para instalar este Slideshow,siga os passos a seguir:

[becape]Só para lembrar, sempre é bom que você faça um Backup do seu template antes de prosseguir com qualquer instalação para evitar transtornos, caso algo saia errado.[/becape]

1. Instalar o código CSS

Acesse o painel do blogger, clique no menu “modelo >>Editar HTML” e procure pela tag ]]></b:skin>
e cole ANTES dela:

/* Slide css3
--------------------- */
.cr-container{ /*--aqui definimos os estilos do container--*/
	width: 600px;
	height: 400px;
	position: relative;
	margin: 0 auto;
	border: 20px solid #fff;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.cr-container label{
	font-style: italic;
	width: 120px;
	height: 30px;
	cursor: pointer;
	color:#fff;  /*-----cor dos numeros-----*/
	line-height: 32px;
	font-size: 24px;
	float:left;
	position: relative;
	margin-top:350px;
        margin-left:25px;
	z-index: 1000;
}
.cr-container label:before{
	content:'';
	width: 34px;
	height: 34px;
	background: #68abc2;  /*--- cor do circulos---*/
	position: absolute;
	left: 50%;
	margin-left: -70px;
	border-radius: 50%;
	box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
	z-index:-1;
}
.cr-container label:after{
	width: 1px;
	height: 400px;
	content: '';
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
	position: absolute;
	bottom:-20px;
	right: 0px;
}
.cr-container label.cr-label-img-4:after{
	width: 0px;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
color: #68abc2;  /*--- cor do número quando ativo---*/
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
background: #fff;   /*--- cor do circulo ativo---*/ 
box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
}
.cr-container input{
	display: none;
}
/*--definindo largura e altura das imagens--*/
.cr-bgimg{
	width: 600px;
	height: 400px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
}
.cr-bgimg{
	background-repeat: no-repeat;
	background-position: 0 0;
}
.cr-bgimg div{
	width: 150px;
	height: 100%;
	position: relative;
	float: left;
	overflow: hidden;
	background-repeat: no-repeat;
}
.cr-bgimg div span{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: -150px;
	z-index: 2;
	text-indent: -9000px;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
	background-image: url(http://tympanus.net/Tutorials/CSS3SlidingImagePanels/images/1.jpg);
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2){
	background-image: url(http://tympanus.net/Tutorials/CSS3SlidingImagePanels/images/2.jpg);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
	background-image: url(http://tympanus.net/Tutorials/CSS3SlidingImagePanels/images/3.jpg);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
	background-image: url(http://tympanus.net/Tutorials/CSS3SlidingImagePanels/images/4.jpg);
}
.cr-bgimg div:nth-child(1) span{
	background-position: 0px 0px;
}
.cr-bgimg div:nth-child(2) span{
	background-position: -150px 0px;
}
.cr-bgimg div:nth-child(3) span{
	background-position: -300px 0px;
}
.cr-bgimg div:nth-child(4) span{
	background-position: -450px 0px;
}

.cr-container input:checked ~ .cr-bgimg div span{
	-webkit-animation: slideOut 0.6s ease-in-out;
	-moz-animation: slideOut 0.6s ease-in-out;
	-o-animation: slideOut 0.6s ease-in-out;
	-ms-animation: slideOut 0.6s ease-in-out;
	animation: slideOut 0.6s ease-in-out;
}
@-webkit-keyframes slideOut{
	0%{ left: 0px; }
	100%{ left: 150px; }
}
@-moz-keyframes slideOut{
	0%{ left: 0px; }
	100%{ left: 150px; }
}
@-o-keyframes slideOut{
	0%{ left: 0px; }
	100%{ left: 150px; }
}
@-ms-keyframes slideOut{
	0%{ left: 0px; }
	100%{ left: 150px; }
}
@keyframes slideOut{
	0%{ left: 0px; }
	100%{ left: 150px; }
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
{
	-webkit-transition: left 0.5s ease-in-out;
	-moz-transition: left 0.5s ease-in-out;
	-o-transition: left 0.5s ease-in-out;
	-ms-transition: left 0.5s ease-in-out;
	transition: left 0.5s ease-in-out;
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
	-ms-animation: none;
	animation: none;
	left: 0px;
	z-index: 10;
}
/*-----estilos dos titulos----*/
.cr-titles h3{
	position: absolute;
	width: 100%;
	text-align: center;
	top: 50%;
	z-index: 10000;
	opacity: 0;
	color: #fff;  /*---cor do titulo --*/
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	-webkit-transition: opacity 0.8s ease-in-out;
	-moz-transition: opacity 0.8s ease-in-out;
	-o-transition: opacity 0.8s ease-in-out;
	-ms-transition: opacity 0.8s ease-in-out;
	transition: opacity 0.8s ease-in-out;
}
.cr-titles h3 span:nth-child(1){
	font-size: 40px;  /*---tamanho da fonte do titulo--*/ 
	display: block;
	letter-spacing: 7px;
}
.cr-titles h3 span:nth-child(2){
	letter-spacing: 0px;
	display: block;
	background: #68abc2;  /*-- cor de fundo do subtitulo --*/ 
	font-size: 14px;
	padding: 10px;
	font-style: italic;
	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4){
	opacity: 1;
}
/* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */
@media screen and (max-width: 768px) {
	.cr-container input{
		display: inline;
		width: 24%;
		margin-top: 350px;
		z-index: 1000;
		position: relative;
	}
	.cr-container label{
		display: none;
	}

Não esqueça de incluir as urls das suas imagens. Substitua as urls destacadas na cor vermelha, pela url das SUAS imagens.

2. Adicionar o código html do slide

Volte ao painel do blogger, e acesse o menu "layout", no campo onde você quiser adicionar o slideshow, clique em “Adicionar um Gadget” e Selecione a opção “HTML/JavaScript” e cole o seguinte código dentro dele:

<section class="cr-container">	
			
<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
<label for="select-img-1" class="cr-label-img-1">1</label>
				
<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
<label for="select-img-2" class="cr-label-img-2">2</label>
				
<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
<label for="select-img-3" class="cr-label-img-3">3</label>
				
<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
<label for="select-img-4" class="cr-label-img-4">4</label>
				
<div class="clr"></div>	
<div class="cr-bgimg">
<div>

<span>Slice 1 - Image 1</span>
<span>Slice 1 - Image 2</span>
<span>Slice 1 - Image 3</span>
<span>Slice 1 - Image 4</span>
</div>
<div>

<span>Slice 2 - Image 1</span>
<span>Slice 2 - Image 2</span>
<span>Slice 2 - Image 3</span>
<span>Slice 2 - Image 4</span>
</div>
<div>

<span>Slice 3 - Image 1</span>
<span>Slice 3 - Image 2</span>
<span>Slice 3 - Image 3</span>
<span>Slice 3 - Image 4</span>
</div>
<div>

<span>Slice 4 - Image 1</span>
<span>Slice 4 - Image 2</span>
<span>Slice 4 - Image 3</span>
<span>Slice 4 - Image 4</span>
</div>
</div>

<div class="cr-titles">
<h3><span>Titulo para Imagem 1</span><span>Pequena descrição 1</span></h3>

<h3><span>Titulo para Imagem 2</span><span>Pequena descrição 2</span></h3>
	
<h3><span>Titulo para Imagem 3</span><span>Pequena descrição 3</span></h3>

<h3><span>Titulo para Imagem 4</span><span>Pequena descrição 4</span></h3>

</div>
</section>

Um excelente local para instalar este slide, é logo acima da coluna de postagens, antes de mais nada você precisa conferir no painel do blog se no seu template já existe a possibilidade de adicionar um gadget acima da coluna de postagens, através do menu “layout”.
Se não houver, você terá que fazer algumas modificações no código. Para isso, siga este link e veja Como Instalar Gadgets abaixo do Cabeçalho

Este slide foi projetado com uma largura de 600px e 400px de altura.
Eu recomendo que você não faça alterações nestas medidas, a menos que você tenha um máximo conhecimento em CSS.
Para ajudar na edição e personalização das cores do slide, eu destaquei no código CSS o que cada trecho representa, basta prestar bastante atenção aos comentários destacados no código.
As imagens do slide possuem um tamanho máximo de 600×400. Escolha ou crie imagens neste tamanho.
Caso opte por modificar o tamanho das imagens, lembre-se que você mesmo(a) deverá editar o código todo, por sua própria conta e risco, ok?

Este modelo de slide não comporta a inclusão de muitas imagens e nem a inclusão de links, tendo em vista que ele serve para dar destaques imagens e não para redirecionar para postagens.

[alerta]Antes que me perguntem, o efeito deste slide é este. Caso você queira modificar o tipo de efeito, deverá estudar o código e fazer as modificações por sua própria conta e risco.[/alerta]

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn