Demo Download
Author : Rifki
What the features of Blogger Store v2 ?
Added some new features that do not exist in previous versions, and here the features you can find on this template.1. SimpleCart.js v2.2.2.
This template still using SimpleCart.js v.2.2.2 by The Wojo Group as ShoppingCart framework. Since I did some editing on this script, now you can using Indonesian Rupiah (IDR) for the currency. But it’s just a fake because Indonesian Rupiah currently not listed on Paypal.
2. Animated ShoppingCart
I added a little animation effects on shopping cart, at default position he would not be visible and show only the total item and the total price and will be visible if you click on shopping cart menu. It will further reduce the use of space on your blog page
2. Superfish Menu.
I’ve added 2 pieces of dropdown menu, Top Secondary and Primary menu. I use superfish for it because I think superfish is better and give a softer effect than jQuery sliding menu on blogger store old version.
3. Automatic Featured Content with jQuery Carousel Fred.
As my framework i always using automatic methode for all of my template. and specially for Blogger Store v2.0 I’m using Automatic featured content from jQuery Crausel Fred v.4.5.2, this is automaticly work to displaying product by label or recent product also can display from another source, just need a several setting
4. Grid and List Style post integrated with jQuery Plugin.
This is a great one !! you will see two view style on this template, default is Grid style and will be change to List style if you click switcher button. This feature is integrated with jQuery Cookie Plugin, so the visitor can see style of the last time they visited.
5. Advanced Blogger Template Designer Support
This feature gives you flexibility to customize the background and color of template on Template Designer, so you can get unlimited color and unlimited font for your template, available for :
- Body Background Color
- Main Text Color
- Font Style and Size
- Text Link Color
- Background Menu Color
- Background and border for Shopping Cart Color
6. Social Bookmark Icon
7. Search Form
8. Ads Space
9. Animated Sponsors Logo
10. Pattern Background.
Installing and Customize Blogger Store v.2.0
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 SettingThe 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> |
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; |
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> |
<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> |
<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> |
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> |
<script src='/feeds/posts/default?orderby=updated&alt=json-in-script&callback=featured_product' type='text/javascript'/> |
<script type="text/javascript" src="/feeds/posts/default/-/YOUR LABEL HERE?orderby=updated&alt=json-in-script&callback=featured_product"></script> |
<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> |
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> |
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> |
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> |
More Informations and Disclaimer Please Visit Blogger Store V2 Author
0 komentar:
Posting Komentar