Tomy Gumilar, www.toko-onlineblogspot.

info

Tutorial Membuat Toko Online Blogspot Premium Template

2012
www.toko-onlineblogspot.info adalah website resmi penyedia platform toko online dengan menggunakan blogspot. Murah, meriah, namun powerful dan professional karena mudah digunakan dan sangat mudah ter-index oleh mesin pencari.

www.toko-onlineblogspot.info JL. Gajahmada 53 Wlingi-Blitar, Indonesia 081334427229 tokoblogspot@yahoo.com

Perhatian: 1. Tidak diperkenankan menjiplak tutorial dan template ini tanpa ijin dari Tomy Gumilar, dengan situs resminya di www.toko-onlineblogspot.info 2. Tidak diperkenankan memberikan, menjual ulang tutorial dan template ini tanpa ijin dari Tomy Gumilar, dengan situs resminya di www.toko-onlineblogspot.info 3. Tidak diperkenankan mengganti “credit link” dari template.

Tutorial dan template ini sudah didaftarkan secara “Traditional copyrighted”

Terimakasih www.toko-onlineblogspot.info

3. 3. Daftar isi Struktur Bagian Blog Cara Upload Template Cara Posting dan Membuat Menu Halaman Cara Pasang Slide Cara Ganti Header Halaman 3 4 5 10 18 24 . 4. 5. 2.HALAMAN ISI Judul Bab 1.

Bagian toko online premium blogspot: Judul dan Deskripsi Blog Menu halaman Slide bergerak Sidebar Isi Posting Menu footer Menu Halaman Footer Credit link jangan diubah .

anda harus mempunyai alamat e-mail. buka browser kesayangan anda dan ketik www.blogger. lakukan pendaftaran.BAB I CARA UPLOAD TEMPLATE Langkah pertama. Masukkan email dan sandi untuk masuk ke dalam www.blogger. Jika belum. .com Klik “Create a Blog” untuk membuat blog baru.com Ingat.

Jangan lupa memasukkan dua kata captcha dengan benar.Isi kolom “Blog title” dengan judul blog anda nanti. Tulisan ini akan muncul pada header calon blog anda. Kolom “Blog address” adalah alamat calon blog anda. Selanjutnya klik “continue” .

. tetapi lakukanlah upload. Langkah selanjutnya.Pilih “simple” template supaya memudahkan anda melakukan pengeditan. adalah klik “START BLOGGING” Pilih setting >> edit html >> choose file (untuk mengupload template). Anda sudah berhasil membuat blog. Warning: Jangan melakukan copy paste dari program xml toko online.

Delete “DELETE WIDGETS” dan save.xml” (tidak termasuk tanda petik) selanjutnya klik open. .Pilihlah “tokoonlinepremiumbiru.

Hasilnya. toko online siap di isi postingan gambar: .

blogger. CARA POSTING Langkah pertama. Jika belum. lakukan pendaftaran. buka browser kesayangan anda dan ketik www. Masukkan email dan sandi untuk masuk ke dalam www.BAB II CARA POSTING DAN MEMBUAT HALAMAN A.com Ingat.com Cari menu “posting” >> “new post” >> “compose” Ketikkan deskripsi produk anda dan upload gambar seperti dibawah ini: . anda harus mempunyai alamat e-mail.blogger.

Klik “Insert image” Perhatikan kotak merah berarti daerah tersebut wajib anda isi. Kemudian gambar produk akan tampil seperti ini: . Klik “insert image” untuk memasukkan gambar.

Klik “add selected” untuk memasukkan gambar pada toko online. Hasilnya adalah sebagai berikut: Selanjutnya klik “PUBLISH POST” dan hasilnya: .

Anda bisa menghilangkan bagian ini dengan masuk di “design>>page element>>posting” seperti gambar di bawah ini: Klik yang betanda “kotak merah” di bawah ini. Kemudian hilangkan centang seperti gambar di bawah ini: .

Maka. “save” setiap kali proses editing selesai dilakukan. Lihat gambar: Klik kanan Copy Link address Copy ke dalam “notepad” seperti ini . Warning: Usahakan untuk menyimpan link posting setiap kali selesai posting. lihat hasilnya: Ulangi proses ini hingga setidaknya anda berhasil posting barang sebanyak 12 (dua belas) kali posting. Karena proses ini akan berkaitan dengan proses pembuatan toko online pada tahap selanjutnya.Jangan lupa.

Itu artinya anda harus edit seperti cara pada contoh gambar di atas.B. klik “SAVE AND PUBLISH” Selanjutnya anda akan di bawa menuju tampilan menu seperti ini: Pilih ‘No gadget’ . CARA POSTING DAN MEMBUAT MENU HALAMAN Perhatikan bagian yang saya beri kotak merah. Kemudian.

Dengan cara klik kanan view page dan klik “copy link location” Jangan lupa untuk menyimpan link ini: http://tokopremium. .com/p/cara-order.html Langkah selanjutnya adalah kembali masuk ke: Tips: pergunakan ctrl+f dan ketik “Beranda” (tanpa tanda kutip) untuk proses pencarian cepat.blogspot.Ambil link halaman anda.

com/p/hubungi-kami.html'>Cara Order</a> </li> </ul> Ganti semua yang berwarna kuning dengan link anda sendiri: Jangan lupa klik “SAVE TEMPLATE” Hasilnya adalah sebagai berikut: Yang saya beri tanda kotak merah adalah contoh dari “menu halaman” .blogspot.blogspot.html'>Cara Pemesanan</a></li> <li><a href='http://thepremiumtemplate.html '>Why Us?</a></li> </ul> </li> <li> <a href='http://thepremiumtemplate.html'>Why Us?</a> </li> <li> <a href='http://thepremiumtemplate.com/p/why-us.com/p/about-me.com/'>Artikel</a> <ul> <li><a href='http://thepremiumtemplate.homepageUrl'>Beranda</a> </li> <li> <a href='http://thepremiumtemplate.blogspot.blogspot.html'>Hubungi Kami</a> </li> <li> <a href='http://thepremiumtemplate.com/p/cara-order.blogspot.blogspot.com/p/cara-order.html'>Hubungi Kami</a></li> <li><a href='http://jam-rolex.blogspot.<li class='nav-home-link'> <a expr:href='data:blog.blogspot.com/p/why-us.html'>About Me</a></li> <li><a href='http://thepremiumtemplate.com/p/hubungikami.

blogger.com Ingat. buka browser kesayangan anda dan ketik www. anda harus mempunyai alamat e-mail. . lakukan pendaftaran. MEMBUAT SLIDE Langkah pertama.BAB III CARA MEMBUAT SLIDE DAN MENGATUR JUMLAH POSTING PADA HALAMAN PERTAMA A. Jika belum.

blogger.Masukkan email dan sandi untuk masuk ke dalam www.com Kemudian masuk ke: Selanjutnya copy kode yang saya berikan dalam bentuk notepad: Kedalam widget: .

jpg" /><span><br />HX31106 Blue Rp 169.blogspot.bp.500.00 <sup style="color:red">HOT!</sup></span></a></li> <li class="ui-tabs-nav-item"> <a href="#fragment-3"><img alt="" src="http://2.com/2DASB973p8c/Tpr8CaLsSRI/AAAAAAAAA0o/q1YMHJUQyZc/s400/black_lingerie.500.blogspot.jpg" /> <span><br />IXBL1074 RED Rp 119.com/doTlroRRl7k/Tpr4115SyXI/AAAAAAAAA0Q/JE30eN0lBcs/s400/pink-lingerie-babydollmask.bp.00 <sup style="color:red">SALE!</sup></span></a></li> <li id="nav-fragment-4" class="ui-tabs-nav-item"> .com/Fqx2hLtJM28/Tpr6md1OdkI/AAAAAAAAA0c/lKPLEXT2w_o/s400/Sexy_Lingerie.Tentu saja.bp.jpg" /> <span><br />IXDS1538 BLACK Rp 154. sebelumnya anda mengganti link bawaan dengan link anda sendiri: <div id="featured"> <ul class="ui-tabs-nav"> <li class="ui-tabs-nav-item ui-tabs-selected"> <a href="#fragment-1"> <img alt="" src="http://2.blogspot.500.00 <sup style="color:red">HOT!</sup></span></a></li> <li class="ui-tabs-nav-item"> <a href="#fragment-2"> <img alt="" src="http://4.

html">IXDS1538 BLACK Rp 154.</a></p> </div> </div>………………………….bp.com/KmqFoieOvI8/Tpr1sbKKBkI/AAAAAAAAAz4/zROYVKJTvZE/s400/Scarlet_satin_black.500.html">IXBL1074 RED Rp 119.bp.bp. dan posting. keterangan.font-weight:bold.blogspot.">Read more &raquo.">Read more &raquo.00</a></h3> <p>Warna : Red.jpg" width="340px" style="margin-top:-110px"/> <div class="info"> <h3><a href="http://thepremiumtemplate.jpg" width="340px" style="margin-top:-140px"/> <div class="info"> <h3><a href="http://thepremiumtemplate.500. Cara mendapatkan link gambar: .First Content --> <div id="fragment-1" style="" class="ui-tabs-panel"> <img alt="" src="http://2. Bahan : Cotton + Chiffon <a href="http://thepremiumtemplate.blogspot.com/2011/10/baby-doll-coat-3980usd.com/2DASB973p8c/Tpr8CaLsSRI/AAAAAAAAA0o/q1YMHJUQyZc/s400/black_lingerie.com/2011/10/baby-dollcoat-3980-usd.<a href="#fragment-4"> <img alt="" src="http://4.00</a></h3> <p>Warna : Black.dan seterusnya Kuning: adalah link gambar Biru: adalah link posting Pink: adalah keterangan produk Tips: Pastikan link yang anda pasang benar dan sinkron antara gambar.00 <sup style="color:red">SALE!</sup></span></a></li> </ul> <!-.</a></p> </div> </div> <!-. Bahan : Cotton<a href="http://thepremiumtemplate.com/2011/10/stripe-black-baby-doll-2490usd.html" style="float:right.blogspot.jpg" /> <span><br />HX11556 Apricot Rp 129.com/2011/10/stripe-blackbaby-doll-2490-usd.font-weight:bold.com/Fqx2hLtJM28/Tpr6md1OdkI/AAAAAAAAA0c/lKPLEXT2w_o/s400/Sexy_Lingerie.Second Content --> <div id="fragment-2" style="" class="ui-tabs-panel"> <img alt="" src="http://4.blogspot.500.blogspot.blogspot.html" style="float:right.blogspot.

MENGATUR JUMLAH POSTING DALAM HALAMAN UTAMA Sebelumnya: Dan dirubah melalui (lihat gambar di bawah ini): .Copy yang saya beri highlight biru. Cara mendapatkan link posting: B.

Hasilnya: Lebih rapi bukan? .Selanjutnya: Jangan lupa “SAVE” setelah mengedit.

posting JANGAN DI PUBLISH melainkan cukup save draft untuk kemudian diambil link gambarnya .blogger. buka browser kesayangan anda dan ketik www.BAB IV CARA MENGGANTI HEADER A. Mengganti Header Siapkan dulu header pengganti. lakukan pendaftaran.blogger.com Kemudian masuk ke: Tips: Ingat. Masukkan email dan sandi untuk masuk ke dalam www. Jika belum. anda harus mempunyai alamat e-mail.com Ingat. setelah selesai upload gambar. Dengan ukuran 972 x 300 Langkah selanjutnya.

Ambil link gambar header. hingga hasilnya: ICON . copy dan paste ke dalam notepad: Kemudian masuk di: Ganti link header lama dengan yang baru.

Langkah selanjutnya adalah mengganti “ICON” (lihat tanda panah). ICON ini bisa di hilangkan atau di ganti: (cari kode seperti dibawah ini) Hilangkan kode dengan highlight biru atau ganti dengan link gambar anda sendiri. Hasilnya: SEMOGA BERHASIL .