Free Blogspot tiếp tục share template blogspot bán hàng free đẹp, chuyên nghiệp, chuẩn seo dùng rất tốt cho các bạn yêu thích bán hàng online.

Mẫu Template blogspot bán hàng free này thiết kế 2 cột, có menu dọc, nhang, slider ảnh, và toàn bộ tính năng của một template bán hàng blogspot. Ngoài ra bạn còn có thể đăng kèm tin tức trên mẫu này để dễ dang seo cũng như truyền tải thông tin đến cho khách hàng tốt hơn.

Mẫu template blogspot bán hàng free mà tôi share này đẹp và chuyên nghiệp bởi đây là một mẫu cổ điển, phù hợp với nhiều lĩnh vực khác nhau. Cho dù demo là giao diện bán tinh dầu nhưng không dừng lại ở đó bạn có thể bán mỹ phẩm, túi sách, thời trang...Vẫn được luôn nhé.
Template blogspot bán hàng free đẹp, chuyên nghiệp
Template blogspot bán hàng free đẹp, chuyên nghiệp

HƯỚNG DẪN SỬ DỤNG TEMPLATE BLOGSPOT BÁN HÀNG FREE NÀY!

Khi trước share template blogspot bán hàng free này nhưng chưa có bản hướng dẫn đầy đủ thì nay bài này sẽ đi chi tiết hơn giúp các bạn không biết gì cũng có thể sửa đổi được các tiện ích trên trang.


Khi download template blogspot bán hàng này về bạn sẽ có gì?

+ File atom.xml : Data bài viết

+  Template... : Đây chính là code giao diện

+ Code giỏ hàng : Để tích hợp giỏ hàng

Làm sao để tải code lên blog?

Để tải code template blogspot bán hàng lên blog bạn mở file template... bằng notepad+++ coppy toàn bỏ vào phần Chủ đề > Chỉnh sửa HTML.

Cách sử dụng file atom.xml

Đây là data bài viết của template blogspot bán hàng free này khi tải lên tất cả bài viết sẽ hiển thị giống như mẫu demo. Để làm việc này các bạn vào Cài đặt > Khác > Ở mục Nhập và Sao lưu các bạn chọn Nhập nội dung và chọn đến file atom để tải lên nhé.

Cách sử dụng file code giỏ hàng

Để thiết kế giỏ hàng giống như mẫu template blogspot bán hàng demo bạn mở file này bằng Notepad+++ coppy toàn bộ code vào vào phần Trang > Tạo trang mới > Chọn tab Html dán code vào, đặt tiêu đề là Giỏ Hàng và bấm lưu nhé.

Cài đặt bố cục trang chủ cho template blogspot bán hàng free này?

Điều này có thể không xảy ra bởi khi bạn cài đặt template blogspot bán hàng cách mình hướng dẫn ở trên thì tất cả bộ cục trang chủ đã được coppy. Còn làm theo cách sao lưu khôi phục thì nó sẽ không có và phải làm những bước sau :

Cài đặt thay logo

Vào bố cục tại phần Header > Chỉnh sửa và thay logo mới (Lưu ý : Logo nên có đuôi .PNG và xóa nền nhé)

Phần menu

Tương tự như ở trên nhưng ở trong phần bố cục nhưng các bạn tìm đến Menu Shop của template blogspot bán hàng này chỉnh sửa và dán đoạn code sau :
<div class='menuleft'>
<div class='bg-menuleft'>
<div class='dropdown-toggle' data-toggle='dropdown' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<span>
<i aria-hidden="true" class="fa fa-home fa-2x"></i> DANH MỤC SẢN PHẨM
</span>
</div>
<ul class='menuleft dropdown-menu homecat' role='menu' >
<li><a href='#LINK' title=''><i class="fa fa-angle-right" aria-hidden="true"></i>
Tinh Dầu Nguyên Chất</a></li>
<li><a href='#LINK' title=''><i class="fa fa-angle-right" aria-hidden="true"></i> Đèn Xông Tinh Dầu</a></li>
<li><a href='#LINK' title=''><i class="fa fa-angle-right" aria-hidden="true"></i> Máy Khuyếch Tán Tinh Dầu</a></li>
<li><a class='atop' href='#LINK'><i class="fa fa-angle-right" aria-hidden="true"></i> Tinh Dầu Làm Đẹp</a>
</li>
<li><a class='atop' href='#LINK'><i class="fa fa-angle-right" aria-hidden="true"></i> Nến Thơm Greenleaf</a>
</li>
<li><a href='#LINK' title=''><i class="fa fa-angle-right" aria-hidden="true"></i> Phụ Kiện</a></li>
<li><a href='#LINK' title=''><i class="fa fa-angle-right" aria-hidden="true"></i> Phụ Kiện</a></li>
</ul>
</div>
</div>
<div class='menuright'>
<ul class='mrul'>
<li class='mrli'>
<a class='mratop mdrop' href='#LINK'>Công Dụng Và Cách Dùng</a>
</li>
<li class='mrli'><a class='mratop mdrop' href='#LINK'>Hướng dẫn mua hàng</a>
</li>
<li class='mrli'><a class='mratop mdrop' href='#LINK'>Cửa hàng và đối tác</a>
</li>
<li class='mrli'><a class='mratop mdrop' href='#LINK'>Liên hệ - tuyển dụng</a></li>
</ul></div>
Trong đó :

  • Thay #LINK bằng đường dẫn liên kết
  • Còn các chữ đằng sau thay thế bằng tên menu hiển thị
 Slider ảnh và modul chính sách bên phải

Tiếp tục tại phần bố cục của template blogspot bán hàng free này các bạn chỉnh sửa phần Slider ảnh và dán đoạn code
<div class='slide-auto'>
<div class='slideshow'>
<div class='nivoSlider' id='slideshow' style='background: url(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg723POFR8-DSsLVuSLdCfGIz33YtzRi1zA0hLdsKcksFT6fgO1xOlI4GiSkXl5EdWY7F8nqyD4oUPSIWif9kxY6KnXNasPs76xgQW63Il0LsjXTFhVGxLCRZo9CLdMQL9K96eGvlAe5Xgs/s682/tinh+dau+online+1.png&apos;) no-repeat; position: relative;'>
<a class='nivo-imageLink' href='#' >
<img alt="" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuTsQeHXEgoWYyaLheVQVElNZW2XPosoafEynB2gz2E_jn6I4IFV-bSBaI8f0RmQcOH9TzPqoMyVp0VnSCf1yMDNlgM3LlN6YyFiaF33Nxjfr6qgjBoRl-QcZflkYSyh_RcX6p_1o0h-vK/s682/tinh+dau+online+2.png' style='width:682px' />
</a>
<a class='nivo-imageLink' href='#' style='display: block;'>
<img alt="" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQG5-h9bLSUCAM2UdlFXvuR8G-KQe2MLSomuqvkZQZR7RfhuoGIrANyPB0x9ZL5Fd0V4nVmp5QGuKT5-SULx18Urr9j7zGQoQFrnyiLs7xvgPmPjm-y_s8u6VsWxpmq6Df62yzLfQVhSpx/s682/tinh+dau+online+3.png' style='width:682px' />
</a>
</div>
</div>
<div class="doi-tac">
<div class="col-lg-4 col-md-4 top-right-detail">
<div id="policy">
<ul>
<li class="item_policy first">
<i class="fa fa-umbrella"></i>BÁN HÀNG<br /> CHÍNH HÃNG </li>
<li class="item_policy">
<i class="fa fa-usd"></i>CAM KẾT <br />GIÁ TỐT </li>
<li class="item_policy">
<i class="fa fa-truck"></i>GIAO HÀNG<br />TOÀN QUỐC </li>
<li class="item_policy">
<i class="fa fa-calendar"></i>DỊCH VỤ <br />HỖ TRỢ 24/7 </li>
<li class="item_policy yahoo-sky last">
<p class="bg-hl">
Hỗ trợ trực tuyến<br /><span>0967 84 99 34</span>
</p>
<a class="yahoo" href="ymsgr:sendIM?b0y.k0_ol">
<img alt="Yahoo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaUCdfcYvxsAHzyTY2E2HruSkcyydeh3iSJTDdyrv7vJpvUlQ-sUK8Zzj2b5iRJHWBLXsyDYbmmGNGwkMgUjnFvmPvGSnxyQlqlhZ2jOebUmWqOOzNgcNEwIoCMuuIH8xcCUdeNA5-dRix/s1600/yahoo.png"/>
</a>
<a class="skyper" href="skype:hieu.dev?chat">
<img alt="Skyper" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY4fV-o5uLeAQJgwuSLSXYhoJKtmIh0JC8O8OcD-rpS8FzQ0vw0TSYsKTPf2gKY0qJVdDwSFQt8x07dB_qAYVDBxQA79GxP0rMvdCY6q7ntMhzh8Wl1krKHSCzIfta0MPAa3_aOZoSBxIc/s1600/skype.png"/>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Trong đó

  • Thay 3 link ảnh bôi đậm bằng link ảnh slide chạy với kích thướt hình ảnh là 682 x 302
  • Thay đổi số điện thoại và thông tin chổ chính sách
Bài viết hiển thị theo label (Nhãn) ở trang chủ

Template blogspot bán hàng free này bài viết show trang chủ hiển thị theo Label và để làm được việc này vẫn dán thêm 1 đoạn code ở bố cục bên dưới silder ảnh khi nãy.
<ul class="product_list_widget">
<script>
//<![CDATA[
document.write("<script src=\"/feeds/posts/default/-/Tinh Dầu Nguyên Chất?max-results="+5+"&orderby=published&alt=json-in-script&callback=labelproduct3\"><\/script>");
//]]>
</script>
</ul>
 Trong đó
  • Tinh dầu nguyên chất : là nhãn khi các bạn viết bài đặt cho nó
Nếu chưa hiểu bước nào về phần hướng dẫn cho mẫu template blogpsot bán hàng này có thể xem thêm video bên dưới nhé các bạn


Thế đấy lúc bạn bạn đã thành công và có một template blogspot bán hàng free cực đẹp và đẳng cấp đúng không nào. Hãy chia sẻ bài viết này cho bạn bè để họ cũng được như bạn nhé, mọi thắc mắc có thể để lại bình luận để được trợ giúp nha.

CÓ THỂ BẠN THÍCH?

0 Bình luận