Dokumen ini memberikan instruksi langkah-langkah untuk memodifikasi header dan menu sidebar blog toko online menggunakan Blogger, meliputi mengganti header menjadi gambar, mengupload gambar baru, dan mengganti url gambar lama pada sidebar menjadi gambar baru.

1. 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.
2. Buka dan cari file “background header toko online” kemudian modifikasi dengan
menggunakan software pengolah gambar.
3. Lakukan proses modifikasi sesuai dengan keinginan.

2. 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.

3. 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”

4. 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.

5. MODIFIKASI MENU SIDE BAR
Berikut 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 :

6. 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.

7. 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.

8. 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.

9. 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.

10. 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.