Cara Membuat Chop Slide Show

Senin, 18 Januari 2016

1. Login Akun Blog anda 
2. Klik Template > Edit HTML
3. Kemudian Tekan tombol Ctrl+F Lalu cari kode ]]</b:skin>
4. Kemudian letakan tepat diatas ]]</b:skin>

.wrapper { position:relative; margin:0 auto 15px; width:600px; height:350px; display:block; padding:5px; background:#FFF; z-index:2; } #slide-prev,#slide-next { -moz-border-radius:100px; -webkit-border-radius:100px; border-radius:100px; padding:15px; bottom:50%; position:absolute; z-index:4; } #slide-prev { left:20px; background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixNJHUC0Jd9bH-s6BRwnZFYNj1Xs0jkKSSHAjAfDRTKrNekKkHu7gJ6ldzk-lyWiUWu7alA0OKDq8FlHjbazc2BlQTJBbyO0UebYa8de2JrUeITHEII6PZgRSPRLcZD6l7FCuWO3QY8H8/s1600/arrow_left.png) no-repeat center; } #slide-next { right:20px; background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYihr7fOZ51SJ0tWXtR9Z5si1Iu110PrsjLAmkrPXIMxpRX1n_1aPVXtnew-6vIcL3Wl2VxX6Erm2ePNIfTeIdyYYpLmhT8W4opZaZViKUOFnC6ejWtQ1CbFs5DUxbV5bXovaoHuxb7CA/s1600/arrow_right.png) no-repeat center; } #slider { width:600px; height:350px; margin-left:auto; margin-right:auto; position:relative; z-index:2; display:block; } #slider img { width:100%; height:100%; } .slide { display:none; } .cs-activeSlide { display:block; } .slide-descriptions { display:none; } .caption { background:rgba(238,238,238,0.83); color:#333; display:none; padding:5px 10px; position:absolute; left:0; right:0; bottom:5px; z-index:3; font:normal 13px/20px Arial,sans-serif; }

1. Tekan Ctrl+F Cari kode </head>
2. Paste kan tepat diatas nya

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="https://sites.google.com/site/vanzdy/script/jquery-chopslider-2.2.0.js"></script>
<script src="https://sites.google.com/site/vanzdy/script/jquery-cstransitions-1.2.js"></script>
<script>
jQuery(function(){
    $("#slider").chopSlider({
        slide : ".slide",
        nextTrigger : "a#slide-next",
        prevTrigger : "a#slide-prev",
        hideTriggers : true,
        sliderPagination : ".slider-pagination",
        useCaptions : true,
        everyCaptionIn : ".sl-descr",
        showCaptionIn : ".caption",
        captionTransform : "scale(0) translate(-600px,0px) rotate(45deg)",
        autoplay : true, // slidernya otomatis bermain, "false" jika tidak otomatis
        autoplayDelay : 3000, // waktu penundaan gambar
        t3D : csTransitions['3DFlips']['random'],
     t2D : [ csTransitions['multi']['random'], csTransitions['vertical']['random'] ],
        noCSS3 : csTransitions['noCSS3']['random'],
        mobile : csTransitions['mobile']['random'],
        onStart: function(){},
        onEnd: function(){}
    })
})
</script>

1. Kemudian letak kode ini Ke gadget HTML/javascript
2. Dan Save

<div class="wrapper">
<a id="slide-next" href="#"></a>
<a id="slide-prev" href="#"></a>
<div id="slider">
<div class="slide cs-activeSlide"><img src="url gambar1.jpg"/></div>
<div class="slide"><img src="url gambar2.jpg"/></div>
<div class="slide"><img src="url gambar3.jpg"/></div>
<div class="slide"><img src="url gambar4.jpg"/></div>
</div>
<div class="slide-descriptions">
<div class="sl-descr">Disini deskripsi gambar anda.</div>
<div class="sl-descr">Disini deskripsi gambar anda.</div>
<div class="sl-descr">Disini deskripsi gambar anda.</div>
<div class="sl-descr">Disini deskripsi gambar anda.</div>
</div>
<div class="caption"></div>
</div>

Selamat mencoba..

Continue Reading | komentar