Tutorial pembuatan Company Profile dengan JagoanWeb

Transkripsi

1 Tutorial pembuatan Company Profile dengan JagoanWeb Untuk memudahkan Anda dalam membuat company profile Anda, berikut adalah panduan untuk setting / pengaturan pada halaman Admin Anda. A. MENGGANTI TEMPLATE Langkah awal untuk membuat company profile adalah memilih template / tampilan yang sesuai dengan karakteristik dan citra perusahaan Anda. Silahkan ikuti langkah-langkah berikut ini: 1. Login ke halaman Admin JagoanWeb Anda contoh : Gunakan account yang Anda dapatkan dari Jagoanweb. Jika tidak mengetahui Account Anda, silahkan menghubungi customer support JagoanWeb. 2. Pada tampilan pertamakali masuk, klik pada icon template yang ada di menu kiri.

2 3. Setelah itu akan keluar jendela untuk memilih template, silahkan pilih salah satu template yang sesuai dengan selera Anda. Kemudian klik tombol change. Gunakan bantuan Filter template untuk memudahkan Anda dalam memilih template. B. MENGUBAH TAMPILAN WEBSITE B.1 Template Setting Digunakan untuk mengatur tampilan dan text pada website Anda. Untuk pengaturan ini akan berbeda pada setiap template yang digunakan.

3 Silahkan arahkan menu pada nama situs Anda kemudian pilih menu Template Setting. Logo Setting : Silahkan memilih / mengupload logo perusahaan Anda untuk ditampilan pada website Anda. Lalu tekan tombol simpan untuk menyimpan settingan yang telah Anda buat. B.2 Sidebar Manager Digunakan untuk mengatur tampilan dan isi dari sidebar website Anda. Tampilan pengaturan sidebar sebagai berikut: Untuk menggunakannya Anda tinggal drag widget yang ingin Anda gunakan dari kolom Available widget ke kolom Active widget. Setelah itu isikan data sesuai dengan kebutuhan Anda, lalu tekan tombol save, atau tekan tombol delete untuk menghilangkan widget tersebut dari sidebar Anda. Untuk menampilkan pengaturan widget yang Anda inginkan, silahkan klik tombol panah bawah pada salah satu widget active. Berikut penjelasan untuk masing-masing widget: 1. Text

4 Untuk menambahkan kolom text pada sidebar Anda. Title : Silahkan isikan Judul sidebar Anda. Text : Silahkan isikan paragraph text yang ingin Anda tampilkan. Anda juga bisa mengisikan kode HTML disini. 2. List Menu Untuk menambahkan daftar menu Anda pada sidebar. Title : Silahkan isikan Judul sidebar Anda. Sort Mode : Silahkan pilih urutan yang akan Anda gunakan. Sort Type : Silahkan pilih metode pengurutan yang Anda kehendaki.

5 3. Products Category Untuk menambahkan daftar kategori produk Anda pada sidebar. Title : Silahkan isikan Judul sidebar Anda. Sort Mode : Silahkan pilih urutan yang akan Anda gunakan. Sort Type : Silahkan pilih metode pengurutan yang Anda kehendaki. 4. Article List Untuk menambahkan daftar artikel pada sidebar website Anda. Title : Silahkan isikan Judul sidebar Anda. Filter Category : Silahkan pilih kategori artikel yang ingin Anda tampilkan pada sidebar. Limit Count : Silahkan isikan jumlah artikel yang ingin Anda tampilkan pada sidebar. Sort Mode : Silahkan pilih urutan yang akan Anda gunakan. Sort Type : Silahkan pilih metode pengurutan yang Anda kehendaki. 5. Contact

6 Untuk menambahkan detail kontak Anda pada sidebar website Anda. Title : Silahkan isikan Judul sidebar Anda. Select Account Type : Silahkan pilih account Facebook, Google+, Twitter, YM!, atau Youtube. Lalu isikan nama account Anda. 6. Article Category Untuk menampilkan kategori artikel pada website Anda. Title : Silahkan isikan Judul sidebar Anda. Sort Mode : Silahkan pilih urutan yang akan Anda gunakan. Sort Type : Silahkan pilih metode pengurutan yang Anda kehendaki. 7. Article Archive

7 Untuk menampilkan archive artikel (kumpulan artikel) pada sidebar website Anda. Title : Silahkan isikan Judul sidebar Anda. Show Type : Silahkan pilih model tampilan article archive Anda. Tersedia 2 pilihan yaitu,monthly (bulanan) dan yearly (tahunan). Show Article Count : Silahkan centang opsi ini untuk menampilkan jumlah artikel pada suatu archive. 8. Images Untuk menambahkan gambar atau banner pada sidebar website Anda. Title : Silahkan isikan Judul sidebar Anda. Select Images : Silahkan pilih / upload image yang akan Anda tampilkan. Default ukuran image akan berbeda untuk setiap template. B.3 Mengubah Tampilan Dasar Website Anda Untuk mengubah tampilan dasar website Anda silahkan klik menu Template yang ada pada menu sebelah kiri. Maka akan muncul tampilan daftar settingan template seperti berikut:

8 Untuk settingan dalam menu ini akan berbeda-beda untuk setiap template. 1. Customize Body Untuk mengubah tampilan Body website Anda, silahkan klik pada menu Body, dan akan muncul tampilan seperti berikut: Terdapat 3 opsi untuk pengaturan body. Tekan tombol ON/OFF untuk mengaktifkan atau menon-aktifkan tiap opsi tersebut. Background Image : Silahkan klik pada gambar tersebut untuk mengupload / memilih background image website Anda. Background Color : Silahkan isikan kode warna (jika Anda mengetahui kode warna untuk website) untuk mengganti warna background Anda. Jika Anda tidak mengetahui kode warna

9 untuk website, silahkan klik kotak warna yang ada disampingnya untuk memilih warna. Selanjutnya klik icon warna pada pojok kanan bawah. Background warna ini dapat dikombinasikan dengan background image. Background Repeat : Silahkan pilih metode pengulangan background image Anda. Terdapat beberapa opsi : repeat, repeat-x, repeat-y, dan no-repeat. Untuk kembali ke pengaturan sebelumnya klik tombol back yang ada pada pojok kiri atas jendela menu. Font Family : Silahkan pilih jenis huruf yang ingin Anda gunakan untuk website Anda. Font-Size : Silahkan pilih ukuran huruf yang ingin Anda gunakan untuk website Anda. Setelah Anda melakukan perubahan, silahkan tekan tombol save untuk menyimpan data Anda. 2. Customize Header Untuk mengubah tampilan Header website Anda, silahkan klik pada menu Header, dan akan muncul tampilan seperti berikut: Fragment : Untuk menambahkan selector pada css header. (Jangan mengubah opsi ini jika tidak mengerti tentang CSS). Background Image : Silahkan klik pada gambar tersebut untuk mengupload / memilih background image website Anda. Setelah Anda melakukan perubahan, silahkan tekan tombol save untuk menyimpan data

10 Anda. 3. Customize Navigasi / Menu Untuk mengubah tampilan Menu website Anda, silahkan klik pada menu Nav, dan akan muncul tampilan seperti berikut: Fragment : Untuk menambahkan selector pada css header. (Jangan mengubah opsi ini jika tidak mengerti tentang CSS). Color : Silahkan isikan kode warna (jika Anda mengetahui kode warna untuk website) untuk mengganti warna background Anda. Jika Anda tidak mengetahui kode warna untuk website, silahkan klik kotak warna yang ada disampingnya untuk memilih warna. Selanjutnya klik icon warna pada pojok kanan bawah. Font Family : Silahkan pilih jenis huruf yang ingin Anda gunakan untuk menu Anda. Font-Size : Silahkan pilih ukuran huruf yang ingin Anda gunakan untuk menu Anda. Setelah Anda melakukan perubahan, silahkan tekan tombol save untuk menyimpan data Anda. 4. Customize Warna Hover Pada Menu Untuk mengubah tampilan Warna Hover Pada Menu website Anda, silahkan klik pada menu

11 Nav Current Hover, dan akan muncul tampilan seperti berikut: Fragment : Untuk menambahkan selector pada css header. (Jangan mengubah opsi ini jika tidak mengerti tentang CSS). Color : Silahkan isikan kode warna (jika Anda mengetahui kode warna untuk website) untuk mengganti warna background Anda. Jika Anda tidak mengetahui kode warna untuk website, silahkan klik kotak warna yang ada disampingnya untuk memilih warna. Selanjutnya klik icon warna pada pojok kanan bawah. Setelah Anda melakukan perubahan, silahkan tekan tombol save untuk menyimpan data Anda. 5. Customize Footer Untuk mengubah tampilan Footer website Anda, silahkan klik pada menu Footer, dan akan muncul tampilan seperti berikut:

12 Fragment : Untuk menambahkan selector pada css header. (Jangan mengubah opsi ini jika tidak mengerti tentang CSS). Background Color : Silahkan isikan kode warna (jika Anda mengetahui kode warna untuk website) untuk mengganti warna background Anda. Jika Anda tidak mengetahui kode warna untuk website, silahkan klik kotak warna yang ada disampingnya untuk memilih warna. Selanjutnya klik icon warna pada pojok kanan bawah. Setelah Anda melakukan perubahan, silahkan tekan tombol save untuk menyimpan data Anda. 6. Customize Header on Footer Untuk mengubah tampilan Header on Footer website Anda, silahkan klik pada menu Header Footer, dan akan muncul tampilan seperti berikut:

13 Fragment : Untuk menambahkan selector pada css header. (Jangan mengubah opsi ini jika tidak mengerti tentang CSS). Color : Silahkan isikan kode warna (jika Anda mengetahui kode warna untuk website) untuk mengganti warna background Anda. Jika Anda tidak mengetahui kode warna untuk website, silahkan klik kotak warna yang ada disampingnya untuk memilih warna. Selanjutnya klik icon warna pada pojok kanan bawah. Setelah Anda melakukan perubahan, silahkan tekan tombol save untuk menyimpan data Anda. 7. Content Footer Untuk mengubah tampilan Content Footer website Anda, silahkan klik pada menu Content Footer, dan akan muncul tampilan seperti berikut: Fragment : Untuk menambahkan selector pada css header. (Jangan mengubah opsi ini jika tidak

14 mengerti tentang CSS). Color : Silahkan isikan kode warna (jika Anda mengetahui kode warna untuk website) untuk mengganti warna background Anda. Jika Anda tidak mengetahui kode warna untuk website, silahkan klik kotak warna yang ada disampingnya untuk memilih warna. Selanjutnya klik icon warna pada pojok kanan bawah. Setelah Anda melakukan perubahan, silahkan tekan tombol save untuk menyimpan data Anda. C. MEMILIH dan MENGUPLOAD GAMBAR Pada pengaturan selanjutnya akan ada beberapa bagian yang menggunakan fasilitas memilih dan upload gambar. Semua disajikan dalam tampilan jendela yang sama, yaitu sebagai berikut: Pictures : berisi daftar gambar yang sudah Anda upload. Anda bisa menghapus atau memilih untuk digunakan / ditampilkan pada bagian tertentu website Anda (tergantung pada settingan mana yang nantinya Anda gunakan). Untuk memilih gambar, tinggal pilih salah satu gambar tersebut dan klik tombol submit.

15 Upload Photo : untuk mengupload gambar dari computer Anda ke sever website Anda. Anda tinggal drag gambar dari windows explorer Anda, atau klik tombol select files manually dan pilih file gambar pada computer Anda yang ingin Anda upload. Baik menggunakan metode drag& drop maupun browse file manually gambar Anda akan terupload secara otomatis. From URL : Anda juga bisa menggunakan alamat URL gambar pada website lain untuk ditampilkan gambarnya pada website Anda. Silahkan isikan URL gambar tersebut dan klik tombol browse(icon kaca pembesar). D. SETTING DASAR Berikut adalah setting dasar yang harus diperhatikan pada website Anda. Semua dikelompokkan pada menu Sites. D.1. Site Setting Berisi kumpulan pengaturan yang berkaitan dengan website company profile Anda. Silahkan arahkan mouse ke menu sites -> setting -> site setting. Maka akan Ada daftar pengaturan yang digolongkan sebagai berikut: 1. General Setting

16 Site Name : Silahkan isikan nama Website Anda, hanya sebagai informasi tambahan saja. Tagline : Silahkan isikan slogan Website Anda, hanya sebagai informasi tambahan saja. Description : Silahkan isikan dengan penjelasan singkat Website Anda, hanya sebagai informasi tambahan saja. Folder : Lokasi tempat menginstal website Anda, [Jangan diubah jika tidak mengerti struktur folder pada server] defaultnya kosong jika merupakan situs utama, dan akan berisi nama folder jika merupakan sub website / sub domain. Silahkan isi sesuai dengan kebutuhan website Anda lalu klik tombol save change untuk menyimpan settingan Anda. 2. Text Setting Untuk mengatur default text pada halaman website Anda. Silahkan diisikan dengan kata-kata

17 yang sesuai dengan kebutuhan Anda. Tampilan ini disesuaikan dengan template yang Anda pilih, dan otomatis akan berbeda pengaturannya pada setiap template. Silahkan isi sesuai dengan kebutuhan website Anda lalu klik tombol save change untuk menyimpan settingan Anda. 3. Social Network Untuk mengatur alamat social media yang Anda gunakan. Facebook Account : Silahkan isikan dengan alamat URL Facebook Anda / perusahaan Anda. Twitter Account : Silahkan isikan dengan alamat URL Twitter Anda / perusahaan Anda. Google+ Account : Silahkan isikan dengan alamat URL Google+ Anda / perusahaan Anda. Youtube Account : Silahkan isikan dengan alamat URL Channel Youtube Anda / perusahaan Anda. Silahkan isi sesuai dengan kebutuhan website Anda lalu klik tombol save change untuk menyimpan settingan Anda. 4. Fav Icon Untuk mengatur Icon yang tampil pada jendela browser Anda. Contohnya seperti berikut:

18 Untuk mengeditnya silahkan klik tombol Change Image, lalu pilih / upload gambar yang ingin digunakan sebagai icon (silahkan baca pada bagian memilih dan mengupload gamba r untuk panduan mengupload image), kemudian tekan tombol submit. Dan terakhir tekan tombol save change untuk menyimpan settingan Anda. 5. URL Permalink Anda dapat memilih format URL / Link Website Anda sesuai dengan aturan SEO yang Anda ikuti. JagoanWeb menyediakan berbagai macam format URL yang bisa memenuhi kebutuhan akan SEO saat ini. 6. Google Setting Google Webmaster : Silahkan paste kode dari account google webmaster Anda pada kolom isian ini. Google webmaster adalah alat untuk memeriksa kesehatan website Anda yang disediakan oleh google secara GRATIS.

19 Google analytics : Silahkan paste kode dari account google analytics Anda pada kolom isian ini. Google analytics adalah alat untuk mengetahui data pengunjung website Anda secara detail yang disediakan oleh google secara GRATIS. 7. Site Preference Pada halaman ini Anda bisa mengatur tampilan untuk halaman Admin Anda. Use Tooltips : silahkan centang opsi ini untuk menampilkan tooltips berisi keterangan tambahan pada setiap menu yang ada di halaman Admin Anda. D.2 File Manager Silahkan arahkan mouse ke menu sites -> setting -> file manager. Maka akan keluar tampilan seperti berikut: Digunakan untuk mengatur file-file Anda yang berada pada server website Anda. Anda bisa menambah file atau menghapus file dari pengaturan ini. Untuk menghapus file : silahkan klik tanda x pada pojok kanan gambar. Untuk mengupload file baru : silahkan klik menu upload file yang ada di sebelah kiri,

20 kemudian pilih file pada computer Anda yang ingin Anda upload. D.3 Administrator Untuk mengatur user yang Anda ijinkan mengakses halaman Admin Anda. Ada 2 bagian untuk pengaturan ini, yaitu: 1. Administrator Group Silahkan arahkan mouse ke menu sites -> setting -> administrator -> administrator group. Maka akan keluar tampilan seperti berikut: Create Group : Untuk menambah group administrator baru. Silahkan isikan nama, deskripsi (penjelasan singkat) dan centang hak akses yang Anda kehendaki untuk group administrator ini. Lalu tekan tombol create. Group List : berisi daftar group administrator website Anda (yang telah Anda buat sebelumnya). Secara default JagoanWeb menyediakan 4 group administrator yaitu : Administrator, Content Manager, Article Manager, dan Product Manager. Untuk menghapus group administrator : silahkan klik icon trash yang berwarna merah pada pojok kanan group administrator. Untuk mengedit group administrator : silahkan klik icon pensil yang berwarna biru. Kemudian akan muncul tampilan seperti berikut:

21 Silahkan edit sesuai dengan kebutuhan Anda, setelah selesai, klik tombol create untuk menyimpan settingan Anda. 2. Administrator List Silahkan arahkan mouse ke menu sites -> setting -> administrator -> all administrator. Maka akan keluar tampilan seperti berikut: Add Administrator : Untuk menambah account administrator baru pada website Anda. Silahkan isikan data , username, password, dan admin level (administrator group), lalu tekan

22 tombol create untuk menyimpan settingan Anda. Administrator : Berisi daftar administrator yang berhak mengakses admin website Anda. Tombol Action : berisi 3 daftar menu yaitu : View : untuk melihat detail data administrator yang dipilih. Edit : Untuk mengedit data administrator yang dipilih. Tampilan edit sebagai berikut silahkan edit data yang tersedia sesuai dengan kebutuhan Anda. Lalu tekan tombol update untuk menyimpan settingan Anda. Delete : Untuk menghapus data administrator yang dipilih. E. MEMBUAT GALLERY / ALBUM GAMBAR Untuk membuat gallery, silahkan klik menu bagian atas halaman admin Anda. Maka akan muncul halaman yang berisi daftar/list album yang telah Anda buat sebelumnya. JIka Anda belum pernah membuat gallery sebelumnya, maka akan tampil seperti berikut:

23 1. Membuat Album Baru. Untuk membuat album baru, silahkan klik tombol create album berwana biru yang ada pada pojok kanan atas halaman gallery. Maka akan muncul tampilan seperti berikut: Album Name : Silahkan isikan nama album yang ingin Anda buat Album Description : Silahkan isikan deskripsi tentang album yang ingin Anda buat. Setelah mengisikan kedua kolom tersebut, silahkan klik tombol create album untuk menyimpan data Anda. 1. A Menambahkan Gambar pada Album Untuk menambahkan gambar pada album yang telah Anda buat sebelumnya, silahkan klik tombol add more photos, setelah itu silahkan pilih atau upload gambar yang ingin Anda tambahkan pada album ini. Setelah selesai memilih gambar, silahkan klik tombol submit yang ada di pojok kanan bawah. Maka akan keluar tampilan gambar yang Anda pilih tadi, contohnya seperti berikut:

24 Image Title Caption : silahkan isikan judul gambar Anda. Image Description : silahkan isikan deskripsi gambar Anda. Setelah mengisikan kedua kolom tersebut pada tiap-tiap gambar Anda, silahkan klik tombol save untuk menyimpan data Anda. Setelah Anda simpan, maka akan muncul tampilan seperti berikut: 2. Mengedit Album Untuk mengedit album yang telah Anda buat sebelumnya, silahkan klik tombol browse (icon kaca pembesar) pada album yang Anda pilih.

25 Maka akan keluar tampilan untuk mengedit gallery seperti berikut: Silahkan edit data sesuai kebutuhan Anda. Untuk menambahkan gambar lagi, silahkan klik tombol add photos yang ada di pojok kanan atas. Untuk menghapus gambar, silahkan arahkan mouse Anda pada gambar yang ingin Anda hapus, lalu klik icon delete / sampah. Selanjutnya silahkan klik tombol Save untuk menyimpan data perubahan Anda. 3. Menghapus Album Untuk mengedit album yang telah Anda buat sebelumnya, silahkan klik tombol delete (icon sampah) pada album yang Anda pilih. F. MENGELOLA ARTIKEL Untuk mengelola artikel, silahkan klik menu Artikel yang ada pada menu atas halaman admin Anda. Maka akan muncul halaman untuk mengelola artikel Anda.

26 1. Membuat Artikel Baru. Untuk membuat artikel baru, silahkan klik tombol add more articles yang ada di pojok kanan atas halaman. Maka akan muncul tampilan seperti berikut: Publish Status : silahkan pilih untuk membuat status artikel Anda, apakah akan langsung ditampilkan, atau disimpan sebagai draft terlebih dahulu. Select Categories : Silahkan memilih satu atau beberapa kategori untuk artikel Anda. Jika Anda belum membuat kategori sebelumnya, silahkan klik tombol Add New Category. Tampilan untuk menambah kategori sebagai berikut:

27 Nama Kategori : Silahkan isikan nama kategori yang akan Anda buat URL : adalah alamat URL untuk kategori Anda. Kolom ini akan terisi secara otomatis berdasarkan nama kategori Anda. Deskripsi Kategori : Silahkan isikan deskripsi kategori yang akan Anda buat. Setelah mengisikan semua field diatas, silahkan klik tombol create untuk menyimpan data Anda. Jika Anda ingin menambah kategori lagi, silahkan ulangi lagi langkah membuat kategori diatas. Setelah Anda memilih kategori, berikutnya adalah cara pengisian Artikel Anda. Enter Title Here : Silahkan isikan judul artikel yang akan Anda buat. Setelah itu URL artikel Anda akan secara otomatis terisi. Selanjutnya silahkan ketikkan artikel Anda pada text area yang telah disediakan. Anda bisa menggunakan fasilitas untuk styling artikel Anda dengan menggunakan tools yang tersedia pada text editor tersebut. Add media to content : Untuk menyisipkan gambar pada artikel Anda. Silahkan arahkan kursor mouse pada bagian artikel yang ingin Anda sisipkan gambar. Kemudian pilih / upload gambar dari computer Anda. Browse for Image : Untuk menambahkan icon / default image pada artikel Anda. Untuk beberapa template icon ini tidak ditampilkan pada website. Silahkan klik tombol ini dan pilih / upload gambar dari computer Anda. Advanced Setting : untuk mengatur SEO artikel Anda. Silahkan klik tombol tersebut dan akan tampil form isian sebagai berikut:

28 Publish Date : silahkan pilih tanggal publish artikel Anda. Meta Title : silahkan isikan judul SEO dari artikel Anda. Meta Description : silahkan isikan deskripsi SEO dari artikel Anda. Setelah semua kolom diatas terisi, silahkan klik tombol save yang ada di pojok kanan bawah untuk menyimpan artikel Anda. 2. Mengedit Artikel Untuk mengedit artikel yang telah Anda buat sebelumnya, silahkan klik tombol setting dan klik menu edit yang ada pada kolom action pada artikel yang akan Anda pilih. Maka akan muncul tampilan seperti pada saat Anda menambah artikel sebelumnya. Silahkan edit data yang Anda butuhkan, lalu tekan tombol save untuk menyimpan perubahan yang Anda buat. 3. Mengatur Komentar pada Artikel Untuk mengatur komentar pada artikel, silahkan klik icon komentar pada artikel yang Anda pilih. Maka akan keluar tampilan seperti berikut: Approve : silahkan klik link ini untuk mengijinkan komentar tersebut tampil pada website Anda

29 Remove : silahkan klik link ini untuk menghapus komentar tersebut. 4. Menghapus Artikel Untuk mengedit artikel yang telah Anda buat sebelumnya, silahkan klik tombol setting dan klik menu Delete yang ada pada kolom action pada artikel yang akan Anda pilih. 5. Pengaturan Kategori Artikel Untuk mengatur kategori artikel Anda, silahkan arahkan mouse Anda pada menu Artikel yang ada di menu atas halaman Admin Anda, lalu klik submenu Categories. Maka akan muncul tampilan seperti berikut : 5.a Menambah Kategori Untuk menambah kategori baru, silahkan isikan field berikut pada block sebelah kiri. Nama Kategori : Silahkan isikan nama kategori yang akan Anda buat URL : adalah alamat URL untuk kategori Anda. Kolom ini akan terisi secara otomatis berdasarkan nama kategori Anda. Deskripsi Kategori : Silahkan isikan deskripsi kategori yang akan Anda buat.

30 Setelah mengisikan semua field diatas, silahkan klik tombol create untuk menyimpan data Anda. 5.b Mengedit Kategori Untuk mengedit kategori yang telah Anda buat sebelumnya, silahkan klik icon setting dan klik menu edit pada kolom action yang ada pada artikel yang Anda pilih. Setelah itu lakukan perubahan pada data artikel yang Anda pilih tersebut. Setelah itu silahkan klik tombol create untuk menyimpan data perubahan Anda. 5.c Menghapus Kategori Untuk menghapus kategori yang telah Anda buat sebelumnya, silahkan klik icon setting dan klik menu Delete pada kolom action yang ada pada artikel yang Anda pilih. G. MENGELOLA PRODUK Untuk mengelola produk, silahkan klik menu Produk yang ada pada menu atas halaman admin Anda. Maka akan muncul halaman untuk mengelola produk Anda. 1. Menambahkan Poduk Baru. Untuk menambahkan produk baru, silahkan klik tombol add more products yang ada di pojok kanan atas halaman. Maka akan muncul tampilan seperti berikut:

31 Publish Status : silahkan pilih untuk membuat status artikel Anda, apakah akan langsung ditampilkan, atau disimpan sebagai draft terlebih dahulu. Select Categories : Silahkan memilih satu atau beberapa kategori untuk artikel Anda. Jika Anda belum membuat kategori sebelumnya, silahkan klik tombol Add New Category. Tampilan untuk menambah kategori sebagai berikut:

32 Nama Kategori : Silahkan isikan nama kategori yang akan Anda buat URL : adalah alamat URL untuk kategori Anda. Kolom ini akan terisi secara otomatis berdasarkan nama kategori Anda. Deskripsi Kategori : Silahkan isikan deskripsi kategori yang akan Anda buat. Setelah mengisikan semua field diatas, silahkan klik tombol create untuk menyimpan data Anda. Jika Anda ingin menambah kategori lagi, silahkan ulangi lagi langkah membuat kategori diatas. Setelah Anda memilih kategori, berikutnya adalah cara pengisian Produk Anda. Product Name : Silahkan isikan nama produk yang akan Anda buat. Setelah itu URL artikel Anda akan secara otomatis terisi berdasarkan nama produk Anda. Product Code : Silahkan isikan kode produk Anda. Selanjutnya silahkan ketikkan deskripsi produk Anda pada text area yang telah disediakan. Anda bisa menggunakan fasilitas untuk styling deskripsi Anda dengan menggunakan tools yang tersedia pada text editor tersebut. Add media to content : Untuk menyisipkan gambar pada deskripsi Anda. Silahkan arahkan kursor mouse pada bagian deskripsi yang ingin Anda sisipkan gambar. Kemudian pilih / upload gambar dari computer Anda. Browse for Image : Untuk menambahkan gambar pada produk Anda. Anda dapat menambahkan gambar lebih dari satu untuk satu produk Anda. Silahkan klik tombol ini dan pilih / upload gambar dari computer Anda. Advanced Setting : untuk mengatur SEO produk Anda. Silahkan klik tombol tersebut dan akan tampil form isian sebagai berikut:

33 Publish Date : silahkan pilih tanggal publish produk Anda. Meta Title : silahkan isikan judul SEO dari produk Anda. Meta Description : silahkan isikan deskripsi SEO dari produk Anda. Setelah semua kolom diatas terisi, silahkan klik tombol save yang ada di pojok kanan bawah untuk menyimpan artikel Anda. 2. Mengedit Produk Untuk mengedit produk yang telah Anda buat sebelumnya, silahkan klik tombol setting dan klik menu edit yang ada pada kolom action pada produk yang akan Anda pilih. Maka akan muncul tampilan seperti pada saat Anda menambah produk sebelumnya. Silahkan edit data yang Anda butuhkan, lalu tekan tombol save untuk menyimpan perubahan yang Anda buat. 3. Menghapus Produk Untuk menghapus produk yang telah Anda buat sebelumnya, silahkan klik tombol setting dan klik menu Delete yang ada pada kolom action pada artikel yang akan Anda pilih. 5. Pengaturan Kategori Produk

34 Untuk mengatur kategori artikel Anda, silahkan arahkan mouse Anda pada menu Produk yang ada di menu atas halaman Admin Anda, lalu klik submenu Categories. Maka akan muncul tampilan seperti berikut : 5.a Menambah Kategori Untuk menambah kategori baru, silahkan isikan field berikut pada block sebelah kiri. Nama Kategori : Silahkan isikan nama kategori yang akan Anda buat URL : adalah alamat URL untuk kategori Anda. Kolom ini akan terisi secara otomatis berdasarkan nama kategori Anda. Deskripsi Kategori : Silahkan isikan deskripsi kategori yang akan Anda buat. Setelah mengisikan semua field diatas, silahkan klik tombol create untuk menyimpan data Anda. 5.b Mengedit Kategori Untuk mengedit kategori yang telah Anda buat sebelumnya, silahkan klik icon setting dan klik menu edit pada kolom action yang ada pada artikel yang Anda pilih. Setelah itu lakukan perubahan pada data artikel yang Anda pilih tersebut. Setelah itu silahkan klik tombol create untuk menyimpan data perubahan Anda.

35 5.c Menghapus Kategori Untuk mengedit kategori yang telah Anda buat sebelumnya, silahkan klik icon setting dan klik menu Delete pada kolom action yang ada pada artikel yang Anda pilih. H. MENAMBAH MENU DAN ISI HALAMAN Sebeuah website pasti membutuhkan menu dan isi halaman untuk menyampaikan informasi kepada pengunjung. E.1 Pengaturan Menu Untuk mengatur Menu pada website Anda, silahkan klik menu Pages pada deretan menu bagian atas halaman admin Anda. Maka akan keluar tampilan seperti berikut : 1. Menambah menu baru Untuk menambah menu baru, silahkan isi kolom isian pada bagian Add New Menu, berikut keterangan field isiannya: Nama Menu : Silahkan isikan nama menu Anda. Menu Type : Silahkan pilih jenis menu yang akan Anda tambahkan. Ada beberapa pilihan sebagai berikut: a. Pages : untuk menu yang isinya informasi umum / global. (nantinya Anda bisa menambahkan informasi text, artikel, produk, gallery, form, dll). b. Article : pada dasarnya sama dengan menu type pages, tetapi untuk menu type article ini sudah otomatis terisi dengan artikel yang bisa Anda pilih dari salah satu atau semua kategori

36 artikel Anda. Nantinya Anda juga tetap bisa menambahkan isi berupa informasi jenis lain pada menu ini. c. Products : pada dasarnya sama dengan menu type pages, tetapi untuk menu type products ini sudah otomatis terisi dengan daftar produk yang bisa Anda pilih dari salah satu atau semua kategori produk Anda. Nantinya Anda juga tetap bisa menambahkan isi berupa informasi jenis lain pada menu ini. d. Gallery : pada dasarnya sama dengan menu type pages, tetapi untuk menu type gallery ini sudah otomatis terisi dengan gambar/foto yang bisa Anda pilih dari salah satu atau semua album yang telah Anda buat. Nantinya Anda juga tetap bisa menambahkan isi berupa informasi jenis lain pada menu ini. e. External Link : untuk menambahkan menu yang berupa link ke website lain. Ketika Anda memilih menu jenis ini, aka nada opsi tambahan berupa taget link (pilih target link tersebut dibuka pada halaman yang sama atau new tab) dan insert link (isikan dengan link website yang ingin Anda buka pada saat menu tersebut diklik) Menu Url : adalah link untuk menu Anda. kolom ini akan terisi secara otomatis menyesuaikan dengan nama menu Anda. Tetapi Anda juga tetap bisa mengganti sesuai dengan kebutuhan. Menu Parent : silahkan pilih parent menu untuk menu baru Anda tersebut. Jika Anda menginginkan menu tersebut sebagai menu utama, silahkan pilih No Parent. Bagian More Setting : Show it? : silahkan pilih opsi untuk menampilkan atau menyembunyikan menu Meta Title : silahkan isikan dengan judul halaman yang sesuai dengan kebutuhan SEO halaman tersebut Meta Description : silahkan isikan dengan penjelasan halaman yang sesuai dengan kebutuhan SEO halaman tersebut. Lalu silahkan klik tombol create untuk menyimpan settingan menu yang telah Anda buat. 2. Edit Menu Untuk mengedit menu yang telah Anda buat sebelumnya, silahkan klik tombol edit atau icon pensil yang ada pada sebelah kanan menu yang ingin Anda edit. Setelah itu silahkan edit data menu tersebut dan klik tombol Update untuk menyimpan setting yang telah Anda buat. 3. Hide Menu Untuk menyembunyikan menu yang telah Anda buat sebelumnya, silahkan klik tombol setting atau icon gear yang ada pada sebelah kanan menu yang ingin Anda edit. Lalu pipih Hide Menu.

37 4. Delete Menu Untuk menyembunyikan menu yang telah Anda buat sebelumnya, silahkan klik tombol setting atau icon gear yang ada pada sebelah kanan menu yang ingin Anda edit. Lalu pipih Remove Menu. E.2 Pengaturan Isi Halaman Untuk mengatur isi halaman dari menu yang telah Anda buat sebelumnya, silahkan tombol edit content atau icon content yang ada pada sebelah kanan menu yang ingin Anda edit. Maka akan muncul tampilan untuk mengedit isi halaman website Anda sebagai berikut: Pada halaman ini Anda juga bisa mengedit dan melihat menu yang lain pada blok Menu List

38 sebelah kiri. Untuk menambah isi pada halaman yang telah Anda pilih, silahkan klik tombol Add New Content yang berwarna hijau. Maka akan muncul tampilan pilihan isi yang disediakan oleh engine JagoanWeb Anda seperti berikut: 1. Konten Text Untuk menambahkan konten text pada halaman website Anda. Silahkan klik icon text dan akan muncul tampilan seperti berikut: Silahkan isikan konten halaman website Anda pada textarea yang telah disediakan. Untuk menyisipkan gambar pada konten Anda, silahkan arahkan kursor mouse pada bagian yang ingin Anda sisipkan gambar. Kemudian klik tombol Add media to content lalu pilih / upload gambar dari computer Anda. Selanjutnya klik tombol Update untuk menyimpan data Anda. 2. Konten Produk Untuk menambahkan produk yang telah Anda buat sebelumnya pada halaman website Anda.

39 Silahkan klik icon products dan akan muncul tampilan seperti berikut: Category : Silahkan pilih kategori produk yang akan Anda tampilkan. View Style : Silahkan pilih model tampilan produk Anda. Show : Silahkan isikan berapa produk yang ingin Anda tampilkan. Sort By : Silahkan pilih urutan tampilan produk Anda. Sort Mode : Silahkan pilih model pengurutan produk Anda. Selanjutnya tekan tombol Save untuk menyimpan data Anda. 3. Konten FAQ Untuk menambahkan konten FAQ pada halaman website Anda. Silahkan klik icon FAQ dan akan muncul tampilan seperti berikut: Question : Silahkan isikan pertanyaan yang ingin Anda tampilkan pada website Anda. Answer : Silahkan isikan jawaban dari pertanyaan Anda sebelumnya.

40 Keterangan Tombol : Untuk menambah pertanyaan dan jawaban baru, silahkan klik tombol + yang ada di bawahnya. Untuk menghapus pertanyaan dan jawaban yang telah Anda buat, silahkan klik tombol sampah yang ada dibawahnya. Untuk mengatur urutan pertanyaan dan jawaban Anda, silahkan geser (drag) tombol panah empat yang ada di bawahnya. FAQ Setting : Untuk mengatur warna dari daftar pertanyaan dan jawaban Anda, silahkan isikan kode warna pada blok FAQ Setting, atau klik icon warna yang ada disebelah inputan warna tersebut. Selanjutnya klik tombol Save untuk menyimpan data Anda. 4. Konten Galeri Untuk menambahkan gambar pada galeri yang telah Anda buat sebelumnya pada halaman website Anda. Silahkan klik icon Gallery dan akan muncul tampilan seperti berikut: Silahkan pilih album mana yang akan Anda tampilkan pada halaman ini. Jika Anda ingin membuat album baru, silahkan klik tombol Create Album. Selanjutnya klik tombol Save untuk menyimpan data Anda. 5. Konten Video Untuk menambahkan konten video pada halaman website Anda. Silahkan klik icon Video dan akan muncul tampilan seperti berikut:

41 Url Video : Silahkan isikan url video yang ingin Anda tampilkan pada website Anda. Atau silahkan klik tombol browse untuk browsing/search gambar dari youtube. Berikut contoh tampilannya: Setelah Anda menemukan video yang Anda cari, silahkan klik tombol select this video. Title : Silahkan isikan judul yang ingin Anda berikan untuk video tersebut. Frame Size : Silahkan isikan ukuran yang Anda inginkan untuk Video tersebut tampil di website Anda. Untuk mengisikan deskripsi tentang video tersebut, silahkan isikan deskripsi Anda pada kolom description. Selanjutnya klik tombol Save untuk menyimpan data Anda. 6. Konten Form Untuk menambahkan konten form pada halaman website Anda. Silahkan klik icon Form dan akan muncul tampilan seperti berikut:

42 Form Designer: Label : Silahkan isikan label untuk inputan Anda. Input Type : Silahkan pilih jenis inputan yang Anda butuhkan. Terdapat beberapa pilihan seperti text field, text area, radio button, checkbox, dropdown. Required : Silahkan centang opsi ini jika Anda menginginkan form isian tersebut harus diisi. Valid Silahkan centang opsi ini jika Anda menginginkan form isian tersebut harus diisi dengan alamat yang valid. Setelah itu tekan tombol add input untuk menambahkan inputan tersebut. Berikut contoh satu inputan form: Untuk mengedit input form tersebut, silahkan klik icon pensil yang ada di sebelah kanan. Lalu edit sesuai dengan kebutuhan Anda. Untuk mengatur urutan form inputan tersebut, silahkan klik icon panah empat arah dan drah sesuai dengan urutan yang Anda butuhkan. Untuk menghapus form inputan tersebut, silahkan klik icon sampah. Recipent: Silahkan isikan alamat untuk menerima hasil submit / pengiriman form tersebut. Anda dapat menambahkan beberapa alamat dengan mengklik tombol + yang ada dibawahnya. Anda juga dapat menghapus alamat tersebut dengan mengeklik icon sampah yang ada disebelah alamat tersebut. Selanjutnya silahkan tekan tombol Save untuk menyimpan data Anda. 7. Konten Artikel

43 Untuk menambahkan artikel yang telah Anda buat sebelumnya pada halaman website Anda. Silahkan klik icon Article dan akan muncul tampilan seperti berikut: Category : Silahkan pilih kategori artikel yang akan Anda tampilkan. View Style : Silahkan pilih model tampilan artikel Anda. Show : Silahkan isikan berapa jumlah artikel yang ingin Anda tampilkan. Sort By : Silahkan pilih urutan tampilan artikel Anda. Sort Mode : Silahkan pilih model pengurutan artikel Anda. Selanjutnya tekan tombol Save untuk menyimpan data Anda. 8. Konten Slider (Image Slideshow) Untuk menambahkan konten berupa slide show yang diambil dari album yang sudah Anda buat sebelumnya pada halaman website Anda. Silahkan klik icon Sliders dan akan muncul tampilan seperti berikut: Pick an Album : Silahkan pilih salah satu dari album Anda yang ingin Anda tampilkan sebagai slide show.

44 Jika Anda ingin membuat album baru, silahkan klik tombol Create Album. Slider Provider : Silahkan pilih model slide show yang Anda inginkan. Transition Mode : Silahkan pilih model peralihan pada setiap ganti gambar. Animation Duration : silahkan isikan lama animasi yang berjalan pada saat peralihan gambar. Satuannya adalah milliseconds. Delay Transition : silahkan isikan lama jeda pada saat peralihan gambar. Satuannya adalah milliseconds. Selanjutnya tekan tombol Save untuk menyimpan data Anda.