Membuat Slide Background dengan Backstretch.js

Hai sobat kelas mat, kembali lagi saya melalui blog ini akan membagikan sebuah tutorial mengenai bagaimana caranya membuat slider background dengan beberapa gambar dengan memanfaatkan javascript yang bernama Backstretch.js. Dengan menggunakan Backstretch.js kita bisa dengan mudah membuat background blog kita menjadi berganti-ganti secara otomatis.

Sekilas Backstretch.js

Backstretch.js adalah sebuah javascript yang dikembangkan oleh Scott Robbin. Sesuai dengan deskripsi singkatnya yaitu

a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element

maka dengan menggunakan script ini, tidak akan terlalu menambah beban blog kita. Karena Gambar background akan diambil setelah halaman kamu selesai dimuat, sehingga pengguna tidak perlu menunggu gambar untuk diunduh sebelum menggunakan situs kamu.

Cara menggunakan Backstretch.js untuk background body blog

Caranya cukup sederhana ya sobat, pertama-tama kamu cuma perlu menambahkan script berikut ini pada template blog sobat sebelum kode </head>.

<script src='https://raw.githack.com/kelasmat/others/master/jquery.backstretch.min.js' type='text/javascript'></script>

Kemudian carilah kode </body>, simpan kode berikut ini tepat diatas/sebelum kode </body> tadi.

<script>
//<![CDATA[
.backstretch([
      "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrCF6GEIxL0WQvFWMlyUSyOuCWrE1-bUQ4p-KtAppa5xffF2TZD8jeLu7zV1W5p7fRoiym2tfU1iadLOBQx7OVi_bhzQpBl8-bJIb8X6-LQYS7XthBS5e9T76RW-FnWYxXvZ63sUdVhlSv/s1600/laptop-min.png" ,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3EBCRfVojMu59EMi1-pXEP4qpMqlW-oduUETgMM_LwhhItDgzqrWhyphenhyphen9Oedyg0SxNMrdWJ__K8A9yU4QE2u9bso0fMPvV5hvsT8czoSgC-tz2xiHC0BTcn_OGKie3GfIn8cGhV2c41LbWP/s1600/cuptea-min.jpg"
    , "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ppSovDldouDXcWXhWaxdiC-Znm4OZxSEKJIPKPxXmKeHIRoCxY1JvDLrPlcm6lYzwynaIs9r0K5sXHG1ieOIzhlIzfjccKWVzktrkvlLSD5SX04Bq3hNNosgfPoo65WKgXakkFVKdA8/s1600/image4.jpg"
    , "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEino0CLwY5WVBAODYzrnhAA2ZfZIf0e-jSfwsUCnmDsrKaKR9UC65Hg_O9pDLb7fzp4K_rg_mcfEqinu-743svHyi38aV8-ugi2lfR2eYwxivaIqGWATdQBbeBe6rcwN2pBtra0oPEcLmxl/s1600/cangkirteh-min.png"
,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ68AVVxW6Os4pq10MmVKKLti7mzQZfKACl1K4dCAYnqlgj_CLvZYSml5exzqrkbz3fi8rCnPO9gzsw7tzcXCzLj8IxMnK4t4-iW987Si468V-nWDsY638Z11Se7sKGcTry0D9SNvOB2E/s1600/image2.jpg"
  ], {duration: 6000, fade: 750});
//]]>
</script>

Silahkan ganti url gambar dengan gambar kamu sendiri. kamu juga bisa menambah atau mengurangi banyaknya gambar background sesuka kamu.

Cara menggunakan Backstretch.js untuk background box atau elemen tertentu

Caranya masih sama dengan langkah-langkah diatas, hanya saja pada kode script yang ditaro diatas kode </body> tadi ditambahkan dengan nama id dari box/element yang ingin kita beri background. Contoh nya saya ingin memberi elemen pada box id='featured', maka scriptnya menjadi :

<script>
//<![CDATA[
$("#featured").backstretch([
      "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrCF6GEIxL0WQvFWMlyUSyOuCWrE1-bUQ4p-KtAppa5xffF2TZD8jeLu7zV1W5p7fRoiym2tfU1iadLOBQx7OVi_bhzQpBl8-bJIb8X6-LQYS7XthBS5e9T76RW-FnWYxXvZ63sUdVhlSv/s1600/laptop-min.png" ,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3EBCRfVojMu59EMi1-pXEP4qpMqlW-oduUETgMM_LwhhItDgzqrWhyphenhyphen9Oedyg0SxNMrdWJ__K8A9yU4QE2u9bso0fMPvV5hvsT8czoSgC-tz2xiHC0BTcn_OGKie3GfIn8cGhV2c41LbWP/s1600/cuptea-min.jpg"
    , "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ppSovDldouDXcWXhWaxdiC-Znm4OZxSEKJIPKPxXmKeHIRoCxY1JvDLrPlcm6lYzwynaIs9r0K5sXHG1ieOIzhlIzfjccKWVzktrkvlLSD5SX04Bq3hNNosgfPoo65WKgXakkFVKdA8/s1600/image4.jpg"
    , "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEino0CLwY5WVBAODYzrnhAA2ZfZIf0e-jSfwsUCnmDsrKaKR9UC65Hg_O9pDLb7fzp4K_rg_mcfEqinu-743svHyi38aV8-ugi2lfR2eYwxivaIqGWATdQBbeBe6rcwN2pBtra0oPEcLmxl/s1600/cangkirteh-min.png"
,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ68AVVxW6Os4pq10MmVKKLti7mzQZfKACl1K4dCAYnqlgj_CLvZYSml5exzqrkbz3fi8rCnPO9gzsw7tzcXCzLj8IxMnK4t4-iW987Si468V-nWDsY638Z11Se7sKGcTry0D9SNvOB2E/s1600/image2.jpg"
  ], {duration: 6000, fade: 750});
//]]>
</script>

Perhatikan #featured diatas. itu adalah id dari box/elemen yang ingin saya kasih background. Silahkan sesuaikan dengan id/class pada template kamu masing-masing. Semoga cara Membuat Slide Background dengan Backstretch.js ini bisa dipahami dengan mudah.