Slide de postagens recentes para blog- modelo responsivo

Views:
PRIMEIRO CÓDIGO (COLAR ANTES DE </HEAD>:

<!-- 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'/>



SEGUNDO CÓDIGO (COLAR COMO GADGET HTML/JAVASCRIPT):

<div id="slider1"></div>
<script type="text/javascript">
$(document).ready(function() {
    $("#slider1").BloggerDynamicSlider({
        imageWidth: 700, // LARGURA DO SLIDE
        imageHeight: 350, // ALTURA DO SLIDE
        maxItem: 7, // 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>


TUTORIAL COMPLETO DESTE SLIDE:
https://www.elainegaspareto.com/2016/09/slide-de-postagens-recentes-para-blog.html