Tutorial Membuat Website Undangan Pernikahan Simple dengan Source Code


Tutorial Membuat Website Undangan Pernikahan Simple
Tutorial Membuat Website Undangan Pernikahan Simple dengan Source Code
UPDATE 6/4/2020 : Penambahan elemen card untuk mempercantik tampilan

Apakah kamu bosan liat video undangan pernikahan teman-teman mu di sosial media yang model nya bagitu-begitu saja?

bosan dengan desain undangan gratis di website sebelah?

ingin terlihat eksklusif dengan website undangan buatan kamu sendiri?

Buat kamu yang dalam waktu dekat akan menikah tapi ingin punya undangan  pernikahan yang anti biasa-biasa aja di sini kita akan berbagi tutorial membuat website undangan pernikahan gratis dan full source code.


kelebihan nya:

- Gratis (Source code, Desain, Hosting Web)
- Full Tutorial
- Menaikan Gengsi
- Bisa di sesuaikan dengan selera
- Lebih interaktif
- Simple 
- Siapapun bisa membuat nya meskipun gaptek

Ya gratis dan full tutorial, tidak perlu membayar seperserpun, jika di bandingkan dengan jasa pembuatan website dan video yang memerlukan biaya ratusan ribu hingga jutaan rupiah lebih baik kamu simak tutorial berikut.


Kita akan bahas secara detail langkah demi langkah pembuatan website undangan agar mudah di mengerti bahkan untuk yang gaptek sekali pun. kamu hanya perlu copy paste dan ganti teks sesuai dengan yang kamu inginkan.


Fitur:
1. Responsif , Web undangan Kamu bisa di buka di PC/Komputer, Tablet, dan Smartphone apapun.

2. Countdown timer, adalah waktu hitung mundur menuju hari pernikahan.


3. Hubungkan dengan Google maps, agar tamu undangan mu bisa mengetahui lokasi resepsi secara real time.


4. Galeri slide foto, tampilkan foto-foto prewedding di website undangan mu

5. Counter Pengunjung, menghitung jumlah page view website mu secara real time


6. Share ke Sosmed, Sebar undangan di semua sosmed mu, tampil kece di semua jejaring sosial, biar semua orang (termasuk mantan) tau hari Pernikahan mu.

Berikut cara membuat nya:
1. Membuat poster undangan, Pertama  buat poster undangan terlebih dahulu yang nantinya akan kita upload di website undangan, klik di sini 




lalu buat lah sesuai keinginan mu, kemudian download dan simpan file gambar poster.

2. Download file source code berikut ini Direct Download


atau via github : https://github.com/irfandx/Template-Website-Undangan-Pernikahan.git

3. Unpack file yang telah selesai di download kemudian buka folder utama, lalu buka index.html dengan text editor, pada tutorial saya mengunakan text editor Atom.





3. Perhatikan text yang akan kita ubah seperti di bawah ini, tekan ctrl + f lalu 

carilah kata-kata berikut dan ubah suaikan.

- ganti kode "img/inv3.png" dengan nama file poster undangan yang anda buat tadi (lengkap dengan ekstensi) .

- ganti Pengantin Pria & Pengantin Wanita dengan nama calon pengantin pria dan wanita lengkap dengan gelar.

- ganti (ayah pengantin pria) & (Ibu pengantin Pria) dan (ayah pengantin wanita) & (Ibu pengantin wanita)dengan nama orang tua calon pengantin  lengkap dengan gelar

- ganti Tanggal Akad , xx:xx - xx:xx WIB,  Alamat Akad dengan tanggal dan jam akad akad anda

GANTI TANGGAL DI BAWAH DENGAN TANGGAL AKAD ANDA

<!-- GANTI KODE DI BAWAH INI DENGAN KODE GOOGLE MAPS ALAMAT AKAD -->

untuk mendapakan kode google maps yang menunjukan lokasi yang anda inginkan silahkan simak di sini : Klik di sini

GANTI DENGAN TANGGAL RESEPSI, xx:xx - xx:xx WIB  dan GANTI DENGAN ALAMAT RESEPSI 

<!-- GANTI KODE DIBAWAH INI DENGAN KODE GOOGLE MAPS ALAMAT RESEPSI -->

untuk mendapakan kode google maps yang menunjukan lokasi yang anda inginkan silahkan simak di sini : Klik di sini

<!-- GANTI img/dummy1.png DI BAWAH DENGAN NAMA FOTO ANDA YANG TERSIMPAN DI FOLDER img, CONTOH : foto1.png-->

pastikan file foto yang mau kamu tampilkan di slide show galery tersimpan pada folder image

GANTI DENGAN CAPTION sesuai yang kamu inginkan

4. Jika sudah selesai mengedit, selanjut nya kita akan mengupload seluruh file website yang telah di edit tadi ke free web hosting.

Pada tutorial ini kita akan menggunakan free web hosting dari byethost.com.
simak cara membuat akun sampai mengupload web di byethost pada artikel dan video Step by step hosting gratis di byethost .

5. jika berhasil Mengupload silahkan buka link tautan yang di berikan byethost untuk website kamu di komputer atau ponsel dengan koneksi internet lalu liat hasil nya.

6. Admin Akan Memberikan file Hosting gratis dengan domain .weddingkamu.com, terbatas untuk 10 orang pertama yang memberikan komentar postif untuk tutorial ini. silahkan coment di bawah ya.

Demikian lah cara Membuat Website Undangan Pernikahan Simple Full Tutorial dan Source code. Semoga bermanfaat terimakasih.

Related Posts

6 komentar

  1. Wih hasilnya keren bgt. Thanks mas!

    BalasHapus
    Balasan
    1. Thanks mas, source code nya open dan boleh di edit sesuai selera :D

      Hapus
  2. min copyrightnya boleh di tambahin?

    BalasHapus
    Balasan
    1. silahkan mas, asalkan tetap ada link credit yang aktif ke website ini (cripcips.net)

      Hapus
  3. Mas. Waktu saya konfigurasi dengan domain & hosting berhasil untuk tampilan Web pc. Tapi untuk tampilan mobile Phone berantakan. Kira2 salah dimana yh?

    BalasHapus
  4. Tutor buat bisapbisa tampil dihp bosku 🙏

    BalasHapus

Posting Komentar

Hi, silahkan tulis komentar mu di sini