Free Template : Template Magazine untuk Toko Online

Setelah sebelumnya  juga membagikan template yakni Free  Template : Johny Classicsite Template, kali ini admin ingin membagikan Free template lagi. Template ini berfungsi bagi kalian yang mempunya web toko online.Silakan kalu berminat untuk download dan jangan sungkan bersilaturahim dengan komentar di sini . Jangan lupa juga bagikan pada keluarga dan teman-teman yang lain via fasilitas share yang ada di sini ya. Jazakumulloh...

 Template ini saya re-post dari web penyedia template kang Markolis. Makasih atuh kang :)

 Demo | Download

Fitur yang terdapat dalam template Johny Magstore :

1. Shopping Cart dari wojodesign.com
2. Grid and list view dari SSD Tutorial
3. Simple Image Panner and Zoomer v1.1 dari Dynamicdrive

Posting Artikel

Dalam membuat postingan, perhatikan struktur kode di bawah ini :

<div class="product_image">
<div class="pancontainer" data-orient="center" data-canzoom="yes" style="width:150px; height:150px;">
<img border="0" class="item_thumb" src="product_image.jpg" /></div>
<span class="item_price">$00.00</span> </div>
<div class="product_describe">
Descriptions... </div>

Keterangan :
Warna merah : masukkan url gambar produk anda pada kode warna merah diatas. Pilih gambar yang ukuran pixel nya sedang, antara 200 - 300 px.
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.

Shopping Cart

Fitur Shopping Cart masih menggunakan simplecart dari wojodesign.com. Dan hanya support untuk top currency, antara lain : Dollar, Poundsterling dan Euro. Untuk mengganti akun Paypal yang terdapat pada blog demo ini dengan akun Paypal Anda, cari kode dibawah ini :

<script type='text/javascript'>

simpleCart.email = &quot;johnytemplate@gmail.com&quot;;

simpleCart.checkoutTo = PayPal;

simpleCart.currency = USD;

simpleCart.taxRate  = 0.02;

simpleCart.shippingFlatRate = 3.25;

simpleCart.shippingQuantityRate = 1.00;

simpleCart.cartHeaders = [&quot;thumb_image&quot; , &quot;Quantity_input&quot; ,   &quot;Total&quot;, &quot;remove&quot; ];

</script>

Ganti email warna merah diatas dengan email Anda (email yang sudah didaftarkan di Paypal).

Fitur Pendukung

Slider yang saya pasang pada template ini bekerja otomatis berdasarkan label yang Anda masukkan pada kotak HTML/Javascript. Perhatikan gambar di bawah ini :

Dari gambar diatas lihat kolom kotak merah, klik Edit pada widget featured content slider, setelah terbuka jendela baru masukkan atau ketik label yang ingin ditampilkan pada slider, lihat gambar di bawah ini :

Dari gambar diatas saya memasukkan label Electronic yang akan muncul pada slider, Anda bisa ganti sesuai keinginan. Untuk lebih jelasnya silahkan baca tutorial dalam membuat slider ini disini.

Dua navigasi pada template ini semuanya harus memasukkan manual, tidak seperti pada template sebelumnya terdapat satu navigasi khusus untuk halaman statis, meskipun begitu template ini sudah support dengan static page (halaman statis).

Untuk merubah simbol currency dari $ (dollar) menjadi Rp (rupiah) pada widget shopping cart :

1. Cari URL script ini di Edit HTML :
   

   http://kauman.googlecode.com/files/WojosimpleCart-USD.js

   Setelah ketemu ganti dengan URL script berikut :
   

   https://masolis-javascript.googlecode.com/svn/trunk/magstorecart-rupiah.js

2. Langkah selanjutnya, masih pada Edit HTML ganti USD pada kode ini :
   

   simpleCart.currency = USD;

   menjadi 

   simpleCart.currency = IDR;

Terakhir save templates, dan currency anda akan berubah menjadi rupiah. Tapi perlu diingat disini, itu hanya sekedar penggantian currency saja, tidak bisa untuk melakukan checkout atau pembayaran langsung lewat Paypal. Karena Paypal belum menerima Rupiah sebagai alat pembayaran.

Disini sudah saya siapkan dua tombol dibawah gambar produk di homepage yaitu add to cart dan view detail, jika tidak ingin memakai shopping cart sebagai alat transaksi. Anda tinggal rubah tombol add to cart menjadi order dan arahkan ke direct link halaman formulir order yang sudah anda buat, misalnya seperti ini (contoh form ini dibuat menggunakan docs google). Jika anda menggunakan form order untuk transaksi penjualan,  fitur shopping cart tidak terpakai, jadi hapus semua script CSS dan javascript untuk shopping cart pada template ini. Selamat mencoba dan semoga bermanfaat

Sumber : Markolis.com

Free Johny Classicsite Template

Setelah lama admin tidak membagikan Free download Template, Alhamdulillah sekarang di bagikan. Silakan kalu berminat untuk download dan jangan sungkan bersilaturahim dengan komentar di sini . Jangan lupa juga bagikan pada keluarga dan teman-teman yang lain via fasilitas share yang ada di sini ya. Jazakumulloh...

Begitu anda liat template yang saya bagikan ini, anda pasti sudah tahu bahwa template ini saya gunakan pada blog ini. Template ini diberi nama Johny Classicsite sesuai dengan tampilannya seperti template-template blogger klasik jaman dahulu kala.  Template ini saya re-post dari website penyedia website Markolis

Yang jelas template ini sangat ringan, masalah SEO friendly saya tidak berani bilang karena patokan baku sebuah template dikatakan SEO Friendly tiap master blogger juga beda-beda. Tapi paling tidak semua meta tag deskripsi untuk sebuah template bisa dibilang SEO Friendly sudah saya pasang disini. Tidak ada tutorial khusus dalam pemasangan template ini, yang harus Anda lakukan adalah mengganti blog ID untuk mengaktifkan reply pada kotak komentar, caranya masuk ke Edit HTML jangan lupa untuk mencentang kotak Expand Widgets Templates kemudian cari kode berikut :

<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=1226831301029866842&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>

Ganti blog ID warna merah diatas dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :

Fitur lain tidak ada yang sulit, untuk navigasi kedua dalam template ini adalah navigasi page list jadi jika Anda membuat halaman statis akan otomatis muncul disitu. Itu aja dulu, saya sudah menyiapkan satu lagi template baru untuk teman-teman blogger tapi buat besok aja, nanti kalau jadi satu sama artikel ini postingannya jadi sedikit. Udah ya mau kembali bekerja dulu, selamat mencoba dan semoga bermanfaat.

 Demo | Download

Source : Markolis.com

Indonesian template : Red crystal batik

 Irfan's Blog .. 3 kolom, batik, floral, fresh, merah, putih 

Red Crystal is a free blogger template adapted from WordPress with 3 columns and 2 right sidebar. Excellent layout for blogs about animals or girls.

Download this template or View Demo 

Indonesian Batik template

Irfan's Blog 
 3 kolom, adat, batik, cerah, coklat, putih

Indonesian Batik template is a free blogger template with 3 columns, 2 sidebar on the right , , space for ads and footer columns.

Download This template or View demo 

Indonesian template : Tugu Jogja tempo dulu

Irfan's Blog
 2 kolom, coklat, sidebar kiri, simpel,

Template bergaya jogja ini cocok sekali digunakan untuk blog yang mempromosikan wisata jawa terutama kota jogja, dengan latar background tugu jogja tempo dulu, template ini makin berkesan suasana jawanya.

Download Template ini

Indonesian template : Wayang Blogger templates

Irfan's Blog Wayang Blogger templates 2 kolom, coklat

Templates Blogger wayang Indonesia ini saya persembahkan untuk anda para Blogger yang ingin melestarikan budaya Asli Indonesia juga untuk mengenalkan Budaya Wayang pada dunia luar melalui Blog.

Download Template Ini

Indonesian Template Victorian Style

Irfan's Blog, sobat kali ini saya posting template Indonesia ,, template ini disertai dengan aksen batik berwarna coklat tua ..

Download This template or View Demo 

Cara Memilih dan Edit Template Blog Yang SEO Friendly

Irfan's Blog Template blog adalah ibarat pakaian untuk sebuah blog. Secara umum seorang blogger pasti menginginkan tampilan blog yang sebagus-bagusnya. Namun terkadang malah melupakan aspek-aspek SEO on Page. Bagaimanakah tips dan cara memilih template blog yang SEO friendly, seperti apa pula ciri-ciri template blog SEO friendly itu? Ada beberapa hal yang harus kita perhatikan dalam memilih template yang akan digunakan untuk blog kita. Antara memilih template dan mengedit template memiliki keterkaitan, Mengapa? Setiap kita mendownload template kemudian menerapkannya di blog kita, saya yakin sobat semua pasti akan merubah sebagian kode CSS, HTML, maupun kode javascript yang ada, karena itulah maka dalam pembahasan di bawah saya campurkan antara tips memilih template yang baik dan cara mengedit template. http://irfan295-kdc.blogspot.com/

• Hal pertama tentunya adalah ukuran template yang akan dipakai. Semakin ringan suatu template tentu berdampak pula pada semakin ringannnya loading blog. Tentu disukai search engine plus pengunjung pula. Sobat tentu pernah mendownload template bukan? biasanya berformat zip atau rar yang kemudian kita ekstraks. Disini bisa kita lihat ukuran besar template tersebut yang berekstensi .xml. Lihat berapa ukurannya, jika lebih dari 50 kb pertimbangkan lagi untuk memakainya. Belum lagi jika kita masukkan kode-kode autoread more, breadcrumb, tombol share serta widget-widget di sidebar.

• Pilihlah template yang sidebarnya berada di kanan. Ini bertujuan agar crawl web lebih dulu mengindeks postingan kita. Kalaupun harus dipasang widget di sidebar kiri, pastikan yang ringan-ringan saja.

• Buat sobat yang biasa mengganti template pastikan sobat memiliki blog ujicoba/cadangan. (silakan buka artikel cara membuat blog cadangan). Ujicoba dulu template yang dipilih di blog cadangan tersebut sebelum menggunakannya di blog “betulan”. Hal ini agar blog yang betul-betul kita kelola bisa terlihat bagus, optimal dan terlihat rapi.

• Berkaitan dengan hal pada nomer 3 di atas, perhatikan, apakah banyak kode-kode javascript yang terurai di dalam template tersebut. Jika Ya, bisa dipastikan template tersebut berat loadingnya. Kecuali jika kode javascriptnya di hosting di tempat lain. Misalnya di googlecode.com.

• Usahakan background template blog tersebut bukan berupa gambar, tapi berupa kode warna. Kalaupun ingin yang bergambar. Lihat ukurannya, jangan terlalu besar.

• Template memiliki struktur heading yang baik.Template yang bagus memiliki struktur heading tag yang rapi dan terurut mulai dari H1, H2 dan H3. Kita pilih template blog yang memiliki struktir heading tag yang bagus dan tentunya penempatan setiap heading tag tersebut sesuai, suatu misal H1 untuk judul blog.

• Tidak memiliki link keluar yang banyak. Seringkali kita mendownload template, dibagian bawah / footer pasti memuat link-link si pembuat template. Lihat berapa banyak link yang ada. Memang ini berhunbungan etika blogging, namun tidak ada salahnya kita menghapus sebagiannya.

• Warna, ukuran dan jenis font serta backgrund harus serasi alias eye matching dan juga eye catching. Jangan memilih warna yang dapat membuat mata pengunjung blog “silau”. Ukuran dan jenis font juga mesti diperhatikan, jangan terlalu kecil dan jangan terlalu besar. Gunakan font yang familiar, tidak perlu neko-neko.

• Pastikan ada hubungan antara kode CSS dengan HTML. Pernah saya temukan template dengan kode CSS yang full namun tidak berguna alias tidak ada fungsinya. Untuk itu bisa sobat validasi kode CSS dan HTML di situs-situs validator CSS dan HTML yang cukup banyak di luar sana, hehehe. Buat sobat pemula, saya rasa ini tidak harus dilakukan. Karena cukup membingungkan dan bisa berdampak pada tampilan blog. Kita paling tidak mengecek errornya saja tanpa harus memakai kode CSS dan HTML yang dihasilkan mesin validator. Kemudian kita bandingkan dengan template lain. Lalu pilih yang errornya sedikit.