sumber artikel : http://www.maskolis.com
Kemarin ada yang minta template Johny Sip Deh tapi tampilan warnanya ungu, yah akhirnya meskipun ungu salah satu warna yang saya tidak begitu suka karena dekat dengan pink kesannya feminim, saya kan laki jadi warnanya mesti macho. Saya mau cerita sebentar sebelum lanjut ke template yang mau saya bagikan, sebenarnya saya kalau nulis artikel pakai bahasa baku begini agak susah mesti mikir dua kali, penginnya sih nulis bahasa gaul. Misalnya tidak, nulisnya nggak, nanti jadi entar dan lain-lain, tapi nanti kalau yang datang orang luar mau translate ke bahasa mereka jadi kacau tidak bisa diterjemahkan.
Lanjut, template yang saya bagikan kali ini hanya modifikasi dari template sebelumnya. Setelah kemarin saya membagikan Johny Sip Deh template untuk blog toko online, karena ada beberapa pemakai template dari kaum Hawa yang mungkin agak kurang sreg dengan tampilan warnanya yang hitam seperti pantat penggorengan, apalagi kalau yang dijual adalah baju atau perlengkapan rumah tangga yang sifatnya Girly pasti kurang cocok. Saya akan berikan alternatif warna lain, ada dua jenis warna untuk template kali ini, yaitu Hijau dan Ungu (ungu apa pink ya?).
Template toko online kali ini saya kasih nama Johny Palelu Peang, nama itu saya ambil karena waktu hujan kemarin atap rumah bocor dan dengan sigap saya langsung membetulkan letak genteng yang melorot, tapi apa mau dikata, karena licin saya terpeleset dan terjatuh yang berakibat kepala saya agak peang dikit. Fiturnya sama dengan Johny Sip Deh, dengan tampilan slider yang berbeda dan tambahan fitur kategori produk di bawah postingan. Untuk lebih jelasnya silahkan perhatikan screenschot gambar di bawah ini :
Posting Artikel
Untuk membuat sebuah postingan, perhatikan struktur kode di bawah ini :
Keterangan :<div class="product_image"><a class="cloud-zoom" href="url-image.jpg" rel="softFocus: true, position:'inside', smoothMove:2"><img border="0" class="item_thumb" src="url-image.jpg" /></a><span class="item_price">$00.00</span></div><div class="product_describe">Description your product.............
</div>
Warna merah : masukkan url gambar produk anda pada kedua kode warna merah diatas.
Warna kuning : harga produk
Warna biru : deskripsi dari produk
Kode diatas adalah kode yang harus anda awali dalam membuat postingan terbaru, dan untuk memudahkan agar Anda tidak berulang kali copy paste kode tersebut sewaktu membuat artikel terbaru, masukkan kode tersebut pada kolom post template. Masuk ke setting, pilih posts and comments >>post template. Klik add, setelah itu masukkan kode diatas pada kotak kosong seperti gambar dibawah, terakhir save setting.
Slider
Slider pada template ini menampilkan postingan terbaru, untuk mengaktifkan slider, masuk ke Layout kemudian pilih kolom kosong diatas Bawah Slider. Masukkan kode ini di dalamnya :
<div id='slider'>
<div id='loopedSlider'>
<div class='container'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</div>
<a class='previous' href='#'></a>
<a class='next' href='#'></a>
<ul class='pagination'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts0\"><\/script>");
</script>
</ul>
<script type='text/javascript'>
$(function(){
$('#loopedSlider').loopedSlider();
});
</script>
</div>
</div>
<div id='loopedSlider'>
<div class='container'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</div>
<a class='previous' href='#'></a>
<a class='next' href='#'></a>
<ul class='pagination'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts0\"><\/script>");
</script>
</ul>
<script type='text/javascript'>
$(function(){
$('#loopedSlider').loopedSlider();
});
</script>
</div>
</div>
Setting Template
Untuk merubah setelan transaksi online pada template ini, cari kode berikut ini pada Edit HTML :
simpleCart.email = 'ncmajid@gmail.com';
simpleCart.checkoutTo = Email;
simpleCart.currency = IDR;
simpleCart.urlWebsite = 'http://johnysip-deh.blogspot.com';
simpleCart.taxRate = 0.02;
simpleCart.shippingFlatRate = 3.25;
simpleCart.shippingQuantityRate = 1.00;
simpleCart.alamatPemilik = 'Alamat Anda ';
simpleCart.noHP = '081 xxxx xxxx';
simpleCart.urlFacebook = 'http://www.facebook.com/pages/your facebook';
simpleCart.urlTwitter = 'https://twitter.com/your twitter';
simpleCart.akunbank1 = 'Bank A';
simpleCart.norek1 = 'No Rekening';
simpleCart.namarek1 = 'Nama Pemilik Rekening Bank A';
simpleCart.akunbank2 = 'Bank B';
simpleCart.norek2 = 'No Rekening';
simpleCart.namarek2 = 'Nama Pemilik Rekening Bank B';
simpleCart.akunbank3 = 'Bank C';
simpleCart.norek3 = 'No Rekening';
simpleCart.namarek3 = 'Nama Pemilik Rekening Bank C';
simpleCart.akunbank4 = 'Bank D';
simpleCart.norek4 = 'No Rekening';
simpleCart.namarek4 = 'Nama Pemilik Rekening Bank D';
simpleCart.akunbank5 = 'Bank E';
simpleCart.norek5 = 'No Rekening';
simpleCart.namarek5 = 'Nama Pemilik Rekening Bank D';
simpleCart.akunbank6 = 'Bank F';
simpleCart.norek6 = 'No Rekening';
simpleCart.namarek6 = 'Nama Pemilik Rekening Bank D';
simpleCart.urlReferrer = 'http://www.maskolis.com';
simpleCart.businessName = 'Nama Toko Online Anda';
simpleCart.formatsmsKonfirmasi= '(Nama, Email, Jumlah transfer, Bank Tujuan Transfer, Tanggal transfer)';
simpleCart.contohformatsmsKonfirmasi= 'Maskolis, email.maskolis@gmail.com, Rp 1.500.000, BCA, 12 Desember 2012 ';
simpleCart.catatanTambahanInvoice= '(Have a nice day for you and I hope you enjoy it)';
simpleCart.cartHeaders = ["Name", "thumb_image" , "Quantity_input" , "Total", "remove" ];
simpleCart.checkoutTo = Email;
simpleCart.currency = IDR;
simpleCart.urlWebsite = 'http://johnysip-deh.blogspot.com';
simpleCart.taxRate = 0.02;
simpleCart.shippingFlatRate = 3.25;
simpleCart.shippingQuantityRate = 1.00;
simpleCart.alamatPemilik = 'Alamat Anda ';
simpleCart.noHP = '081 xxxx xxxx';
simpleCart.urlFacebook = 'http://www.facebook.com/pages/your facebook';
simpleCart.urlTwitter = 'https://twitter.com/your twitter';
simpleCart.akunbank1 = 'Bank A';
simpleCart.norek1 = 'No Rekening';
simpleCart.namarek1 = 'Nama Pemilik Rekening Bank A';
simpleCart.akunbank2 = 'Bank B';
simpleCart.norek2 = 'No Rekening';
simpleCart.namarek2 = 'Nama Pemilik Rekening Bank B';
simpleCart.akunbank3 = 'Bank C';
simpleCart.norek3 = 'No Rekening';
simpleCart.namarek3 = 'Nama Pemilik Rekening Bank C';
simpleCart.akunbank4 = 'Bank D';
simpleCart.norek4 = 'No Rekening';
simpleCart.namarek4 = 'Nama Pemilik Rekening Bank D';
simpleCart.akunbank5 = 'Bank E';
simpleCart.norek5 = 'No Rekening';
simpleCart.namarek5 = 'Nama Pemilik Rekening Bank D';
simpleCart.akunbank6 = 'Bank F';
simpleCart.norek6 = 'No Rekening';
simpleCart.namarek6 = 'Nama Pemilik Rekening Bank D';
simpleCart.urlReferrer = 'http://www.maskolis.com';
simpleCart.businessName = 'Nama Toko Online Anda';
simpleCart.formatsmsKonfirmasi= '(Nama, Email, Jumlah transfer, Bank Tujuan Transfer, Tanggal transfer)';
simpleCart.contohformatsmsKonfirmasi= 'Maskolis, email.maskolis@gmail.com, Rp 1.500.000, BCA, 12 Desember 2012 ';
simpleCart.catatanTambahanInvoice= '(Have a nice day for you and I hope you enjoy it)';
simpleCart.cartHeaders = ["Name", "thumb_image" , "Quantity_input" , "Total", "remove" ];
Ganti kode warna biru diatas dengan data Anda dan blog Anda.
Fungsi Reply Komentar
Untuk mengaktifkan fungsi reply pada kotak komentar pada kedua template ini cari Blog ID masing-masing demo template ini. Untuk Johny Palelu Peang : 2047062320562941851 dan Johny Pink Store :5422099799591763959. Silahkan cari kode blog ID itu di Edit HTML pada template demo, kemudian ganti dengan Blog ID Anda masing-masing. Dan terakhir untuk widget popular post, centang hanya thumbnail, kotak snippet biarkan kosong.
Oya hampir lupa, untuk mengisi widget Bawah Slider dan Product Category tinggal ketik label pada kolom widget tersebut.
Kedua template ini tersedia untuk dua pilihan sistem pembayaran online, yang satu menggunakan invoice email seperti yang terlihat pada demo, dan menggunakan pembayaran melalui Paypal (demonya nggak ada karena kebanyakan bikin blog nanti). Buat yang kemarin request template Toko Online warna ungu silahkan dipakai, kalau nggak cocok yah nggak apa-apa buat koleksi aja, buat bungkus kacang juga boleh, buat dijelek-jelekin juga boleh, buat diomelin juga boleh.... ngomong apa sih????
Silahkan tinggalkan pesan jika masih ada yang mau ditanyakan, atau baca tata cara komentar dulu disinisebelum mengisi kotak komentar yang tersedia.
Fungsi Reply Komentar
Untuk mengaktifkan fungsi reply pada kotak komentar pada kedua template ini cari Blog ID masing-masing demo template ini. Untuk Johny Palelu Peang : 2047062320562941851 dan Johny Pink Store :5422099799591763959. Silahkan cari kode blog ID itu di Edit HTML pada template demo, kemudian ganti dengan Blog ID Anda masing-masing. Dan terakhir untuk widget popular post, centang hanya thumbnail, kotak snippet biarkan kosong.
Oya hampir lupa, untuk mengisi widget Bawah Slider dan Product Category tinggal ketik label pada kolom widget tersebut.
Kedua template ini tersedia untuk dua pilihan sistem pembayaran online, yang satu menggunakan invoice email seperti yang terlihat pada demo, dan menggunakan pembayaran melalui Paypal (demonya nggak ada karena kebanyakan bikin blog nanti). Buat yang kemarin request template Toko Online warna ungu silahkan dipakai, kalau nggak cocok yah nggak apa-apa buat koleksi aja, buat bungkus kacang juga boleh, buat dijelek-jelekin juga boleh, buat diomelin juga boleh.... ngomong apa sih????
Silahkan tinggalkan pesan jika masih ada yang mau ditanyakan, atau baca tata cara komentar dulu disinisebelum mengisi kotak komentar yang tersedia.
Penting untuk diperhatikan bagi pengguna kedua template diatas :
- Buatlah sebuah page atau halaman statis dengan judul : Terima Kasih.
- Isi terserah Anda, contoh bisa dilihat disini http://johnysip-deh.blogspot.com/p/terima-kasih.html
- Halaman ini digunakan untuk redirect URL setelah selesai pengisian formulir pemesanan.
- Download Template Toko Online Dengan Invoice Email
