Simplecart: Shop ảo thanh toán bằng Paypal trên Blogspot

Bạn có tài khoản Papal,bạn muốn tạo một gian hàng ngay trên blog.

Với Simplecart,sẽ rất dễ để tạo một widget như vậy ngay trên blog của bạn.

-Trước hết bạn dán đoạn code sau vào pần CSS của template:

<style> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } / remember to define focus styles! / :focus { outline: 0; } / remember to highlight inserts somehow! / ins { text-decoration: none; } del { text-decoration: line-through; } / tables still need ‘cellspacing=”0”’ in the markup / table { border-collapse: collapse; border-spacing: 0; } 

body{ background:#000 ; font:16px "HelveticaNeue-Light", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif; color:#cacaca; } #demoContainer{ width:855px; height:832px; margin:50px auto 0 auto; padding:38px 0 0 49px; background:url(http://demo.simplecartjs.com/images/BGDemoContainer.png) no-repeat; } .simpleCart_shelfItem{ float:left; margin:47px 10px 0 0; width:250px; height:141px; line-height:100%; position:relative; } .item_image{ float:left; margin-right:15px; } .item_name{ text-transform:uppercase; font:bold 12px "Helvetica", Arial, sans-serif; color:#fff; margin-top:15px; } .item_Description{ font-size:11px; padding:5px 0; } .item_price{ font:bold 12px "Helvetica", Arial, sans-serif; color:#fff; float:left; margin:6px 3px 0 0; position:absolute; bottom:13px; left:118px; } .item_thumb{ display:none; } .item_add{ display:block; width:85px; height:25px; text-indent:-9999px; overflow:hidden; background:url(http://demo.simplecartjs.com/images/demoSprite.png) 0 -21px; position:absolute; bottom:8px; right:3px; } .item_add:hover{ background-position:-85px -21px; } .item_add:active{ background-position:-170px -21px; } .simpleCart_items{ clear:both; float:left; margin: 18px 0px 0px 11px; height:170px; position:relative; } .cartHeaders{ display:none; } .itemContainer{ float:left; width:110px; text-align:center; margin-right:25px; position:relative; bottom:0; } .itemname{ font:bold 11px "Helvetica", Arial, sans-serif; color:#fff; text-transform:uppercase; } .itemthumb{ float:none; margin:0; padding-top:5px; } .itemthumb img{ max-width:77px; } .itemQuantity{ float:left; clear:both; margin-top:5px; display:inline; margin-left:30px; } .itemQuantity input{ background:none; border:none; width:21px; height:17px; background:url(http://demo.simplecartjs.com/images/demoSprite.png); text-align:center; color:#fff; font:bold 11px Arial, sans-serif; padding:0 9px; margin:0 5px 0 0; vertical-align:top; padding-top:3px; } .itemQuantity input:focus{ outline:none; } .itemincrement a{ display:block; background:url(http://demo.simplecartjs.com/images/demoSprite.png) -278px -29px; width:7px; height:5px; text-indent:-9999px; overflow:hidden; margin:10px 0 0 0; } .itemdecrement a{ display:block; background:url(http://demo.simplecartjs.com/images/demoSprite.png) -278px -35px; width:7px; height:5px; text-indent:-9999px; overflow:hidden; margin:3px 0 0 0; } .itemTotal{ color:#fff; font:bold 11px Arial, sans-serif; margin:8px 0 0 0; padding:0; clear:both; } #cartTotal{ clear:both; text-align:right; font:11px Arial, sans-serif; text-shadow:none; margin-top:23px; float:left; width:100%; margin-left:-65px; padding: 47px 72px 0px 0px; } #viewFullDemoLink{ clear:both; font:10px Arial, sans-serif; display:block; padding:5px 0 0 0; margin-left:140px; color:#fff; text-decoration:none; } #viewFullDemoLink:hover{ text-decoration:underline; } .simpleCart_empty{ clear:both; display:-moz-inline-box; display:inline-block; color:#fff; font-size:11px; text-decoration:none; padding-left:665px; margin-right:10px; position:relative; top:25px; } .simpleCart_checkout{ display:-moz-inline-box; display:inline-block; background:url(http://demo.simplecartjs.com/images/btnCheckout.png); width:87px; height:24px; text-indent:-9999px; overflow:hidden; position:relative; top:25px; } p{ padding:10px 0; } strong{ font-family:"Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif; font-weight:normal; color:#fff; } h3{ margin:35px 3px 0 3px; font:bold 20px "Helvetica", Arial, sans-serif; color:#fff; text-shadow: rgba(0, 0, 0, 0.796875) 0px -1px 1px; } </style>

-Dán Script sau vào giũa 2 thẻ head.

<script type="text/javascript" src="http://dinhquanghuy.110mb.com/simpleCart.js"></script> <script type="text/javascript"> simpleCart.email = "brett@wojodesign.com"; simpleCart.checkoutTo = PayPal; simpleCart.cartHeaders = [ "name", "thumb_image" , "Quantity_input" , "increment", "decrement", "Total" ]; </script>

Lưu ý:Thay đổi Email trong Script thành Email tài khoản Paypal của bạn.

-Tạo một HTML gadget và dán đoạn code sau vào:

<div id="demoContainer"> <!--Create a div with the class simpleCart_shelfItem--> <div class="simpleCart_shelfItem"> <!--Notice the class names of each tag begin with item_ --> <img src="http://i604.photobucket.com/albums/tt130/metalner/simplexshop/attack-release.png" alt="product 1" title="product 1" class="item_image"/> <h5 class="item_name">Sample DVD</h5> <p class="item_Description"> To create a shelf item, you create a div with a class of “simpleCart_shelfItem”. </p> <span class="item_price">$14.99</span> <a id="s1" href="javascript:;" class="item_add">Add to Cart</a> <span class="item_thumb">http://i604.photobucket.com/albums/tt130/metalner/simplexshop/attack-release.png</span> </div> <!--Create a div with the class simpleCart_shelfItem--> <div class="simpleCart_shelfItem"> <!--Notice the class names of each tag begin with item_ --> <img src="http://i604.photobucket.com/albums/tt130/metalner/simplexshop/evil-empire.png" alt="product 2" title="product 2" class="item_image"/> <h5 class="item_name">Sample DVD 2</h5> <p class="item_Description"> Any field you want for your item can be set by creating a tag with a class of “item_[field-name]” </p> <span class="item_price">$22.99</span> <a id="s2" href="javascript:;" class="item_add">Add to Cart</a> <span class="item_thumb">http://i604.photobucket.com/albums/tt130/metalner/simplexshop/evil-empire.png</span> </div> <!--Create a div with the class simpleCart_shelfItem--> <div class="simpleCart_shelfItem"> <!--Notice the class names of each tag begin with item_ --> <img src="http://i604.photobucket.com/albums/tt130/metalner/simplexshop/the-incredibles.png" alt="product 3" title="product 3" class="item_image"/> <h5 class="item_name">Sample Game</h5> <p class="item_Description"> To create the add to cart button create a tag with the class “item_quantity”. </p> <span class="item_price">$59.99</span> <a id="s3" href="javascript:;" class="item_add">Add to Cart</a> <span class="item_thumb">http://i604.photobucket.com/albums/tt130/metalner/simplexshop/the-incredibles.png</span> </div> <!--Create a div with the class simpleCart_shelfItem--> <div class="simpleCart_shelfItem"> <!--Notice the class names of each tag begin with item_ --> <img src="http://i604.photobucket.com/albums/tt130/metalner/simplexshop/wolverine-3.png" alt="product 4" title="product 4" class="item_image"/> <h5 class="item_name">Sample CD</h5> <p class="item_Description"> If can display info about the cart anywhere on your page. </p> <span class="item_price">$8.99</span> <a id="s4" href="javascript:;" class="item_add">Add to Cart</a> <span class="item_thumb">http://i604.photobucket.com/albums/tt130/metalner/simplexshop/wolverine-3.png</span> </div> <!--Create a div with the class simpleCart_shelfItem--> <div class="simpleCart_shelfItem"> <!--Notice the class names of each tag begin with item_ --> <img src="http://i604.photobucket.com/albums/tt130/metalner/simplexshop/ghostbusters.png" alt="product 5" title="product 5" class="item_image"/> <h5 class="item_name">Sample CD 2</h5> <p class="item_Description"> A class of simpleCart_total, will display the cart total value. </p> <span class="item_price">$8.97</span> <a id="s5" href="javascript:;" class="item_add">Add to Cart</a> <span class="item_thumb">http://i604.photobucket.com/albums/tt130/metalner/simplexshop/ghostbusters.png</span> </div> <div id="cartTotal"> <strong>Total: </strong><span class="simpleCart_total">$43.47</span> </div> <!--Add a div with the class of simpleCart_items to display what is in the user's cart--> <div class="simpleCart_items"></div> <!--use a class of simpleCart_empty to empty the cart and simpleCart_checkout to checkout --> <a href="javascript:;" class="simpleCart_empty">Empty Cart</a> <a href="javascript:;" class="simpleCart_checkout">Checkout</a> <!--End #demoContainer--> </div>

Chỉnh sửa thông tin trong widget để phù hợp với trang của bạn.

Save template và kiểm tra lại là hoàn thành.