Pusat Ilmu Secara Detil

Tutorial Slider atau Slideshow pada Web

Tutorial Slider atau Slideshow pada Web

Kelebihan sebuah website tidak hanya diukur sejauh mana menyajikan content yang baik. Akan tetapi sebuah interface dari Layout juga turut memberikan peran dalam kenyamanan pengaksesan sebuah website.
Jika sebuah layout yang disusun menarik...maka akan memudah user dalam melihat content yang kita publish dalam sebuah website.

Berangkat dari pemikiran tersebut...kadang-kadang kita ingin mempercantik Layout website kita dengan penambahan slideshow ataupun disebut dengan slider dari beberapa image yang kita inginkan.

Berikut ini kita berexperimen tentang tutorial penambahan slideshow pada sebuah Website.

Terlebih dahulu kita akan membuat layout sederhana seperti gambar dibawah ini:



Ketentuan dari gambar diatas:


  1. Kotak no.1 diberi nama ID kotak1 berisikan : Kotak no.2, Kotak no.3, Kotak no.4, Kotak no.7
  2. Kotak no.2 diberi nama ID kotak2, berfungsi sebagai area logo.
  3.  Kotak no.3 diberi nama ID kotakslider, berfungsi sebagai slideshow/slider nya.
  4.   Kotak no.4 diberi nama ID kotak4 berisikan : Kotak no.5 dan Kotak no.6
  5.  Kotak no.5 diberi nama ID kotak5,berfungsi sebagai sidebar kiri ataupun bisa diset sebagai menu.
  6.   Kotak no.6 diberi nama ID kotak6,berfungsi sebagai konten dari website.
  7.  Kotak no.7 diberi nama ID kotak7,berfungsi sebagai footer.

          Pembuatan Layout dengan code CSS dan HTML serta PHP

  1. Kode dari file style.css sebagai berikut 


Penjelasan lebih lengkap silahkan download PDF-nya


Untuk melihat hasilnya silahkan klik klik Live Preview, dan bila ingin mengdownload klik link download.


Share this:

You Might Also Like:

Disqus Comments