Pesquise neste site

Como inserir Slides de Posts Recentes no Blogger (Responsivo)

Como melhorar o desempenho do seu Blogger


Como inserir Slides de Posts Recentes no Blogger (Responsivo).


Um dos recursos mais interessantes em um site ou um blog é a exposição de slides.
Vamos apresentar a vocês um modelo responsivo (se adapta a todo tipo de dispositivo) e é muito fácil de utilizar.
Neste site inserimos o modelo a seguir:

Vá em “Tema” no seu Blogger, e clique em “Editar HTML”.
Clique dentro da caixa de códigosaperte Ctrl+F e digite a tag </head>. Dê Enter.
ANTES de </head>, dê "Enter" e cole esse código abaixo:


<!-- Slide de postagens recentes -->
    <style type='text/css'>
      @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
@import url("https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css");

     /* Preloader */
      .flexslider.loading:after {
        content: &#39;&#39;;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: url(https://lh3.googleusercontent.com/-WWve06d4dB4/Vq28tN4LMUI/AAAAAAAAFcM/k8IQajpDnS4/h120/loader.gif) no-repeat center center;
        background-color: rgba(255, 255, 255, 0.9);
        z-index: 9999;
      }
      .flexslider.loading ul.flex-direction-nav,
      .flexslider.loading ol,
      .loading .flex-caption {
        display: none;
      }
      .flexslider {
        border: 1px solid #cacaca; /*--COR DA BORDA DO SLIDE--*/
        padding: 4px;
        margin: 0 auto 60px auto;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
      }
      .flexslider a {
        text-decoration: none;
      }
      /* TÍTULOS DOS POSTS */
      .flex-caption {
        position: relative;
        padding-left: 15px;
        padding-right: 10px;
        height: 60px;
        background: #FFFFFF;
        color: #1C1C1C;
        font-family: &#39;Open Sans&#39;, sans-serif; /*--FONTE DO TÍTULO--*/
        font-weight: 300; /*--ESTILO DA FONTE--*/
        font-size: 26px; /*--TAMANHO DA FONTE--*/
        line-height: 26px;
        margin: 0;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
      }
      .flex-caption span {
        display: table-cell;
        vertical-align: middle;
        height: 60px; /*--ALTURA DO BACKGROUND DO TÍTULO--*/
      }
      .flex-caption.overlayDark,
      .flex-caption.overlayLight {
        margin-bottom: -60px;
        bottom: 60px;
        position: relative;
      }
      .flex-caption.overlayDark {
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
      }
      .flex-caption.overlayLight {
        background: rgba(255, 255, 239, 0.9);
        color: #000;
      }
      ul.slides li a {
        display: block;
        overflow: hidden;
      }
      /* blogger css conflicts fix */
      .flexslider ul {
        margin: 0 !important;
        padding: 0 !important;
        line-height: initial !important;
      }
      .flexslider ul.flex-direction-nav li {
        margin: 0;
        padding: 0;
        line-height: initial;
      }
      .flexslider ul li {
        margin-bottom: 0 !important;
      }
      .flexslider img {
        padding: 0;
        border: none;
        -webkit-box-shadow: none;
        box-shadow: none;
      }
      ul.flex-direction-nav {
        position: static;
      }
      ul.flex-direction-nav li {
        position: static;
      }
      .error {
        font-family: monospace, sans-serif;
      }
      @media (max-width: 600px) {
        .flex-caption {
          font-size: 20px;
          line-height: 20px;
          font-weight: 400;
        }
      }
    </style>
    <!-- Scripts -->
    <script src='https://code.jquery.com/jquery-1.12.0.min.js' type='text/javascript'/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/jquery.flexslider-min.js' type='text/javascript'/>
    <script src='http://shuvojitdas.com/script/jquery.bdslider.min.js' type='text/javascript'/>


AGORA VAMOS ADICIONAR O WIDGET NO BLOG
Vá em “Layout”, clique em "Adicionar um Gadget" e procure pelo gadget "HTML/JavaScript".
Digite o “Título”, se quiser.
Agora copie o texto a seguir e cole em “Conteúdo” do box "HTML/JavaScript ":


<div id="slider1"></div>
<script type="text/javascript">
$(document).ready(function() {
    $("#slider1").BloggerDynamicSlider({
        imageWidth: 700, // LARGURA DO SLIDE
        imageHeight: 500, // ALTURA DO SLIDE
        maxItem: 10, // NÚMERO DE POSTS EXIBIDOS
        animation: "slide", // TROQUE POR "FADE"  SE NÃO QUISER SLIDE
        showPostTitle: true, // MOSTRA O NOME DOS POSTS (TROQUE POR FALSE SE NÃO QUISER EXIBIR OS TÍTULOS)
        postTitleStyle: "overlayLight", // COR DE FUNDO DOS TÍTULOS; TROQUE POR overlayDark" PARA FUNDO ESCURO
    });
});
</script>



Espero que estas informações tenha sido úteis!
Um beijo,
Sueli Rocha Miranda
Consultora dos websites "Consultas Contábeis", do "Site Nota 10" e "Como Melhorar O Seu Blogger"
Formada em Computação e em Ciências Contábeis

Matéria publicada por Como Melhorar O Seu Blogger, em parceria com o Portal International Sites (internationalsites.com.br), com a Gráfica Muito Mais Barata (graficamuitomaisbarata.com.br) e com o Portal Consultas Contábeis (consultascontabeis.com.br)

Editores:

* Vendas e Marketing:
Flávio Del Puente (sucesso.prosperidade@hotmail.com)

* Tecnologia da Informação, Contabilidade e Finanças:
Sueli Rocha Miranda (suelirmiranda@gmail.com)

* Gestão e Empreendedorismo:
Monique Oliveira (consultascontabeis@gmail.com)


Tags:
Dicas para o Blogger, Tutoriais, Atualizações. Matérias sobre Otimização, SEO, Personalização, Como Melhorar O Seu Blogger... e muito mais! Publicado por Como Melhorar O Seu Blogger.

Comentários

Nossas fotos no Flickr (clique na setinha e boa viagem!)

Natureza

Postagens mais visitadas

SEO Básico - Como melhorar o desempenho do seu Blogger

Como inserir um favicon no Blogger

Como bloquear a cópia do seu Blogger

Personalize a caixa de pesquisas no seu Blogger

Como personalizar a Página Inicial do Blogger

Melhorando o seu Blogger com os marcadores

Como importar uma foto do Flickr diretamente para o seu Blogger

Como configurar um domínio personalizado no Blogger

Qual o melhor site para baixar fontes grátis?