SHARE :
TEMPLATE BÁN HÀNG ĐẦY ĐỦ CÓ CẢ TIN TỨC
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&t=14" /></a>2-b widget giỏ hàng và link đến giỏ hàng
</div>
<br/>
<style>2 -b2 chi tiết giỏ hàng
.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/AVvXsEh2CoZxyGNQUXav_JjcviPgNlSsSjKDP6GyO0WHO7lwVfNSCGIIUshHcFoNpxxnKU3RgESGUK44MUaRgHzxj2rpIzvnIEHeSd93pDyiGkQb6ez6TqHDB8YDqPn5Rjf-xmMRqJFQdmXz/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>
đây là link http://crytalsoga.blogspot.com/p/gio-hang.html đến chi tiết giỏ hàng của bạn ,
<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/AVvXsEgowGgoNTrpnaajrVfgP-eICRwkSPJ038JwC7CkayQEVax3LKROIfuWD-gFFRUdpCNQNsk6OyTugDv9wvKKCp6YenGN6eeDBmOB8gvhWic-A-gM0F3WUuCeZSUqABlI3lTnT-kz4iG1Qmw/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>
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>5- mục tin tức
<tr><td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhdgujkHXtJ9ElpjCtLdYzOnPrE-zeO829Hu32OqwmOPoxING0FVLPteFQ-2jVAVM3u9_v2EtFSjWhtmtXjvbb8iXVE7YsKhOm-EkoZpVOKZpGo8hKI2KAzIPpinV0flaSDwvTYZr8/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/AVvXsEjhdgujkHXtJ9ElpjCtLdYzOnPrE-zeO829Hu32OqwmOPoxING0FVLPteFQ-2jVAVM3u9_v2EtFSjWhtmtXjvbb8iXVE7YsKhOm-EkoZpVOKZpGo8hKI2KAzIPpinV0flaSDwvTYZr8/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>
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/AVvXsEiOiKk7C2vqeFZXzATvZ6JQXddRRAyq2XcYknvRgU_rVrwQ8mFBTrJiXbGyK6EsxO3Ehw5K745GpFqbvDl8Vi4lnrqCuXbz5d5NlSuAcFcMe562rEoThlnPhPYNFZtNPZhsezfpb0b1/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/AVvXsEgbh6OUA97UG1ywppuubgqsTZrtUcGeMz3JNSd1iQdpP3KqlHSgfFY3y0i1oEKpiikcAEYaFD56h24xChq_B7WIO3Ce_Zc-2xymDO1_VvUJku7RZ7icX8R27OIYfBGPUPt2F5e7wV8X/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/AVvXsEgD1ZPyPB6sZzrvSouysUm69mDr0m8niLKGcRXgo99ihevrRjSzi-86BSTDgLrJRvZefvEiAD-FhZR-X54fHaXfvd8qqsacE3EaTj5iTRskjVH9owHCXUI3cUmL2bjCmSVpSIN22XB1gJc/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
Đăng nhận xét