Kamis, 26 April 2012

Panduan Instal Blogger Store v.2.0

Instal dan Sesuaikan Blogger Store v.2.0

INSTAL TEMPLATE

Unduh file tersebut, ekstrak file ke folder spesifik pada komputer Anda, login ke account blogger anda dan pilih salah satu blog yang akan dipasang dengan template ini, klik pada menu template dan menunjuk mata Anda ke sudut kanan atas, Anda akan melihat pilihan Cadangkan/Pulihkan. Klik tombol tersebut dan pilih file XML dari direktori Anda dan klik upload.


Setelah template berhasil diinstal, sekarang saatnya untuk memulai kustomisasi.

SESUAIKAN TEMPLATE

1. Setelan Shopping Cart
Kode untuk pengaturan Shopping Cart muncul setelah membuka <head>, terlihat seperti:

<script type='text/javascript'>
//<![CDATA[
/* SIMPLE CART SETTING
>>>>>>>>>>>>>>>>>>>>>>>>*/
simpleCart.email = 'rifkiblogger@gmail.com';
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;
simpleCart.cartHeaders = ['name','thumb_image','Quantity_input','increment''decrement','Total'];
//]]>
</script>



simpleCart.email
Ganti dengan alamat email Anda.
simpleCart.checkoutTo
Ini memiliki pilihan tiga metode
pembayaran, Paypal, GoogleCheckout dan metode Email. Tapi bagi blogger hanya bisa menggunakan Paypal dan GoogleCheckout hanya karena menggunakan metode Email itu diperlukan kode PHP.

simpleCart.currency
Anda dapat mengatur mata uang dengan mengganti ini sejalan dengan mata uang Anda, penggunaan sampel jika Anda menggunakan mata uang Poundsterling:
simpleCart.currency = GBP;
 

Daftar mata uang yang tersedia terletak pada folder download. dan khusus untuk Rupiah Indonesia Anda dapat mengatur untuk IDR, tapi itu hanya palsu karena Rupiah Indonesia saat ini tidak terdaftar di paypal.

simpleCart.cartHeaders
Tidak diperlukan setiap menyesuaikan sini.

2. Sesuaikan Latar Belakang dan teks
Template ini adalah dukungan untuk Designer Template Lanjutan Blogger dan tersedia untuk 3 kustomisasi:
a. Tubuh Warna Latar Belakang
b. Menu Utama Warna Latar Belakang
c.
Blog Description Color
d. Text Link Warna
e. ShoppingCart Border Color
f. ShoppingCart Latar Belakang
Warna
 

Template
Latar belakang
Sesuaikan lebar
Tata Letak
Tingkat lanjut:(Latar, Teks Laman, Deskripsi Blog, Link, Menu Background, Shopping Cart Background, Shopping Cart Border, Tambahkan CSS)


Sekarang mari kita menyesuaikan skema Menunjuk Template warna, klik Ubahsesuaian dan Anda akan mengarahkan ulang ke Blogger Template Designer. Anda dapat melihat pilihan pada gambar di bawah:





3. Dropdown Menu dan Social Menu
Saya menggunakan jQuery Superfish menu untuk menu drowpdown, Superfish membuatnya memiliki animasi halus.
a. Top Dropdown Menu.
Untuk edit link pada menu atas, cari kode seperti ini:


<ul id='top-nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Category</a>
    <ul class='sub-menu'>
    <li><a href='#'>Category 1</a></li>
    <li><a href='#'>Category 2</a></li>
    <li><a href='#'>Category 3</a></li>
    </ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>About</a></li>
</ul>

b. Main Dropdown Menu.


<ul class='nav'>
<li><a class='current' href='/'>Home</a></li>
<li><a href='#'>Product Category</a>
    <ul>
    <li><a href='#'>Camera</a></li>
    <li><a href='#'>Gadget</a></li>
    <li><a href='#'>Electronic</a></li>
    <li><a href='#'>Phone</a></li>
    </ul>
</li>
<li><a href='/p/sample-page.html'>Sample Page</a></li>
<li><a href='#'>How To Use ?</a></li>
<li><a href='#'>Get it !</a></li>
</ul>

c. Social Menu


<ul id='top_social'>
<li class='social_facebook'>
<a href='#' tooltip='facebook'><span>facebook</span></a></li>
<li class='social_twitter'>
<a href='#' tooltip='twitter'><span>twitter</span></a></li>
<li class='social_linkedin'>
<a href='#' tooltip='linkedin'><span>linkedin</span></a></li>
<li class='social_rss'>
<a href='#' tooltip='linkedin'><span>linkedin</span></a></li>
</ul>


4. Featured Content
Seperti yang Anda ketahui kerangka kerja saya menggunakan
Automatic Slider atau Featured Content pada semua template saya dengan JavaScript, ini adalah revolusi baru untuk blogger.

Cara mengaktifkan slider?
Untuk default akan menampilkan posting terbaru Anda, dan Anda dapat mengubahnya untuk menampilkan posting Anda dengan label spesifik / kategori atau menampilkan posting dari blog lain. Saya menggunakan dua kode berikut untuk itu.


<script type='text/javascript'>
//<![CDATA[
random = true;
product_image = new Array();
product_image[0] = "/noimage.png"; // Image URL for product wich have no a thumbnail.
product_image_width = 110; // Product image width.
product_image_height = 110; // Product image height.
product_image_number = 9; // Value to show item.
//]]>
</script>


dan


<script src='/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=featured_product' type='text/javascript'/>

Bagaimana cara menunjukkan posting Anda dengan spesifik di lable/category?
<script type="text/javascript" src="/feeds/posts/default/-/YOUR LABEL HERE?orderby=updated&amp;alt=json-in-script&amp;callback=featured_product"></script>
Bagaimana cara menampilkan posting dari blog lain?
<script src='BLOG URL/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=featured_product' type='text/javascript'/>

POSTING

Setelah selesai dengan template disesuaikan kini saatnya untuk mencoba membuat posting.
Catatan: template ini diperlukan posting template untuk hasil terbaik.

1. Create a template post.

Pergi ke Setelan dan pilih opsi Pos dan komentar, salin dibawah posting template untuk bidang post template.



<div class="item_image">
<img border="0" class="item_thumb" src="product_image.jpg" />
<span class="item_price">$00.00</span>
</div>
<div class="item_Description">
Descriptions...
</div>




 2. Buat sebuah Post
Sekarang mari kita mulai untuk membuat satu posting uji.
Langkah 1. Buat Judul Produk
Berikan judul untuk posting ini pada bidang Judul Posting. Contoh: Produk 1.
Catatan: judul ini akan digunakan untuk nama produk pada ShoppingCart, jadi saya menyarankan untuk membuat judul pendek.
Langkah 2. Buat Gambar Produk dan
Thumbnail
Upload gambar seperti biasa, mengatur lapangan untuk HTML dan salin URL gambar, kemudian paste ke posting template Anda, disarankan untuk menggunakan mantan image ukuran persegi: 140 × 140
 Contoh:

<div class="item_image">
<img border="0" class="item_thumb" src="http://example.com/product_image.jpg" />
</div>

Langkah 3. Set Price
Menetapkan harga produk Anda menggunakan tag span setelah gambar.

contoh:
<div class="item_image">
<img border="0" class="item_thumb" src="http://example.com/product_image.jpg" />
<span class="item_price"> $ 00,00 </ span>
</ div>

Langkah 4. Deskripsi Produk
Berikan keterangan untuk produk Anda dengan menggunakan tag div.
contoh:
<div class="item_Description">
Mauris sit amet orci arcu, nec imperdiet QUAM. Praesent luctus orci sit amet lectus accumsan id auctor Purus rhoncus. Dalam Lorem dui, Bibendum sit amet tempor vitae, tincidunt eu nulla.
</ div>

Langkah 5. menerbitkan
Periksa kembali semua kode dari posting Anda dan memastikan semuanya diatur dengan benar. Dan keseluruhan akan terlihat seperti ini.




<div class="item_image">
<img border="0" class="item_thumb" src="http://example.com/product_image.jpg" />
<span class="item_price">$00.00</span>
</div>
<div class="item_Description">
Mauris sit amet orci arcu, nec imperdiet quam. Praesent luctus orci sit amet lectus accumsan id auctor purus rhoncus. In lorem dui, bibendum sit amet tempor vitae, tincidunt eu nulla.
</div>


Dan kemudian klik Publikasikan.


CONCLUSION & DISCLAIMER

Dalam membuat template ini saya menghabiskan banyak waktu dan usaha. jadi saya harap Anda menghargai saya dan tidak menghapus kredit di footer. Saya tidak memberikan garansi untuk template ini.
Jika Anda pikir template ini berguna untuk Anda, silakan memberikan donasi minimal $2
ke akun Paypal: "rifkiblogger@gmail.com", untuk membelikan secangkir kopi dan roti kepada Guru saya sehingga beliau bisa tetap bekerja.
Terima kasih untuk menggunakan template saya!