Como inserir Slides de Posts Recentes no Blogger (Responsivo)

Como Melhorar O Seu Blogger

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 neste espaço cole esse código:


<!-- 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 dicas tenham sido úteis para você!
Se precisar de uma ajuda extra, pode contar com a nossa assessoria profissional.
Sueli Rocha Miranda


Saiba mais...

Menu Completo

Sites Turbinados

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

Atenção! Pare de utilizar o Widget Imagem no Blogger

Como reduzir automaticamente as imagens para ajustar ao Blogger

Site desenvolvido pelo Site Nota 100


em parceria com a Gráfica Muito Mais Barata

Sites hospedados na International Sites Brasil



Gráfica Muito Mais Barata

Tabela de Preços

Promoções Imperdíveis

Distribuição de Folhetos

Fale Conosco

Site Nota 100

Sites no Topo do Google

E-mails Profissionais Turbinados

O que é SEO? Como conquistar os primeiros lugares no Google?

Fale Conosco


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