Slide Responsive untuk Blogspot dengan Skitter JQuery Slideshow

Skitter Slider ini dibuat menggunakan JQuery yang saya temukan di Skitter , dan kali ini saya akan memberikan slideshow nya dengan tampilan yang sudah dimodifikasi dan dapat dipasang di blogspot.

Demo

Slideshow akan bekerja jika blog anda sudah dilengkapi dengan JQuery.

Menampilkan add Gadged diatas Posting Blog

Jika blog anda belum ada kotak add gadged diatas blog post, ikuti langkah dibawah ini :

1. Masuk dashboard pilih Template lalu Edit HTML
2. Cari kode <b:section class='main' id='main' showaddelement='no'> lalu ganti 'no' menjadi 'yes'
3. Simpan Template

Menambahkan CSS

1. Masih pada Edit HTML Tempate , Sekarang cari kode ]]></b:skin> atau </style>
2. Salin CSS dibawah ini dan letakkan diatasnya

/* Skitter Slideshow */
/*Slider*/
#skitterslideshow{
 padding: 4px;
 border: 1px solid #DDD;
 box-shadow: 0 1px 5px rgba(0,0,0,.15);
}
#slider-wrapper-ngudang {
    padding:0;
    background-color:#FDFDFD;
    box-shadow:0 1px 5px rgba(0, 0, 0, .15);
    border-radius:3px;
    height:250px;
    position:relative;
    z-index:8888
}
.box_skitter_home.ngudang-theme .prev_button, .box_skitter_home.ngudang-theme .next_button, .box_skitter_home.ngudang-theme .info_slide_dots {
    background-color:#fbfbfb;
    transition:background-color linear .3s;
}
.box_skitter ul {
    display:none
}
.box_skitter .container_skitter {
    overflow:hidden;
    position:relative;
    width:100%;
    height:100%
}
.box_skitter .image {
    overflow:hidden;
    max-width:100%;
    max-height:100%
}
.box_skitter .image img {
    display:none;
    width:100%;
    height:100%
}
.box_skitter .box_clone {
    position:absolute;
    top:0;
    left:0;
    width:100px;
    overflow:hidden;
    display:none;
    z-index:20
}
.box_skitter img {
    max-width:none
}
.box_skitter .box_clone img {
    position:absolute;
    top:0;
    width:620px;
    height:310px;
    max-width:630px;
    left:0;
    z-index:19
}
.box_skitter .prev_button {
    position:absolute;
    top:50%;
    left:35px;
    z-index:100;
    width:42px;
    height:42px;
    overflow:hidden;
    text-indent:-9999em;
    margin-top:-25px
}
.box_skitter .next_button {
    position:absolute;
    top:50%;
    right:35px;
    z-index:100;
    width:42px;
    height:42px;
    overflow:hidden;
    text-indent:-9999em;
    margin-top:-25px
}
.box_skitter .info_slide {
    position:absolute;
    top:15px;
    left:15px;
    z-index:100;
    background:#000;
    color:#fff;
    font:padding:5px 0 5px 5px;
    border-radius:5px;
    opacity:0.75
}
.box_skitter .info_slide .image_number {
    background:#333;
    float:left;
    padding:2px 10px;
    margin:0 5px 0 0;
    cursor:pointer;
    border-radius:2px
}
.box_skitter .info_slide .image_number_select {
    background:#c00;
    float:left;
    padding:2px 10px;
    margin:0 5px 0 0
}
.box_skitter .container_thumbs {
    position:relative;
    overflow:hidden;
    height:50px
}
.box_skitter .info_slide_thumb {
    border-radius:0;
    overflow:hidden;
    height:45px;
    top:auto;
    bottom:-5px;
    left:-5px;
    padding:5px;
    opacity:1.0
}
.box_skitter .info_slide_thumb .image_number {
    overflow:hidden;
    width:70px;
    height:40px;
    position:relative
}
.box_skitter .info_slide_thumb .image_number img {
    position:absolute;
    top:-50px;
    left:-50px
}
.box_skitter .box_scroll_thumbs {
    padding:0 10px
}
.box_skitter .box_scroll_thumbs .scroll_thumbs {
    position:absolute;
    bottom:60px;
    left:50px;
    background:#ccc;
    width:200px;
    height:10px;
    overflow:hidden;
    text-indent:-9999em;
    z-index:101;
    border-radius:20px;
    cursor:pointer;
    border:1px solid #333
}
.box_skitter .info_slide_dots {
    position:absolute;
    bottom:-40px;
    z-index:151;
    padding:5px 0 5px 5px;
    border-radius:50px
}
.box_skitter .info_slide_dots .image_number {
    background:#333;
    float:left;
    margin:0 5px 0 0;
    cursor:pointer;
    border-radius:50px;
    width:18px;
    height:18px;
    text-indent:-9999em;
    overflow:hidden
}
.box_skitter .info_slide_dots .image_number_select {
    background:#c00;
    float:left;
    margin:0 5px 0 0
}
.box_skitter .label_skitter {
    z-index:80;
    position:absolute;
    bottom:0;
    left:0;
    display:none
}
.loading {
    position:absolute;
    top:50%;
    right:50%;
    z-index:10000;
    margin:-16px -16px;
    color:#fff;
    text-indent:-9999em;
    overflow:hidden;
    background:#FFF no-repeat left top;
    width:32px;
    height:32px
}
.label_skitter {
    z-index:150;
    position:absolute;
    bottom:0;
    left:0;
    color:#fff;
    display:none;
    opacity:0.9;
    background:#000
}
.label_skitter p {
    padding:5px;
    margin:0
}
.info_slide * {
}
.box_skitter .progressbar {
    background:#000;
    position:absolute;
    bottom:5px;
    left:10px;
    height:5px;
    width:940px;
    z-index:99;
    border-radius:20px
}
.preview_slide {
    display:none;
    position:absolute;
    z-index:999;
    bottom:40px;
    left:-40px;
    width:100px;
    height:50px;
    border:3px solid #FFF;
    background:rgba(0, 0, 0, .5);
    box-shadow:rgba(0, 0, 0, 0.7) 0 0 10px;
    overflow:hidden
}
.preview_slide ul {
    width:100px;
    height:50px;
    padding:0;
    overflow:hidden;
    margin:0;
    list-style:none;
    display:block;
    position:absolute;
    top:0;
    left:0
}
.preview_slide ul li {
    width:100px;
    height:55px;
    overflow:hidden;
    float:left;
    margin:0;
    padding:0;
    position:relative;
    display:block
}
.preview_slide ul li img {
    position:absolute;
    top:0;
    left:0;
    height:55px;
    width:100px
}
#overlay_skitter {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:9998;
    opacity:1;
    background:#000
}
.box_skitter_home {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNhUrHy2-zE4LjnXLt8BUzsCcVa5KZ0ORTGnUw3a6CtfeunmSJxmtpAnTK_LvXNiCX3dsxF_GY8RKn23A_mVSu95AFX7I4y5appT-2OcWBtcQNSJ3jeYlpfZSrsQAqB-3XEttNdYVXF1vJ/s1600/skitterloading.gif);
    background-position:center center;
    background-repeat:no-repeat
}
.box_skitter_home.ngudang-theme .prev_button, .box_skitter_home.ngudang-theme .next_button, .box_skitter_home.ngudang-theme .info_slide_dots {
    border:1px solid #FFF;
    box-shadow:0 1px 3px rgba(0, 0, 0, 0.3);
    border-radius:0
}
.box_skitter_home.ngudang-theme .info_slide {
}
.box_skitter_home.ngudang-theme .info_slide_dots {
    bottom:-16px;
    width:110px;
    left:50%!important;
    margin-left:-65px;
    height:30px;
    padding:0 8px;
    z-index:99
}
.box_skitter_home.ngudang-theme .info_slide_dots span {
    transition:background linear .3s;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6sZtI4chSsJPe4xTTMmotYKcxRvON1PPAWpSsicD8ZnVS2YPDMnYrpRmR_UkN_wxAF6Gk_fApngLmn95OL5Y-zOgienNtwcgzjakgLrx0J5rrHvHvZLLb97ID9k6q7BvSHb7SYn0GEKs6/s1600/light-overlay.png);
    background-repeat:repeat-x;
    background-position:left -13px;
    background-color:#d1d1d1;
    color:#777;
    border-radius:50%;
    border-bottom:1px solid #FFF;
    display:block;
    width:10px;
    height:10px;
    text-indent:-9999px;
    float:left;
    margin:10px 6px 0 6px
}
.box_skitter_home.ngudang-theme .info_slide_dots span:hover {
    background-color:#666
}
.box_skitter_home.ngudang-theme .info_slide_dots span.image_number_select {
    background-color:#5ebc00;
    border:none;
    width:14px;
    height:14px;
    margin:8px 3px 0 3px;
    box-shadow:inset 1px 0 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .1), inset 0 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .1);
}
.box_skitter_home.ngudang-theme .prev_button, .box_skitter_home.ngudang-theme .next_button {
    display:block;
    width:75px;
    height:22px;
    line-height:30px;
    text-decoration:none;
    font-size:10px;
    text-transform:uppercase;
    transition:none;
    text-indent:0;
    bottom:-12px;
    top:auto;
    color:#777;
    z-index:98;
    cursor:pointer
}
.box_skitter_home.ngudang-theme .prev_button:hover, .box_skitter_home.ngudang-theme .next_button:hover, .box_skitter_home.ngudang-theme .prev_button:active, .box_skitter_home.ngudang-theme .next_button:active {
    opacity:1!important
}
.box_skitter_home.ngudang-theme .next_button {
    right:28.5%;
    padding-right:5px;
    text-align:right;
    line-height:22px;
    opacity:1!important
}
.box_skitter_home.ngudang-theme .next_button span {
    padding-right:20px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1XcT1CR41BHRGQ7ZRmKWJCO8f2V55RcopLV5b3XhScoMpsbrYuRQkplwxuFHQXhnR_45BydmlVShtvFk5AA-zTHbBR6HcO6vlBZBGPGngY9w4A5Agh_NZsN-Y0stu7AWY34gLJ9UUusZc/s1600/nav-next.png) no-repeat left top;
    background-position:right center;
    padding-bottom:1px;
    display:block;
}
.box_skitter_home.ngudang-theme .prev_button {
    left:28.5%;
    padding-left:5px;
    text-align:left;
    line-height:22px;
    opacity:1!important
}
.box_skitter_home.ngudang-theme .prev_button span {
    padding-left:20px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyckLfgjJw6RrF0d85Uf4VLB544e9bSLI9NyTt9FS7scrw_KvkNq_ZrssvqFLM4NoYuUBPTdoncNlD9PHVVJn2-A0qOp4jVE1PjpkxS9rFZu5Mn4TCGV89wFe_5sgDNF20BnylVfphML49/s1600/nav-prev.png) no-repeat left top;
    background-position:left center;
    padding-bottom:1px;
    display:block;
}
.box_skitter_home.ngudang-theme .label_skitter {
    background:#49afcd;
    width:90%;
    padding:5px 8px 5px;
    left:50%;
    margin-left:-45%;
    bottom:10%;
    text-align:left;
    height:auto;
    border-right:5px solid whitesmoke;
    border-left:5px solid whitesmoke;
    color:white;
    font-size:12px
}
.box_skitter_home.ngudang-theme .label_skitter p {
    padding:0;
    margin:0;
    text-shadow:0 1px 0 rgba(0, 0, 0, 0.3)
}
.box_skitter_home.ngudang-theme .label_skitter h4 {
    margin-top:0;
    font-size:135%;
    text-shadow:0 1px 0 rgba(0, 0, 0, .3);
    color:white
}
.box_skitter_home.ngudang-theme .label_skitter a {
    color:#fff;
    text-decoration:none
}
.box_skitter_home.ngudang-theme .label_skitter a:hover {
    color:#eee
}
.box_skitter_home.ngudang-theme .info_slide_thumb {
    background-color:#FFF
}
.box_skitter.ngudang-theme .info_slide_thumb .image_number {
    margin:5px
}
.box_skitter .container_skitter .date, .box_skitter .container_skitter .cm {
    font-size:100%
}
.box_skitter .container_skitter .date span {
    margin-right:3px
}
@media only screen and (max-width:960px) {
    .box_skitter_home.ngudang-theme .next_button {
        right:20.5%
    }
    .box_skitter_home.ngudang-theme .prev_button {
        left:20.5%
    }
}
@media only screen and (max-width:768px) {
    #slider-wrapper-ngudang {
        height:220px
    }
    .box_skitter .box_clone img {
        width:422px;
        height:220px
    }
    .box_skitter_home.ngudang-theme .next_button {
        right:19.5%
    }
    .box_skitter_home.ngudang-theme .prev_button {
        left:19.5%
    }
}
@media only screen and (max-width:640px) {
    .box_skitter_home.ngudang-theme .next_button {
        right:26.5%
    }
    .box_skitter_home.ngudang-theme .prev_button {
        left:26.5%
    }
}
@media only screen and (max-width:480px) {
    #slider-wrapper-ngudang {
        height:200px
    }
    .box_skitter .box_clone img {
        width:280px;
        height:220px
    }
    .box_skitter_home.ngudang-theme .next_button {
        right:20.5%
    }
    .box_skitter_home.ngudang-theme .prev_button {
        left:20.5%
    }
}
@media screen and (max-width:320px) {
    .box_skitter_home.ngudang-theme .label_skitter p {
        display:none
    }
    .box_skitter_home.ngudang-theme .next_button {
        right:5.5%
    }
    .box_skitter_home.ngudang-theme .prev_button {
        left:5.5%
    }
}

3. Sekarang cari kode </body>
4. Salin kode dibawah ini dan letakkan diatasnya

<script src='https://googledrive.com/host/0B-GXzRKoPbNncXBTeG5ESVJtc28' type='text/javascript'/>

5. Pada dashbord pilih Layout/Tata Letak kemudian klik tulisan Add Gadget diatas Blog Post Area
6. Letakkan Kode dibawah ini didalam kotak Add Gadget yang telah anda buat tadi

<div id='skitterslideshow'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
    pengaturan({
        blogURL: 'http://nama_blog_anda.blogspot.com',
        MaxPost: 5,
        RandompostActive: false,
        ImageSize: 620,
        NumCharacter: 150,
        idcontaint: "#skitterslideshow",
        cmtext: "Komentar",
        NoCmtext: "No Comment",
        pBlank: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdtNEkztImlaDpKZOgvxItmsijhRbIDibR_6KwOKzTT7vq2YvqfsDCjJmy-auM7DTefzRsigLIJY0e0vZpp22nepL1d7IQ81Q4DzBcg06cfFIhRm5caifgYPUqDWuZeI5et3JkpvLl1os/s1600/noimage.jpg",
        tagName: false
    });
});
//]]>
</script>
</div>

Membungkus HTML dengan Tag Kondisional

Karena kita akan memunculkan Slideshownya hanya pada homepage/ halaman utama, maka kita perlu membungkus HTML slideshownya dengan Tag Kondisional

1. Dasboard -> Template -> Edit HTML
2. Cari kode <b:section class='main' id='main' showaddelement='yes'>
3. Karena tadi sudah menambahkan Widget baru diatas Blog Post, maka akan muncul kode seperti dibawah ini, ini hanya sebagai contoh saja karena id widget bisa berbeda, misal id widget anda HTML2 dan lain lain

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'> 
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

4. Tambahkan tag kondisonal <b:if cond='data:blog.url == data:blog.homepageUrl'> dibawah <b:includable id='main'> dan tag penutup </b:if> diatas </b:includable>
5. Maka hasilnya akan seperti dibawah ini

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Silahkan Ganti url yang saya mark http://nama_blog_anda.blogspot.com dengan url blog anda

Opsi	Nilai	Keterangan
RandompostActive	false	Ganti nilainya menjadi true jika Anda ingin menampilkan Slideshow secara acak.
	true
tagName	nama label	Jika ingin menampilkan artikel berdasarkan tag/label, misalnya tag blogger maka ditulis seperti ini : tagName:"blogger"
	false
MaxPost	"JavaScript", "Widget", ... (maximum post)	Tentukan nama jumlah post pada slideshow.
ImageSize	"Gambar", ... (teks)	Tentukan ukuran gambar slideshow.
NumCharacter	"Jumlah Karakter", ... (teks)	Digunakan untuk mengatur Jumlah karakter yang ingin ditampilkan pada ringkasan
cmtext	"1 Komentar", ... (teks)	Tulisan jika terdapat komentar
NoCmtext	"0 Komentar", ... (teks)	Tulisan jika tidak terdapat komentar.
pBlank	(URL Gambar)	Backup gambar, jika post tidak memiliki gambar

Tweet