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.
After the template installed succesfully, now it’s time to start a costumizations..
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.
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.
simpleCart.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.
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.
CONCLUSION & DISCLAIMER
In making this template I spent a lot of time and effort. so I hope you appreciate me and did not remove the credit in the footer. I do not give warranty for this template.
If you think this template is useful for you, please give $2 donation for me to buy a cup of coffee so that I can keep working via Paypal to rifkiblogger@gmail.com.
Thanks for using my template !!!
THANK FOR YOUR INFO
Bagaimana cara mengaktifkan tab “more info” pada bawah gambar thumbnail…??
Saya mohon pencerahannya…
Salam.
Hello !
I like this template and I want to use it for my blog (http://bogadimariage.blogspot.com) but I have some problems … you can see them if you visit the website ! I posted some test articles but the layout doesn’t look the same as the demo preview which I saw for this template. I don’t know where the problem is and I don’t know how to fix it.
Could you help me, please ? Thanks a lot !
First problem is that the images from carousel doesn’t apear … what I can do ?
Second is a question … how can I zoom the product images from posts ? Can I put a link to show a bigger image of the products ? How ?
Third … I don’t want to use Paypal, I want the order to come to my email through a form or something else … How can I do it ?
Thank you !
Hi, that’s great for me. And Thanks so much.
But I have one question.. I want to disable button Check Out. Can you show me to do it?
Good day, this template is excellent, as I am from Argentina, I would like to know if there is any way to add paypal and google besides some service as DineroMail chekcout and also wanted to know if you can add the currency of my country in some way.
From already thank you very much
Good evening! I want to congratulate you for this excellent work you ‘ve made and to thank you for this offer!!!
I ‘m encountering a proplem and that is : although I’ve made all the specified changes as long as the currency is concerned (i want Euro) when I choose checkout currency at paypal appears in USD (although in my paypal account Euro is my primary currency)
Do you have any clue of what I should do?
Kindest regards! mariazkeepthinking@gmail.com
I’m having the same problem, in my case I’ve got the template HTML set to GBP, but it shows as USD in the Paypal checkout.
I have not yet played around with this template, but have worked with shopping cart templates in the past. Typically the currency gets cached in your browser. Try clearing your cache or looking at the site in an alternate browser that has not yet seen the site. This should resolve your issue. Good luck!
Lumayan sulit…
Apa karena baru kali ini mencoba pake blogspot ya, jadi kebingungan
noww i will try it,, thanks…
I did all the steps, but the images are not uploaded.
My photos are 140 x 140 pixels
Need i change the size of them? or can i change the script anywhere?
Thank you
thanks for sharing with us..
your template is really awesome..I’ll use this template for my online store
Hi I want to upload a few pics in to the blog but i am not able to understand from where to get the html code for the pics. Can you please help me. I am trying to upload the pics from my picasa album. I really like the lay out of the template.
Thank you
Bagaimana caranya saya dapat memperbesar gambar saat diklik atau saat tersentuh dengan mouse? tolong bantuannya ya. Terima kasih sebelumnya.
4alams@gmail.com
how to input java script at more info and add to chart tab at web..
thks
hi, sy skr menggunakan template ini. terima kasih untuk template kerennya.
tp sy punya beberapa masalah, mohon dibantu.
1. gimana caranya memperbesar gambar ketika gambarnya di klik. sy udah coba menggunakan kode gitu, bisa.. tapi ukuran gambar untuk thumbnailnya malah yg ga sesuai.
2. kenapa setiap page cm muncul 7 post, jadinya ga full gitu..? edit dmn nya y?
terima kasih banyak.
email sy: me.wacko@gmail.com
I love your program and I think I removed a gadget in the layout, because as you can see on my site http://christinabrucefitnessstore.blogspot.com/ the sliding bar is jammed up. Could you please tell me which gadgets should be on the layout?
Products shown too bit , because you only have 3 products, you try to use the 13 products
I love this amazing store.
The issue was the width of the right side column, once I reduced by 10 it now works perfectly. I have now discovered two other issues:
1. The search function is not working.
2. How do I add shipping and tax to the cart with PayPal?
http://christinabrucefitnessstore.blogspot.com/
setelah gw tes
satu postingan cman bsa 1 gambar y
trus kok gambarnya yg d bawah slide lebar2 gitu -_-
liat blog gw bang mohon bantuannya
kamarana ieu mang..!!! simkuring aslina butuh..!!
rockakiller13@gmail.com
We’re sorry, but we were unable to complete your request.
When reporting this error to Blogger Support or on the Blogger Help Group, please:
Describe what you were doing when you got this error.
Provide the following error code.
bX-gcf800
This information will help us to track down your specific problem and fix it! We apologize for the inconvenience.
maksudnya apa yach
thanks for share
But i have one question. I want to add new in the blog ?
Can you show me to do it
Templatenya bagus, cuma karena gratis, sang pembuat ya gak bisa kasih komentar atau bantuan. Template lebih cocok buat pemegang USD bukan IDR. Jadi kalo mau make, ya resiko modifikasi sendiri. Jangan repot2lah, masih banyak template gratis lain yang gak ribet. Saya muter2 modifikasi gak nemu juga, karena pengetahuan HTML saya juga gak sejago Rifki sang pembuat. Good luck for you man.