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 !!!
makasi banyak infonya mas
Hi
I currently using your template. It is very cool, nice and I like it !!
But, I am having one problem which is to set the shipping cost,
can you help me??
Thanks
Mohon bantuan gang, gmana caranya memfungsikan “more info” di item product?
thanks
can anyone teach me how..??im getting confuse with the code…
bingung… confuse…
thank you very much
haloooo gans
kenapa slider saya ga ada gambar produk yg muncul ya. malah gambar yg utk no image yg muncul semua
http://www.quickwinsclothing.blogspotcom
Hey i need more explain about this pleas help me
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.
//
mas ganti dengan gambar titlebar situs kami bagaimana??? yang ada di pojok kanan dan kiri