Dokumen tersebut memberikan instruksi lengkap untuk memodifikasi tampilan toko online yang dibuat menggunakan template Blogger dengan mengubah gambar utama toko, meliputi langkah-langkah penyimpanan cadangan template, penggantian template, pengunggahan gambar baru ke photobucket, dan mengganti URL gambar di template HTML.

1. MATERI PRAKTIKUM E-COMMERCE
MEMBUAT TOKO ONLINE DENGAN
BLOGGER
PERTEMUAN 3
MODIFIKASI TAMPILAN TOKO ONLINE
Untuk memodifkasi tampilantokoonline adalahdenganmenguploadtemplate baru.
Template adalahtampilandari sebuahwebsiteyangdibuatdari berbagai kode HTML sehinggabisa
diaksesmelalui browser.
Untuk tujuanpraktikumsudahdisediakantemplate untukdigunakansebagai template tokoonline.
Langkah-LangkahMengganti Template :
1. Masuk ke blogger
2. Pada halamanmukabloggerkemudianklikblogyangsudahdi buat.
3. Andaakan dibawapadadashboardblog
4. KemudianklikmenuTemplate.

2. 5. Kemudiankliktombol“Cadangkan/Pulihkandi kananatas.
6. Maka akanmuncul jendelabaru:

3. Catatan : sebelummelakukanperubahantemplate sangatdianjurkanuntuk melakukanbackup
template ada.Tujuannyauntukberjaga-jagajikainginkembali menggunakantemplate yanglama,
maka kitatinggal menguggahnyalagi dari file backup.
Untuk melakukanbackuptemplate makakliktombol “Unduhtemplatelengkap”kemudiankita akan
dimintamenentukanlokasipenyimpananfilebackup.
7. Selanjutnyauntukmengganti templatemakakitakliktombol “telusuri”kemudiancari lokasi
dimanakitamenyimpantemplate yangakankitagunakan.Untukkeperluanpraktikumini,
kitaakan mengganti dengantemplatedengannama babyshop.

4. 8. Setelahkitapilihtemplatebabyshop,kemudiankitatekantombol “unggah”
9. Sekarangtemplate sudahberganti dengantemplatebabyshop.
10. Untuk mengecekperubahanbisadenganmengkliktombol “lihatblog”
Template babyshopini yangakankitamodifikasi menjadi tokoonline kita.
MODIFIKASI GAMBAR UTAMA TOKO ONLINE
Berikutadalahgambarutama tokoonline denganmenggunakantemplate babyshop.Gambar
tersebuttentunyatidakcocokdengantokoonline yangkitabuatmakauntukitukita perlu
melakukanmodifikasi terhadapgambar tersebut.

5. Untuk melakukan modifikasi gambarutama :
1. Kunjungi blogtokoonlineanda,laluklikkananpadagambaryang ditujukemudianpilihopsi
“simpangambar dengannama”
2. Simpangambarpada salahsatu folderyangada di komputer.

6. 3. Setelahgambarsudahberhasil disimpandi komputer,silahkanbukagambartadi dengan
menggunakanaplikasipengolahgambarmisalnyapaint,photoshop,corel draw dll.
4. Selanjutnyamodikasi gambarsesuai dengankemauananda.Andabisamenambahkanteks
dan mengganti gambar.Yangperludiperhatikanadalahukurangambartidakbolehberubah.
Karenaukuranitu sudahsesuai dengantemplatebabyshopyangkitagunakan.
5. Setelahmodifikasiselesaijanganlupauntukmenyimpangambar.
MENGGANTI GAMBAR UTAMA DI TOKO ONLINE
Setelahgambaryangbaru telahsiap,makayang kitaperlulakukanadalah:
1. Uploadgambar ke photobucket.Untukitu kitaperlulogindi www.photobucket.com

7. 2. Kemudianmasukkanemaildanpasswordyangkitagunakanpadasaat mendaftardulu.
Kemudiankliktombol“Login”
3. Setelahmasukke photobucketdankitaberadadi halamanawal photobucket.Kemudia
tekantombol “Upload”

8. 4. Kemudiantekantombol “Choosephoto&video” dancari lokasi gambaryang sudahkita
modifikasi kemudanpilihdantekantombol “save”makagambar akandi uploaddi
photobucket.
5. Untuk melihathasil uploadkitalihatdi library.

9. 6. Setelahgambarberhasil di uploadkemudiantekanklikkiri padagambar.Kemudiancopylink
gambar yangada di direct link.

10. 7. Stelahberhasil dicopy,simpanuntuksementarawaktuhasil copylinktadi padanote padata
ms word.
8. Setelahitukitakembali ke blogtokoonline kita.Kemudianklikkananpadagambardan pilih
opsi lihat gambar.
Klikkanan

11. 9. Kitaakan dibawapadahalamanbaru. Kemudiancopyurl dari gambar tersebut.
10. Setelahitukitamasukke dashboard blogkita.Kemudianklikmenutemplate.Selanjutnya
kliktombol “edithtml”

12. 11. Kitaakan dibawapadahalamanedithtml.Kemudiantaruh crusormouse padahalaman html
dan tekantombol ctrl + f (fasilitasuntukpencarian)makaakanmuncul kotaksearchpada
sebelahkananatas.
12. Pada kotaksearchkemudiankitapaste kanurl yangsudahkita copytadi.Kemudiantekan
enter.

13. 13. Kitaakan menemukanapayangkitacari kemudiansemuayangdalamtampilanblok,kita
ganti denganurl gambar yang kitaup loaddi photo bucket(yangsudahkitasimpan
sementaradi msword).

14. 14. Kemudiantekantombol “simpantemplate”.Kemudiantekantomblo“kembali”
15. Sekaranggambar utamablogtoko online kitatelahberhasil kitaganti.