Slide Responsive untuk Blogspot dengan Skitter JQuery Slideshow

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.



Slideshow akan bekerja jika blog anda sudah dilengkapi dengan JQuery.


Menampilkan add Gadged diatas Posting Blog

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

OpsiNilaiKeterangan
RandompostActive falseGanti nilainya menjadi true jika Anda ingin menampilkan Slideshow secara acak.
true
tagNamenama labelJika 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

38 Responses to "Slide Responsive untuk Blogspot dengan Skitter JQuery Slideshow"

  1. Wanjrit :v , Ane Mau Share Keduluan Ane Udah Bikin Tempe Nya :D
    Keren Deh :D

    ReplyDelete
  2. Slidenya bagus kang :D tapi apa ga berat untuk blog ya ?

    ReplyDelete
  3. Keren sekali sob, ini slinder yg dipake sama MKR kan ya? :)

    ReplyDelete
  4. keren gan izin coba.. :D

    ReplyDelete
  5. Jarang-jarang nih ada slider responsive untuk blogspot :)

    ReplyDelete
  6. :Q Izin Coba Nih Sob.... :yaya:

    ReplyDelete
  7. wah keren slidenya, resposive lagi, praktekin dulu mas :D

    ReplyDelete
  8. :-bd emang keren bang slidenya wkwkwk ijin coba

    ReplyDelete
  9. wah keren gan ane izin coba ya gan di blog ane yang lain thank udah share

    ReplyDelete
  10. keren nih kang tapi memperberat loading blog ga kang ?

    ReplyDelete
    Replies
    1. bisa jadi, karena widget ini menggunakan JQuery yang tidak kecil mnurut saya Ukurannya ~x(

      Delete
  11. Keren banget gan :)
    Ijin coba yah :)

    ReplyDelete
  12. bener nih ga bikin load berat?

    ReplyDelete
  13. keren sih,..

    tapi..

    penambahan beban loadingnya berapa nih gan ?,.. =(

    nb: ciee cieeee template baru cieeeee... :Q

    ReplyDelete
    Replies
    1. agak berat juga gan, soalnya resolusi gambarnya besar, di s620, itu yang membuat loadingnya berat.

      cie cie cie cie ^:D

      Delete
    2. emmm... sayang euy,.. padahal lg nyari2 sesuatu yg idup buat masang di beranda,.. :W

      tpi, comot dulu aja ah,.. besok2 siapa tau butuh.. hehehe,..

      Delete
    3. sip mas Umar A. M. F,

      yaudah aku mau terbang dulu ya ^o^

      Delete
  14. Waduh Izin Nyicip Dah :) Ditunggu Kunbalnya Gan

    ReplyDelete
  15. mungkin agak berat, karena resolusi gambar yang terlalu besar menurut saya :p

    ReplyDelete
  16. kalo bloggnya sudah ada add widget di atas post nya gimana cara nampilkan hanya di home saja??

    ReplyDelete
    Replies
    1. langsung kelangkah Menambahkan CSS

      sampai selesai,
      untuk menampilkannya hanya pada homepage baca langkahnya Membungkus HTML dengan Tag Kondisional

      Delete
  17. keren sob , bisa di besarkan lagi gak gambar slide nya ?

    ReplyDelete
    Replies
    1. <script type='text/javascript'>
      //<![CDATA[
      $(document).ready(function () {
      pengaturan({
      blogURL: 'http://nama_blog_anda.blogspot.com',
      MaxPost: 5,
      RandompostActive: false,
      ImageSize: 620, /* angka 620 adalah ukuran gambar
      NumCharacter: 150,
      idcontaint: "#skitterslideshow",
      cmtext: "Komentar",
      NoCmtext: "No Comment",
      pBlank: "http://2.bp.blogspot.com/-D47WWjFZXdk/UP1z-A5uCuI/AAAAAAAAH98/heTBvxq49No/s1600/noimage.jpg",
      tagName: false
      });
      });
      //]]>
      </script>

      Delete
  18. gan, nanya lagi ya, hee :D ketika pake slideshow, navigasi dropdown nya ketutup gambar, jadi ada di back bukan top.. caranya gimana ya gan? mohon pencerahannya. terimakasih.

    ReplyDelete
    Replies
    1. cari kode #bungkuse li ul kemudian temukan kode z-index : kemudian tambahkan angka 9999 seletah titik dua, jadinya begini :

      #bungkuse li ul {
      z-index: 9999;
      }

      Delete
    2. thanks ya gan. intinya untuk semua widget, ganti index nya aja ya :)

      Delete
  19. Maaf mas, punya saya area headernya sudah muncul. cuma ngak keluar gambarnya. yang ada cuma ada logo kotak kecil berputar-putar.
    kira-kira saya salah dimana ya mas

    maaf juga pemula mas....
    http://dameldalem.blogspot.com
    nuwun

    ReplyDelete
    Replies
    1. kok blognya saya buka nggak bisa ?

      coba kasih screnshootnya

      Delete
    2. MGKN SEKARANG SUDAH BISA DIBUKA MAS
      http://dameldalem.blogspot.com
      MONGGO

      Delete
  20. EKH SEKARANG KOK SUDAH BISA YA MAS.
    NUWUNG NGGEH MAS.
    APA TADI KARENA DI MENU IJIN YANG BISA MBACA BLOG HANYA . "PRIBADI KUSUS PEMBACA INI"

    MAAF MAS benar benar ngak tahu.
    nuwun
    nggeh headernya

    ReplyDelete
    Replies
    1. aku lagi mau ngasih screnshootnya pdahal ^_^

      iya itu udah bisa, tinggal diatur aja tuh lebarnya :-bd

      Delete
  21. Skitter slideshow memang keren tampilan animasi slidernya, tapi belum pernah coba yang responsive nih. Mohon izin coba buat blog catering ane ya gan.

    ReplyDelete