Tampilan web toko online mu akan lebih menarik jika disertai logo perusahaan yang kamu buat sendiri. Berikut ini adalah langkah untuk membuat logo dengan menggunakan program pengolah gambar Inkscape.

1. Tentukan ukuran kertas.
2. Buat logo.
3. Simpan dengan format gambar berupa png. Caranya, pilih menu File. Klik Export Bitmap. Ketikkan nama file. Save.
4. Login ke toko online-mu.
5. Masuk ke Dashboard. Pilih menu Entri Baru atau New Post.
6. PIlih ikon Insert Image untuk memasukkan logo buatanmu.
7. Pindahkan ke menu HTML. Akan tampak skrip kode gambarmu.
8. Salin (Copy) skrip tersebut.
9. Kembali ke menu Dashboard. Pilih Layout atau Tata Letak. Klik kotak HTML / Javascript. Jika kotak tersebut tidak ada, pilih menu Tambahkan Gadget di lokasi kamu ingin meletakkan logo. Lalu pilih HTML/Jacascript.
10. Rekatkan (Paste) skrip kode gambarmu. Save.
11. Refresh alamat web toko onlinemu. Perhatikan, logomu telah muncul di sana.

Dengan cara yang sama kamu dapat melakukan untuk memasukkan video ataupun tambahan plugin lain seperti banner animasi.

Memasukkan video youtube di web toko online.
1. Buka youtue. Pilih menu Share. Klik Embed.
2. Salin (Copy) skrip dari video tersebut.
3. Login ke web toko online. Masuk ke menu Dashboard. Pilih Layout atau Tata Letak.
4. Rekatkan (Paste) skrip tadi ke kotak HTML/Javascript.

Menempelkan banner animasi ke dalam template toko online.
1. Buat banner di program pengolah gambar. Tentukan ukuran banner mu sendiri dengan mengubah ukuran kertas.
2. Simpan dengan format gambar berupa png
3. Masuk ke URL Cincopa di sini
4. Sign up atau daftar terlebih dahulu.
5. Selanjutnya, ikuti perintah yang ada. Pilih skin untuk slide animasi. Kemudian pilih Next untuk mengupload banner. Next lagi untuk mengunggah gambar.
6. Setelah selesai, klik Finish. Pada tahap akhir, akan muncul skrip berupa embed code. Salin (Copy) skrip tadi.
7. Masuk ke menu Dashboard toko onlinemu. Pilih menu Layout. Rekatkan skrip tadi ke dalam kotak HTML/Javascript.
8. Tadaa, banner animasimu sudah tampil di web toko onlime-mu 🙂

Untuk murid-muridku yang tadi merikues Ibu menuliskan panduan mengedit template toko online. Dibaca benar ya 🙂

Klik di sini untuk melihat hasil akhir tampilan dari template yang akan kita edit.

1. Masuk ke dashboard.
2. Pertama, perhatikan template kalian baik-baik, mana menu yang akan digunakan dan menu yang ingin dihapus. Di bawah ini adalah gambar dari menu layout template kita.

3. Untuk memasukkan logo, pada template ini bisa melalui menu header. Klik koak Header dan masukkan gambar untuk logo.

4. Untuk menghapus menu-menu yang tidak kamu gunakan, buka blogmu terlebih dahulu. Klik kanan mouse pada menu yang ingin dihapus. Klik menu Inspect Element.

5. Lihat tag (skrip) HTML di sebelah kanan.

6. Ingat skrip yang ditunjukkan mouse pada menu yang akan kamu hapus. Kemudian melalui jendela lain masuk lah ke Dashboard dan pilih menu Template. Selanjutnya klik Edit HTML. Cari tag HTML tadi dan hapus. Untuk melihat hasilnya, klik Pratinjau Template. Blogspot akan memberitahu jika skrip yang kamu masukkan salah. Klik Simpan jika perubahan template sesuai dengan yang kamu inginkan.

Mudah, bukan? 🙂

Selanjutnya, memasukkan gambar buatanmu ke dalam template animasi (catatan: langkah ini khusus untuk template yang memiliki fitur slider seperti di atas)
1. Cari tag slide. Atau ikuti langkah no 4 pada panduan pertama. Lihat contoh skrip di bawah yang berwarna abu-abu.

2. Temukan skrip pencarian gambar bertanda <src=….>. Lihat contoh skrip pada template kita di atas. Perhatikan ukuran lebar dan tinggi gambar yang diminta. Pada contoh skrip di bawah, maka ukuran lebar dan tinggi gambar adalah: 230 dan 380. Ukuran ini akan kita gunakan sebagai panduan bagi kita untuk membuat gambar.

<a href=’#’><img alt=’Back To School Supplies’ height=’230′ src=’http://2.bp.blogspot.com/-jRAd5dkcnnA/VOxqiZcQMbI/AAAAAAAAA5Y/v1BDY7Vjj5s/s320/promosi1.png’ width=’380’/></a>

3. Sekarang, buka program pengolah gambarmu, Inksape, Corel Draw atau Photoshop. Buatlah dengan ukuran kertas sesuai yang ada pada skrip tadi. Kemudian buatlah gambar bebas. Simpan dengan format gambar seperti jpg, gif, dan png.
4. Berikutnya, masuk ke dashboard dan pilih menu Entri Baru atau New Post. Klik Insert image untuk memasukkan gambar. Kemudian pindahkan ke menu HTML.

5. Salin (copy) skrip URL gambar. (Perhatikan teks src. Salin setelah tanda kutip sampai selesai. Lihat gambar di bawah ini.

6. Selanjutnya, rekatkan (Paste) di menu Edit HTML dengan tag slide tadi.
7. Hapus URL pada template asli (http://2.bp.blogspot.com/-jRAd5dkcnnA/VOxqiZcQMbI/AAAAAAAAA5Y/v1BDY7Vjj5s/s320/promosi1.png) dengan alamat URL yang telah kamu salin (copy) tadi.
8. Untuk melihat hasil, klik Pratinjau template. Jika sudah berhasil simpan.
9. Ulangi langkah yang sama untuk slide berikutnya. jangan lupa buat gambarnya terlebih dahulu.

Insya Allah kamu pasti bisa, apalagi kalau kamu mendengarkan apa yang telah Ibu terangkan tadi di kelas ;-). Tulisan ini untuk mempermudah kalian mengingat kembali langkah-langkah yang telah Ibu ajarkan. Selamat mencoba 🙂

Setelah membuat sebuah produk maka langkah selanjutnya (setelah menetukan harga) adalah memasarkan. Dalam memasarkan sebuah produk ada berbagai macam cara, selain memasarkan dengan cara konvensional maka memasarkan secara online adalah pilihan yang paling disukai. Salah satunya adalah dengan membuat toko online sendiri.

Untuk membuat sebuah toko online tidak selalu musti berbayar, kamu bisa menggunakan web engine gratisan seperti blogspot. Perhatikan materi pembuatan toko online di slide berikut ini:

Untuk melihat contoh hasil toko online bisa di-klik di sini.

Untuk contoh pembuatan toko online karya siswa bisa dilihat di postingan di blog ini.

Setelah memasang template toko online langkah berikutnya adalah mengedit. Untuk mengedit template toko online sebaiknya kamu memiliki keterampilan bahasa pemrograman web seperti Javascript, CSS atau mengenal bahasa pemformatan HTML. Dengan mengetahui ilmu-ilmu di atas tadi bisa sedikit membantumu mengedit tampilan blog sesuai dengan yang kita inginkan. Namun kalau pun tidak jangan khawatir, kamu tetap bisa mengedit template blogmu walau mungkin tidak maksimal. (Nggak pp, yang penting sudah paham konsepnya. Kelak jika kamu ingin memahami lebih jauh mengenai pembuatan toko online kamu bisa belajar sendiri dengan menggunakan banyak sumber yang bertebaran di internet atau pun melalui buku-buku rujukan).

Beberapa cara mengedit template toko online.
a. Menggunakan bantuan menu layout (tata letak)
Dengan menu ini kamu bisa memasukkan logo, atau video.
1. Masuk ke menu Dashboard
2. Pilih menu entri baru. Pilih insert image yang akan menjadi logo perusahaanmu
3. Pilih menu HTML. Salin (copy) skrip HTML yang ada di sana
4. Selanjutnya, pilih menu Tata Letak atau Layout. Pilih kotak HTML atau Javascript. Jika kotak HTML tidak ada, kamu dapat menambahkan dengan cara memilih menu Tambahkan Gadget. Pilih fitur HTML atau Javascript.
5. Pada kotak dialog Javascript, rekatkan (Paste) salinan skrip HTML tadi.
6. Simpan.
7. Pilih Lihat Blog, untuk melihat tampilan blog yang sudah diedit atau ditambahkan gambar logo.
8. Kamu juga bisa memindahkan letak kotak-kotak yang ada di menu Tata Letak tersebut.
9. Lakukan hal yang sama untuk memasukkan video beserta plugin lainnya

b. Menggunakan menu Edit HTML
Untuk menggunakan menu ini kamu harus memiliki sedikit pengetahuan dan pemahaman mengenai HTML. Kamu bisa mengedit dan melihat secara langsung template yang sudah di-edit. Jika editing yang kamu lakukan salah maka akan muncul pesan di kotak tersebut.

Nah, silakan mencoba 🙂

1. Camillana dan Nabilah
2. Ahmad Raihan, Yehudha, Moses
3. Hana S, Shafira Salsabila
4. Fidela dan Nadhifa
5. M. Rabbani. M. Syarif dan Dandy
6. Teuku Reyhan Naufal dan Shidqi
7. Cindy dan Valerie, lengkapi jumlah postingan produk
8. Olivia dan Nadira
9. Yamandhika dan Hadza
10. Nerisa F dan Helena G
11. Naufal Nabil dan Rakha D
12. Hanna, Sona dan Amel
13. Avistha dan Zumrotul
14. Sania dan Asri
15. Ananda Raka dan Andika M.R
16. Riza dan Eridani

Catatan:
Lengkapi dengan logo, jumlah postingan (nama pemilik produk, harga, ukuran kaos atau produk), banner
Deadline: Minggu, 1 Maret 2015. Jam 21.00.

Done

Materi berikutnya untuk siswa kelas X adalah membuat toko online. Setelah menghasilkan produk berupa sablon kaos digital maka setiap kelompok diwajibkan untuk berfoto bersama hasil karya mereka. Atau mereka boleh mencari model lain untuk memamerkan hasil sablon tersebut. Foto-foto dari setiap kelompok ini selanjutnya akan menjadi model untuk produk dari toko online yang akan mereka buat. Langkah ini dimaksudkan juga untuk menghindari penggunaan karya orang lain tanpa ijin. (Di sini Guru sekaligus dapat menjelaskan mengenai UU HAKI dan bagaimana sepatutnya pencantuman sumber referensi dilakukan dalam setiap penggunaan karya orang lain).

Untuk membuat toko online pertama ini maka web engine yang digunakan adalah Blogspot. Mengapa blogspot? Karena mesin blog ini memberikan fitur gratis bagi pembuatan toko online. Sementara dengan mesin blog lainnya seperti wordpress membutuhkan persyaratan khusus berupa nama domain sendiri. Walau konon ada web hosting yang memberikan fasilitas nama domain sendiri tanpa berbayar. (Patut dicoba dulu nanti :)).

Memang banyak mesin blog dan fasilitas yang lebih digandrungi anak-anak saat ini seperti weebly dan instagram, yang seringkali dimanfaatkan oleh anak-anak sebagai toko online juga. Selain penggunaannya yang lebih mudah, dua fasilitas internet di atas itu memang lebih familiar di kalangan anak-anak seusia mereka. Jadi, tidak ada salahnya kedua layanan internet di atas itu diajarkan juga nanti.

Berikut ini adalah slide berisi teori dan panduan membuat toko online.

Sementara hasil toko online bikinan Gurunya bisa dilihat di sini :).

Semoga muridnya bisa membuat toko online yang lebih bagus dari Gurunya, bukan begitu, Nak? 🙂

1. Ghina Salsabila & Amalia Dwiseptari
2. archika,theresia
3. rizky arief k
4. sunu dan bryant
5. NURUL SEPTIYANTI PRATIWI dan ANNISYA TRIANA
6. prilla afiifah & jihan safira
7. rena dan nabila
8. athaya vita kr. (05) & fakhriya rania (08)
9. Retno Mayudian & Isnadia Annisa
10. Melati Fransiska dan Syarifa Nurdina Hidayah
11. Dandy Rayhan D & Muhammad Rafly E
12. Annisa Ayu & Shofi Tri Amalia
13. Bunga Putri & Firyal Hana
14. Lubna Akifah & Navhesya Asmarani
15. Jeremy
16. hermanto hadi nugroho, baru 1 posting

17. Prilla Afiifah, Jihan Safira, Della Amanda, Yohana Maranatha

Catatan:
Lengkapi dengan logo, jumlah postingan (nama pemilik produk, harga, ukuran kaos atau produk), banner
Deadline: Minggu, 1 Maret 2015. Jam 21.00.

Done