Ini Blogger Store v.2 blogger template terbaik 2012 yang pernah dibuat. Hadir dengan desain segar lebih elegan, sederhana dan segar. Keindahannya bisa Anda lihat dalam pola latar belakang pada tubuh dan konten utama dikombinasikan dengan warna latar belakang yang sesuai.
INSTALL THE TEMPLATE
Download the file, extract file to spesific folder on your computer, login to your blogger account and select one blog that will be installed with this template, click on template menu and point your eyes to upper right corner, you will see Backup/Restore options.. Click that button and select the XML file from your directories and click upload.
CUSTOMIZE THE TEMPLATE
1. Shopping Cart Setting
The code for Shopping Cart setting is appear after opening <head>, it look like :
<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
Replace with your email address.
Replace with your email address.
simpleCart.checkoutTo
It have three payment method options, Paypal, GoogleCheckout and Email method. But for blogger only can using Paypal and GoogleCheckout only because using Email methode it required PHP code.
It have three payment method options, Paypal, GoogleCheckout and Email method. But for blogger only can using Paypal and GoogleCheckout only because using Email methode it required PHP code.
simpleCart.currency
You can set the currency by replace this line with your currency, sample usage if you using Poundsterling Currency:
You can set the currency by replace this line with your currency, sample usage if you using Poundsterling Currency:
simpleCart.currency = GBP; |
List of available currency is located on download folder. and specifically for Indonesian Rupiah you can set to IDR, but it just a fake because Indonesian Rupiah currently not listed on paypal.
simpleCart.cartHeaders
No required any customize here.
No required any customize here.
2. Customize Background and text
This template is support for Advanced Blogger Template Designer and available for 3 customizations:
a. Body Background Color
b. Main Menu Background Color
c. Text Link Color
d. Blog Description Color
e. ShoppingCart Border Color
f. ShoppingCart Background Color
Now lets customize yor template color scheme, click Customize and you will redirect to Blogger Template Designer. You can see the option on screenshot below :
3. Dropdown Menu and Social Menu
I�m using jQuery superfish menu for drowpdown menu, superfish make it have smooth animate.
a. Top Dropdown Menu.
For edit link on top menu, find code like this :
<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
As you know my framework is using Automatic Slider or Featured Content on all my template with JavaScript, this is a new revolutions for blogger.
How to activate the slider?
For default it will showing your latest post, and you can change to showing your post by spesific label/category or showing post from another blog. I�m using two following code for it.
<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> |
and
<script src='/feeds/posts/default?orderby=updated&alt=json-in-script&callback=featured_product' type='text/javascript'/> |
How to make it showing your post by spesific label/category?
<script type="text/javascript" src="/feeds/posts/default/-/YOUR LABEL HERE?orderby=updated&alt=json-in-script&callback=featured_product"></script> |
How to displaying post from another blog?
<script src='BLOG URL/feeds/posts/default?orderby=updated&alt=json-in-script&callback=featured_product' type='text/javascript'/> |
POSTING
After finished with customizable templates now is the time to try to create a post.
Notes : This template is required template post for best result.
1. Create a template post.
Go to Setting and select Post and Comments options, copy the template post bellow to your template post field.
<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. Create a Post
Now lets start to create one test post.
Step 1. Create Product Title
Give the title for this post on Post Title field. Example : Product 1.
Note : this title will used for product name on ShoppingCart, so i suggest to create short title.
Step 2. Create Product Image and Thumbnail
Upload an image as usual, set the field to HTML and copy the image URL, then paste it to your template post, recommended to use square image size ex : 140�140
Example :
<div class="item_image"><img border="0" class="item_thumb" src="http://example.com/product_image.jpg" /></div> |
Step 3. Set The Price
Set your product price using span tag after image.
Example :
<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> |
Step 4. Product Descriptions
Give a description for your product by using div tag.
Example :
<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> |
Step 5. Publish
check back all the code from your post and make sure everything is arranged properly. And whole should look like this
<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> |
And then click publish.
Bagaimana cara mengaktifkan link 'Read more' atau 'More info' pada template blogger store v2 yang berada di bawah gambar produk agar bisa masuk pada halaman penjelasan produk?
4. Kemudian ganti kode di atas dengan kode di bawah ini :
5. Terkhir 'save' dan lihat hasilnya pasti sukses!
Bagaimana cara menghapus tombol read more / more info dan add to cart?
Temukan kode dibawah ini dan hapus (terlebih dahulu centang tanda 'expand widget') :
<b:if cond='data:blog.pageType != "static_page"'>
<a class='item_add' href='javascript:;'>Add to Cart</a>
<b:if cond='data:blog.pageType != "item"'>
<a class='more_info' expr:href='data:post.url' expr:title='data:post.title'>More Info</a>
</b:if>
</b:if>
Mengapa simplecart script di template blogger store v2 tidak berfungsi?
Jawab : Itu karena anda belum memperbaharui url simplecart yang terbaru dari pemiliknya, yaitu dengan mengganti dengan script di bawah ini:
Mengapa tampilan gambar produk dan slide produknya di template blogger store v2 yang saya download tidak tampak jelas dan tidak beraturan atau tidak sesuai dengan contoh demonya?
Jawab : Itu disebabkan karena pada saat pertama kali anda melakukan posting produk di template blogger store v2 dan langsung melihat hasilnya, pada saat itu produk yang anda publish belum cukup minimal 6 produk.
- Masuk ke bagian edit html template anda
- Jangan lupa centang dulu tulisan 'expan widget template' yang ada di bagian kanan atas pada halaman edit html untuk memunculkan kodenya.
- Cari kode di bawah ini dengan menekan Ctrl + F dan paste-kan pada colom find agar mudah menemukannya :
<a class='more_info' href='javascript:;'>More Info</a>4. Kemudian ganti kode di atas dengan kode di bawah ini :
<a class='more_info' expr:href='data:post.url'expr:title='data:post.title'>More Info</a>5. Terkhir 'save' dan lihat hasilnya pasti sukses!
Bagaimana cara menghapus tombol read more / more info dan add to cart?
Temukan kode dibawah ini dan hapus (terlebih dahulu centang tanda 'expand widget') :
<b:if cond='data:blog.pageType != "static_page"'>
<a class='item_add' href='javascript:;'>Add to Cart</a>
<b:if cond='data:blog.pageType != "item"'>
<a class='more_info' expr:href='data:post.url' expr:title='data:post.title'>More Info</a>
</b:if>
</b:if>
Mengapa simplecart script di template blogger store v2 tidak berfungsi?
Jawab : Itu karena anda belum memperbaharui url simplecart yang terbaru dari pemiliknya, yaitu dengan mengganti dengan script di bawah ini:
<script src='http://files.javatemplates.com/js/simpleCart.js'type='text/javascript'/>Jawab : Itu disebabkan karena pada saat pertama kali anda melakukan posting produk di template blogger store v2 dan langsung melihat hasilnya, pada saat itu produk yang anda publish belum cukup minimal 6 produk.
Bagaimana cara posting artikel di Blogger Store V.2 agar gambar produknya tidak melewati batas kotak list produknya? dan Bagaimana juga agar harga produk di template toko onlineBlogger Store V2 bisa terlihat langsung di halaman muka dengan terblog berwarna merah seperti di contoh demonya?
1. Pilih menu 'Posting artikel baru' pada blog anda kemudian klik tombol 'Insert Image' untuk memasukkan gambar ke postingan anda (tentunya gambar produk yang akan anda posting). Sebaiknya lakukan ini terlebih dahulu sebelum memberikan keterangan produk anda.
2. Bila gambar telah di-upload, selanjutnya klik tombol 'HTML' yang ada di posisi kanan atas halaman posting artikel anda (untuk tampilan blogger lama) atau di bagian kiri atas (untuk tampilan blogger baru).
3. Langkah selanjutnya setelah anda masuk pada bagian edit html postingan artikel anda adalah dengan melakukan enter 2 kali (gunanya untuk memisahkan antara kode gambar yang sudah ada dan kode yang akan anda paste seperti di bawah ini). Setelah itu, langsung paste saja code di bawah ini ke dalam baris paling atas halaman HTML postingan artikel anda seperti penjelasan no. 2 di atas (Ingat! Bukan halaman HTML template anda).
<div class="item_image">Tentunya pada saat anda pertama kali masuk pada halaman edit html artikel anda akan menemui code gambar yang sudah anda upload tadi seperti penjelasan no. 1 di atas, misalnya contohnya akan seperti ini setelah anda mem-paste kode di atas (ingat! Contoh kode pada paragraf kedua di bawah hanya contoh. jangan copy-paste ke blog anda karena sudah ada formatnya di blog anda sendiri) :
<img border="0" class="item_thumb" src="product_image.jpg" />
<span class="item_price">$00.00</span>
</div>
<div class="item_Description">
Isi dengan Penjelasan Produkmu DiSini
</div>
<div class="item_image"><div dir="ltr" style="text-align: left;" trbidi="on">
<img border="0" class="item_thumb" src="product_image.jpg" />
<span class="item_price">$00.00</span>
</div>
<div class="item_Description">
Isi dengan Penjelasan Produkmu DiSini
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBlYLFl9FixoMtAkJob6_-6CEuFWnMzz8egSSn4gEpIrXrdd1DUCjd-FsqDgzfIDq88xJYjlO2KbfyPye5juqgoJAKdZihwJfsSsVhwcswtz2YCie7-aoE9Oa61oonodPvSYKizH-k6tOQ/s1600/baju-merah-putih.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBlYLFl9FixoMtAkJob6_-6CEuFWnMzz8egSSn4gEpIrXrdd1DUCjd-FsqDgzfIDq88xJYjlO2KbfyPye5juqgoJAKdZihwJfsSsVhwcswtz2YCie7-aoE9Oa61oonodPvSYKizH-k6tOQ/s200/baju-merah-putih.jpg"width="200" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br /></div>
4. Agar tampilan template Blogger Store V2 anda sesuai dengan yang dicontohkan/demo sumber aslinya, maka langsung copy saja contoh kode berwarna oranye pada paragraf kedua di atas dan paste atau timpakan atau ganti pada kode berwarna oranya paling atas yang berada di paragraf pertama di atas, sehingga jadinya akan seperti ini setelah anda menghapus seluruh kode pada paragraf kedua di atas:
<div class="item_image">Jadi, Ingat! kode pada paragraf kedua di atas harus di hapus semua setelah kode berwarna oranyenya dipindahkan ke kode berwarna oranye yang ada pada paragraf pertama (
<img border="0" class="item_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBlYLFl9FixoMtAkJob6_-6CEuFWnMzz8egSSn4gEpIrXrdd1DUCjd-FsqDgzfIDq88xJYjlO2KbfyPye5juqgoJAKdZihwJfsSsVhwcswtz2YCie7-aoE9Oa61oonodPvSYKizH-k6tOQ/s200/baju-merah-putih.jpg" />
<span class="item_price">$00.00</span>
</div>
<div class="item_Description">
Isi dengan Penjelasan Produkmu DiSini
</div>
src="product_image.jpg'). 5. Terakhir, tinggal kembali ke halaman compose atau penulisan artikel dengan mengklik tombol 'Compose' yang berada di posisi kanan atas halaman posting artikel anda (untuk tampilan blogger lama) atau di bagian kiri atas (untuk tampilan blogger baru). Dan anda tentunya akan menemui halaman postingan anda hanya akan berisi gambar, harga dan tulisan "Isi dengan Penjelasan Produkmu DiSini".Tinggal mengganti harganya dan tulisan tersebut sesuai dengan penjelasan produk yang diinginkan lalu klik 'Publish' atau 'Publikasikan' jika sudah selesai.Kedengarannya prosesnya panjang kan? Tapi, ini hanya terlihat dari penjelasannya saja mengenai cara posting artikel di Blogger Store V.2 yang saya buat sangat detail agar anda mengerti, namun pada praktekkany sangat simpel sebenarnya.
Selanjutnya saya akan menjawab pertanyaan ringan mengenai masalah penggunaan Blogger Store V.2, yaitu Kenapa pada saat pertama kali memposting produk di tempalate Blogger Store V.2 slide gambar flash produknya yang berada di bagian atas tersembunyi atau tidak normal?
Jawabnya: Itu hanya karna anda masih memposting atau menampilkan produk kurang dari sepuluh gambar produk. Bila anda sudah memposting minimal 10 produk tampilannya akan menjadi normal lagi.
Sumber : masterwebpro.blogspot.com
https://belajar-cara-membuat-website.blogspot.com
https://jasa-akuntansi-bandung.blogspot.com/p/jasa-akuntansi.html
https://omega99data.blogspot.com/
https://ronketodiet.blogspot.com/
https://ronmanagedwp.blogspot.com/
