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

HALAMAN ISI
Judul Bab
1. 2. 3. 3. 4. 5. 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

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

BAB I CARA UPLOAD TEMPLATE

Langkah pertama, buka browser kesayangan anda dan ketik www.blogger.com

Ingat, anda harus mempunyai alamat e-mail. Jika belum, lakukan pendaftaran.

Masukkan email dan sandi untuk masuk ke dalam www.blogger.com

Klik Create a Blog untuk membuat blog baru.

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. Jangan lupa memasukkan dua kata captcha dengan benar. Selanjutnya klik continue

Pilih simple template supaya memudahkan anda melakukan pengeditan.

Anda sudah berhasil membuat blog. Langkah selanjutnya, adalah klik START BLOGGING

Pilih setting >> edit html >> choose file (untuk mengupload template). Warning: Jangan melakukan copy paste dari program xml toko online, tetapi lakukanlah upload.

Pilihlah tokoonlinepremiumbiru.xml (tidak termasuk tanda petik) selanjutnya klik open.

Delete DELETE WIDGETS dan save.

Hasilnya, toko online siap di isi postingan gambar:

BAB II CARA POSTING DAN MEMBUAT HALAMAN

A. CARA POSTING Langkah pertama, buka browser kesayangan anda dan ketik www.blogger.com

Ingat, anda harus mempunyai alamat e-mail. Jika belum, lakukan pendaftaran.

Masukkan email dan sandi untuk masuk ke dalam www.blogger.com Cari menu posting >> new post >> compose Ketikkan deskripsi produk anda dan upload gambar seperti dibawah ini:

Klik Insert image

Perhatikan kotak merah berarti daerah tersebut wajib anda isi. Klik insert image untuk memasukkan gambar.

Kemudian gambar produk akan tampil seperti ini:

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:

Jangan lupa, save setiap kali proses editing selesai dilakukan. Maka, lihat hasilnya:

Ulangi proses ini hingga setidaknya anda berhasil posting barang sebanyak 12 (dua belas) kali posting. Warning: Usahakan untuk menyimpan link posting setiap kali selesai posting. Karena proses ini akan berkaitan dengan proses pembuatan toko online pada tahap selanjutnya. Lihat gambar:

Klik kanan

Copy Link address

Copy ke dalam notepad seperti ini

B. CARA POSTING DAN MEMBUAT MENU HALAMAN

Perhatikan bagian yang saya beri kotak merah. Itu artinya anda harus edit seperti cara pada contoh gambar di atas. Kemudian, klik SAVE AND PUBLISH Selanjutnya anda akan di bawa menuju tampilan menu seperti ini: Pilih No gadget

Ambil link halaman anda. Dengan cara klik kanan view page dan klik copy link location

Jangan lupa untuk menyimpan link ini: http://tokopremium.blogspot.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.

<li class='nav-home-link'> <a expr:href='data:blog.homepageUrl'>Beranda</a> </li> <li> <a href='http://thepremiumtemplate.blogspot.com/'>Artikel</a> <ul> <li><a href='http://thepremiumtemplate.blogspot.com/p/cara-order.html'>Cara Pemesanan</a></li> <li><a href='http://thepremiumtemplate.blogspot.com/p/hubungikami.html'>Hubungi Kami</a></li> <li><a href='http://jam-rolex.blogspot.com/p/about-me.html'>About Me</a></li> <li><a href='http://thepremiumtemplate.blogspot.com/p/why-us.html '>Why Us?</a></li> </ul> </li> <li> <a href='http://thepremiumtemplate.blogspot.com/p/why-us.html'>Why Us?</a> </li> <li> <a href='http://thepremiumtemplate.blogspot.com/p/hubungi-kami.html'>Hubungi Kami</a> </li> <li> <a href='http://thepremiumtemplate.blogspot.com/p/cara-order.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

BAB III CARA MEMBUAT SLIDE DAN MENGATUR JUMLAH POSTING PADA HALAMAN PERTAMA A. MEMBUAT SLIDE

Langkah pertama, buka browser kesayangan anda dan ketik www.blogger.com

Ingat, anda harus mempunyai alamat e-mail. Jika belum, lakukan pendaftaran.

Masukkan email dan sandi untuk masuk ke dalam www.blogger.com Kemudian masuk ke:

Selanjutnya copy kode yang saya berikan dalam bentuk notepad:

Kedalam widget:

Tentu saja, 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.bp.blogspot.com/2DASB973p8c/Tpr8CaLsSRI/AAAAAAAAA0o/q1YMHJUQyZc/s400/black_lingerie.jpg" /> <span><br />IXDS1538 BLACK Rp 154.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.bp.blogspot.com/Fqx2hLtJM28/Tpr6md1OdkI/AAAAAAAAA0c/lKPLEXT2w_o/s400/Sexy_Lingerie.jpg" /> <span><br />IXBL1074 RED Rp 119.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.bp.blogspot.com/doTlroRRl7k/Tpr4115SyXI/AAAAAAAAA0Q/JE30eN0lBcs/s400/pink-lingerie-babydollmask.jpg" /><span><br />HX31106 Blue Rp 169.500,00 <sup style="color:red">SALE!</sup></span></a></li> <li id="nav-fragment-4" class="ui-tabs-nav-item">

<a href="#fragment-4"> <img alt="" src="http://4.bp.blogspot.com/KmqFoieOvI8/Tpr1sbKKBkI/AAAAAAAAAz4/zROYVKJTvZE/s400/Scarlet_satin_black.jpg" /> <span><br />HX11556 Apricot Rp 129.500,00 <sup style="color:red">SALE!</sup></span></a></li> </ul> <!-- First Content --> <div id="fragment-1" style="" class="ui-tabs-panel"> <img alt="" src="http://2.bp.blogspot.com/2DASB973p8c/Tpr8CaLsSRI/AAAAAAAAA0o/q1YMHJUQyZc/s400/black_lingerie.jpg" width="340px" style="margin-top:-110px"/> <div class="info"> <h3><a href="http://thepremiumtemplate.blogspot.com/2011/10/stripe-blackbaby-doll-2490-usd.html">IXDS1538 BLACK Rp 154.500,00</a></h3> <p>Warna : Black; Bahan : Cotton + Chiffon <a href="http://thepremiumtemplate.blogspot.com/2011/10/stripe-black-baby-doll-2490usd.html" style="float:right;font-weight:bold;">Read more &raquo;</a></p> </div> </div> <!-- Second Content --> <div id="fragment-2" style="" class="ui-tabs-panel"> <img alt="" src="http://4.bp.blogspot.com/Fqx2hLtJM28/Tpr6md1OdkI/AAAAAAAAA0c/lKPLEXT2w_o/s400/Sexy_Lingerie.jpg" width="340px" style="margin-top:-140px"/> <div class="info"> <h3><a href="http://thepremiumtemplate.blogspot.com/2011/10/baby-dollcoat-3980-usd.html">IXBL1074 RED Rp 119.500,00</a></h3> <p>Warna : Red; Bahan : Cotton<a href="http://thepremiumtemplate.blogspot.com/2011/10/baby-doll-coat-3980usd.html" style="float:right;font-weight:bold;">Read more &raquo;</a></p> </div> </div>.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, keterangan, dan posting. Cara mendapatkan link gambar:

Copy yang saya beri highlight biru. Cara mendapatkan link posting:

B. MENGATUR JUMLAH POSTING DALAM HALAMAN UTAMA

Sebelumnya:

Dan dirubah melalui (lihat gambar di bawah ini):

Selanjutnya:

Jangan lupa SAVE setelah mengedit. Hasilnya:

Lebih rapi bukan?

BAB IV CARA MENGGANTI HEADER A. Mengganti Header Siapkan dulu header pengganti. Dengan ukuran 972 x 300

Langkah selanjutnya, buka browser kesayangan anda dan ketik www.blogger.com

Ingat, anda harus mempunyai alamat e-mail. Jika belum, lakukan pendaftaran.

Masukkan email dan sandi untuk masuk ke dalam www.blogger.com Kemudian masuk ke:
Tips: Ingat, setelah selesai upload gambar, posting JANGAN DI PUBLISH melainkan cukup save draft untuk kemudian diambil link gambarnya

Ambil link gambar header, copy dan paste ke dalam notepad:

Kemudian masuk di:

Ganti link header lama dengan yang baru, hingga hasilnya:

ICON

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