Blog > Tutorial > Tutorial Membuat Halaman Under Construction Pada Welcome.html

Tutorial Membuat Halaman Under Construction Pada Welcome.html

  • Posted by
  • Posted in Tutorial
  • Komentar Dinonaktifkan pada Tutorial Membuat Halaman Under Construction Pada Welcome.html Komentar

Berikut ini adalah langkah langkah untuk membuat dan mengaktifkan halaman underconstruction.

1. Langkah Pertama
Buatlah image yang akan ditampilkan di halaman underconstruction, misalkan seperti ini , diberi nama underconstruction.jpg

2. Langkah Kedua
Siapkan kode html yang bisa menampilkan gambar tersebut di halaman welcome.html , kodenya bisa seperti dibawah ini

Di sini

<img src=”{{ ‘underconstruction.jpg’|asset_url }}” style=”width:100%;height:auto”>

underconstruction.jpg adalah nama file gambar yang anda upload

3. Upload file gambar underconstruction

File yang sudah disiapkan segera diupload caranya adalah dengan masuk ke halaman admin di bagian layout editor, pastikan file gambar dimasukkan ke bagian asset seperti gambar di bawah ini

Klik upload, setelah gambar berhasil diupload ke asset lanjut ke langkah berikutnya

4. Menambah halaman welcome.html ke dalam online store

Caranya adalah dengan masuk ke halaman admin di bagian layout editor, tambahkan halaman welcome seperti di bawah ini, kemudian klik tambah

Setelah file berhasil ditambahkan sekarang panggil gambar tersebut dengan kode html yang telah dibuat tadi

Kemudian klik save.

Berikut ini adalah kode HTML-nya. Sebelum dimasukkan ke file welcome.HTML , silakan copas dulu ke notepad.

<!DOCTYPE html PUBLIC

“-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>{{ content.title }}</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<link rel=”stylesheet” href=”/assets/welcome.css” type=”text/css” media=”all” />

{{ content.header }}

</head>

{% set bodyClass=’basic’ %}

<body>

   <div id=”wrapper landing-wrapper”>

       <center>

           <img src=”{{ ‘underconstruction.jpg’|asset_url }}” style=”width:100%;height:auto”>

    </center>

   </div>

</body>

</html>