Phát triển dựa trên 1 template của mas template v1- độ ổn định chỉ là tương đối xem demo
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>
</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/AVvXsEjRD2D26_19Otbp91L8ODhhkazVRhbZVlft-nPw23R6BR_nDx9WIW1ek05zMSiQWiMeGOG4nAXYNOQNoBJ7f0XHmS4EAF0iJRYiegZ99Xl6kiBwPbcB2CgOEdg1mAKrKL7o3AZ3RZUZ/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
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/AVvXsEjdQDe1XeIcYwL1KJknovFP3YQ3HYoiodl0E3cGSBo_h-m1xChJTPEKPyFwBaDsrfYym76qoc1KjEYUmhY3G3KTaBzs0w7xcA1G4beQCY0HowbzoSJPSgyyQb7UvIcw8noAHFt3z9dxIkI/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;}elseif ("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://nokiachinhhang.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://nokiachinhhang.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/AVvXsEj6ArAVmH16WVKET8I3poT5MHzRTtUust2ySl4mcfMELCbWs97Vtp5JGo86F8DZjVyTM9hUdLeMprf9Dp_9NZW6mWZ68XWzn0uklEwHxiShnsISsu0xqbZHWzbHT1KTNXsecNgdeMER/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/AVvXsEj6ArAVmH16WVKET8I3poT5MHzRTtUust2ySl4mcfMELCbWs97Vtp5JGo86F8DZjVyTM9hUdLeMprf9Dp_9NZW6mWZ68XWzn0uklEwHxiShnsISsu0xqbZHWzbHT1KTNXsecNgdeMER/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 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/AVvXsEhuuoRlb48QX4fGgFPEGda1kZoqmBbnYi5wILN_rt_llKDe1ClDTmUpKf7FIg1nSbRD7lNaC_SLyH-VOhrtZPPHfnpZhx4UPcp-lHmyvGFClZzbCj1idyTZMgol6DSMlu9fSUjSlDNz/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/AVvXsEhbTHpN6ALiFDyShamMvgQ9O7mHuNHfq80QUjosX-srJJ1DMGO1ZKFmkTP6WKOo3p3zic-Baty1tZd2NcCZM42ORqRW05aX8MMbaCEaWMITMXxZNtb79ekStjQ40zpFsoU-4n22kd8i/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/AVvXsEgwMk_1foWj7QR129SyB_Ar0j9wbjUu4LLUsXF1SoBlEJjCmGQ346yADfTK6XHxJ_fzexT8WfcrtlMuzhPLmZK_ei_NxDZ5CpDVABctWY5LyTqx0_ldVZLAB-6_cNrOvLZN5m4sWNQpJn4/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://nokiachinhhang.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
Tag :
Templates bán hàng,
Web templates
1 nhận xét "Template Blogspot Bán Hàng Kèm Tin Tức"
add ơi cho minh xin cái template nay với