468x60



Hello my friends!
Do you need a blog to sell your products?
Are you looking for the blogger template, after installation to your blog you can sell your products?
Don't worry...
You can get the awesome blogger template by just entering in this competition.

Blogger Store.v2 Template

This is Blogger Store v.2 the best blogger template ever made.  Comes with more elegant, simple and fresh fresh design. Its beauty can you see in the background pattern on the body and main content combined with appropriate background color.

Blogger Store.v2

What the features of Blogger Store v2 ?

I 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

3. Super-fish Menu.
I've added 2 pieces of drop-down menu, Top Secondary and Primary menu. I use superfish for it because I think super-fish is better and give a softer effect than jQuery sliding menu on blogger store old version.

4. 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 automatically work to displaying product by label or recent product also can display from another source, just need a several setting.

5. 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.

6. 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
This template also have several additional features:

7. Social Bookmark Icon

8. Search Form

9. Ads Space

10. Animated Sponsors Logo

11. Pattern Background.

I hope you like this template..

Installing and Customize Blogger Store v.2.0

INSTALL THE TEMPLATE
Download the file, extract file to specific 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 :

Blogger Template Designer

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&amp;alt=json-in-script&amp;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&amp;alt=json-in-script&amp;callback=featured_product"></script>

How to displaying post from another blog?

<script src='BLOG URL/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;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>

How to post

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.

How you can get it?

Requirements
1. Like our Facebook page.
2. Follow us at Google +.
3. Follow us at Twitter.

Proof
Write your comment with the following proofs,
1. Your Facebook profile URL by which you like our page.
2. Your Google +  profile name by which you like our page.
3. Your Twitter  profile name by which you like our page.

Last Date of Submission
Thursday, January 31, 2013

First three winners will win the Blogger Store.v2 template by lucky draw. We'll announce the Winner names on Friday, February 01, 2013 LIVE !

Best of Luck !


Like This Article Please Take Five Seconds To Share It.



Get Free Daily Updates!

Subscribe us!



WANT TO BE ONE OF OUR GUEST AUTHOR ! We welcome our new authors who wants to share there articles with us. For more details (- CLICK HERE -)