www.toko-onlineblogspot.info
DAFTAR ISI
Judul Isi Halaman
Setting Dasar Template Property 1
Membuat Menu Halaman Navigasi 17
Membuat Halaman Contact Form 19
Membuat Halaman Cara Order 25
Merubah Header Blogspot 29
Kunjungi situs
www.membuat-toko-online-gratis.blogspot.com guna mendapatkan full access
ebook ini lengkap dengan bonus template dan tool toko online anda.
1
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info Page 1
CARA MENJUAL PROPERTY SECARA ONLINE MELALUI INTERNET MENGGUNAKAN
BLOGSPOT ATAU GOOGLE BLOGGER
CONTOH WEBSITE PROPERTY
CARA PALING MUDAH DAN MURAH TANPA HARUS BELI DOMAIN DAN HOSTING
Anda ingin mendapatkan template blogger yang bisa menjual property seperti contoh blog di atas? Maka
baca petunjuk di bawah ini satu persatu dengan pelan dan jangan terburu-buru. E-book ini adalah e-book
gratis berisi panduan lengkap tentang cara membuat website yang bisa menjual property atau
menyewakannya kepada calon investor.
Dilihat dari penampilannya website di atas sudah sangat professional dan layak untuk menjual atau
menyewakan property seperti rumah, ruko, toko, gudang dan tanah kepada calon customer atau calon
investor anda. Keunggulan lainya dari blogger adalah bebas biaya domain dan hosting karena semuanya
sudah di sediakan secara GRATIS oleh GOOGLE dengan berbagai macam fasilitas yang mampu mengalahkan
hosting berbayar karena bandwith-nya yang unlimited, SEO friendly, USER friendly dan kapasitas
penyimpanan yang nyaris tanpa batas.
Segala penyalahgunaan ebook ini bukanlah tanggung jawab penulis dengan situs resminya yaitu www.toko-
onlineblogspot.info Ebook ini adalah ebook gratis dan tidak untuk diperjual belikan.
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info Page 2
Langkah pertama:
Daftar di www.mail.google.com atau di www.mail.yahoo.com guna mendapatkan email.
Langkah kedua:
Daftar di www.blogger.com guna mendapatkan account blogspot, sehingga dengannya
anda bisa mempunyai blog dengan penampilan setara dengan website professional
untuk menjual atau menyewakan property rumah, ruko, gudang, toko, tanah kepada
calon investor.
Klik SIGN UP dan lakukan registrasi. Setelah proses registrasi selesai maka anda akan di
bawa menuju laman berikut:
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info Page 3
Klik “Create a Blog” untuk memulai membuat blog. Pilih “Language” >>>> English
Isi “Blog title” kemudian “Blog address(URL) dan masukkan kode “Type the two words”
kemudian klik “CONTINUE”
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info Page 4
Pilih “Simple” dan jangan “Dynamic Views” karena akan sulit untuk di edit template-nya
menjadi template property. Lanjutkan dengan click “CONTINUE”
Klik “START BLOGGING”
Kemudian Copy kode di bawah ini:
[gambar disini]
<p><strong>INFORMASI DETAIL</strong></p>
<style type="text/css">.nobr br{display: none}</style>
<div class="nobr">
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info Page 5
<table width="500" border="1" cellspacing="0" cellpadding="5" style="border-collapse: collapse"
bordercolor="#D6D6BD">
<tr>
<td width="200" bgcolor="#F7F7EF">Alamat</td>
<td width="314">:</td>
</tr>
<tr>
<td bgcolor="#F7F7EF">Sertifikat</td>
<td>:</td>
</tr>
<tr>
<td width="200" bgcolor="#F7F7EF">Luas Bangunan</td>
<td>:</td>
</tr>
<tr>
<td width="200" bgcolor="#F7F7EF">Luas Tanah</td>
<td>:</td>
</tr>
<tr>
<td width="200" bgcolor="#F7F7EF">Jumlah Lantai / Tingkat</td>
<td>:</td>
</tr>
<tr>
<td width="200" bgcolor="#F7F7EF">Kamar Tidur</td>
<td>:</td>
</tr>
<tr>
<td width="200" bgcolor="#F7F7EF">Kamar Mandi</td>
<td>:</td>
</tr>
<tr>
<td width="200" bgcolor="#F7F7EF">Listrik</td>
<td>:</td>
</tr>
<tr>
<td width="200" bgcolor="#F7F7EF">Air</td>
<td>:</td>
</tr>
<tr>
<td width="200" bgcolor="#F7F7EF">Garasi Mobil</td>
<td>:</td>
</tr>
<tr>
<td width="200" bgcolor="#F7F7EF">Carport</td>
<td>:</td>
</tr>
<tr valign="top">
<td width="200" height="80" bgcolor="#F7F7EF">Keterangan Tambahan</td>
<td height="80">:</td>
</tr>
</table>
</div>
<p><strong>CONTACT PERSON</strong></p>
<style type="text/css">.nobr br{display: none}</style>
<div class="nobr">
<table width="500" border="1" cellspacing="0" cellpadding="5" style="border-collapse: collapse"
bordercolor="#D6D6BD">
<tr>
<td width="200" bgcolor="#F7F7EF">Nama</td>
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info Page 6
<td width="311">:</td>
</tr>
<tr>
<td width="200" bgcolor="#F7F7EF">Telepon</td>
<td>:</td>
</tr>
<tr>
<td width="200" bgcolor="#F7F7EF">Email</td>
<td>:</td>
</tr>
</table>
</div>
(Kode bisa di dapatkan dari “Notepad” yang saya sertakan pada saat anda mengunduh “Template” dari situs berikut ini:
http://www.toko-onlineblogspot.info/2012/01/template-iklan-property-rp200000.html
Dan masukkan ke dalam Setting >> Formatting >> Post Template
Sebelumnya, atur dulu jumlah posting yang nantinya akan muncul:
Isikan “Show at most” dengan angka “6” sehingga postingan yang tampil adalah 6 (enam) postingan
sehingga Nampak rapi.
Masukkan kode yang anda dapatkan ke dalam kolom “Post Template”
Kemudian klik “SAVE SETTINGS”
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info Page 7
Selanjutnya masuklah ke “Design” >> “Edit HTML” >> Choose File (pilih file xml yang bisa anda download di
sini http://www.toko-onlineblogspot.info/2012/01/template-iklan-property-rp200000.html ) Kemudian
setelah anda pilih, selanjutnya klik “Upload”
Taruh file “TemplatePropertyBlogger.xml” ke dalam folder yang mudah di cari. Selanjutnya setelah file anda
sorot / pilih, klik “Open”
Selanjutnya klik “Upload” dan jangan lupa untuk di “Delete Widget”
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info Page 8
Klik “DELETE WIDGETS” dan “SAVE”
Tips
Guna mempermudah SEO / terindex Google search engine sehingga website anda mudah di cari maka
jangan lupa masuk ke dalam “Settings” >>> “Basic” >>> Dan isi “Title” dan “Description” website anda
dengan kata kunci yang paling di gemari kaum netter.
Langkah selanjutnya adalah posting produk:
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info Page 9
Masuk melalui menu “Posting” dan kemudian akan muncul halaman seperti tampak dalam gambar di atas.
Isikan informasi produk se detail mungkin. Yang terpenting adalah masukkan gambar rumah, ruko, gudang,
atau tanah yang akan anda jual atau sewakan.
Pilih gambar dari data dalam hardisk komputer anda.
Hasilnya:
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info Page 10
Jangan lupa isi “Title” secara lengkap seperti contoh di atas. Upload gambar, kemudian jangan lupa isi
“Lables” (lihat contoh sebagai permisalan), setidaknya memuat TIGA HAL: Rumah (jenis barang), min150
Juta (harga) dan Dijual (dijual atau disewakan/ status barang dagangan)
Selanjutnya, Isikan posting minimal 6 (enam) postingan awal.
Supaya menjadi seperti ini website dibawah ini, maka langkah-langkahnya adalah sebagai berikut:
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info Page 11
Copy kode dibawah ini:
tomygumilar <a href="ymsgr:sendIM?ms0fii"><img style="border:none" width="64"
src="http://opi.yahoo.com/online?u=tomygumilar&m=g&t=1" height="16" /></a><br />
Phone 081334427229
Ganti “tomygumilar” dengan id yahoo messenger anda. Juga nomor telpun ganti dengan nomor anda. Dan
masukkan ke “Design” >>> “Page Elements” >>> “Customer Service”
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info Page 12
Jangan lupa “SAVE”
Selanjutnya masukkan kode dibawah ini kedalam widget “Tipe Properti” Langkahnya seperti saat
memasukkan kode “Customer Service”:
<div class='widget-content list-label-widget-content'>
<ul>
<li><a href="http://jual-properti-murah.blogspot.com/search/label/Rumah">Rumah</a></li>
<li><a href="http://jual-properti-murah.blogspot.com/search/label/Tanah">Tanah</a></li>
<li><a href="http://jual-properti-murah.blogspot.com/search/label/Ruko">Ruko</a></li>
<li><a href="http://jual-properti-murah.blogspot.com/search/label/Apartemen">Apartemen</a></li>
<li><a href="http://jual-properti-murah.blogspot.com/search/label/Gudang">Gudang</a></li>
<li><a href="http://jual-properti-murah.blogspot.com/search/label/Kantor">Kantor</a></li>
</ul>
</div>
Jangan lupa untuk mengganti “kode warna hijau” dengan kode anda sendiri menjadi:
http://jualsewarumahtanah.blogspot.com/ tambahkan /search/label/(nama label) yang
anda isikanpada saat posting (HATI-HATI JANGAN SAMPAI KELIRU huruf besar atau
kecil-nya pada saat anda posting harus sama dengan kode yang anda masukkan)
LAB
EL
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info Page 13
Selanjutnya copy kode di bawah ini:
<form>
<select onchange="window.open(this.options[this.selectedIndex].value,'_self')" name="menu" size="1">
<option />--------- Pilih ---------
<option value="http://jual-properti-murah.blogspot.com/search/label/min150jt " />< 150 juta
<option value="http://jual-properti-murah.blogspot.com/search/label/150jt-500jt" />150 jt s/d 500 jt
<option value="http://jual-properti-murah.blogspot.com/search/label/500jt-1M" />500 jt s/d 1 M
<option value="http://jual-properti-murah.blogspot.com/search/label/1M-5M" />1 M s/d 5 M
<option value="http://jual-properti-murah.blogspot.com/search/label/5Mplus" />> 5 M
</select>
</form>
Ulangai langkah di atas.
Selanjutnya copy juga kode di atas ke dalam widget “Harga” seperti gambar dibawah ini:
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info Page 14
Terakhir copy pula kode di bawah ini :
<form>
<select onchange="window.open(this.options[this.selectedIndex].value,'_self')" name="menu" size="1">
<option />--------- Pilih ---------
<option value="http://jual-properti-murah.blogspot.com/search/label/dijual" />Dijual
<option value="http://jual-properti-murah.blogspot.com/search/label/disewakan" />Disewakan
</select>
</form>
Terakhir copy pula tersebut kedalam widget “Status” seperti gambar di bawah ini :
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info Page 15
Jangan lupa untuk selalu “SAVE” setiap edit yang anda lakukan.
Masukkan kode:
<a href="http://www.toko-onlineblogspot.info" target="_blank"><img style="border:none" width="173"
src="http://i55.tinypic.com/16ba99s.jpg" border="0" alt="MEDIA IKLAN ONLINE" vspace="3" /></a><br />
Untuk mengisi “widget” space iklan (optional) alias tidak wajib.
Menu “SERING DI LIHAT” akan muncul otomatis setelah kurang lebih 1 (satu)
minggu anda melakukan posting secara regular.
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info
www.toko-onlineblogspot.info Page 16
Untuk widget “SERING DILIHAT” akan muncul otomatis. Menu ini bisa anda setting melalui menu:
Design >> Page Elements >> Sering di Lihat.
SELAMAT MENCOBA DAN SEMOGA SUKSES
Boleh menyebar luaskan ebook ini dengan syarat tidak boleh menghapus
identitas pengarang yaitu:
Tomy Gumilar, S.S.
Mobile Phone: 081334427229
Email: [email protected]
Website: www.toko-onlineblogspot.info
www.toko-onlineblogspot.info
Masuk ke blogger dan klik “NEW POST”
Selanjutnya klik “Edit Pages”
Kemudian klik “NEW PAGE”
Kemudian isi “Page Title” dan isi posting
melalu “Compose” setelah selesan klik
PUBLISH
Klik PUBLISH
Klik “No gadget” Kemudian klik “SAVE AND PUBLISH”
Klik KANAN pada ‘View Page’ kemudian
klik “Copy Link Location”
Klik “Design”
17 Cara Membuat Halaman Navigasi Pada Custom Template
www.toko-onlineblogspot.info
Masuk “Page Elements”
dan klik”Top Menu”
Masukkan link ke dalam “New Site URL”
Tulis ke dalam “New Site Name” NAMA
HALAMAN MISALNYA: CARA ORDER
Klik save
Halaman “CARA ORDER” sudah muncul
SELAMAT BERHASIL
Jika ada kesulitan klik http://www.toko-onlineblogspot.info dan pilih
“FORUM” atau hubungi saya di [email protected] atau SMS ke 081334427229
www.toko-onlineblogspot.info
Ketik di google
www.123contactform.c
om/contact-form-for-
blogger.html
Klik “SIGN UP”
Pilih Basic FREE klik “Sign Up”
Isi Username, Password,
Confirm password, contact
email. Hati-hati catat
username dan password
jangan sampai lupa.
Pilih Menu Contact Form. Klik gambar amplop surat.
Isi dalam “Form Name”
dengan nama “Hubungi Kami”
dll Klik “OK”
19 Cara Membuat Halaman Contact Form
www.toko-onlineblogspot.info
Klik “EDIT FIELD” kemudian “Preview” untuk melihat dan “Continue” jika sudah selesai melakukan
setting FORMAT. (BUTUH INTERNET KONEKSI YANG CEPAT)
Klik ‘ADD FIELD’ untuk
menambah format field. Misal
anda ingin mengetahui
website, alamat lengkap calon
customer anda dll
Isi Label dengan tulisan misalnya: Alamat Website
Label Style di pilih
Field Size isikan sesuai kehendak anda (isikan 60 jika menghendaki kotak
yang lebih lebar)
Jumlah Rows dll (isikan 8 jika menghendaki ukuran kotak lebih tinggi)
Centang Options >>> Required jika anda mensyaratkan customer harus
mengisi field tersebut.
Klik tanda SILANG jika ingin menghilankan form yang tidak di kehendaki
www.toko-onlineblogspot.info
Isi Show text dengan “Email anda sudah kami
terima. Terimakasih”
Centang “Send a copy of the completed form
to the sender” (OPTIONAL)
Jika menginginkan autoresponder maka
centang kolom “Send a confirmation message
to the sender”
Klik “Save”
Kemudian “Continue”
Copy kode berikut (untuk memasang contact
form berbentuk “TOMBOL” atau jika
menghendaki berbentuk FORMAT MAKA
TERUSKANLANGKAH BERIKUT:
www.toko-onlineblogspot.info
Klik Embed Code
Pilih Iframe
Masuk blogger >> Posting >> Edit Pages >> New Page
www.toko-onlineblogspot.info
Masukkan Code Script ke dalam Edit Pages
>> Edit HTML
Janagn lupa isi “Page Title”
Pilih No gadget kemudian SAVE AND
PUBLISH
JANGAN LUPA KLIK KANAN “VIEW”
TERUS COPY LINK LOCATION
Masuk di DESIGN >> Top Menu >> Edit
Isikan link pada “New Site URL”
dan ketik judul halaman “New Site
Name”
www.toko-onlineblogspot.info
Cek penampilan blogger.
Kembali ke 123contactform dan
klik “Finished”
SELAMAT MENCOBA
DAN JANGAN LUPA KUNJUNGI
http://www.toko-onlineblogspot.info
untuk mendapatkan update TUTORIAL dan update
DESIGN BLOGSPOT BARU!
www.toko-onlineblogspot.info
Masuk Blogger >> Posting >> Edit Pages >> New Page
Isi Page Title: Cara Beli
(contoh)
Isi Compose: Tata cara
pembelian
Klik “PUBLISH PAGE”
Isi cara pembelian produk
anda sehingga calon
customer tidak kebingungan
Pilih No gadget
Klik “SAVE AND PUBLISH”
25 Cara Modifikasi Halaman Order
www.toko-onlineblogspot.info
Klik kanan “View Page” dan klik “Copy Link
Location”
Pindahkan ke
note pad
“ctrl+v”
Masuk “Design” >> “Page Elements” >> “Top Menu”
www.toko-onlineblogspot.info
Copy “Link” dari note
pad kemudian
masukkan ke dalam
“New Site URL” dan
berilah nama pada
“New Site Name”
dengan nama yang
memudahkan
customer anda
melakukan transaksi.
Klik “SAVE”
Kembali ke “Design”
dan klik “Edit HTML”
JANGAN LUPA
“Centang” Expand
Widget Templates
Cari kode ‘p/cara-
pemesanan.html’
ganti dengan ‘p/cara-
beli.html’ dari
notepad
www.toko-onlineblogspot.info
Cari kode
<h2>Cara
Order</h2> dan
ganti tulisan
Kirim email………………… dengan informasi toko online anda sehingga calon customer anda tidak akan
merasa kebingungan.
JANGAN LUPA”SAVE TEMPLATE”
Kunjungi http://www.toko-onlineblogspot.info dan
dapatkan template toko online blogspot cocok untuk dagangan
dalam negeri, luar negeri, produk sendiri, atau produk
affiliate Amazon, Clickbank, CJ, dan lain sebagainya
Hub: [email protected]
HP: 081334427229
www.toko-onlineblogspot.info
Sebelumnya siapkan / buat header sendiri untuk menyesuaikan dengan tema toko online blogspot anda
dengan menggunakan software gratis XHeader. Klik “No Thanks” untuk mulai bekerja menggunakan
XHeader secara gratis atau beli 5000 template header harnya 47USD. Hitung sendiri berapa banyak bila
dirupiahkan!!!
Berikutnya, klik Load from template library jika anda sudah puas dengan template yang disediakan oleh
XHeader. Namun, jika anda ingin membuat sendiri header anda, klik “Create a Blank Header” (cara ini
tidak saya ajarkan, namun saya yakin anda bisa coba utak athik sendiri). Banyak menu pilihan lainnya
seperti “Load an XHF FILE” dan “Load Image from Hard Disk”
29
Cara Rubah Header Pada Template Custome: Toko Online Blogspot Fashion
www.toko-onlineblogspot.info
Kemudian, akan muncul beragam pilihan template yang sudah di klasifikasan berdasarkan kategori-
kategori yang akan memudahkan anda memilih tema template berdasarkan kategori tersebut. Lihat
gambar berikut ini:
Sebagai contoh, saya mengambil kategori “Beauty” dan akan muncul seperti ini:
Akan muncul beragam template header. Pilihlah yang paling mewakili tema toko online anda. Disini saya
memberikan contoh dengan memilih “Beauty3 029 jpg”
Kemudian pilih menu “Option” dan sorot “Resize Header” kemudian setting ukurannya menjadi 988 x
225 seperti gambar di bawah ini. Ingat ukuran ini besarnya berubah ubah sesuai dengan jenis template
toko online anda. Sebagai contoh, template yang di modifikasi adalah template bonus dari saya yaitu
template toko online “Fashion Blue 3 Kolom”
www.toko-onlineblogspot.info
Isikan ukurannya pada field yang tersedia. 988 X 225 pixel. Selanjutnya akan muncul beberapa pilihan
kualitas header. Di dalam tutorial kali ini saya memberikan contoh kualitas “Superb”
Jangan lupa untuk klik dua kali pada gambar dan simpan file ke dalam hardisk komputer. Simpan di
desktop supaya memudahkan anda mengingat letak file.
www.toko-onlineblogspot.info
Tahapan selanjutnya adalah mengupload secara gratis file header ke dalam hosting. Tip dan trik saya
adalah letakkan gambar pada hosting gratis paling powerful sedunia karena aksesnya cepat dan
unlimited yaitu kedalam “new posting” www.blogger.com namun jangan di upload melainkan “simpan
sebagai draft” seperti gambar di bawah ini:
Selanjutnya klik “Original size” sehingga ukuran gambar tetap 988 X 225 pixel sebagaimana ukuran
gambar aslinya. Kemudian ambil link gambarnya seperti di bawah ini:
Masuk ke Blogger >> Design >> Edit HTML >> Centang Expand Widget Templates
www.toko-onlineblogspot.info
Untuk yang ukuran template “toko online fashion blue 3 kolom”
Cari Kode seperti gambar di bawah ini. Trik supaya bisa mencari dengan cepat, maka carilah dengan
cara “ctrl + f” dan masukkan header. Klik “next” hingga ketemu kode dibawah ini:
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 988px;
height: 225px;
background-image: url('http://lh4.ggpht.com/_ObmIb-
UmMEo/TcpvJ6GSp8I/AAAAAAAAAcQ/L25K5t4Sslk/Header.jpg');
background-repeat: no-repeat;
background-position: center center;
Ganti yang bercetak tebal dengan link HEADER tersebut dengan link yang barusan anda buat sehingga
menjadi:
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 988px;
height: 225px;
background-image: url(‘http://2.bp.blogspot.com/-
l40fnlsUVGE/Tv2tl1tES3I/AAAAAAAAATc/aOezhYdwuBg/s1600/Header.jpg’
);
background-repeat: no-repeat;
background-position: center center;
Hasilnya yang semula:
Menjadi gambar di bawah ini:
www.toko-onlineblogspot.info
Khusus template “toko online fashion pink 2 (dua) kolom”,
Cari Kode:
div.art-Header-jpeg
{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 788px;
height: 300px;
background-image:
url('http://img214.imageshack.us/img214/2289/headerbpn.jpg');
background-repeat: no-repeat;
background-position: center center;
}
Ganti yang bercetak tebal dengan link HEADER anda sendiri dengan ukuran 788 x 300
www.toko-onlineblogspot.info
Note: Usahakan tidak meletakkan gambar pada sisi kiri karena akan crash dengan “title” dan
“deskripsi” blog toko online anda. Tentunya ini sangat tidak menguntungkan anda dari segi SEO.
Tutorial di atas hanyalah ilustrasi saja.