Showing posts with label blogspot. Show all posts
Showing posts with label blogspot. Show all posts

Wednesday, August 31, 2016

Hướng dẫn tạo Bình luận mới nhất cho Blogspot (có Avatar hiển thị)

Hôm nay Sơn Nguyễn chia sẻ thủ thuật Blogger: tạo Bình luận mới nhất cho Blogspot (có Avatar hiển thị)

Tiện ích này sẽ giúp các bạn cập nhật các comment mới nhất của đọc giả trên website/Blogspot của bạn, giúp bạn để có phương án xử lý kịp thời (trả lời, hỗ trợ, giải đáp những thắc mắc của đọc giả khi xem bài viết của bạn, hoặc xóa các comment spam ... 1 cách nhanh nhất)


Ko những thế, tiện ích này cũng khá bắt mắt: có hiển thị hình ảnh Avatar của người tham gia comment, đoạn trích bình luận và có hiệu ứng chuyển động khi đưa chuột vào

Tiện ích Bình luận bài viết mới nhất cho Blogspot


Thủ thuật này cũng đơn giản thôi mà ^^

P/s: màu sắc của Tiện ích này tùy thuộc vào Template mà bạn đang dùng cho Blogspot của bạn

Các bước tạo hiển thị Bình luận bài viết mới nhất cho Blogspot 

Bước 1: Đăng nhập vào Blogger

Bước 2: Trong phần quản trị --> Bố cục

Bước 3: Chọn nơi hiển thị tiện ích Bình Luận bài viết mới nhất --> Thêm tiện ích -->  HTML/JavaScript

Bước 4: Đặt tiêu đề cho tiện ích (Bình luận mới nhất hoặc Recent Comments) Sau đó Paste đoạn code bên dưới vào phần nội dung 

Bước 5: Bấm Lưu để lưu lại

Bước 6: Bấm Lưu sắp xếp để hoàn tất

Bước 7: Bấm Xem blog để chiêm ngưỡng thành quả :D

Đoạn code tạo hiển thị Bình luận bài viết mới nhất cho Blogspot

<style type="text/css" scoped>
ul.allbloggertricks_recent{list-style:none;margin:0;padding:0;}
.allbloggertricks_recent li{background:none!important;display:block;clear:both;overflow:hidden;list-style:none;border:1px solid transparent;border-radius:9px;max-height:100px;-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:0;-moz-transition-property:0;-o-transition-property:0;transition-property:transform;margin:0 0 6px!important;padding:3px!important}
.allbloggertricks_recent li:hover{border:1px solid #ddd;
-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg) }
.allbloggertricks_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px
#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;width:35px;height:35px}
.allbloggertricks_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
var
numComments = 5,
showAvatar = true,
avatarSize = 35,
roundAvatar = true,
characters = 40,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
maxfeeds=50,
adminBlog='Your Name';
//]]>
</script>
<script type="text/javascript" src="https://googledrive.com/host/0B-0uHUanipfMU1FDNkI2U1FWMG8"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=allbloggertricks_recent&amp;&amp;max-results=50">
</script>

Các bạn chỉnh sửa các thông số màu xanh cho phù hợp với ý của bạn:
  • numComments = 5: Số bình luận sẽ hiển thị. 
  • showAvatar = true: hiển thị Avatar tài khoản Google của người bình luận (nếu ko muốn hiển thị Avatar thì đổi qua False)
  • avatarSize = 35: Size hình Avatar. 
  • characters = 40: Số ký tự bình luận được hiển thị
  • defaultAvatar = http://www.gravatar.com/avatar/?d=mm: hình Avatar mặc định. 
  • maxfeeds=50: Số lượng bình luận tối đa được hiện thị. 
  • adminBlog='Your Name': Tên Admin.

Chú ý: Tiện ích này chỉ hiện thị những Bình luận được post bằng tài khoản Google thôi nhé, nếu bạn/đọc giả comment bằng Facebook thì nó ko thống kê và hiển thị đâu nhé :D

Để tham gia bình luận, bạn phải đăng nhập vào tài khoản Google (có thể đăng nhập bằng tài khoản Gmail của bạn)

Để xem bình luận thuộc bài nào, bạn bấm vào Bình luận trong tiện ích, trình duyệt sẽ đưa bạn đến bài viết có bình luận đó.


Bạn thử comment dưới bài này và xem kết quả sao nhé ^^ Phần Bình luận bài viết mới nhất của web này nằm ở dưới chân trang ^^ Bình luận mới nhất sẽ nằm trên cùng.

Chúc các bạn thành công!

P/ss: đoạn code trong bài viết được sưu tầm trên mạng


Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

<<< Bài trước
Bài 33: Top 6 nhà cung cấp WordPress Hosting nước ngoài nên dùng
Bài 34: Hướng dẫn tạo Menu Categories danh mục cho Blogspot
Bài sau >>>

Monday, August 29, 2016

Hướng dẫn tạo Menu Categories danh mục cho Blogspot

Hướng dẫn tạo Menu Categories danh mục cho Blogspot

Giúp đọc giả dễ dàng tìm kiếm và dễ theo dõi các bài viết của bạn hơn


Trong thời gian gần đây, có nhiều bạn hỏi Sơn Nguyễn cách tạo Menu có nhiều bài viết? Trong Bài 1 Sơn Nguyễn có hướng dẫn các bạn cách tạo Menu cho Blogspot rồi. Tuy nhiên do tạo Menu bằng Trang bài viết nên chỉ có 1 bài đăng cho Menu đó mà thôi.

Các bài viết cùng chủ đề sẽ được gom lại chung lại trong 1 Categories/Danh mục. Khi đọc giả cần tìm các bài viết về chủ đề đó, về sản phẩm đó thì chỉ cần click vào Menu Categories/Danh mục tương ứng là có thể tìm thấy, khỏi mất thời gian lục lọi tìm kiếm (vì các bài viết có thể được viết vào những thời gian khác nhau, rất mất thời gian để tìm thấy nó, đặc biệt là với những Blogspot có hàng trăm hàng ngàn bài viết)

Để tạo Menu danh mục bài viết cho Blogspot, hay còn gọi là tạo Categories nhiều bài viết, sản phẩm cho Blogspot ta dùng Nhãn (Label) để tạo. Hay nói cách khác là ta quản lý các Nhãn bài viết liên quan đến nhau và đưa chúng lên Menu cho thuận tiện truy cập khi cần thiết

Chỉ là 1 thủ thuật đơn giản của Blogger thôi mà.

Video hướng dẫn tạo Menu Categories danh mục cho Blogspot

[Video đã bị xóa theo kênh cũ]
Subscribe kênh mới https://www.youtube.com/channel/UCry2i_oQ_zmz2fZLCwjHOKQ/featured


Để tạo Menu Categories danh mục cho Blogspot bạn làm theo các bước như sau:

Bước 1: đăng nhập vào Blogspot

Bước 2: Bạn bấm vào Bài đăng mới để tạo bài viết mới, nhập tiêu đềnội dung cho bài viết bình thường.

Bước 3: Sau khi hoàn tất nội dung bài đăng, trước khi Xuất bản bài đăng bạn chủ ý phía bên phải, phần Cài đặt bài đăng, bạn bấm vào Nhãn và tiến hành gắn Nhãn cho bài viết. Mỗi bài viết có thể được gắn nhiều Nhãn nhưng ko được quá 200 ký tự.

Bước 4: bấm Hoàn thành để lưu Nhãn.

Mẹo: bạn có thể tạo Nhãn theo cách: ten-cua-nhan, tên-của-nhãn ...v...v... ko nên tạo các Nhãn như: ten cua nhan, tên của nhãn ...v...v... vì khi tạo Nhãn có khoảng trắng thì link của Nhãn sẽ có những ký tự xấu, ko tốt cho SEO

Ví dụ:
Bạn thiết kế website Bất động sản, thì cách tạo Categories/Danh mục cho các dự án của bạn như sau:

Danh mục các dự án Bất động sản theo khu vực:
  • Căn hộ quận 2 = can-ho-quan-2
  • Căn hộ quận 7 = can-ho-quan-7
Danh mục các dự án Bất động sản theo chất lượng cao cấp:
  • Căn hộ cao cấp (can-ho-cao-cap)
  • căn hộ giá rẻ (can-ho-gia-re) ...v...v....
Nếu bạn bán nhiều dự án Bất động sản thì tạo Categories/Danh mục theo từng tên dự án:

Căn hộ Hà Đô Centrosa Garden quận 10
  • thong-tin-ha-do-centrosa-garden
  • tin-tuc-ha-do-centrosa-garden
  • chuyen-nhuong-ha-do-centrosa-garden
  • ...v...v...
Nếu bạn thiết kế website bán hàng. website tin tức thì cũng làm tương tự

Danh mục sản phẩm Laptop
  • Laptop-dell
  • Laptop-Acer
  • Laptop-hp
Danh mục sản phẩn Điện thoại
  • Iphone
  • Samsung
  • Nokia
  • HTC
  • ...v...v...
Để lấy link của Nhãn, bạn bấm vào bài viết, kéo xuống phía dưới cùng sẽ thấy mục Nhãn. Click vào Nhãn bạn muốn lấy link. Copy đường link xuất hiện

Nếu ko thấy thì bạn quay lại phần quản trị --> Bố cục --> Blog Posts --> tick vào ô Nhãn (Label) là xong

Để quản lý Nhãn bạn vào phần quản trị --> Bài đăng --> Tất cả Nhãn (nằm ở góc trên bên phải)

Như vậy về cơ bản là bạn đã biết cách tạo Menu có nhiều bài viết rồi đấy. (hay còn gọi là tạo Categories Danh mục bài viết, sản phẩm ...). Nếu có gì ko rõ, bạn hãy comment phía dưới mình sẽ giải đáp thêm

Chúc các bạn thành công!

Để xem thêm các thủ thuật Blogger bạn bấm vào "Blogger" trên thanh menu nhé!

Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

<<< Bài trước
Bài 31: Hướng dẫn mua Tên miền trên Namecheap với giá $0.88
Bài 33: Top 6 nhà cung cấp WordPress Hosting nước ngoài nên dùng
Bài sau >>>

Tuesday, August 2, 2016

Hướng dẫn tạo hiển thị Tổng số bài viết và Comment trên Blogspot

Hôm nay Nguyễn Trường Sơn sẽ hướng dẫn tạo hiển thị Tổng số bài viết và Comment trên Blogspot.

Điều này sẽ giúp đọc giả có cái nhìn tổng quan hơn về trang Blogspot của các bạn



Video hướng dẫn tạo hiển thị Tổng số bài viết và Comment trên Blogspot 


  • Các bạn hãy bấm ĐĂNG KÝ (Subscribe) Kênh để ủng hộ và nhận được video mới nhất nhé
  • Link: https://youtu.be/7eRIXxgckrU
Hướng dẫn tạo hiển thị Tổng số bài viết và Comment trên Blogspot

Đầu tiên các bạn đăng nhập vào Blogger

Trong phần quản trị ---> Bố cục

Ở phía thanh bên bên phải (Sidebar-right) --> Thêm tiện ích --> HTML/JavaScript

  1. Nhập tiêu đề
  2. Dán đoạn code bên dưới vào phần nội dung
<script style="text/javascript">
function showpostcount(json) {
document.write('<left>Tổng Số bài Viết: <b>' + parseInt(json.feed.openSearch$totalResults.$t,10)
+ '</b></center>');}</script>
<script src="
http://www.nguyentruongson.info/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>
<p>
<script style="text/javascript"></script>
<script style="text/javascript">
function numberOfComments(json) {
document.write('<left>Tổng Số Comment: <b>' + json.feed.openSearch$totalResults.$t +
'</b></center>');}</script>
<script src="
http://www.nguyentruongson.info/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>
  • Thay dòng màu vàng theo ý thích của các bạn nhé
  • Thay dòng màu xanh bằng trang Blogspot của các bạn

Bấm Lưu để hoàn tất

Kéo sắp xếp Widget theo vị trí mong muốn

Bấm Lưu sắp xếp để hoàn tất

Bấm Xem blog để xem kết quả ^^

Để xem thêm các thủ thuật Blogger bạn bấm vào "Blogger" trên thanh menu nhé!
P/s: đoạn code được sưu tầm trên mạng,

Thursday, July 28, 2016

Hướng dẫn tạo Floating Social Bookmark trượt đẹp cho Blogspot

Hôm nay Sơn Nguyễn sẽ hướng dẫn tạo Floating Social Bookmark trượt đẹp cho Blogspot của bạn. 

Bộ này sẽ bao gồm các nút: Facebook, Twitter, G+, Pinterest, YouTube .... đều là các trang mạng xã hội rất nổi tiếng hiện nay. 


Ngoài ra sẽ có thêm 1 liên kết RSS Feed giúp độc giả theo dõi các bài viết của bạn.


Cách tạo Floating Social Bookmark trượt đẹp cho Blogspot

Truy cập vào Blogger --> Đăng nhập --> Chọn Blogspot bạn cần thực hiện --> Vào phần quản trị của Blogspot đó 

Trong phần quản trị Blogspot --> Mẫu --> Chỉnh sửa HTML 

Trong phần code HTML, bấm Ctr+F tìm phần tử  ]]></b:skin>

Copy đoạn code bên dưới và paste vào sau thẻ ]]></b:skin>

social-buttons {
position: fixed;
top: 130px;
width: 45px;
z-index: 9999;
}
.button-left {
left: 0;
}
.button-right {
right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
background-color: #33353B;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUGKN-5dWRQLgv6GcaESf0zJUTDsiZp-koZEcF32vQrHPcW43mKDuTbbCUyabUZfMyTZklB0zX23pnY23YhOg19nl3_vDS1Zx_EHsysCc0N6-cHQxTxSGIjT-CSCTrCNpA94HqKbHkahaS/s1600/mas-icons-namkna-blogspot-com.png);
}
.button-left #facebook-btn span {
background-position: right 10px;
}
.button-left #twitter-btn span {
background-position: right -35px;
}
.button-left #google-btn span {
background-position: right -127px;
}
.button-left #rss-btn span {
background-position: right -80px;
}
.button-left #pinterest-btn span {
background-position: 11px -177px;
}
.button-left #youtube-btn span {
background-position: 11px -223px;
}
.button-right #facebook-btn span {
background-position: 12px 10px;
}
.button-right #twitter-btn span {
background-position: 11px -35px;
}
.button-right #google-btn span {
background-position: 10px -127px;
}
.button-right #rss-btn span {
background-position: 11px -80px;
}
.button-right #pinterest-btn span {
background-position: 11px -177px;
}
.button-right #youtube-btn span {
background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
background-color: #C4302B;
}
.social-buttons a:hover .social-text {
display: block;
}
.button-left .social-icon {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: left;
height: 43px;
margin-bottom: 2px;
width: 43px;
}
.button-left .social-text {
display: none;
float: right;
font-size: 1em;
font-weight: bold;
margin: 11px 40px 11px 0px;
white-space: nowrap;
}
.button-right .social-icon {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: right;
height: 43px;
margin-bottom: 2px;
width: 43px;
}
.button-right .social-text {
display: none;
float: left;
font-size: 80%;
font-weight: bold;
margin: 11px 0 11px 40px;
white-space: nowrap;
}
.social-buttons .social-text {
color: #FFFFFF;
}

Trong ô tìm kiếm (bấm Ctr+F) bạn tìm thẻ đóng </head> 

Copy đoạn code bên dưới và Paste vào trước thẻ </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
$(window).load(function(){
$(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
$(this).stop();
$(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});

});
$(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
$(this).stop();
$(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
});
});
</script>

Lưu ý: nếu trang Blogspot của bạn đã có thư viện Jquery rồi thì hãy xóa dòng <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> đi nhé ^^

Tiếp tục, trong ô tìm kiếm (bấm Ctr+F) bạn tìm thẻ đóng </body> 

Copy đoạn code bên dưới và Paste vào trước thẻ đóng </body>

<div class='social-buttons button-right hidden-phone hidden-tablet'><a class='itemsocial' href='https://www.facebook.com/nguyentruongson.org' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a><a class='itemsocial' href='https://twitter.com/SonNguyen83' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a><a class='itemsocial' href='https://plus.google.com/+NguyễnTrườngSơn' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a><a class='itemsocial' href='http://pinterest.com/sontruongnguyen' id='pinterest-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Pinterest</span></span></a><a class='itemsocial' href='https://www.youtube.com/user/truongson83' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a><a class='itemsocial' href='http://feeds.feedburner.com/nguyentruongson/SsQL' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a></div>

P/s: Thay các thông số màu vàng tương ứng phù hợp với bạn nhé
Bấm Lưu mẫu để hoàn tất

Các bạn tự chiêm ngưỡng thành quả của mình nhé ^^

Để xem thêm các thủ thuật Blogger bạn bấm vào "Blogger" trên thanh menu nhé!

P/s: các đoạn code trong bài viết này được sưu tầm trên mạng


Tuesday, July 26, 2016

Hướng dẫn thiết kế website bán hàng miễn phí bằng Template Blogspot CatalogSpot

Hướng dẫn thiết kế website bán hàng miễn phí bằng Template Blogspot CatalogSpot

Đây là Template Blogspot bán hàng cực đẹp và miễn phí


Hôm nay Sơn Nguyễn sẽ hướng dẫn các bạn thiết kế website bán hàng miễn phí bằng Template Blogspot CatalogSpot

CatalogSpot là mẫu giao diện Blogger Template Blogspot bán hàng miễn phí thích hợp cho những bạn bán hàng online có tích hợp chức năng nhận thanh toán qua PayPal, tức là khi khách hàng khi đặt hàng và thanh toán trên website bán hàng của bạn thì bạn sẽ nhận được tiền qua tài khoản Paypal của bạn

Mẫu website bán hàng Template Blogspot CatalogSpot


 

Các tính năng nổi bật của Template Blogspot CatalogSpot
  • Có các Slideshow chuyên nghiệp.
  • Phần Menu giúp bạn tạo các Category sản phẩm
  • Giao diện trang chủ thân thiện với khách hàng.
  • Sản phẩm được trưng bày theo dạng lưới rất bắt mắt và chuyên nghiệp.
  • Tích hợp nút Add to Cart và hỗ trợ thanh toán bằng PayPal.

Video Hướng dẫn thiết kế website bán hàng miễn phí bằng Template Blogspot CatalogSpot




  • Các bạn hãy bấm ĐĂNG KÝ (Subscribe) Kênh để ủng hộ và nhận được video mới nhất nhé
  • Link: https://youtu.be/5-tNEoWX5V0

Hướng dẫn thiết kế website bán hàng miễn phí bằng Template Blogspot CatalogSpot


Bước 1: tạo 1 trang Blogspot cơ bản
Bước 2: download Template Blogspot CatalogSpot (bạn vào BTemplate.com và vào ô Search để tìm nhé)
Bước 3: trong phần quản trị Blogspot --> Mẫu --> Sao lưu/Khôi phục
Bước 3: Up file Template Blogspot CatalogSpot lên (nhớ phải Extract Here... trước nhé)
Bước 4: vào Chỉnh sửa HTML để tiến hành cài đặt, chỉnh sửa mẫu Template Blogspot CatalogSpot

Cách đăng bài viết

Cách đăng bài viết giới thiệu sản phẩm của mẫu Template Blogspot CatalogSpot ko giống với cách đăng bài viết thông thường. Các bài viết đã được định dạng theo mẫu của Template . Vì vậy các bạn dùng đoạn code dưới đây để đăng bài viết giới thiệu sản phẩm nhé

<div class="item_image"><img border="0" class="item_thumb" src="đường-link-hình-ảnh-sản-phẩm-của-bạn" />
<span class="item_price">$00.90</span></div>
<div class="item_Description">Some text for item description</div>

Bạn thay các dòng màu vàng cho phù hợp nhé

Chú ý: 
Hình ảnh có chiều rộng lớn hơn 700px
Giá: bạn có thể để là: 300.000 VNĐ. Tuy nhiên khi thanh toán nó sẽ mặc định thanh toán qua tiền tệ $$$. Vì vậy bạn hãy quy đổi giá sản phẩm của bạn qua $$$ nhé. Hoặc bạn tạo 1 trang Hướng dẫn mua hàng, Hướng dẫn thanh toán theo cách mà bạn muốn


Cài đặt thanh toán cho Website bán hàng
Để cài đặt thanh toán qua Paypal bạn cần có 1 tài khoản trên PayPal (đăng ký cũng đơn giản thôi, các bạn tự làm nhé. Nếu gặp vấn đề gì thì hãy comment phía dưới mình sẽ hỗ trợ thêm).

Phần cài đặt thanh toán như sau:

Trong phần quản trị Blogspot --> Mẫu --> chọn Edit HTML

Bấm Ctr+F để tìm  phần tử "CART SETTING" 

<script type='text/javascript'>
//<![CDATA[
/*----------------------------
CART SETTING
-----------------------------*/
$(function(){
simpleCart
({checkout:
{type: "PayPal" ,
email: "sontruongnguyen.....@gmail.com"
}
});
/*----------------------------
SHIPPING RATE SETTING
-----------------------------*/
simpleCart.shipping(function(){
if( simpleCart.quantity() > 20 )
{
return 0; }
else { return 10; }
});
});
//]]>
</script>

Thay thế địa chỉ email "sontruongnguyen.....@gmail.combằng đia chỉ Email Paypal của bạn

SHIPPING RATE SETTING: phí vận chuyển. Cụ thể:  là $10 nếu khách hàng mua ít hơn 20 sản phẩm và miễn phí nếu mua trên 20 sản phẩm (hoặc các bạn có thể bỏ qua nó, thay số 20 và số 10 thành số 0).


Tạo trang giỏ hàng

Để tạo trang giỏ hàng các bạn làm như sau:

Bước 1: Trong phần quản trị Blogspot --> Trang (Page)

Bước 2: tạo Trang mới (New Page)

Bước 3: chuyển nội dung soạn thảo sang chế độ HTML 

Bước 4: Copy và paste đoạn code bên dưới vào là xong

<div class="cart-view left">
<div class="simpleCart_items"></div>
</div>
<div class="cart-info right">
Shipping rate : <span class="simpleCart_shipping"></span>
<br/>
Total : <span class="simpleCart_grandTotal"></span><br/>
<br/>
<br/>
<div class="ck-btn">
<a href="javascript:;" class="simpleCart_checkout">Ready Checkout</a>
</div>
</div>

Bước 5: Xuất bản Trang giỏ hàng

Bước 6: nhớ khai báo với Google nhé (Submit Url)

Như vậy là xong rồi đấy ^^

Vậy là bạn đã tự mình tạo Blogspot bán hàng miễn phí bằng Template CatalogSpot rồi.

Hãy chia sẽ cảm nhận của bạn khi sử dụng Template Blogspot CatalogSpot trong việc bán hàng của bạn nhé.

Nếu trong quá trình thực hành bạn gặp vấn đề gì thì hãy comment phía dưới mình sẽ hỗ trợ thêm.

Việc tiếp theo là gắn tên miền cho Blogspot nữa là quá ok luôn, tránh trường hợp trang blogspot của bạn bị chặn bởi các nhà mạng ở Việt Nam

Nếu bạn chưa có tên miền thì có thể tham khảo cách mua tên miền giá rẻ , hoặc bấm vào "Khuyến mãi" hoặc "Domain" trên thanh menu.
Chúc các bạn thành công!!!