[How To] Make Online Store With Bloggerdotcom

Here is step by step to make your blog @ blogspot.com template to be online store

1. Download simple chart from Wojogroup here

2. Upload your js file, simply upload it @http://www.yourjavascript.com/ and get your link js file

3. Copy the following code below and paste before <b:skin><![CDATA[

<!--Include the SimpleCart(js) script-->
<script charset='utf-8' src='YOUR JS UPLOADED FILE' type='text/javascript'/>


<!--Make a new cart instance with your paypal login email-->
<script type='text/javascript'>
simpleCart = new cart(&quot;yourpaypalemail@blablabla.com&quot;);
</script>

Save your template...



4. Copy the following CSS code, and paste it before ]]></b:skin>

/* Your Cart */
.cartHeaders,.totalRow{display:none;}
.simpleCart_items{
overflow-y:auto;
overflow-x:hidden;
height:324px;
width:243px;
margin-bottom:20px;
}
.itemContainer{
clear:both;
width:229px;
padding:11px 0;
font-size:11px;
}
.itemImage{
float:left;
width:60px;
}
.itemName{
float:left;
width:85px;
}
.itemPrice{
float:left;
width:85px;
color:#418932;
}
.itemQuantity{
float:left;
width:33px;
margin-top:-12px;
vertical-align:middle;
}
.itemQuantity input{
width:20px;
border:1px solid #ccc;
padding:3px 2px;
}


.itemTotal{
float:left;
color:#c23f26;
margin-top:-6px
}

Save your template !



5. Try to post a product like these sample HTML format :

<center>
<img src="http://sites.google.com/site/angga123site/redShoe.jpg" alt="Red Shoe" />
Price : $50
Name : Red Shoe
Details : Bla.. bla.. bla
<a href="#" onclick="simpleCart.add('name=Red Shoe','price=50','image=http://sites.google.com/site/angga123site/redShoethumb.jpg');return false;"> add to cart</a>


<hr>
<img src="http://sites.google.com/site/angga123site/goldShoe.jpg" alt="Gold Shoe" />
Price : $70
Name : Gold Shoe
<a href="#" onclick="simpleCart.add('name=Gold Shoe','price=70','image=http://sites.google.com/site/angga123site/goldShoethumb.jpg');return false;"> add to cart</a>


<hr>
<img src="http://sites.google.com/site/angga123site/blackGold.jpg" alt="Black Gold Shoe" />
Price : $58
Name : Black Gold
<a href="#" onclick="simpleCart.add('name=Black Gold','price=58','image=http://sites.google.com/site/angga123site/blackGoldthumb.jpg');return false;"> add to cart</a>


</center>

Publish your post !


6. Create a sidebar widget shop-chart

Go to Layout - Page Element - Add A Gadget - Choose HTML / Javascript
Copy and paste this code into your widget

<!--Add a Div with the class "simpleCart_items" to show your shopping cart area.-->
<div class="simpleCart_items">
</div>




TOTAL : <div class="simpleCart_total"></div>
<span class="simpleCart_quantity"></span> items
<br/>
<br/>
<!--Here's the Links to Checkout and Empty Cart-->
<center>
<a href="#" class="simpleCart_empty">Empty cart </a> |
<a href="#" class="simpleCart_checkout">Checkout</a></center>

Done !


source: http://angga-weblog.blogspot.com/2009/07/online-store-blogger-blogspot-with.html