Slide de postagens recentes para blog- modelo responsivo

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>