Kustomisasi Situsweb

Kustomisasi situsweb merupakan sekumpulan proses pemasangan dan konfigurasi ekstensi sedemikian rupa sehingga sistusweb memiliki tampilan dan fungsi relatif lebih baik dibandingkan dengan kondisi awal. Ekstensi itu bisa berupa template, modul, plugin, atau komponen. 

Kustomisasi situsweb yang akan dibahas pada bagian ini meliputi:

1. Pengeditan template;
2. Pengeditan modul menu utama;
3. Instalasi modul header;
4. Instalasi modul pencarian.
5. Instalasi modul visitors counter;
6. Instalasi modul slider.
7. Membuat slider pimpinan universitas.

Pengeditan Template

1. Pastikan bahwa Saudara telah login ke dalam sistem dan berada dalam halaman Home Dashboard, kemudian klik System, klik Site Template Style, sehingga muncul halaman Style (Site) seperti di bawah ini.
   
2. Pada halaman Style (Site) di atas, klik Cassiopeia - Default sehingga muncul halaman Edit Style, kemudian lakukan perubahan sebagai berikut:
   1. Klik tab Advance, kemudian klik Select pada baris Logo seperti di bawah ini.
      
   2. Pada jendela Change Image, klik Upload seperti di bawah ini.
      
   3. Pada jendela File Upload di laptop/komputer, klik file logo fulan.png, kemudian klik Open seperti terlihat pada gambar di bawah ini.
      
      File logo fulan.png berhasil diupload ke dalam sistem, seperti terlihat pada gambar di bawah ini.
      
   4. Klik file logo fulan.png pada jendela Change Image, kemudian klik Insert seperti terlihat di bawah ini.
      File logo fulan.png telah berhasil dimasukkan ke dalam baris Logo seperti terlihat di bawah ini.
      
   5. Ketik teks logo pada baris Title (alternative to logo), pilih Firan Sans (web) pada baris Fonts Scheme, pilih Alternative pada baris Colour Theme, pilih Yes pada baris Sticky Header, pilih Yes pada baris Back-to-top Link seperti terlihat pada gambar di bawah ini.
      
   6. Klik Save & Close.
3. Klik ikon yang terdapat di baris atas bagian kanan, sehingga muncul tampilan situsweb seperti di bawah ini.
   

Pengeditan Modul Menu Utama

1. Pastikan bahwa Saudara telah login ke dalam sistem dan berada dalam halaman Home Dashboard, kemudian klik System, klik Site Modules, sehingga muncul halaman Modules (Site) seperti di bawah ini.
   
2. Pada halaman Modules di atas, klik Main Menu sehingga muncul tampilan seperti di bawah ini.
   
3. Pada kotak pilihan Position, ganti sidebar-right dengan Menu [menu] seperti terlihat di bawah ini.
   
4. Klik tab Advanced, kemudian pilih Collapsible Dropdown pada baris Layout seperti di bawah ini.
   
5. Klik Save & Close.
6. Klik ikon yang terdapat di baris atas bagian kanan, sehingga muncul tampilan situsweb seperti di bawah ini.
   

Instalasi Modul Header

1. Pastikan bahwa Saudara telah login ke dalam sistem dan berada dalam halaman Home Dashboard, kemudian klik System, klik Site Modules, sehingga muncul halaman Modules (Site) seperti di bawah in.
   
2. Pada halaman Modules (Site) di atas, klik New, klik Custom, seperti terlihat di bawah ini,
   
   sehingga diperoleh modul Custom seperti di bawah ini.
   
3. Pada halaman Custom di atas, ketik teks Header pada baris Title *, pilih Hide pada baris Title, pilih Banner [banner] pada baris Position, seperti terlihat pada gambar di bawah ini.
   
4. Pastikan kursor berada pada baris pertama jendela editor HTML, kemudian klik CMS Content, klik Media, seperti terlhat pada gambar di bawah ini.
   
5. Klik Upload pada jendela Media seperti terlihat di bawah ini.
   
6. Klik file gambar rektorat.webp pada laptop atau komputer, kemudian klik Open, seperti terlihat pada gambar di bawah ini.
   
7. Pada jendela Media, klik file rektorat.webp (file hasil upload pada langkah sebelumnya), seperti terlihat pada gambar di bawah ini.
   
8. Pada jendela Media, klik Insert Media seperti terlihat pada gambar di bawah ini.
   
   sehingga diperoleh modul Header seperti terlihat di bawah ini.
   
9. Klik Save & Close.
10. Klik ikon yang terdapat di baris atas bagian kanan, sehingga muncul tampilan situsweb seperti di bawah ini.
    

Instalasi Modul Pencarian

1. Pastikan bahwa Saudara telah login ke dalam sistem dan berada dalam halaman Home Dashboard, kemudian klik System, klik Site Modules, sehingga muncul halaman Modules (Site) seperti di bawah ini.
   
2. Pada halaman Modules (Site) di atas, klik New, klik Smart Search seperti di bawah ini,
   sehingga diperoleh modul Smart Search seperti di bawah ini.
   
3. Pada halaman modul Smart Search di atas, ketik teks Search pada baris Title *, pilih Hide pada baris Search Field Label, pilih Hide untuk item Title, pilih Search untuk item Position, seperti terlihat pada gambar di bawah ini.
   
4. Klik Save & Close.
5. Klik ikon yang terdapat di baris atas bagian kanan, sehingga muncul tampilan situsweb seperti di bawah ini.
   

Instalasi Modul Visitor Counter

1. Pastikan bahwa Saudara telah login ke dalam sistem dan berada dalam halaman Home Dashboard, kemudian klik System, klik Extensions, sehingga muncul halaman Install seperti di bawah ini.
   
2. Pada halaman Install di atas, klik tombol sehingga muncul jendela File Upload pada laptop atau PC seperti di bawah ini.
   
3. Pada jendela File Upload di atas, pilih file jsvisit_counter-v2.1.3.zip, kemudian klik Open, sehingga muncul tampilan seperti di bawah ini.
   
4. Klik modul jsvisit Visitor Counter pada halaman Modules (Site) seperti terlihat pada gambar di bawah ini, 
   
   sehingga muncul halaman modul jsvisit counter seperti terlihat pada gambar di bawah ini.
   
5. Pilih Hide untuk item Title, pilih Footer [footer] untuk item Position, pilih Published untuk item Status, seperti terlihat pada gambar di bawah ini. 
   
6. Klik tab Menu Assignment, kemudian pilih On all pages untuk item Module Assignment, seperti terlihat pada gambar di bawah ini.
   
7. Klik Save & Close.
8. Klik ikon yang terdapat di baris atas bagian kanan, sehingga muncul tampilan situsweb seperti di bawah ini.
   

Instalasi Modul Slider

1. Pastikan bahwa Saudara telah login ke dalam sistem dan berada dalam halaman Home Dashboard, kemudian klik System, klik Extensions, sehingga muncul halaman Install seperti di bawah ini.
   
2. Pada halaman Install di atas, klik tombol sehingga muncul jendela File Upload pada laptop atau PC seperti di bawah ini.
   
3. Pada jendela File Upload di atas, pilih file slideshowck-light-2.5.2.zip, kemudian klik Open, sehingga muncul tampilan seperti di bawah ini.
   
4. Klik modul Slideshow CK pada halaman Modules (Site) seperti terlihat pada gambar di bawah ini, 
   
   sehingga muncul halaman modul mod_slideshowck seperti terlihat pada gambar di bawah ini.
   
5. Pilih Hide untuk item Title, pilih Main-bottom [main-bottom] untuk item Position, pilih Published untuk item Status, seperti terlihat pada gambar di bawah ini
   
6. Klik tab Menu Assignment, kemudian pilih On all pages untuk item Module Assignment, seperti terlihat pada gambar di bawah ini.
   
7. Klik Save & Close.
8. Klik ikon yang terdapat di baris atas bagian kanan, sehingga muncul tampilan situsweb seperti di bawah ini.
   

Membuat Slider Pimpinan Universitas

1. Pastikan bahwa Saudara telah login ke dalam sistem dan berada dalam halaman Home Dashboard, kemudian klik Content, klik Media, sehingga muncul halaman Media seperti di bawah ini.
   
2. Pada halaman Media di atas, klik tombol Create New Folder sehingga muncul jendela Create New Folder, seperti terlihat di bawah ini.
   
3. Pada jendela Create New Folder di atas, ketik teks pimpinan_universitas, sehingga muncul tampilan seperti di bawah ini.
   
4. Pada halaman Media di atas, klik tombol Upload, sehingga muncul jendela File Upload pada laptop atau komputer, seperti di bawah ini.
   
5. Pada jendela File Upload di atas, pilih file rektor.jpg, rektor1.jpg, rektor2.jpg, rektor3.jpg, rektor4.jpg, kemudian klik Open, sehingga file-file tersebut masuk dan tersimpan dalam folder pimpinan_universitas, seperti terlihat pada gambar di bawah ini.
   
6. Selanjutnya, klik System, klik Site Modules, klik Slideshow CK, sehingga muncul halaman modul Slideshow CK seperti di bawah ini.
   
7. Klik Save as Copy seperti terlihat di bawah ini,
   
   sehingga diperoleh salinan modul Slideshow CK seperti di bawah ini.
   
8. Lakukan pengeditan sebagai berikut: Ketik teks Pimpinan Universitas untuk item Title *, pilih Show untuk item Title, pilih Sidebar-right [sidebar-right] untuk item Position, pilih Published untuk item Status, seperti terlihat pada gambar di bawah ini.
   
9. Klik tab Source sehingga muncul tambilan seperti di bawah ini.
   
10. Klik tombol Select an image seperti terlihat di bawah ini,
    
    sehingga muncul tampilan seperti di bawah ini.
    
11. Klik file rektor.jpg seperti terlihat pada gambar di bawah ini.
    
12. Klik Save and close sehingga diperoleh tampilan seperti di bawah ini.
    
13. Untuk menambah jumlah item slide sesuai dengan jumlah unsur pimpinan, lakukan pengeditan sebagai berikut:
    1. Klik tombol Add a slide sebanyak 2 kali, sehingga diperoleh 5 item slide.
    2. Salin teks images/pimpinan_universitas/rektor.jpg, kemudian tempelkan pada item slide kedua, ketiga, keempat, kelima.
    3. Pada item slide kedua, ubah teks rektor.jpg menjadi rektor1.jpg
    4. Pada item slide ketiga, ubah teks rektor.jpg menjadi rektor2.jpg
    5. Pada item slide keempat, ubah teks rektor.jpg menjadi rektor3.jpg
    6. Pada item slide kelima, ubah teks rektor.jpg menjadi rektor4.jpg
14. Lengkapi setiap item slide dengan Title dan Description seperti tercantum dalam gambar di bawah ini.
    
    
15. Klik tab Option, kemudian ketik 150% untuk item Height seperti di bawah ini.
    
16. Klik Save & Close. 
17. Klik ikon yang terdapat di baris atas bagian kanan, sehingga muncul tampilan situsweb seperti di bawah ini.