## Training On Making Web Design (Bloggy) At SMKN 8 Makassar

## Pelatihan Pembuatan Desain Web (Bloggy) Pada SMK Negeri 8 Makassar
Andi Harmin a , Ida b* , & Muhammad Faisal b
a STMIK Profesional Makassar, A. P. Pettarani No. 27, Makassar and 90222, Indonesia,
b STMIK Profesional Makassar, A. P.Pettarani No. 27,Makassar, Indonesia

## Abstract
The purpose of this service is to provide additional knowledge to students which includes: basic knowledge of blog media, how to use free design templates, how to  edit and  use them as information  media. To  increase this knowledge, training participants are given basic  knowledge and skills about: downloading free templates,  editing  designs in  index files, displa ying design results on localhost.  The  implementation  of  the  service  is  carried  out  in  several  methods,  namely:  lectures,  discussions  and  practical assistance. The results of the evaluation that we got during the training of community service activities, we can conclude that this community service program has been able to provide enormous and targeted benefits for Vocational High School students who are partners in this activity. This form of training is very effective in providing refresher and insight as well as additional knowledge in the field of web-based computers. So that it can improve the understanding and abilities and skills of students in partners so that they can be added to the partner curriculum.

## Abstrak
Tujuan pengabdian  ini dilaksanakan adalah  memberikan pengetahuan tambahan  kepada para siswa/i  yang  meliputi: pengetahuan dasar tentang media blog, cara memanfaatkan free design template, cara mengedit dan pemanfaatannya sebagai media informasi. Untuk  meningkatkan  pengetahuan  tersebut  peserta  pelatihan  diberikan  materi  pengetahuan  dan  keterampilan  dasar  tentang: download  free  templates,  edit  design  pada  file  index,  menampilkan  hasil  design  dalam  localhost.  Pelaksanaan  pengabdian dilaksanakan  pada  dengan  beberapa  metode,  yaitu:  ceramah,  diskusi  dan  pendampingan  praktek.  Hasil  evaluasi  yang  kami dapatkan  selama  pelatihan  kegiatan  pengabdian  kepada  masyarakat,  dapat  kami  simpulkan  bahwa  program  pengabdian  kepada masyarakat ini telah mampu memberikan manfaat yang sangat besar dan tepat sasaran bagi siswa/i Sekolah Menengah Kejuruan yang  menjadi  mitra  dalam  kegiatan  ini.  Bentuk  pelatihan  ini  sangat  efektif  dalam  memberikan  penyegaran  dan  wawasan  serta pengetahuan  tambahan  dalam  bidang  komputer  berbasis  web.  Sehingga  dapat  meningkatkan  pemahaman  dan  kemampuan  serta keterampilan siswa/i pada mitra sehingga bisa menjadi tambahan dalam kurikulum mitra.
Keywords: HTML, CSS, Bloggy

## 1. Pendahuluan *
Sekolah  Menengah  Kejuruan  (SMK)  Negeri  8  Makassar  adalah  salah  satu  sekolah  unggulan  yang  ada  di  makassar dengan memiliki 6 program keahlian, yaitu: Manajemen Perkantoran dan Layanan Bisnis, Usaha Layanan Pariwisata, Perhotelan,  Kuliner,  SPA  dan  Kecantikan,  Serta  Busana  (Fashion).  Beralamat  di  Jl.  Monginsidi  No.  17,  Maricaya Baru, Kecamatan Makassar, Kota Makassar, Sulawesi Selatan 90141.
SMK Negeri 8 Makassar saat ini memiliki jumlah siswa sebanyak 1057 yang terdiri dari siswa laki-laki sebanyak 195 orang dan siswa perempuan sebanyak 862 orang. Jumlah guru sebanyak 71 orang.  Menggunakan  kurikulum 2013, memiliki ruang kelas sebanyak 52 kelas. Laboratorium komputer 1 ruangan dan perpustakaan 1 ruangan.
* Corresponding author:
E-mail address : idamulyadi@stmikprofesional.ac.id
Berdasarkan  hasil  wawancara  dengan  pihak  mitra  diperoleh  informasi  bahwa  hingga  saat  ini  proses  pembelajaran berbasis komputer untuk jurusan perkantoran hanya mempelajari tentang penggunaan Microsoft Office khusus untuk administrasi  perkantoran.  Sehingga  dengan  adanya  pelatihan-pelatihan  dari  tim  pengabdian  akan  menambah pengetahuan baru bagi mereka khususnya di bidang informatika.
Pemanfaatan  ilmu  berbasis  komputer  disaat  ini  sangatlah  dibutuhkan  dan  menjadi  prioritas  bagi  semua  kalangan dalam  menghasilkan  insan cerdas dalam  berteknologi. Sehingga  menjadi keharusan  bagi  setiap siswa untuk  mampu beradaptasi dan memahami pengetahuan berbasis web serta pemanfaatan template.
Sebuah instansi atau perusahaan khususnya di bidang pendidikan sudah menjadi kewajiban baik dalam hal pelayanan administrasi  maupun  dalam  proses  belajar  dan  mengajar.  Pembuatan  web  design  (bloggy)  merupakan  salah  satu pemanfaatan  teknologi  dalam  membuat  sebuah  platform  sebagai  media  sosial  yang  terhubung  dengan  jaringan internet  dimana  blog  ini  berguna  untuk  berbagi  informasi  kehidupan  dengan  memposting  sebuah  penulisan  dengan berbagai topik dimulai dari seni, desain, olahraga, politik, kesehatan dan masih banyak lagi.
Permasalahan  yang dihadapi oleh  siswa-siswi SMK Negeri 8  Makassar adalah kurangnya pembelajaran komputer yang  bersifat  umum,  para  siswa(i)  tersebut  hanya  belajar  komputer  sesuai  dengan  kurikulum  jurusan  perkantoran yaitu  pembelajaran  tentang  administrasi  perkantoran  yaitu  microsoft  office  perkantoran.  Program  penerapan Pengabdian kepada Masyarakat (PkM) ini adalah sebagai berikut :
1. Mempersiapkan software-software yang dibutuhkan dalam pelatihan ini yaitu Browser, Notepad dan Xampp.
2. Pembuatan template-template design dengan mendownload template secara free.
3. Merubah coding-coding yang akan dibutuhkan, seperti upload profile, foto, pembuatan halaman utama.
4. Menampilkan hasil pembuatan design web pada browser secara localhost.
CSS  adalah  bahasa  standar  yang  digunakan  oleh  pengembang  Web  depan  untuk  menentukan  tampilan  dan  nuansa terstruktur  dokumen  yang  ditulis  dalam  HTML  dan  eXtensible  Mark-up  Language  (XML).  CSS  terdiri  dari  urutan aturan  gaya,  di  mana  setiap  aturan  memiliki  pemilih  yang  memilih  elemen  yang  diperlukan  untuk  ditata  dokumen HTML atau XML(Prettyman, 2020). Blog merupakan kependekan dari  “Weblog”(Avinesh et al., 2021) yang berarti salah  satu  jenis  website  atau  jurnal  online(Rahim  et  al.,  2020)  yang  memuat  tampilan  informasi  dari  berbagai sumber(Sulismiati,  2018)  serta  memuat  konten  seperti  artikel,  teks,  foto,  video,  dan  link  (tautan)(Robith,  2021). Hypertext  Markup  Language  (HTML)  adalah  bahasa  markah  standar  untuk  dokumen(Batalas  et  al.,  2021)  yang dirancang untuk ditampilkan(Leifeld, 2013) di peramban internet. Ini dapat dibantu oleh teknologi seperti Cascading Style Sheets (CSS) dan bahasa scripting seperti JavaScript dan VBScript(“HTML,” n.d.).

## 2. Metode
Pelaksanaan  kegiatan  pengabdian  kepada  masyarakat  dengan  tema  “Pelatihan  Pembuatan  Design  Web  (Bloggy)” dilaksanakan pada hari kamis, 31 Maret  2022 secara offline dengan  menggunakan  fasilitas  lab  komputer pada mitra tersebut.  Tim  Pengabdian  yang  terdiri  dari  2  orang  Dosen,  2  orang  mahasiswa  dan  2  orang  pegawas  lab  mitra. Pelaksanaan  materi  terdiri  dari  pengenalan  kampus  dimana  oleh  tim  pengabdian,  pengenalan  pengajar,  pemberian materi, diskusi tanya jawab dan simulasi praktek pembuatan desain web (bloggy).  Tim pelaksana pengabdian kepada masyarakat  oleh  STMIK  Profesional  Makassar  dilaksanakan  pada  SMK  Negeri  8  Makassar,  beralamat  di  Jl. Monginsidi  No.  17,  Maricaya  Baru,  Kecamatan  Makassar,  Kota  Makassar,  Sulawesi  Selatan  90141.  Pemecahan masalah  dan  tujuan  pengabdian  ini  menggunakan  studi  pendahuluan  dan  metode  pelatihan  berupa  metode  ceramah, tanya jawab, dan simulasi. Alur keja penerapan metode dapat dilihat pada gambar 1. Dimana tim pengabdian terlebih dahulu  mengidentifikasi  permasalahan  yang  ada  pada  mitra,  selanjutnya  melaksanakan  pelatihan  untuk  memenuhi kebutuhan  mitra  menggunakan  metode ceramah, diskusi dan simulasi. Hasil pelatihan kemudian di  evaluasi dimana para  peserta  mempraktikkan  pembuatan  desain  dengan  memanfaatkan  Bloggy  free  CSS  template  yang  akan ditampilkan melalui localhost.

## Gambar 1. Skema Alur Kerja

## 3. Hasil dan Diskusi
Langkah-langkah pembuatan Design Bloggy menggunanakan CSS Template:
Gambar 2. Download Free CSS Templates
Dari  gambar  2,  peserta  pelatihan  mengaktifkan  google,  kemudian  mengetik  free  download  CSS  template  untuk mendownload template yang akan digunakan sebagai desain.
Gambar 3. Jenis-jenis Template
Pada gambar 3, digunakan untuk memilih jenis template yang akan digunakan sebagai desain pribadi.
Gambar 4. Download Templates
Pada  gambar  4,  peserta  pelatihan  telah  memilih  jenis  template  dan  mengklik  download  untuk  mengambil  jenis tersebut sebagai desain.

## Gambar 5. Hasil Download
Pada gambar 5, terlihat hasil download secara otomatis masuk ke dalam folder download dengan nama file Webwing Free Website Template-Free-CSS.com
Gambar 6. Extract File to C:\xampp\htdocs
Setelah  template  terdownload,  langkah  selajutnya  mengaktifkn  Xampp,  aktifkan  Apache,  aktif  pd  browser,  ketik http://localhost/html/
Gambar 7. Tampilan Design pada localhostGambar
Gambar 8. Merubah Logo pada File Index
Gambar 9. Hasil Perubahan Logo
Pelaksanaan  pelatihan  ini  mudah  di  ikuti  oleh  peserta  karena  adanya  praktikum  langsung  dalam  pelaksanaannya. mulai dari download, extract file, mengaktifkan xampp, edit file PHP, dan menampilkan hasil desain pada localhost. Sehingga  dalam  pelatihan  ini  tim  pengabdian  tidak  mengalami  kendala.  Adapun output dari  kegiatan  ini, bertambahnya pengetahuan baru bagi peserta dalam membuat desain web (bloggy), sehingga peserta dapat membuat blog pribadi. Berikut adalah hasil pembuatan design oleh para peserta.
Gambar 10. Hasil Desain Peserta
Gambar 11. Foto Bersama

## 4. Kesimpulan
Pada akhir pelatihan tim pengabdian membagikan kuisioner tentang kepuasan peserta terhadap materi pelatihan. Dan hasil kuisioner  mencapai 100%  merasa puas dengan pengetahuan baru bagi  peserta. Beberapa dari  peserta meminta tim untuk memberikan materi lanjutan dari pelatihan tersebut.

## References
Avinesh,  P.  V.  S.,  Peyrard,  M.,  &  Meyer,  C.  M.  (2021).  Live  blog  summarization. Language  Resources  and Evaluation , 55 (1), 33–62. https://doi.org/10.1007/s10579-020-09513-5
Batalas,  N.,  Khan,  V.  J.,  &  Markopoulos,  P.  (2021).  Executable  HTML. SoftwareX , 14 ,  100691. https://doi.org/10.1016/j.softx.2021.100691
HTML. (n.d.). In Wikipedia . WIKIPEDIA Ensiklopedia Bebas. https://id.wikipedia.org/wiki/HTML
Leifeld,  P.  (2013).  Texreg:  Conversion  of  statistical  model  output  in  R  to  LATEX  and  HTML  tables. Journal  of Statistical Software , 55 (8). https://doi.org/10.18637/jss.v055.i08
Prettyman,  S.  (2020). Learn  PHP  8  Using  MySQL,  JavaScript,  CSS3,  and  HTML5 .  springer  link. https://doi.org/10.1007/978-1-4842-6240-5
Rahim,  N.  A.,  Roslan,  N.  W.,  Roslan,  N.  M.,  Affendi,  N.  R.  N.  M.,  &  Roslan,  S.  N.  A.  (2020).  Blog  writing  for learning.
Universal Journal of Educational Research , 8 (11), 5622–5627.
https://doi.org/10.13189/ujer.2020.081166
Robith,  M.  (2021).  Ketahui  Lebih  dalam  Mengenai  Blog  Beserta  Fungsi,  Jenis,  dan  Contohnya. Sekawan  Media . https://www.sekawanmedia.co.id/blog/pengertian-blog/
Sulismiati, N. (2018). Pemanfaatan Blog Sebagai Media Pembelajaran (The Use of Blog As Learning Media). Jurnal TEKNODIK , 22 , 23.