Slideshow com Miniaturas para Blogger



                                                             TUTORIAL

Vá para Painel do Blogger> Layout> Adicionar um Gadget Adicionar HTML/JavaScrip
Copie o código abaixo e cole nele. Depois salvá-lo. E pronto!.
procure um ponto melhor para seu blogger , Slideshow editável pode ajustar de acordo com seu template!

Veja Aqui o Resultado

<style type="text/css">
.slider-box {
    background: none repeat scroll 0 0 #FAFAFA;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 3px #333333;
    margin: 0 auto;
    width: 675px;
    overflow: hidden;
}

#slider-wrapper {
    margin: 0 auto;
    padding: 10px;
}

#jslider-container {
    border: 2px solid #FFFFFF;
    max-width: 550px;
    position: relative;
    text-align: left;
    z-index: 90;
}
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<div class="slider-box">
    <div id="slider-wrapper">
        <div id="jslider-container">
            <div class="jslider_images">
                <ul>
                    <li>
                        <a href="http://dimpost.com">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwMC6LPdumnTMS7XAdi2JIRtoq36zQAAN7atsAQptHWSPSEe8FBSpJIP1J1TtKTlLV7o-rDoMVvKVG-OHxzER5dwoNxwaDFkssBhAT8Od3YhqW-nKXceRZf7svKgO7roZJYrS1u3TupBhw/s550/sample1.jpg" title="Sunset" />
                        </a>A boat with beautiful sunset.</li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRacgigy9STOyoq1_T8Bi906dor58sl3dGGLxuI6DPs6ZQit9qnPyJ_8cL_3d3vcuZ5iQ5CsZACcOabJdqAaBZVXbVdooI25qsxHJqnir-zDmeLXmCF5LadmvpbvJZinY1cxoDSrG-PDIe/s550/sample2.jpg" title="Rainbow" />
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTeRqWQ_28L1scjHmrlm5KBZFhb3c4jQaet5XWfomHxaRbhdgi25UVsySxNyzHsRcE8YIhZqQru8dAyfBc6jHRCWuAcK8QtnfRHlt3yFVUpsSqhLLeDaouRiuJhdDK5p7P7rYCWFr7kxZz/s550/sample3.jpg" title="True Nature" />
                        </a>Tree in field with blue sky.</li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOqdcXgXQLAKIisUrwye5g5dNudWrc1lRdfEX6lj2EwJ7zMZG1LiGxF5eAeU55YL5ygQoJhyxIuGWNNekTfDH71BvwCsbrGEH6BHhaLoVgX8fNgE8zhgF4FPEtZgzVuAW1JD2yfNt8fvwr/s550/sample4.jpg" title="Sunrise" />
                        </a>Amaizing sunrise moment</li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje1UH6EVhMROuZjQRML5QkZButnWO7pRtXMc62Eu3ZDR1mJMh94c8t-PNvahrQapkkfAfW19o7kCg7hv_SUQMhhLoWuvFFa4M75w8SIu4kQwdu0h0ZhQdsV9ipkj1OSt3Dq9sDQ73Ikj1p/s550/sample5.jpg" title="CAR in HDR Nature" />
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7G_-yDpEELpWVPy03t85yHRnhR39FwqSetx3JoVN-shYeBsJuGH5wqSuA7GGOwKP7OUaUngIgAkv2VrrjQFMNPghpdexze1VmDl6X-bYBbs5cpfkXzzXyzT_cOvhIS1RswG1zu1RAbrK-/s550/sample6.jpg" title="Sunshine" />
                        </a>
                    </li>
                </ul>
            </div>
            <div class="jslider_thumbs">
                <div>
                    <a href="#" title="Sunset"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh10I_XNkDIx9kWnxUoSfSvJ4htCXoDOCPzsNG-9Us0qAYsvJjatxRLXvBqTmlH9Y4-Qiuq8JRCDSAiwYjzBZwa1ScUByL9hdbmuOEZ4FyByKAMZg1_YA1zgScU7g-NXVRVhkGRHlMxZaIZ/s85/sample1.jpg" /></a>
                    <a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9i3cHqaZ1Ox7TnLjHaH__QlSFc-lLkPwXYayD4vE1Zwm_G7qBRc6t-eFrUtIpnHXrnz8Hsnhj7-cReRE-WKwN8xAuQ3Sf-riZr0PL8j63Jn2uDVNlgrs5HWzsuqWKg9DaObRV_rskB6nn/s85/sample2.jpg" /></a>
                    <a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVgKtO7GZQ65BpBCBFBXKJrFdUuGin5_el8mPHrDEeJw5iRrbAdMulGXEZwvPJZ1KWQem4QE_qqzdn0U_U51OF5AYzcfvXpeKh0hRJuIbd1_ffOv17w8iAuHKrbMLi_PMP1_2tErHObFy6/s85/sample3.jpg" /></a>
                    <a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaTIEUq6lE8_sr3_skTHeWznrOJRU-L1MQ2bTVZ1mC84tywZyYGfdzPHKCQDhX6Bv2VKk6mxBVvj7RjOl-a7CwMUGckRu2k2RUW5ebeJvsRv82tnnSLLNVhiotzq1Cfa-34PmSybkK9Po3/s85/sample4.jpg" /></a>
                    <a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8v5s4ApOu3KQX-k8iMuxf7B0L-mf5JdTpcb4LHkV6xfZ8h2VCCSQ70y7Iw9SrMgrRJfpu69qJ88TZ7vr-QWZloSI0R_mBsjfgm62Kcdi599YfOoZ3qRJxi1rAMDOfb1auqQ7y_dEQ-Zw/s85/sample5.jpg" /></a>
                    <a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1_ae4gpz6L3I5d4KRoq5SW2abgnsxKA8vZe9o-wTEjiPZxp9yy_Wou-IgNWqluahqxk2u3UsssEmk2QctL6f-OLZhCPXmNvDYkYlsscIUEgti04BfpL97-Qpk3Xrcp_CeLCWqpNwDKd88/s85/sample6.jpg" /></a>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>
( Faça isso caso Slideshow pare de funcionar)
Baixe Aqui um backup do motor jquery., basta subir este recomendo subir no site https://www.dropbox.com/ subir em public Depois é só substituir.


vegas
vegas

Oi Visitante, seja bem vindo blogger-templatesgratis.blogspot, temos os melhores templates compartilhados dos melhores autores de templates blogger, fique a vontade para navagar em meu blogger a baixar todos templates.

Nenhum comentário:

Postar um comentário