12
MATERI PRAKTIKUM E-COMMERCE MEMBUAT TOKO ONLINE DENGAN BLOGGER PERTEMUAN 4 MENAMBAHKAN HEADER BLOG Pada bagian ini, kita akan mengganti Header Blog Toko Online. Sebenarnya header sudah ada, namun hanya berupa tulisan. Pada bagian ini kita akan menambahkan header gambar pada blog toko online. Berikut adalah tampilan header yang belum dimodifikasi. Untuk melakukan modifikasi, berikut langkah-langkah memodifikasi header blog toko online. 1. Siapkan gambar yang akan dijadikan Header.

Materi praktikum e commerce iv

Embed Size (px)

Citation preview

Page 1: Materi praktikum e commerce iv

MATERI PRAKTIKUM E-COMMERCEMEMBUAT TOKO ONLINE DENGAN BLOGGER PERTEMUAN 4

MENAMBAHKAN HEADER BLOGPada bagian ini, kita akan mengganti Header Blog Toko Online. Sebenarnya header sudah ada, namun hanya berupa tulisan. Pada bagian ini kita akan menambahkan header gambar pada blog toko online. Berikut adalah tampilan header yang belum dimodifikasi.

Untuk melakukan modifikasi, berikut langkah-langkah memodifikasi header blog toko online.

1. Siapkan gambar yang akan dijadikan Header. 2. Buka dan cari file “background header toko online” kemudian modifikasi dengan

menggunakan software pengolah gambar.3. Lakukan proses modifikasi sesuai dengan keinginan.

Page 2: Materi praktikum e commerce iv

4. Simpan gambar setelah proses modifikasi selesai.5. Selanjutnya, masuk ke akun blogger sampai dengan Dashboard Toko Online.6. Arahkan perhatian pada bagian “tata letak”

7. Arahkan perhatian pada elemen yang berjudul “header” kemudian klik tulisan edit yang ada pada pojok elemen tersebut.

Page 3: Materi praktikum e commerce iv

8. Akan muncul jendela po up baru, kemudian beri tanda pada pilihan “selain judul dan keterangan”. Tujuannya supaya nama/ judul blog tidak akan menggangu tampilan header toko online.

9. Jangan lupa memberi centang pada pilihan “susutkan agar sesuai”. Tujuannya agar gambar header yang baru mempunyai ukuran yang sesuai.

10. Kemudian klik tombol “telusuri”untuk mencari gambar header yang akan di upload (gambar yang sudah kita modifikasi tadi).

11. Cari gambar yang akan diupload kemudia klik tombol “open”

Page 4: Materi praktikum e commerce iv

12. Proses upload akan berlangsung dan jika sudah selesai akan muncul tampilan pra tinjau sebagai berikut, selanjutnya klik tombol “simpan”

13. Selanjutnya tampilan baru dari header sudah bisa dilihat.

Page 5: Materi praktikum e commerce iv

MODIFIKASI MENU SIDE BARBerikut adalah tampilan awal menu sidebar pada template Babyshop

Terlihat ada gambar bayi pada menu tersebut. Hal ini tentunya tidak sesuai dengan toko online yang akan kita buat. Untuk itu kita akan melakukan modifikasi pada menu sidebar tersebut, langkah-langkahnya sebagai berikut :

Page 6: Materi praktikum e commerce iv

1. Kunjungi blog toko online yang kita buat, lalu klik kanan pada bagian menu sidebar, kemudian pilih opsi “lihat gambar latar belakang”

2. Kemudian kita akan dibawa pada halaman sebagai berikut :

3. Kemudian klik kanan pada gambar dan pilih opsi “simpan gambar dengan nama”4. Tentukan lokasi dan nama file yang akan kita simpan.5. Setelah proses penyimpanan selesai, kemudian buka dengan pengolah gambar yang

anda gunakan.

Page 7: Materi praktikum e commerce iv

6. Lakukan proses modifikasi dan simpan gambar tersebut.

7. Untuk langkah selanjutnya adalah upload gambar tersebut di photobucket.8. Setelah proses upload selesai maka kemudian copy link dari gambar tersebut.

Page 8: Materi praktikum e commerce iv

9. Berikutnya kunjungi toko online, kemudian pilih opsi lihat gambar latar belakang pada gambar sidebar

10. Kemudian copy url dari gambar tersebut.11. Selanjutnya dari Dashboard blog kita kemudian pilih template dan edit HTML.

Page 9: Materi praktikum e commerce iv

12. Letakkan krusor pada kota yang berisi bahasa pemograman blog kemudian tenkan “control F” untuk memunculkan kotak pencarian.

13. Selanjutnya pada kota pencairan kita paste kan alamat url yang sudah kita copy dari gambar sidebar. Kemudian kita tekan enter, maka akan diperoleh hasil pencarian sesuai dengan alamat url sidebar.

Page 10: Materi praktikum e commerce iv

14. Setelah ditemukan, maka ganti alamat url tersebut dengan url gambar side bar yang baru (yang dari photo bucket) (perhatian: hati hati dalam melakukan paste, hanya yang berada didalam tanda kurung.

15. Selanjutnya klik simpan template.

16. Sekarang side bar sudah berganti dengan gambar yang baru.

Page 11: Materi praktikum e commerce iv