Membuat Slide Background dengan Backstretch.js | Kelas Mat Membuat Slide Background dengan Backstretch.js | Kelas Mat

Membuat Slide Background dengan Backstretch.js

Bagaimana caranya membuat slider background blog dengan beberapa gambar dengan mudah dengan memanfaatkan javascript yang bernama 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

Membuat Slide Background dengan 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://3.bp.blogspot.com/-g25CVl-Nirs/Xr4pWGqyDvI/AAAAAAAACoM/N6RUWZgmZ9wBTj_5WFLBzQHO6e5iqZEqgCLcBGAsYHQ/s1600/laptop-min.png" ,"https://2.bp.blogspot.com/-z48NsOxABs8/XsPM8JeRJxI/AAAAAAAACqo/MyrWYDdtH5AbCqlELu3Ff7jR3nkR8AM3gCLcBGAsYHQ/s1600/cuptea-min.jpg"
    , "https://2.bp.blogspot.com/-zoToRTEP2CI/VEjOnexQ82I/AAAAAAAAAkE/y01KpoluTTY/s1600/image4.jpg"
    , "https://4.bp.blogspot.com/-eHK6ZQ-X018/Xr4p_zdl70I/AAAAAAAACoU/hyzN4JPCB0U_CriXmpo4EpMq4jzTbbrfACLcBGAsYHQ/s1600/cangkirteh-min.png"
,"https://3.bp.blogspot.com/-GCysCESsfhc/VEjOnMcFQSI/AAAAAAAAAkA/yGpFHJNCK6o/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://3.bp.blogspot.com/-g25CVl-Nirs/Xr4pWGqyDvI/AAAAAAAACoM/N6RUWZgmZ9wBTj_5WFLBzQHO6e5iqZEqgCLcBGAsYHQ/s1600/laptop-min.png" ,"https://2.bp.blogspot.com/-z48NsOxABs8/XsPM8JeRJxI/AAAAAAAACqo/MyrWYDdtH5AbCqlELu3Ff7jR3nkR8AM3gCLcBGAsYHQ/s1600/cuptea-min.jpg"
    , "https://2.bp.blogspot.com/-zoToRTEP2CI/VEjOnexQ82I/AAAAAAAAAkE/y01KpoluTTY/s1600/image4.jpg"
    , "https://4.bp.blogspot.com/-eHK6ZQ-X018/Xr4p_zdl70I/AAAAAAAACoU/hyzN4JPCB0U_CriXmpo4EpMq4jzTbbrfACLcBGAsYHQ/s1600/cangkirteh-min.png"
,"https://3.bp.blogspot.com/-GCysCESsfhc/VEjOnMcFQSI/AAAAAAAAAkA/yGpFHJNCK6o/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.

Referensi Terkait

ArRahim

"Berbagi itu bukan tentang seberapa besar dan seberapa berharganya hal yang kau beri, namun seberapa tulus dan ikhlasnya apa yang ingin kau beri".

Lebih baru Lebih lama