Share : template bán hàng đầy đủ có cả tin tức

Phát triển dựa trên 1 template của mas template v1- độ ổn định chỉ là tương đối  xem demo
http://crytalsoga.blogspot.com/
Template bán hàng dành cho blogspot đầy đủ chức năng nhất  bao gồm :
-trưng bày giá sản phẩm
-giỏ hàng
-thanh toán bằng paypal (bỏ qua vì ở Việt Nam ít người dùng)
- mục tin tức cửa hàng - cái này đặc biệt thêm vào vì hầu hết template bán hàng trên mạng share đều không có

1- cài đặt  import template vào bình thường 
2- các widget - quan trọng

 2-a widget hỗ trợ online -dễ nhất- ở đây là yahoo 

  thêm widget->html chèn mã

<div style="margin-left:50px;"><a border="0" href="ymsgr:sendim?shimi@ymail.com"><img border="0" src="http://opi.yahoo.com/online?u=shimi@ymail.com&amp;t=14" /></a>
</div>
<br/>

2-b widget giỏ hàng và link đến giỏ hàng 

        <style>

.hudbtn.primary{
    border-color:#3D7530;
    background: #97c865; /* Old browsers */
    background: -moz-linear-gradient(top,  #97c865 0%, #44933d 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#97c865), color-stop(100%,#44933d)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #97c865 0%,#44933d 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #97c865 0%,#44933d 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #97c865 0%,#44933d 100%); /* IE10+ */
    background: linear-gradient(top,  #97c865 0%,#44933d 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#97c865', endColorstr='#44933d',GradientType=0 ); /* IE6-9 */
    -webkit-box-shadow:inset 0 1px 0 #D8E994;
    -moz-box-shadow:inset 0 1px 0 #D8E994;
    box-shadow:inset 0 1px 0 #D8E994;
    color:#fff;
}
.hudbtn.primary:hover{
    background: #91bf61; /* Old browsers */
    background: -moz-linear-gradient(top,  #91bf61 0%, #3f8738 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#91bf61), color-stop(100%,#3f8738)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #91bf61 0%,#3f8738 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #91bf61 0%,#3f8738 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #91bf61 0%,#3f8738 100%); /* IE10+ */
    background: linear-gradient(top,  #91bf61 0%,#3f8738 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91bf61', endColorstr='#3f8738',GradientType=0 ); /* IE6-9 */
}
.hudbtn.primary:active{
    background: #3f8738; /* Old browsers */
    background: -moz-linear-gradient(top,  #3f8738 0%, #91bf61 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f8738), color-stop(100%,#91bf61)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #3f8738 0%,#91bf61 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #3f8738 0%,#91bf61 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #3f8738 0%,#91bf61 100%); /* IE10+ */
    background: linear-gradient(top,  #3f8738 0%,#91bf61 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f8738', endColorstr='#91bf61',GradientType=0 ); /* IE6-9 */
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;
}
.cartInfo:hover{
    background-color:#e8eaed;
}
.cartInfo.open{
    background-position:-218px -26px;
}
.left{
float:left;}
.right{
float:right;}
#cartPopover{
float:left;
height:auto;
}
.simpleCart_quantity{
float:left;
font-weight:bolder;
}
.simpleCart_total{
font-weight:bolder;

}
</style>

<div style="float:left;width:230px;height:50px;margin-bottom:10px;">
        <div style="float:left;margin:5px">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpQuhs62S2_Jc9xZvivc9bGYTEk8ob9xP3wSbpeH5upNiS5HKFp0AUooEwM1yeImEa5RyFhc5g-LqKuFMBxnuUrO2CDwjISvi5F4B2xNZxNJDwRGb7jIQ1E5_5IxXWAoR8sJ7VIbUm/s600/f.png" height="40px" width="40px"/>
        </div>
<div style="float:left;width:170px;height:50px;margin-left:5px;">
        <div class="cartInfo" id="cartInfo" ></div>
            <div id="cartPopover">
                    <div id="cartData" class="clearfix" style="margin:5px;">
                                                 <div class="left" >
                                <strong>Hiện Bạn Có:    </strong>
                                </div>                <div class="left">
                                <span class="simpleCart_quantity" style="color:RED"></span>
                                                                </div>
                                                                                 <div class="left" >
                                <strong> Sản Phẩm    </strong>
                                </div>
                                                              <br/>   
                                                              <br/>   
                                       <div class="left"><strong>Tổng:   </strong><span class="simpleCart_total" style="color:RED"></span>
                               
                                                        </div>
                    </div>
     </div>

</div>
</div>
<div style="float:left;width:230px;margin-bottom:5px;">
                    <div id="popoverButtons" class="clearfix" style="margin-bottom:5px;">
                        <a href="http://crytalsoga.blogspot.com/p/gio-hang.html" class="hudbtn left">Chi Tiết Hàng Bạn Chọn </a>
                        <a href="#" class="simpleCart_checkout hudbtn right">Liên Hệ </a>
                    </div>
</div> 

 2 -b2 chi tiết giỏ hàng 

đây là link http://crytalsoga.blogspot.com/p/gio-hang.html  đến chi tiết giỏ hàng của  bạn  ,

bạn tạo 1 page hay 1 trang page hay bài viết  rồi lấy link  ,nội dung trong page hay bài viết tạo ra sẽ chứa mã html như sau :

<style>
  .simpleCart_items table{
   border:1px solid #ccc;
  }
  .simpleCart_items th{
   color:#333;
   text-align:left;
   padding:10px 30px;
   border-bottom:1px solid #ccc;
   background: #ededed;
   background: -moz-linear-gradient(top,  #f7f7f7 0%, #ededed 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#ededed));
   background: -webkit-linear-gradient(top,  #f7f7f7 0%,#ededed 100%);
   background: -o-linear-gradient(top,  #f7f7f7 0%,#ededed 100%);
   background: -ms-linear-gradient(top,  #f7f7f7 0%,#ededed 100%);
   background: linear-gradient(top,  #f7f7f7 0%,#ededed 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ededed',GradientType=0 );
  }
  .simpleCart_items td{
   padding:10px 30px;
   vertical-align:middle;
   border-bottom:1px solid #ccc;
  
  }
  .item-image,
  .item-image img{width:72px;}
  .item-name{width:50%;width:300px;}
  .item-quantity,
  .item-quantity input{
   width:30px;
   text-align:center;
  }
  .item-price,
  .item-subtotal{width:50px;}
.simpleCart_grandTotal{color:RED;font-width:bolder;font-size:16px;margin-right:20px;}
 </style>

 <br />
<div class="simpleCart_items">
</div>
<h3>
Tổng Tiền </h3>
<span class="simpleCart_grandTotal"></span>
<a class="simpleCart_empty" href="javascript:;">Empty Cart</a>
<br />
<div class="right">
<!-- AddThis Button BEGIN -->

<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_print" href="http://www.blogger.com/null"></a>
<a class="addthis_button_preferred_2" href="http://www.blogger.com/null"></a>
<a class="addthis_button_preferred_3" href="http://www.blogger.com/null"></a>
<a class="addthis_button_preferred_4" href="http://www.blogger.com/null"></a>
<a class="addthis_button_compact" href="http://www.blogger.com/null"></a>
<a class="addthis_counter addthis_bubble_style" href="http://www.blogger.com/null"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-503455e41cac14ed" type="text/javascript"></script>
<!-- AddThis Button END -->
</div>

3- phần show sản phẩm trên trang chủ 
 widget ->html ->sản phẩm nổi bật :

<script src="http://webvn20.googlecode.com/files/tooltipimage.js" type="text/javascript"></script>
<style>
#preview{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:5px;
    display:none;
    color:#fff;
    }
    </style>
<script type='text/javascript'>
//<![CDATA[
   imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxWW-cPuUbX6C29JE31vpP3vLORHzSagz7vIWKSihOETznfvww0jRqocWqRdex3tJuzzlWVzNIQ05LV29IycmYXVz8a3pWpNH4rkv0h3NCF1rMBoS9wL_TnjY5taBaeG9BfJRub8x0h0M/s320/no_image_book.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 1000;
summaryTitle = 25;

numposts = 8;
numposts1 = 8;
numposts2 = 6;


function removeHtmlTag(strx,chop){
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
        if(s[i].indexOf(">")!=-1){
            s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

        }
    }
    s =  s.join("");
    s = s.substring(0,chop-1);
    return s;
}




function showrecentposts5(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts1; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
        }
      
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                pcm = entry.link[k].title.split(" ")[0];
                break;
              }
        }
      
        if ("content" in entry) {
              var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = "";
      
        postdate = entry.published.$t;
   
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
   
    s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
        if(parseInt(m)==month[u2]) {
            m = month2[u2] ; break;
        }
    }

   
    //var daystr = (showPostDate) ? '<i><font color="'+acolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";

var postt='<div class="post hentry simpleCart_shelfItem">';
postt=postt+'<div class="post-body entry-content"><h3 class="post-title entry-title"><a href="'+posturl +'"><span class="item_name">'+posttitle+'</span></a></h3>';
postt = postt+ '<a href="'+img[i]+'" class="preview" title="'+posttitle+'"><img   width="145px" height="145px;" src="'+img[i]+'" class="postthumb item_image" alt="gallery thumbnail"/></a>'+ postcontent+'</div><div style="clear: both;"></div><a class="order" href="'+posturl+'" type="button">Xem Chi Tiết</a></div>';

    document.write(postt);

    j++;
}

}

 //]]>
</script>
<script>
                                     document.write("<script src=\"http://crytalsoga.blogspot.com/feeds/posts/default/-/categories?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");
                                 </script>

thay link bằng blogspot của bạn .
còn muốn show 1 lọat sản phẩm thuộc 1 categories ví dụ ở đây là nokia (template của mình là HTML5) trong widget -> html

<script>
                                     document.write("<script src=\"http://crytalsoga.blogspot.com/feeds/posts/default/-/Nokia?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");
                                 </script>

4- mẫu để post 1 sản phẩm

<table class="pro_list_brief"><tbody>
<tr><td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4pIKadaP4VQQ6gz9ryRGuQ1HPXH3sKeZPPQUxpWB_ABxKUhjDAjW7oGDY18LbA9fJzInwkcjgEO8tqDefzE8qUx5u7opl7yy6tmNcPfkapA2GyiBz4n9cb8saM-1jYCBjzCjrax8k/s1600/jow1334823850.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="item_image postthumb" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4pIKadaP4VQQ6gz9ryRGuQ1HPXH3sKeZPPQUxpWB_ABxKUhjDAjW7oGDY18LbA9fJzInwkcjgEO8tqDefzE8qUx5u7opl7yy6tmNcPfkapA2GyiBz4n9cb8saM-1jYCBjzCjrax8k/s320/jow1334823850.jpg" width="210" /></a></div>
</td>
<td><div class="tensanpham">Black berry
</div>
<br />
<table class="pro_list"><tbody>
<tr>
        </tr>
<tr>
                   <td class="row"><span class="fea_title">Đánh giá hình thức:</span></td>
                   <td class="row">97%</td>
        </tr>
<tr>
                   <td class="row"><span class="fea_title">Khuyễn mãi:</span></td>
                   <td class="row">97%</td>
        </tr>
<tr>
                   <td class="row"><span class="fea_title">Phụ Kiện:</span></td>
                   <td class="row">97%</td>
        </tr>
<tr>
                   <td class="row"><span class="fea_title">Tình trạng:</span></td>
                   <td class="row">99%</td>
        </tr><tr>
                   <td class="row"><span class="fea_title">Kho Hàng:</span></td>
                   <td class="row">Còn Hàng</td>
        </tr>
<tr><td class="row"><span class="item_price">1,000,000 VND</span></td>
       <td class="row"><a class="item_add" href="javascript:;" style="margin-top: 0px;">Mua Hàng</a></td>
       </tr>
</tbody>      </table>
</td></tr>
</tbody></table>
<ul class="tabs">
<li><span href="#tab1">Thông số kỹ thuật</span></li>
<li><span href="#tab2">Bài Viết</span></li>
<li><span href="#tab3">Hình Ảnh</span></li>
<li><span href="#tab4">Video</span></li>
</ul>
<div class="tab_container">
<div class="tab_content" id="tab1">
Chua co noi dung gi Ve thong so ky thuat
</div>
<div class="tab_content" id="tab2">
<br />
Chua co noi dung gi Ve bai viet
     </div>
<div class="tab_content" id="tab3">
<br />
Chua co noi dung gi Ve hinh anh
</div>
<div class="tab_content" id="tab4">
<br />
Chua co noi dung gi Video
</div>
</div>

5- mục tin tức

thì chỉ cần bạn post bài  gắn labels = news là template tự nhận

6 link download 
 http://www.mediafire.com/view/h9w7dowdbad763k/sogacrytal_shimivnblogspot.xml

7 bonus thêm jquery chạy tự động show hàng 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>


<style type="text/css">
#slidearea {
height: 128px;
overflow: hidden;
margin: 0px 0px 0 0px;
position: relative;
width:936x;
}
#gallerycover {
overflow: hidden;
margin: 5px 24px 0 24px;
width: 936px;
}
.mygallery {
overflow: hidden;
visibility: visible;
position: relative; z-index: 2;
left: 0px;
width: 936px;
}
.mygallery ul {
margin:0;
padding:0;
position: relative;
list-style:none;
list-style-type: none;
z-index: 1;
width: 2700px;
left: -1620px;
}
.mygallery ul li {
padding:0;
margin:0;
list-style:none;
overflow: hidden;
float: right;
width: 150px;
height: 128px;
}
.sidim {
width: 150px;
height: 100px;
}
.prevb {
float: left;
width: 15px;
height: 27px;
z-index: 200;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4A0CzN7Ek39GzqDEf9QHdVS2Dl3iim0CZxlHwnkfucE7fgB56QUzZdKy1AyA8xgmAj6dmXlTa0WQ4qNdR3nSETQf25rGuzzKLDgX-wSkhNT9tz5EMyqPf46QE-thPoWCfDZQBRADV/s1600/prev.png)!important;
position: absolute;
left: 6px;
bottom: 86px;
}
.nextb {
float: right;
width: 15px;
height: 27px;
z-index: 200;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinI2Ch5vdPHoCMhY2F65sebQBbep92Pr-C2txWioYsSsLwOuS03lNfNCZlNnJM3MBJANzCi7sXBHF_mJz09_Jajh9haApAO4B1cHxeuWUYLx9Z9_IF29_xOH6629XognYBcIG2S2d-/s1600/next.png)!important;
position: absolute;
right:6px;
bottom: 86px;
display: block;
}
</style>

<script src='http://webvn20.googlecode.com/files/slide-mygallery.js' type="text/javascript"></script>

<script stype="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".nextb",
btnPrev: ".prevb",
visible: 6,
auto: 3000,
speed: 1000,
easing: "backout"
});
});
</script>

<div id="slidearea">
<div id="gallerycover">
<div class="mygallery">
<ul>
<script type="text/javascript">
var mode = "single";
var g_numposts = 10;
var g_numcontents = 15;
var g_label="categories";
var homepage="http://crytalsoga.blogspot.com/";
</script>

<script type="text/javascript">

function mygallery(json) {
    img  = new Array();
      for (var i = 0; i < g_numposts; i++) {
          var entry = json.feed.entry[i];
          var posttitle = entry.title.$t;
          var posturl;

        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
        }
                     
        if ("content" in entry) {var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {var postcontent = entry.summary.$t;}
        else  postcontent = "";
    s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
   
    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {img[i] = d;}
        else {img[i]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinin-r4gdWdaEmCB04TYwQ2sscdywZLB95ZtsMc4khhGQ6clgQlYaUV26MUX2VGgCmrnva8XYLLaphdsWhQxcC1zpQjSywoPJbSpPdbhbvIwoTRd8CwEQQkz16mq_yw1nkindkItzyaFE/s400/noimage.png";}

    var list_mygallery = '<li><a href="'+posturl+'"><img class="sidim" src="'+img[i]+'" /></a></li>';

    document.write(list_mygallery);  
    }
   
}

if (mode=="all") {
document.write("<script type=\"text/javascript\" src=\""+homepage+"/feeds/posts/default?max-results="+g_numposts+"&alt=json-in-script&callback=mygallery\"><\/script>"); }
if (mode=="single") {
document.write("<script type=\"text/javascript\" src=\""+homepage+"/feeds/posts/default/-/"+g_label+"?max-results="+g_numposts+"&alt=json-in-script&callback=mygallery\"><\/script>"); }


</script>
</ul>
</div>
</div>
<a class="prevb" href="#"></a>
<a class="nextb" href="#"></a>

</div>

<div class='clear'></div>

*** các class màu đỏ là không được thay đổi- nếu không sẽ không hiển thị,
**thay thế link http://crytalsoga.blogspot.com/ bằng link blogspot của bạn .
* tải về các file javascript đề phòng link die bất chợt
data để test
https://drive.google.com/file/d/0B5QGw-S27-uvSnREelFRUjZ2RWc/edit?usp=sharing