Moderno Slide para blog

6 comentários
Moderno slide

Moderno slide

Que tal inserir em seu blog este slide moderno, dinâmico, sem conflitos de script, e com transição automática de imagens?

Se você está procurando um slide com essas características, este é o artigo certo!

Cada bloco do slide passa por uma transição de cor diferente, porém, a edição de blocos do moderno slide funciona da mesma forma, facilitando sua edição de textos, links e imagens.

Todos os blocos obedecem aos seguintes critérios:

Título da imagem na parte superior do bloco alinhado ao canto esquerdo;

Texto ou descrição do artigo abaixo do título alinhada ao canto esquerdo do bloco;

Link de redirecionamento para o artigo ao qual o bloco do slide trata, abaixo da descrição, alinhado ao canto esquerdo do bloco;

Ao lado direito do bloco fica a imagem que você pretende divulgar ou referente ao conteúdo.

A dimensão da imagem adequada para ser inserida no slide é 300 px por 300 px, porém, você pode inserir imagens com valores semelhantes.

Tutorial

Antes de começarmos, gostaríamos de esclarecer que você pode optar por inserir direto no código fonte do blog ou como um gadget. Porém, no modo gadget, as dimensões podem entrar em conflito com as dimensões do slide. Aconselhamos inserir este moderno slide no código fonte do blog.

Primeiro passo:

Você precisa inserir o css do moderno slide no código fonte. Copie o código abaixo:

.jms-slideshow {
 position: relative;
 width: 80%;
 max-width: 1400px;
 min-width: 640px;
 margin: 20px auto;
 height: 460px;
}
.jms-wrapper {
 width: auto;
 min-width: 600px;
 height: 440px;
 background-color: #fff;
 box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
 -webkit-background-clip: padding;
 -moz-background-clip: padding;     
 background-clip: padding-box;
 border: 10px solid #fff;
 border: 10px solid rgba(255, 255, 255, 0.9);
 outline: none;
 -webkit-transition: background-color 1s linear;
 -moz-transition: background-color 1s linear;
 -o-transition: background-color 1s linear;
 -ms-transition: background-color 1s linear;
 transition: background-color 1s linear;
}
.color-1 {
 background-color: #E3D8FF;
 background-color: rgba(227, 216, 268, 1);
}
.color-2 {
 background-color: #EBBBBC;
 background-color: rgba(235, 187, 188, 1);
}
.color-3 {
 background-color: #EED9C0;
 background-color: rgba(238, 217, 192, 1);
}
.color-4 {
 background-color: #DFEBB1;
 background-color: rgba(223, 235, 177, 1);
}
.color-5{
 background-color: #C1E6E5;
 background-color: rgba(193, 230, 229, 1);
}
.step { 
 width: 900px;
    height: 420px;
 display: block;
 -webkit-transition: opacity 1s;
 -moz-transition: opacity 1s;
 -ms-transition: opacity 1s;
 -o-transition: opacity 1s;
 transition: opacity 1s;
}
.step:not(.active) {
 opacity: 0;
 filter: alpha(opacity=0); /* internet explorer */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
}
.jms-content{
 margin: 0px 370px 0px 20px;
 position: relative;
 clear: both;
}
.step h3{
 color: #fff;
 font-size: 52px;
 font-weight: bold;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
 margin: 0;
 padding: 60px 0 10px 0;
}
.step p {
 color: #fff;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
 font-size: 34px;
 font-weight: normal;
 position: relative;
 margin: 0;
}
a.jms-link{
 color: #fff;
 text-transform: uppercase;
 background: #969696; /* Old browsers */
 background: -moz-linear-gradient(top, #969696 0%, #727272 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#969696), color-stop(100%,#727272)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #969696 0%,#727272 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #969696 0%,#727272 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #969696 0%,#727272 100%); /* IE10+ */
 background: linear-gradient(top, #969696 0%,#727272 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#969696', endColorstr='#727272',GradientType=0 ); /* IE6-9 */
 padding: 8px 15px;
 display: inline-block;
 font-size: 16px;
 font-weight: bold;
 color: #fff;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 border: 1px solid #444;
 border-radius: 4px;
 opacity: 1;
 margin-top: 40px;
 clear: both;
 -webkit-transition: all 0.4s ease-in-out 1s;
 -moz-transition: all 0.4s ease-in-out 1s;
 -ms-transition: all 0.4s ease-in-out 1s;
 -o-transition: all 0.4s ease-in-out 1s;
 transition: all 0.4s ease-in-out 1s;
    text-decoration: none;
}
.step:not(.active) a.jms-link{
 opacity: 0;
 margin-top: 80px;
}
.step img{
 position: absolute;
 right: 0px;
 top: 30px;
}
.jms-dots{
 width: 100%;
 position: absolute;
 text-align: center;
 left: 0px;
 bottom: 20px;
 z-index: 2000;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -o-user-select: none;
 user-select: none;
}
.jms-dots span{
 display: inline-block;
 position: relative;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background: #777;
 margin: 3px;
 cursor: pointer;
 box-shadow: 
  1px 1px 1px rgba(0,0,0,0.1) inset, 
  1px 1px 1px rgba(255,255,255,0.3);
}
.jms-dots span.jms-dots-current:after{
 content: '';
 width: 8px;
 height: 8px;
 position: absolute;
 top: 2px;
 left: 2px;
 border-radius: 50%;
 background: #ffffff; /* Old browsers */
 background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
 background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
}
.jms-arrows{
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -o-user-select: none;
 user-select: none;
}
.jms-arrows span{
 position: absolute;
 top: 50%;
 margin-top: -40px;
 height: 80px;
 width: 30px;
 cursor: pointer;
 z-index: 2000;
 box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
 border-radius: 3px;
}
.jms-arrows span.jms-arrows-prev{
 background: #fff url(../images/arrow_left.png) no-repeat 50% 50%;
 left: -10px;
}
.jms-arrows span.jms-arrows-next{
 background: #fff url(../images/arrow_right.png) no-repeat 50% 50%;
 right: -10px;
}
/* Not supported style */
.jms-wrapper.not-supported{
 background-color: #E3D8FF;
 background-color: rgba(227, 216, 268, 1);
}
.jms-wrapper.not-supported:after{
 content: 'The slideshow functionality is not supported on your device.';
 padding: 0px 0px 30px 0px;
 text-align: center;
 display: block;
}
.jms-wrapper.not-supported .step{
 display: none;
 position: relative;
 opacity: 1;
 filter: alpha(opacity=99); /* internet explorer */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
 margin: 20px auto;
}
.jms-wrapper.not-supported .step:first-of-type{
 display: block;
}
.jms-wrapper.not-supported .step:not(.active) a.jms-link{
 opacity: 1;
 margin-top: 40px;
}


Agora, vá ate o painel do seu blog, clique na aba modelo e selecione a opção editar HTML. Ao abrir a caixa com o código fonte do seu blog, procure pela tag ]]></b:skin>
Localizando-a, insira o código logo acima da mesma (antes da tag ]]></b:skin>)

Ao inserir o css do moderno slide, você deve inserir o html do slide (estrutura dos blocos).

Ainda no código fonte, copie o conjunto de scripts da caixa abaixo e insira acima da tag </head>

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'/>
        <!--[if lt IE 9]>
  <link rel="stylesheet" type="text/css" href="css/style_ie.css" />
  <![endif]-->
  <!-- jQuery -->
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
  <!-- jmpress plugin -->
  <script src='https://sites.google.com/site/bgarquivos/arquivos-javascript/jmpress.min.js' type='text/javascript'/>
  <!-- jmslideshow plugin : extends the jmpress plugin -->
  <script src='https://sites.google.com/site/bgarquivos/arquivos-javascript/jquery.jmslideshow.js' type='text/javascript'/>


<script type='text/javascript'>
   $(function() {
    
    var jmpressOpts = {
     animation  : { transitionDuration : '0.8s' }
    };
    
    $( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
     autoplay : true,
     bgColorSpeed: '0.8s',
     arrows  : false
    }));
    
   });
  </script>


Agora, vamos inserir o html copiando o código abaixo:

<section class='jms-slideshow' id='jms-slideshow'>
    
    
    
    <div class='step' data-color='color-2'>
     <div class='jms-content'>
      <h3>Titulo do slide...</h3>
     <p>Aqui voce vai colocar o conteudo ou falar sobre seu artigo relacionado a imagem do lado</p>
      <a class='jms-link' href='#'>Leia mais</a>
     </div>
     <img src='http://www.iconsdb.com/icons/preview/black/website-design-xxl.png'/>
    </div>
    
    
    
    
    <div class='step' data-color='color-3' data-rotate-x='80' data-y='900'>
     <div class='jms-content'>
      <h3>Titulo do slide...</h3>
     <p>Aqui voce vai colocar o conteudo ou falar sobre seu artigo relacionado a imagem do lado</p>
      <a class='jms-link' href='#'>Leia mais</a>
     </div>
     <img src='http://www.iconsdb.com/icons/preview/black/blogger-5-xxl.png'/>
    </div>
    
    
    
    
    
    
    <div class='step' data-color='color-4' data-rotate='170' data-x='-100' data-z='1500'>
     <div class='jms-content'>

      <h3>Titulo do slide...</h3>
     <p>Aqui voce vai colocar o conteudo ou falar sobre seu artigo relacionado a imagem do lado</p>
      <a class='jms-link' href='#'>Leia mais</a>
     </div>
     <img src='http://www.iconsdb.com/icons/preview/black/wordpress-5-xxl.png'/>
    </div>
    
    
    
    
    <div class='step' data-color='color-5' data-x='3000'>
     <div class='jms-content'>
      <h3>Titulo do slide...</h3>
     <p>Aqui voce vai colocar o conteudo ou falar sobre seu artigo relacionado a imagem do lado</p>
      <a class='jms-link' href='#'>Leia mais</a>
     </div>
     <img src='http://www.iconsdb.com/icons/preview/black/money-bag-xxl.png'/>
    </div>
    
    
    
    <div class='step' data-color='color-1' data-rotate-y='45' data-x='4500' data-z='1000'>
     <div class='jms-content'>
      <h3>Titulo do slide...</h3>
     <p>Aqui voce vai colocar o conteudo ou falar sobre seu artigo relacionado a imagem do lado</p>
      <a class='jms-link' href='#'>Leia mais</a>
     </div>
     <img src='http://www.iconsdb.com/icons/preview/black/reply-xxl.png'/>
    </div>
   
   </section>


Insira o código que você acabou de copiar logo abaixo da tag <body>

Desta forma, o slide ficará no topo do seu blog.

<body>

Se preferir, insira o conjunto de html, acima, dentro de um gadget, o que pode ser feito na aba layoult, gadget, opção html/javascript.

Editando bloco

<div class='step' data-color='color-2'> <div class='jms-content'> <h3>Título do slide...</h3> <p>Aqui você vai colocar o conteúdo ou falar sobre seu artigo relacionado à imagem do lado</p> <a class='jms-link' href='Link de redirecionamento'>Descrição do link</a> </div> <img src='url da imagem'/> </div>
Todos os blocos seguem o mesmo padrão de edição.

Este artigo está disponível para publicação em outros blogs ou sites desde que seja seguida a Política do BG

6 comentários :

  1. Meu slide ficou bom quando coloquei no blog,mas quando coloquei o domínio personalizado deu bug, ele sumiu , e os links do roda pé não funcionava mais.

    ResponderExcluir
  2. Este comentário foi removido pelo autor.

    ResponderExcluir
  3. Não consegui por alguém me ajuda? Consegui fazer todos os passos menos o ultimo, e sem esse ultimo desconfigurou toda a minha página...Não consigo achar a taaag que vocês pediram
    Me ajudem ai por favor ;D

    ResponderExcluir
    Respostas
    1. Este comentário foi removido pelo autor.

      Excluir
    2. Blair eu consegui colocar a tag em outro lugar e ele ficou melhor posicionada, mas confesso que não sei como se alimenta o slides ou se existe alguma forma mais simples

      Excluir
  4. Não consigo fazer a edição do bloco... onde coloco esse código?

    ResponderExcluir

O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.